@import url('https://fonts.googleapis.com/css?family=Lemonada&display=swap');
@import url('kindiiRosa.css');


body {
    overflow-x: hidden; /* Evita barras blancas */
}

#descriBb {
    position: absolute;
    z-index: 2;
    top: 20%;
}

#pDescriBb {
    direction: rtl;
    font-weight: 100;
    line-height: normal;
    font-size: 1.5rem;
    letter-spacing: .5px;
}

#h1DescriBb {
    font-weight: 600;
    color: #254a8a;
    text-align: right;
    padding-left: 15%;
}


#btnYoutBbySky {
    font-size: 6vw;
    color: red;
    cursor: pointer;
}


#oshcotton {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#KindiiRosa {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}


#babySky {
    background-size: auto;
    background-repeat: no-repeat;
}

#helloBaby {
    background-size: 100% 100%;
    z-index: -2;
    background-repeat: no-repeat;
    background-position: bottom;
}

#kubbies {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


#kanggis {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -2;
}

.jojoba1 {
    position: absolute;
    z-index: -1;
    left: 6%;
    top: -29%;
    width: 27%;
    transition: transform 1s;
    transform: translate(10%, 55%) scale(.8) rotateY(180deg);
}

.jojoba2 {
    position: absolute;
    width: 12%;
    top: 6%;
    left: -3%;
    z-index: -1;
    transition: transform 1s;
    transform: translate(74%, 28%) scale(.8) rotateY(180deg);
}

.jojoba3 {
    position: absolute;
    width: 20%;
    top: 33%;
    left: -8%;
    z-index: -1;
    transition: transform 1s;
    transform: translate(80%, 10%) scale(.8) rotateY(180deg);
}

.corazonKanggis {
    width: 22%;
    position: absolute;
    left: 9%;
    top: -1%;
    transition: transform 2s;
    transform: translate(40%, 106%) scale(.5);
    z-index: -1;
}

.corazonKanggis2 {
    width: 12%;
    position: absolute;
    left: 22%;
    transition: transform 2s;
    top: 10%;
    transform: translate(10%, 88%) scale(.5);
    z-index: -1;
}

.corazonKanggis3 {
    width: 9%;
    position: absolute;
    left: 0%;
    top: 2%;
    transition: transform 2s;
    transform: translate(202%, 198%) scale(.5);
    z-index: -1;
}

.corazonKanggis4 {
    width: 12%;
    position: absolute;
    left: 23%;
    top: -17%;
    transition: transform 2s;
    transform: translate(7%, 251%) scale(.5);
    z-index: -1;
}

.corazonKanggis5 {
    width: 17%;
    position: absolute;
    left: 32%;
    top: -3%;
    transition: transform 2s;
    transform: translate(4%, 92%);
    z-index: -1;
}

.corazonKanggis6 {
    width: 11%;
    position: absolute;
    left: 5%;
    top: 27%;
    transition: transform 2s;
    transform: translate(102%, 10%);
    z-index: -1;
}

.corazonKanggis7 {
    width: 31%;
    position: absolute;
    right: -10%;
    top: -33%;
    transition: transform 2s;
    transform: translate(-39%, 46%) scale(.5);
    z-index: -1;
}

.corazonKanggis8 {
    width: 13%;
    position: absolute;
    right: -20%;
    top: -28%;
    transition: transform 2s;
    transform: translate(-170%, 121%) scale(.5);
    z-index: -1;
}

.corazonKanggis9 {
    width: 16%;
    position: absolute;
    right: 3%;
    top: -56%;
    transition: transform 2s;
    transform: translate(-150%, 210%) scale(.5);
    z-index: -1;
}

.corazonKanggis10 {
    width: 25%;
    position: absolute;
    right: 20%;
    top: -43%;
    transition: transform 2s;
    transform: translate(-50%, 90%) scale(.5);
    z-index: -1;
}

.corazonKanggis11 {
    width: 15%;
    position: absolute;
    right: 9%;
    top: -15%;
    transition: transform 2s;
    transform: translate(-50%, 90%) scale(.5);
    z-index: -1;
}


.corazonKanggis.show,
.corazonKanggis2.show,
.corazonKanggis6.show,
.corazonKanggis4.show,
.corazonKanggis3.show,
.corazonKanggis10.show {
    transform: rotate(-40deg) translate(0) scale(1);
}

.corazonKanggis5.show {
    transform: rotate(22deg) translate(0) scale(1);
}

.corazonKanggis7.show,
.corazonKanggis8.show,
.corazonKanggis9.show,
.corazonKanggis11.show {
    transform: rotate(31deg) translate(0) scale(1);
}

.pqtKang {
    top: -25px;
}

.pqtKang2 {
    position: absolute;
    top: 53%;
}

.pqtKubbies2 {
    position: absolute;
    top: 58%;
    left: 17%;
}

.miniLogoBebe,
.miniLogoBebeM {
    transition: filter .5s;
    filter: grayscale(100%);
}

.miniLogoKindiiM {
    transition: filter .3s;
}

.miniLogoBbySM {
    transition: filter .3s .3s;
}

.miniLogoKanggisM {
    transition: filter .3s .6s;
}

.miniLogoKubbiesM {
    transition: filter .3s .9s;
}

.miniLogoOshCottM {
    transition: filter .3s 1.2s;
}

.miniLogoHelloBbyM {
    transition: filter .3s 1.5s;
}

.miniLogoBebeM.show {
    filter: grayscale(0);
}

.miniLogoBebe:hover {
    filter: grayscale(0);
}


#oshCottCafe {
    position: absolute;
    top: 26%;
    left: -11%;
    width: 87%;
}

.pajaroKubbies {
    position: absolute;
    width: 8%;
    right: 19.3%;
    top: 76.5%;
    transition: transform 1s;
    transform: rotate(10deg);
    opacity: 0;
}

.pajaroKubbies.showR{
   animation: pajaroVuela 2s forwards 1 reverse 1; 
}

.pajaroKubbies.show{
   animation: pajaroVuela 2s forwards;
  /*animation-iteration-count: infinite ;
   animation-direction: alternate; */
} 

@keyframes pajaroVuela {
    0% {
        transform: translate(0) scale(1);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translate(301%, -422%) scale(2.5);
        opacity: 1;
    }
}

.activarAniPaque {
    position: absolute;
    width: 50%;
    height: 35%;
    top: 35%;
    left: 25%;
    background-color: transparent;
    z-index: 2;
}

.jojoba.show {
    transform: translate(0) scale(1) rotateY(180deg);
}

#oshCottBlanco{
    z-index: 1;
    background-image: url(../img/productos/oshCotton1.png);
    background-repeat: no-repeat;
    background-position: left, top;
    background-size: contain;
    position: relative;
    left: 13%;
}

#oshcoCafeM {
    position: absolute;
    width: 75%;
    left: 0;
}


.gifOshCott {
    animation: abrirOshCott .2s 1;
    animation-fill-mode: forwards;
}

@keyframes abrirOshCott {
    33% {
        background-image: url('../img/productos/oshCotton1.png');
    }

    67% {
        background-image: url('../img/productos/oshCotton4.png');
    }

    100% {
        background-image: url('../img/productos/oshCotton6.png');
    }
}

.gif2OshCott {
    animation: cerrarOshCott .2s 1;
    animation-fill-mode: forwards;
}

@keyframes cerrarOshCott {
    0% {
        background-image: url('../img/productos/oshCotton6.png');
    }

    33% {
        background-image: url('../img/productos/oshCotton4.png');
    }

    55% {
        background-image: url('../img/productos/oshCotton2.png');
    }

    100% {
        background-image: url('../img/productos/oshCotton1.png');
    }
}

.gifBbyS {
    animation: abrirBbyS .2s 1;
    animation-fill-mode: forwards;
}

@keyframes abrirBbyS {
    33% {
        background-image: url('../img/productos/BabySky2.png');
    }

    67% {
        background-image: url('../img/productos/BabySky4.png');
    }

    100% {
        background-image: url('../img/productos/BabySky6.png');
    }
}

.gif2BbyS {
    animation: cerrarBbyS .2s 1;
    animation-fill-mode: forwards;
}

@keyframes cerrarBbyS {
    0% {
        background-image: url('../img/productos/BabySky6.png');
    }

    33% {
        background-image: url('../img/productos/BabySky4.png');
    }

    55% {
        background-image: url('../img/productos/BabySky2.png');
    }

    100% {
        background-image: url('../img/productos/BabySky1.png');
    }
}

#BbyS,
#BbySM {
    z-index: 1;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}


.btnBbySky {
    background-color: #0c369c;
    transition: all .7s;
}

.btnBbySky:hover {
    background-color: #0069d9;
    border-radius: 0px;
}

/*-----------------------------at medias------------------------------------------*/
@media (min-width:1000px) {
    .pqtKang {
        top: 50px;
    }

    #descriBb {
        top: 19%;
    }
}

@media (min-width:1100px) {
    .pqtKang {
        top: 10px;
    }

    #descriBb {
        top: 29%;
    }
}

@media (min-width: 1300px) {
    .pqtKang {
        top: -25px;
    }

}


@media (min-width: 1400px) {

    .pqtKang2 {
        top: 58%;
    }

    .pqtKubbies2 {
        top: 62%;

    }

    #descriBb {
        top: 36%;
    }

    #pDescriBb {
        font-size: 1.85vw;
    }

    #h1DescriBb {
        font-size: 2.6vw;
    }

    #btnYoutBbySky {
        font-size: 5vw;
        color: red;
        cursor: pointer;
    }

    
}

@media (min-width: 1600px) {


    .pqtKang2 {
        top: 58%;
    }

    .pqtKubbies2 {
        top: 68%;

    }

}

@media (min-width: 1800px) {


    .pqtKubbies2 {
        top: 72%;
    }

}



@media (min-width: 678px) and (max-width: 860px) {
    .pqtKang {
        top: 67px;
    }


}

@media (min-width: 860px) and (max-width: 930px) {
    .pqtKang {
        top: 41px;
    }
}

@media (min-width: 931px) and (max-width: 999px) {
    .pqtKang {
        top: 17px;
    }

}

@media (max-width: 700px) {
    .jojoba2 {
        right: 0%;
    }

}

@media screen and (max-width: 1400px) and (min-width: 800px) {
#pDescriBb {
    direction: rtl;
    font-weight: 100;
    line-height: normal;
    font-size: 1.2rem;
    letter-spacing: .5px;
    padding-top: 5%;
}
}

@media screen and (max-width: 1200px) and (min-width: 990px){
.hrLineaBb {
    -ms-flex: 0 0 50%;
    flex: 0 0 57%;
    max-width: 100%;
}}

@media screen and (max-width: 1500px) and (min-width: 1201px){
    .hrLineaBb {
        -ms-flex: 0 0 50%;
        flex: 0 0 60%;
        max-width: 100%;
    }}

@media screen and (max-width: 994px) and (min-width: 300px){
    .pajaroKubbies {
        position: absolute;
        width: 8%;
        right: 30%;
        top: 76.5%;
        transition: transform 1s;
        transform: rotate(10deg);
        opacity: 0;
    }

    #oshCottBlancoM {
        z-index: 1;
        background-image: url(../img/productos/oshCotton1.png);
        background-repeat: no-repeat;
        background-position: left, top;
        background-size: contain;
        position: relative;
        left: 16%;
    }

    #oshcoCafeM {
        position: absolute;
        width: 75%;
        left: 3px;
    }
}

#oshCottBlancoM {
    background-image: url(../img/productos/oshCotton1.png);
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(6px 10px 7px rgba(0, 0, 0, .4));
}