html {
    scroll-behavior: smooth;
}

.bg-dark {
    background-color: #000 !important;
}

body {
    background: #C6B2D2;
    font-family: 'poppins';
    overflow-x: hidden;
}

/* #top
---------------------------------------- */
.shipping-text {
    font-weight: 700;
}

/* .flecha
---------------------------------------- */
.flecha {
    bottom: 2.5rem;
    height: 4rem;
    opacity: .7;
    position: fixed;
    right: 2rem;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    width: 2rem;
    z-index: 10000;
}

.flecha:hover,
.flecha:focus {
    opacity: 1;
    -webkit-transform: translateY(-.5rem);
    transform: translateY(-.5rem);
}


/* .page
---------------------------------------- */
.page {
    min-height: 100vh;
    overflow-x: hidden;
}


/* #header
---------------------------------------- */
#header {
    background:
        url(../img/tl.svg) no-repeat left -0.5rem,
        url(../img/tr.svg) no-repeat right -0.2rem;
    background-size: 62%, 52%;
    position: relative;
    z-index: 2;
}


/* .navbar
---------------------------------------- */
.navbar-brand img {
    width: 58%;
}

.nav-link {
    font-weight: 700;
    color: #281B42 !important;
    -webkit-transition: .5s ease-in;
    transition: .5s ease-in;
}

.nav-link:hover,
.nav-link:focus {
    color: #E6107C !important;
    -webkit-transition: .2s ease-in;
    transition: .2s ease-in;
}

/* .sociales
---------------------------------------- */
.sociales {
    padding: 2rem 0;
    z-index: 10000;
}

.sociales a {
    display: inline-block;
    width: 35px;
    height: 35px;
}

/* .btn-store 
--------------------------------------- */
.btn-store {
    display: block;
    max-width: 200px;
}

.btn-store img {
    width: 250px;
}

/* .Divisor-1
--------------------------------------- */
.divisor-1 {
    background:
        url(../img/div-l.svg) no-repeat left top,
        url(../img/div-r.svg) no-repeat right bottom;
    background-size: 50%, 40%;
    position: relative;
    z-index: 1;
}

/* We are 
--------------------------------------- */

.chicos {
    background: url(../img/we-bg.png) no-repeat left 30%;
    background-size: 90%;
    position: relative;
    min-height: 34rem;
}

.chicos .z-3 {
    position: relative;
    z-index: 3;
    left: 0;
}

.chicos .z-4 {
    position: absolute;
    width: 60%;
    z-index: 4;
    top: 24%;
    left: 5%
}

.chicos .z-5 {
    position: absolute;
    width: 45%;
    right: 5%;
    top: 31%;
    z-index: 5;
}

.chicos .z-6 {
    position: absolute;
    width: 95%;
    z-index: 6;
    right: 10%;
    top: 60%;
}

/* We love fun 
--------------------------------------- */

.titulado {
    background: url(../img/we-love-l.svg) no-repeat right center;
    background-size: 45%;
}

.titulado .dupla {
    position: relative;
    left: -15%;
}

/* Lets play 
---------------------------------------*/
#lets-play {
    background: url(../img/lets-play.svg) no-repeat;
    background-size: 95%;
    margin-top: -3rem;
    position: relative;
    z-index: 5;
    min-height: 25rem;
}

#manos {
    margin-top: -2rem;
    position: relative;
    z-index: 6;
}

/* Be part
--------------------------------------- */
#be-part {
    background:
        url(../img/be-bl.png) no-repeat left 2rem,
        url(../img/be-br-nube-azul2.png) no-repeat right 20rem;
    background-size: 40%, 70%;
    min-height: 42rem;
}

/* Tablet
--------------------------------------- */
#tablet {
    margin-top: -4rem;
    padding-bottom: 1rem;
    background:
        url(../img/footer-bl.png) no-repeat left bottom,
        url(../img/bg-t-r.svg) no-repeat right 4.2rem;
    background-size: 75%, 50%;
}


/* ---------------------------------------
 MEDIA QUERIES
--------------------------------------- */

@media (min-width: 576px) {
    #header {
        background-size: 40%, 25%;
    }

    .btn-store {
        position: absolute;
        bottom: 0;
        right: -4rem;
    }

    .chicos .z-4 {
        top: 28%;
        left: 6%
    }

    .chicos .z-5 {
        top: 34%;
    }

    .chicos .z-6 {
        width: 92%;
        right: 6%;
        top: 64%;
    }

    #lets-play {
        margin-top: -5rem;
    }
}

@media (min-width: 576px) and (orientation: landscape) {
    .chicos {
        min-height: 58rem;
    }

    #be-part {
        min-height: 64rem;
    }

    #be-part {
        background-position: left 2rem, right 25rem;
    }
}

@media (min-width: 768px) {
    .hero-img {
        margin-top: -5rem;
    }

    .btn-store {
        bottom: 0;
        right: auto;
        left: -4rem;
    }

    .divisor-1 {
        background-position:
            left top,
            right top;
        background-size: 24%, 20%;
    }

    .chicos {
        background-size: 100%;
    }

    .titulado {
        background-size: 36%;
    }

    .titulado .dupla {
        left: 0;
    }

    #lets-play {
        background-size: 68%;
    }

    #be-part {
        background-position:
            left 2rem,
            right 2rem;
        background-size: 25%, 40%;
        min-height: 32rem;
    }
}

@media (min-width: 768px) and (orientation: landscape) {
    .chicos {
        min-height: 44rem;
    }

    .chicos .z-6 {
        top: 58%;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    .chicos {
        margin-bottom: 4rem;
    }

    .chicos .z-6 {
        top: 60%;
    }
}

@media (min-width:960px) {

    #header {
        background-size: 25%, 18%;
    }

    .sociales {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2rem;
    }

    .sociales a {
        display: block;
        margin-bottom: 1rem;
    }

    .h1-img-1 {
        margin-left: 9rem;
    }

    .h1-img-2 {
        margin-left: 5rem;
    }

    .hero-img {
        margin-top: 0;
    }

    .btn-store {
        left: auto;
        right: -2rem;
        width: 150px;
        bottom: 3rem;
    }

    .chicos {
        background-position: -2rem 50%;
        background-size: 85%;
        min-height: 64rem;
    }

    #lets-play {
        background-size: 76%;
        margin-top: -6rem;
    }

    #manos {
        margin-top: -8rem;
    }

    #tablet {
        background-position:
            left bottom,
            right 110%;
        background-size: 50%, 25%;
    }
}

@media (min-width: 960px) and (orientation: landscape) {

    .page {
        background: url(../img/bg.svg) no-repeat center top fixed;
        background-size: cover;
    }

    .chicos {
        min-height: 62rem;
    }

    #be-part {
        min-height: 39rem;
        padding-top: 6rem;
        margin-top: -6rem;
        background-position:
            left 2rem,
            right 6rem;
    }
}

@media (min-width: 1200px) and (orientation: landscape) {
    .navbar-brand img {
        width: 85%;
    }

    #navbarResponsive {
        padding-left: 8rem;
    }

    .sociales a {
        width: 48px;
        height: 48px;
    }

    .btn-store {
        right: 0;
    }

    .zoom {
        -webkit-transform: translate(-5rem, 2rem) scale(1.2);
        transform: translate(-5rem, 2rem) scale(1.2);
    }

    #be-part {
        min-height: 50rem;
    }

}

@media (min-width: 1400px) and (orientation: landscape) {
    #navbarResponsive {
        padding-left: 10rem;
    }
    
    .chicos {
        min-height: 88rem;
    }
    
    #lets-play {
        margin-top: -9rem;;
    }
}

@media (min-width: 1600px) and (orientation: landscape) {
    #navbarResponsive {
        padding-left: 16rem;
    }
    
    .chicos {
        min-height: 102rem;
    }
    
    #lets-play {
        margin-top: -10rem;;
    }
    
    #be-part {
        min-height: 62rem;
    }
}

@media (min-width: 1900px) {
    #navbarResponsive {
        padding-left: 24rem;
    }
    
    #we-are {
        margin-bottom: 12rem;
    }
    
    #lets-play {
        margin-top: -12rem;;
    }
    
    #be-part {
        min-height: 68rem;
    }
}