* {
    /*border: 1px solid #a074de6b*/
}

img {

    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Geologica", sans-serif;
    font-style: normal;
}

.text-blue {
    color: #516FB4;
}

.text-gray {
    color: #717171;
}

.yellow-2 {
    color: #F7E6AD;
}

.box-hero-bg {
    height: 100vh;
    background: #222;
    width: 100%;
    display: block;
    position: fixed;
    z-index: -1;
    background-image: url(../pics/default.jpg);
    background-size: cover;
    background-position: center;
}

.box-hero-bg video,
.box3-foto video,
.box5-foto video {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    left: 0;
}
.box3-foto video{
    position: relative;
}

.box-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box2 {
    position: relative;
    height: 700px;
    transform: scale(.8);
    width: 100%;
    margin: 0 auto;
}

.box2-bg {
    background: #516FB4;
    height: 100vh;
    width: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    transition: all .5s ease;

    /*background: #F2E6AD*/
}

.box2-bg .yellow-2 {
    /*color: #516FB4;*/
}

.box2 .container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap-title-svg {
    position: relative;
}

.wrap-title-svg svg {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 200px;
    height: auto;
    z-index: 1;
    margin-left: 210px;
}

.st1 {
    fill: #516fb4
}

.st2 {
    fill: #f2e6ae
}

.color2 * {
    transition: all .5s ease;
}

.color2 .box2-bg {
    background: #F2E6AD
}

.color2 .yellow-2 {
    color: #516FB4;
}

.color2 .text-white {
    color: #717171 !important;
}

.color2 .st1 {
    fill: #F2E6AD;
}

.color2 .st2 {
    fill: #516FB4;
    ;
}

/*invertido*/
#Box2Trigger .box2-bg {
    background: #F2E6AD;
}

#Box2Trigger.color2 .box2-bg {
    background: #516FB4;
}

#Box2Trigger .yellow-2 {
    color: #516FB4;
}

#Box2Trigger.color2 .yellow-2 {
    color: #F2E6AD;
}

#Box2Trigger .text-white {
    color: #717171 !important;
}

#Box2Trigger.color2 .text-white {
    color: #fff !important;
}

#Box2Trigger .st1 {
    fill: #F2E6AD;
}

#Box2Trigger.color2 .st1 {
    fill: #516FB4;
}

#Box2Trigger .st2 {
    fill: #516FB4;
    ;
}

#Box2Trigger.color2 .st2 {
    fill: #F2E6AD;
}


/*fininvertido*/
















.box3 {
    position: relative;
    height: 1000px;
    height: auto;
    width: 100%;
    margin: 0 auto;
    background: #F5F1E6;
    overflow: hidden;
}

.markee {

    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    opacity: .8;
}

.markee-1 {
    background-image: url(../pics-asindown/marquee.png);
    background-size: auto 90%;
    background-position: center left;
    width: 10000px;
    height: 100%;
    background-repeat: no-repeat;
}

#Box3Trigger.activo .markee-1 {
    animation: to-down 50s linear;
    animation-timing-function: cubic-bezier(.11, .45, .38, 1.01);
}

@keyframes to-down {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-1000px)
    }
}

.posters-wrap-2 {
    transform: translateY(-100px):
}

#Box3Trigger.activo .posters-wrap-2 {
    animation: to-up 2.5s forwards;
    animation-timing-function: cubic-bezier(.11, .45, .38, 1.01);
}

@keyframes to-up {
    0% {
        transform: translateY(-100px)
    }

    100% {
        transform: translateY(-450px)
    }
}

#MarqueeBG{
    position: absolute;
    top: 0;
}


.box3text {
    position: relative;
    top: 0%;
    width: 100%;
    margin-top: 0;
    
    padding: 60px 0 120px;
}
#Box3Trigger .box3text .row{
    opacity: 0;
}
#Box3Trigger.activo .box3text .row{
    animation: mostrar 1s forwards;
    animation-timing-function: cubic-bezier(.11, .45, .38, 1.01);
}

@keyframes mostrar {
    0% {
        opacity: 0;
        transform: skewX(0deg) translateX(100px);
    }

    100% {
        opacity: 1;
        transform: skewX(0deg) translateX(0px);;
    }
}


.slider-wrap {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.swiper-slide {

    padding: 40px 0;
}

.swiper-slide .inner {
    background: #f0f0f0;
    background: transparent;
    border-radius: 0px;
    /*height: 600px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-family: sans-serif;
    color: #333;
    /* opacity: 0.4;
      transform: scale(0.9);
      transition: all 0.3s ease;*/

    opacity: 1;
    
    transform: scale(.84);
}

.swiper-slide .swiper-slide-1 {
    background-image: url(../pics-asindown/placeholder.jpg);
    background-position: center;
    background-size: cover;
}

.video-link-over {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
}

.bot-play-text {
    background-image: url(../pics-asindown/play-1.png);
    background-size: 38px;
    background-position: center right 10px;
    width: 100px;
    height: auto;
    display: block;
    position: relative;
    display: inline-block;
    margin-top: 0px;
    background-color: #516FB4;
    width: auto;
    /* display: inline-flex; */
    /* align-items: center; */
    /* justify-content: center; */
    padding: 18px 65px 18px 30px;
    border-radius: 30px;
    background-repeat: no-repeat;
    font-weight: 400;
    text-decoration: none;
    color: #f2e6ae;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 100%;
    transition: all .2s ease;
    z-index: 2;
}

.bot-play-text:hover {
    /*background-color: #3b5695;
    transform: scale(1.02);*/
}

.duo-bot {
    display: block;
    flex-wrap: wrap;
    position: relative;
    width: max-content;
    /*margin: auto;*/
    padding: 10px 0;
}

.bot-play-text-2 {
    position: absolute;
    top: 10px;
    left: 0;
    color: #516FB4;
    background-color: #f2e6ae;
    background-image: url(../pics-asindown/play-1b.png);
    opacity: 0;
    z-index: 1;
}


.bot-play-text-2 {
    transform: translateY(14px) scale(.8);
}

.duo-bot {}

.duo-bot:hover .bot-play-text-1 {
    transition: all .1s ease-out;
    transform: translateY(-14px) scale(.8);
    opacity: 0;
    z-index: 1;
    transition-timing-function: cubic-bezier(0, .72, .39, 1.46);
}

.duo-bot:hover .bot-play-text-2 {
    transition: all .2s ease-out;
    transform: translateY(0px) scale(1);
    opacity: 1;
    z-index: 2;
    transition-timing-function: cubic-bezier(0, .72, .39, 1.46)
}







.bot-play {
    background-image: url(../pics-asindown/play-3.png);
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100px;
    display: block;
    position: relative;
    background-color: #516FB4;
    border-radius: 100px;
    transition: all .2s ease;
}

/*.bot-play:hover {
    background-color: #3b5695;
    transform: scale(1.02);
}*/




.bot-play-2 {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: #f2e6ae;
    background-image: url(../pics-asindown/play-3b.png);
    opacity: 0;
    z-index: 1;
}


.bot-play-2 {
    transform: translateY(14px) scale(.8);
}

.duo-bot {}

.duo-bot:hover .bot-play-1 {
    transition: all .1s ease-out;
    transform: translateY(-14px) scale(.8);
    opacity: 0;
    z-index: 1;
    transition-timing-function: cubic-bezier(0, .72, .39, 1.46);
}

.duo-bot:hover .bot-play-2 {
    transition: all .2s ease-out;
    transform: translateY(0px) scale(1);
    opacity: 1;
    z-index: 2;
    transition-timing-function: cubic-bezier(0, .72, .39, 1.46)
}






/* Slide Anterior Lejano (2 atrás) - LO QUE PEDISTE */
.swiper-slide {

    z-index: 8;
    opacity: 1;
    /* Opcional: hacerlo más transparente */
}


.swiper-slide-active .inner {
    opacity: 1;
    transform: scale(1);
}



/* Estilo base para todos los slides */
.swiper-slide .inner {
    transition: transform 0.3s ease;
    transform-origin: center center;
}



.slider-nav {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0;
}

.slider-nav .swiper-button-prev,
.slider-nav .swiper-button-next {
    position: relative;
}

.slider-nav .swiper-button-prev {
    left: -20px;
}

.slider-nav .swiper-button-next {
    left: 10px;
}

.circle-button {
    width: 50px;
    height: 50px;
    background: #516FB4;
    display: block;
    position: absolute;
    z-index: -1;
    border-radius: 40px;

}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: 20px;
    position: relative;
    left: -2px;
    color: white;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 20px;
    position: relative;
    left: 2px;
    color: white;
}

.slider-limites {
    position: relative;
}

.box3-foto {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 30px;
    overflow: hidden;
}







#Box4Trigger {
    background: #F2E6AE;
}

.box4 {
    background: #F2E6AE;
}

.info-pill-wrap {
    border-radius: 25px;
    border: 5px solid #516FB4;
    overflow: hidden;
    background: #516FB4;
    background-image: url(../pics-asindown/num1.png);
    background-repeat: no-repeat;
    background-position: 26px 26px;
    background-size: 80px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.info-pill-wrap-2 {
    background-image: url(../pics-asindown/num2.png)
}

.info-pill-wrap-3 {
    background-image: url(../pics-asindown/num3.png)
}

.info-pill {
    width: 100%;
    min-height: 100px;
    background-color: #f2e6ae;
    margin-top: 104px;
    padding: 20px;
    min-height: 180px;
    display: flex;
    align-items: end;
}

#Box4Trigger .info-pill-wrap {
    opacity: .0;
    transform: translateX(40px);
    transition: all .2s ease;
}

#Box4Trigger.activo .info-pill-wrap {
    animation: to-left 1s forwards;
    animation-timing-function: cubic-bezier(.11, .45, .38, 1.01);
}


#Box4Trigger.activo .info-pill-wrap-2 {
    animation-delay: .15s;
}

#Box4Trigger.activo .info-pill-wrap-3 {
    animation-delay: .3s;
}

@keyframes to-left {
    0% {
        transform: translateX(40px);
        opacity: .0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}




#Box5Trigger {
    background: #516FB4;
    /*height: 80vh;*/
    position: relative;

}

.box5sellos {
    width: 100%;
    height: 50%;
    background-image: url(../pics-asindown/bg-sellos.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: 0;
}

.box5 {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.box5-foto {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    height: 50vw;
    border-radius: 30px;
    overflow: hidden;
}


#Box5Trigger.activo .box5-foto {
    /*animation: ZoomOUT 5s forwards;
    animation-timing-function:cubic-bezier(.11,.45,.38,1.01);*/
}

@keyframes ZoomOUT {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.marco-interior {
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 200px #222;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.box5text {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -90px;
    opacity: 1;
}




#Box6Trigger {
    background: #2A3F70;
    transition: all .3s ease;
}

#Box6Trigger.texto2 {
    background: #516FB4;
}

#Box6Trigger.texto3 {
    background: #1A2847;
}


.box6 {
    height: 100%;
    width: 100%;
    position: relative;
}

.fullpage-text {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.sticky-wrapper {
    position: sticky;
    top: 00px;
    z-index: 10;
    width: 100%;
    height: 100vh;
}

.sticky-image {
    border-radius: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .3s ease;
    opacity: 0;
    background-repeat: no-repeat;

}

.texto1 .sticky-image-1 {
    opacity: 1
}

.texto2 .sticky-image-2 {
    opacity: 1
}

.texto3 .sticky-image-3 {
    opacity: 1
}

.sticky-image-1 .sticky-imagen-pic {
    border-radius: 0;
    background-image: url(../pics/poster.jpg);
    background-size: cover;
    background-position: top left;
    width: 100%;
    height: 100%;
    position: absolute;
}

.sticky-image-2 .sticky-imagen-pic {
    border-radius: 0;
    background-image: url(../pics/poster2.jpg);
    background-size: cover;
    background-position: top left;
    width: 100%;
    height: 100%;
    position: absolute;
}

.sticky-image-3 .sticky-imagen-pic {
    border-radius: 0;
    background-image: url(../pics/poster3.jpg);
    background-size: cover;
    background-position: top left;
    width: 100%;
    height: 100%;
    position: absolute;
}


#Box7Trigger {
    background-color: #F5F2E4;
}

#Box8Trigger {
    background-color: #1A2847;
}



.footer-pie {
    display: block !important;
    background: #F5F1E6;
}

.footer-pie h6 {
    font-weight: bold;
    font-size: 15px;
}

.footer-pie p {
    color: gray;
    font-size: 15px;
    margin-top: 8px;
    line-height: 110%;
    margin-bottom: 30px;
}

.footer-pie .bar-right {
    border-right: 1px solid #B8C1FE;
}

.footer-pie-2 {
    display: block !important;
}

.footer-pie-2 {
    background-color: #0D202A;
}

.logofooter-1 {
    width: 200px;
}

.logofooter-2 {
    width: 245px;
    margin-top: 30px;
}

.logofooter-rrss {
    width: 50px;
    margin: 0 10px;
    transition: all .2s ease;
}

.logofooter-3 {
    width: 200px;
    margin-top: 0px;
}

.BotDonar {
    font-family: "Lemon Bold", Sans-serif;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 25px 25px 25px 25px;
    color: black;
    background-color: white;
    background-image: url(../pics-asindown/arrow-bot-black.png);
    background-size: 28px;
    background-position: center right 15px;
    min-width: 160px;
    display: inline-block;
    margin-top: 20px;
    background-repeat: no-repeat;
    text-align: left;
    padding: 5px 55px 5px 28px;
    letter-spacing: 0;
    transition: all .2s ease;
    text-decoration: none;
    font-size: 20px;
}

.logofooter-rrss:hover,
.BotDonar:hover {
    opacity: .7;
}


.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
    max-width: 90% !important;
}

.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active {
    background: #516FB4;
    top: 40px;
    right: 40px;
    border-radius: 50px;
    width: 70px;
    height: 70px;
    transition: all .2s ease;
}

.lity-close svg {
    pointer-events: none;
}

.lity-close svg path {
    stroke: #F7E6AD;
    transition: all .2s ease;
}

.lity-close:hover {
    /*background: #F7E6AD;*/
    background-color: #3b5695;
    transform: scale(1.02);
}

.lity-close:hover svg path {
    /*stroke: #516FB4;*/
}

/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
/*////////////////////////////////////////////*/
@media screen and (max-width: 990px) {
    body {
        overflow-x: hidden;
    }

    .box2 {
        /*height: 680px;
        height: 100%;*/
        height: 800px;
    }

    .box2-bg {
        height: 100%;
    }

    .wrap-title-svg svg {
        position: relative;
        top: -40px;
        left: 0;
        width: 190px;
        height: auto;
        z-index: 1;
        margin-left: 0;
    }

    .box3 {
        /*height: 700px;*/
       /* height: 540px;*/
    }

    .box3text {
        margin-top: 0;
        padding: 20px 0 40px;
    }

    .box4 {
        overflow: hidden;
    }

    .swiper-slide .inner {
        height: 370px;
    }

    .info-pill {
        min-height: auto;
    }

    .bot-play {
        width: 60px;
        height: 60px;
    }

    .box5sellos {
        height: 30%;
    }

    .footer-pie p {
        margin-bottom: 20px;
    }

    .logofooter-2 {
        width: 190px;
    }

    .logofooter-3 {
        width: 140px;
    }

    .logofooter-rrss {
        width: 46px;
        margin: 0 4px;
    }

    .lity-close,
    .lity-close:hover,
    .lity-close:focus,
    .lity-close:active {
        width: 60px;
        height: 60px;
    }

}