.bg-img{
    background-color:black;
    background-size: auto;
    background-position: top left;    
    background-repeat: no-repeat;    
}

.bg-img.full{
    width:100%;
    height:100%;
}


.art-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    /*background-size: contain;*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/app/art/assets/images/art.webp);
    margin-left: 12px;
    color: var(--grey);
}
.fornite-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/fornite.svg);
    margin-left: 12px;
    color: var(--grey);
}
.city-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/city.png);
    margin-left: 12px;
    color: var(--grey);
}
    .city-logo-medium{
        color: white;
        width: var(--block4);
        height: var(--block2);
        font-size: 24px;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(/assets/logo/city.png);
        margin-left: 12px;
        color: var(--grey);
    }
    .city-logo-big{
        color: white;
        width: var(--block4);
        height: var(--block4);
        font-size: 24px;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(/assets/logo/city.png);
        margin-left: 12px;
        color: var(--grey);
    }
.star-wars-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 76%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/sw.png);
    margin-left: 12px;
    color: var(--grey);
}
.dc-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/dc.webp);
    margin-left: 12px;
    color: var(--grey);
}
.ai-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 37%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/ai/AI_Icon_White.webp);
    margin-left: 12px;
    color: var(--grey);
}
.emmet-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/emmet4.webp);
    margin-left: 12px;
    color: var(--grey);
}
.emmet-dark-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/emmet-black.webp);
    margin-left: 12px;
    color: var(--grey);
}
.lucy-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/lucy.webp);
    margin-left: 12px;
    color: var(--grey);
}
.lucy-dark-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/lucy-black.webp);
    margin-left: 12px;
    color: var(--grey);
    /*filter:invert(1);*/
}
.movie-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    /*66*/
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/movie.png);
    margin-left: 12px;
    color: var(--grey);
}
.movie2-logo{
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    /*72*/
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/movie2.png);
    margin-left: 12px;
    color: var(--grey);
	
}
.hp-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 92%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/hp.png);
    margin-left: 12px;
    color: var(--grey);
}
.fantastic-beasts-logo{
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100% center;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/fantastic-beasts.png);
    margin-left: 12px;
    color: var(--grey);
}
.disney-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/disney.png);
    margin-left: 12px;
    color: var(--grey);
}
.technic-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/technic.png);
    margin-left: 12px;
    color: var(--grey);
}
.marvel-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 77%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/marvel.png);
    margin-left: 12px;
    color: var(--grey);
}

.f1-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/f1.png);
}
.f1-logo2 {
    color: white;
    width: var(--block3);
    height: var(--block2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/f1-2.webp);
}

/********************/

.icons-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/icons.png);
    margin-left: 12px;
    color: var(--grey);
}

.ideas-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/ideas.png);
    margin-left: 12px;
    color: var(--grey);
}

.botanicals-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 84%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/botanicals_2025_600w-w.png);
    margin-left: 12px;
    color: var(--grey);
}

.duplo-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/duplo.png);
    margin-left: 12px;
    color: var(--grey);
}

.dune-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/dune.webp);
    margin-left: 12px;
    color: var(--grey);
}

.indie-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/indie.png);
    margin-left: 12px;
    color: var(--grey);
}

.batman-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/batman.png);
    margin-left: 12px;
    color: var(--grey);
}

.adults-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/adults.png);
    margin-left: 12px;
    color: var(--grey);
}

.architect-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    /*background-size: contain;*/
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/architect.png);
    margin-left: 12px;
    color: var(--grey);
}

.creator-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/creator.png);
    margin-left: 12px;
    color: var(--grey);
}



.dreamzzz-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/dreamzzz.png);
    margin-left: 12px;
    color: var(--grey);
}

.avatar-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/avatar.webp);
    margin-left: 12px;
    color: var(--grey);
}
.avatar2-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/avatar-logo-600w.png);
    margin-left: 12px;
    color: var(--grey);
}

.animal-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/animal.png);
    margin-left: 12px;
    color: var(--grey);
}

.boost-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/boost.jpg);
    margin-left: 12px;
    color: var(--grey);
}

/**/
.dots-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/dots.png);
    margin-left: 12px;
    color: var(--grey);
}
.friends-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/friends.png);
    margin-left: 12px;
    color: var(--grey);
}
.brick-headz-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 77%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/brick-headz.png);
    margin-left: 12px;
    color: var(--grey);
}
.horizon-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/horizon.png);
    margin-left: 12px;
    color: var(--grey);
}
.adventures {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/adventures.webp);
    margin-left: 12px;
    color: var(--grey);
}
.horizon-adventures {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/horizon-adventures.webp);
    margin-left: 12px;
    color: var(--grey);
}
.horizon-adventures-white {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/horizon-adventures-white.webp);
    margin-left: 12px;
    color: var(--grey);
}

.jurassic-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 58%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/jurassic2.png);
    margin-left: 12px;
    color: var(--grey);
}

/**/
.minecraft-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/minecraft.webp);
    margin-left: 12px;
    color: var(--grey);
}
.lor-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/lor.webp);
    margin-left: 12px;
    color: var(--grey);
}
/**/
.classic-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/classic.png);
    margin-left: 12px;
    color: var(--grey);
}
.mindstorms-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/mindstorms_EV3.png);
    margin-left: 12px;
    color: var(--grey);
}
.education-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/education.svg);
    margin-left: 12px;
    color: var(--grey);
}

.avengers-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/avengers3.webp);
    margin-left: 12px;
    color: var(--grey);
}

.minifig-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/minifig.png);
    margin-left: 12px;
    color: var(--grey);
}

.monkie-kid-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/monkie.png);
    margin-left: 12px;
    color: var(--grey);
}

.ninjago-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/ninjago.png);
    margin-left: 12px;
    color: var(--grey);
}

.overwatch-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/overwatch.png);
    margin-left: 12px;
    color: var(--grey);
}

.serius-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/serius.png);
    margin-left: 12px;
    color: var(--grey);
}

.sonic-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/sonic.png);
    margin-left: 12px;
    color: var(--grey);
}

.speed-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/speed.png);
    margin-left: 12px;
    color: var(--grey);
}

.super-mario-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/mario.png);
    margin-left: 12px;
    color: var(--grey);
}

.creator-expert-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/creator-expert.png);
    margin-left: 12px;
    color: var(--grey);
}

.insider-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/insiders.webp);
    margin-left: 12px;
    color: var(--grey);
}

.xtra-logo {
    color: white;
    width: var(--block3);
    height: var(--block2);
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/xtra.png);
    margin-left: 12px;
    color: var(--grey);
}

.steam-logo {
    color: white;
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/svg/steam.png);
    margin-left: 12px;
    color: var(--grey);
}
.nintendo-switch-logo {
    color: white;
    font-size: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/svg/nintendo-switch.png);
    margin-left: 12px;
    color: var(--grey);
}

/******2025******/

.poweredup-logo{
    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/powered-up-logo.png);
    margin-left: 12px;
    color: var(--grey);
}

.wednesday-logo{
    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/wednesday.png);
    margin-left: 12px;
    color: var(--grey);
}

.wicked-logo{
    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/wicked-600w.png);
    margin-left: 12px;
    color: var(--grey);
}

.gru4-logo{

    color: white;
    font-size: 24px;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/01_DM4-AboutPage_In-Page-Nav-Logo.png);
    margin-left: 12px;
    color: var(--grey);
	
}

.seriusplay-logo{

    color: white;
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/logo--serious-play.png);
    margin-left: 12px;
    color: var(--grey);
	
}

.speed-champions-logo{

    color: white;
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/Speed_Champions-Logo.png);
    margin-left: 12px;
    color: var(--grey);
	
}

.spiderman-logo{

    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/new/spiderman_logo_pos_300w.png);
    margin-left: 12px;
    color: var(--grey);
	
}

.pirates-logo{
    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/pirates.webp);
}

.pirates-new-logo{
    color: white;
    font-size: 24px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/pirates.png);
}

.western-logo{
    color: white;
    font-size: 24px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/western.webp);
}

.castle-logo{
    color: white;
    font-size: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/logo/castle.jpg);
}


/*@media(max-width:769px){*/
/*  .productContainerA .productBox{*/
    /*top: -572px !important; */
    /*left: 52px !important;*/
/*  }*/
/*}*/

/*APPS-GAMES*/

.switchTo3D{
  /*position:absolute;*/
  /*top:78px;*/
  /*top:130px;*/
  /*right:var(--scrollBarWidth);*/
  /*margin-bottom:26px;*/
  z-index:20;
  
  width:52px;
  height:52px;
  z-index:9;
  background-image:url(/assets/icons/3d.png);
  background-size:100%;
  background-position:center;
  background-repeat:no-repeat;
}

.metaverse{
  /*position:absolute;*/
  /*top:78px;*/
  /*right:var(--scrollBarWidth);*/
  /*top:130px;*/
  /*margin-right:26px;*/
  /*margin-bottom:26px;*/
  z-index:9;

  width:52px;
  height:52px;
  background-image:url(/assets/icons/meta-face2.png);
  background-size:100%;
  background-position:center;
  background-repeat:no-repeat;

  
  
}

@media(max-width:469px){

  /*.switchTo3D,  */
  /*.metaverse{*/
  /*  display:none !important;*/
  /*}  */
  
}

/*HEARTBOX*/
.heartBox {
    position: absolute;
    z-index: 1;
    /*display:none;*/
}

.heartBox .heart{
/*animation-name: appear-disappear;*/
/*animation-duration: 4s;*/
/*animation-iteration-count: infinite;  */
/*transition: visibility 0s linear 0.33s, opacity 0.33s linear;*/
}
.heartBox .heart:hover{
	  transform:scale(1.2);
}

.heartBox .heart.clicked{
animation-name: scale-disappear ;
/*animation-duration: 1s;*/
/*animation-iteration-count: infinite;  */
/*display:none;*/
    transition: all .4s ease-in-out;
	  /*transform:translate(0%,550%);*/
	  transform:scale(3);
	  opacity:0;
}

@keyframes scale-disappear {
	/* We set opacity to zero at the start 
	of the animation. At 50% play time, 
	here after 2s, the HTML element will
	be fully opaque (appear). Then */
	0% { 
	  opacity:1;
	  transform:scale(1);
	} 
	50% { 
	  opacity:0.5;
	  transform:scale(1.2);
	}
	100% {
	  opacity:0; 
	  transform:scale(1.4);
	  display:none;
	}
}

/*LOGO-ICONS*/
.productItem{}
.productIcon{
  width:26px !important;
  height:26px !important;
}
.productIcon svg{
  width:100%;
  height:100%;
  fill:var(--pink,#FFBBFF) !important;
  fill:red !important;
  /*fill:#C87080;*/
  /*fill:#e79500;*/
  stroke:none !important;
  /*filter: drop-shadow(0px 5px 15px rgb(0 0 0 / 0.6));*/
  /*filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));*/
  filter: drop-shadow(1px 3px 2px rgb(0 0 0 / 0.4));
  /*0px 5px 15px -2px rgba(0,0,0,0.67)*/
}