/** Fuentes routeadas **/


@font-face {
    font-family: "AlvarProUltraLight";
    src: url('../fonts/AlvarProUltraLight.otf');
}

@font-face {
    font-family: "AlvarProLight";
    src: url('../fonts/AlvarProLight.otf');
}

@font-face {
    font-family: "AlvarProThin";
    src: url('../fonts/AlvarProThin.otf');
}

@font-face {
    font-family: "AlvarProMedium";
    src: url('../fonts/AlvarProMedium.otf');
}

@font-face {
    font-family: "AlvarProRegular";
    src: url('../fonts/AlvarProRegular.otf');
}

@font-face {
    font-family: "AlvarProSemiBold";
    src: url('../fonts/AlvarProSemiBold.otf');
}

@font-face {
    font-family: "AlvarProBold";
    src: url('../fonts/AlvarProBold.otf');
}

* {
    box-sizing: border-box;
}

:root {
    --colorAzul: #294998;
    --colorAzulClaro: #386DB4;
    --colorRojo: #E52629;
    --colorAzulOscuro: #14172C;
    --colorBeige: #F0EBE2;
    --colorAmarillo: #E5B60F;
}

.azul {color: var(--colorAzul);}
/*---------------------------
TIPOGRAFÍAS
----------------------------*/

h1 {
    font-family: "AlvarProBold";
    font-size: 36px;
    margin: 0;
    color: var(--colorAzul);
}

h2 {
    font-family: "AlvarProSemiBold";
    font-size: 26px;
    margin: 0;
    color: var(--colorRojo);
}

h3 {
    font-family: "AlvarProSemiBold";
    font-size: 24px;
    margin: 0;
    color: var(--colorRojo);
}

h4 {
    font-family: "AlvarProSemiBold";
    font-size: 20px;
    margin: 0;
    color: var(--colorRojo);
}

h5 {
    font-family: "AlvarProSemiBold";
    font-size: 18px;
    margin: 0;
}

h6 {
    font-family: "AlvarProSemiBold";
    font-size: 13px;
    margin: 0;
}

p {
    font-family: "AlvarProRegular";
    font-size: 16px;
    margin: 0;
    color: var(--colorAzulOscuro);
}

p.grande {
    font-size: 18px;
    line-height: 1;
}

p.tituloOriginal {color: var(--colorAzul); }
p.tituloOriginal i {   font-family: "AlvarProBold"; }

b {
    font-family: "AlvarProSemiBold";
}

a {
    font-family: "AlvarProSemiBold";
}

@media (max-width: 1000px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 24px;
    }

    h5 {
        font-size: 18px;
    }

    p.grande {
        font-size: 20px;
    }

    p {
        font-size: 16px;
    }
}

img {
    width: 100%;
    height: auto;
}

.flexBox {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

h1.titulo {
    color: var(--colorRojo);
    margin-bottom: 40px;
}
h1.titulo.beige {
    color: var(--colorBeige);

}
@media (max-width: 1000px) {
    .container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .row {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

.video-responsive {
    padding-bottom: 58.3%;
    padding-top: 0px;
    height: 100%;
    overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 98%;
}

video {
    width: 100%;
    height: auto;
}

.alertPersonalizada {
    border: 1px solid var(--colorAzul);
    padding: 10px;
    border-radius: 4px;
    width: fit-content;
}

.alertPersonalizada p {
    font-size: 20px;
}

.alertPersonalizadaBottom {
    position: absolute;
    padding: 10px;
    border-radius: 4px;
    width: fit-content;
    top: 0;
    right: -60px;
}

.alertPersonalizadaBottom p {
    display: flex;
}
.alertPersonalizadaBottom svg.svg-inline--fa.fa-check.fa-w-16 {
    font-size: 22px;
    color: #ffffff;
    margin-right: 5px;
}

.qa-highlight {

    background: #ecd992;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 1000px) {
    .video-responsive {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }

    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

.colFondoGris {
    background-color: var(--colorBeige);
}

/* Carrusel */
.owl-carousel {
    position: relative !important;
    display: flex !important;
    flex-flow: column;
    justify-content: center;
}

.owl-theme .owl-nav {
    position: absolute;
    width: 100%;
}

.owl-prev {
    position: absolute !important;
    left: -70px;
}

.owl-next {
    position: absolute !important;
    right: -70px;
}

.owl-theme .owl-nav [class*='owl-'] {
    width: 50px;
}

@media (max-width: 1000px) {
    .owl-theme .owl-nav {
        bottom: 45px;
    }

    .owl-prev {
        position: absolute !important;
        left: 0;
    }

    .owl-next {
        position: absolute !important;
        right: 0;
    }

    .owl-theme .owl-nav [class*='owl-'] {
        width: 40px;
    }

    .owl-theme .owl-dots {
        margin-top: 30px;
    }
}

/*---------------------------------------------
 HOME
-----------------------------------------------*/

.top-home-wrapper {
    position: relative;
    overflow: hidden;

    width: 100%;
    /* height: 100vh; */
    background: var(--colorBeige) no-repeat top -6rem right -9rem ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: 70%;
    padding-bottom: 60px;
}

img.bordeHeroDesk {
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    left: calc(50% - 10px);
    z-index: 1;
}

img.logo-fcf {
    position: relative;
    right: -5rem;
    top: -7rem;
    scale: 1.5;
    width: 100%;
    margin-left: 15%;
    padding: 40px 0 0px;
}
img.arte-fcf {
    position: relative;
    left: -20rem;
    top: -1rem;
    transform: scale(1.5);
    transform-origin: left center;
    width: 100%;
    margin-left: 15%;
    padding: 0;
}
img.fecha-fcf {
    width: 60%;
    margin-left: 15%;
}

.titulosHero {
    margin: 10px 0 0 15%;
}
img.misc {
    max-width: 100px;
    margin-bottom: 10px;
}
.titulosHero h1,
.titulosHero h2,
.titulosHero p {
    font-family: "AlvarProMedium", Arial, Helvetica, sans-serif;
    color: var(--colorRojo);
}

.titulosHero h1 {
    font-size: 40px;
}

.titulosHero h2 {
    font-size: 28px;
    color: var(--colorAzulOscuro);
}

.botonIniciar {

    width: 200px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 20px 0 0 15%;
}

.conBtnIn {
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.botonIniciar p {
    font-size: 18px;
    color: var(--colorBeige);
}

.conBtnIn img {
    width: 20px;
}

.botonIniciar:hover p {
    color: var(--colorRojo);
}

.btnMancha1 {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    left: auto;
    bottom: auto;
}

.btnMancha1 p {
    position: absolute;
    font-size: 18px;
    color: var(--colorBeige);
}

.btnMancha1:hover p {
    color: var(--colorRojo);
}
.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}
 
@media (max-width: 1200px) {

    img.arte-fcf {
        position: relative;
        left: -13rem;
    }
}

@media (max-width: 900px) {
    .top-home-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: 900px;
        background:  var(--colorBeige) no-repeat top center;
        display: flex;
        flex-direction: column;
        justify-content: end;
        background-size: 100%;
        padding-bottom: 10%;
    }


    img.bordeHeroDesk {
        display: none;
    }

    .colFondoFecha {
        position: relative;

    }

    img.bordeHeroMobile {
        height: auto;
        width: calc(100% + 40px);
        margin: 0 0 0 -20px;
    }

    img.fecha-fcf {
        width: 80%;
     
        margin: 0 auto;
    }
    .titulosHero {
        padding: 0 0 40px;
        margin: 20px auto 0 auto;
        display: flex;
        flex-flow: column;
    }

    .titulosHero h1 {
        font-size: 26px;
        text-align: center;
    }

    .titulosHero h2 {
        font-size: 19px;
        text-align: center;
    }

    .botonIniciar {
        margin: 0 auto;
    }

    img.logo-fcf {
        width: 70%;
        margin-left: 15%;
        padding: 30px 0;
    }
}

#section-2 {
    position: relative;
    padding: 100px 0;
    background-color: var(--colorAzulClaro);
}

#section-2 p {
    margin-bottom: 1rem;
    color: var(--colorBeige);
}

img.bordeSec2 {
    position: absolute;
    top: 100%;
    left: 0;
}

#section-2 .btnMancha1 {

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 210px;
    left: 15px;

}

#section-2 .btnMancha1 p {
    margin-bottom: 0;
}

@media (max-width: 1000px) {
    #section-2 {
        padding: 50px 0;
    }

    #section-2 .btnMancha1 {
        position: relative;
        left: auto;
        bottom: 0;
        margin-top: 30px;
    }
}

#section-3 {
    padding: 100px 0;
}

.fechaAgenda {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    margin-bottom: 20px;
}

.fechaAgenda p.diaAgenda {
    position: absolute;
    font-family: "AlvarProSemiBold";
    font-size: 20px;
    color: var(--colorBeige);
    margin-top: 5px;
}

.horarioCine {
    margin-top: 10px;
    text-align: left;
}

.horarioCine span {
    color: var(--colorRojo);
}

@media (max-width: 1000px) {
    #section-3 {
        padding: 50px 0;
    }
}

#section-4 {
    position: relative;
    padding: 100px 0 0 0;
    background-color: var(--colorBeige)
}

@media (max-width: 1000px) {
    #section-4 {
        padding: 0;
    }
}

.cards-mc {
    display: flex;
    flex-flow: row wrap;
    margin-top: 50px;    background-color: var(--colorAmarillo)
}

.cardmc {
    width: calc(100% / 6); /* original era 100%/6 */
    transition: all 0.2s ease-in-out;
}

@media screen and (max-width: 991px) {
    .cards-mc {
        margin-top: 0;
    }

    .cardmc {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 767px) {
    .cardmc {
        width: 100%;
    }
}

.cardmc:hover .card__inner {
    background-color: var(--colorAmarillo);
}

.card__inner {
    width: 100%;
    position: relative;
    cursor: pointer;
    background-color: var(--colorAmarillo);
    color: #eceef1;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.card__inner:after {
    transition: all 0.3s ease-in-out;
}

.card__expander {
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: var(--colorAmarillo);
    width: 100%;
    padding-bottom: 30px;
}

.card__expander .container {
    position: relative;
}

.tituloPelicula {
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.tituloPelicula p {
    font-family: "AlvarProBold";
    text-align: left;
    text-transform: none;
    color: #ffffff;
    line-height: 1.2;
}

.card__expander .infoProg {
    padding: 40px 0;
    width: 100%;
}

p.subtituloProg {
    color: var(--colorRojo);
    line-height: 1.6;
    text-transform: uppercase;
}

.headProg {
    border-bottom: 1px solid var(--colorAzul);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.infoProg iframe {
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .card__expander .infoProg {
        padding: 20px;
    }

    .infoProg iframe {
        margin-top: 20px;
    }
}

.detalleFuncion {
    border-bottom: 1px solid var(--colorAzul);
    padding-bottom: 20px;
    margin: 50px 0;
}

.detalleFuncion:last-child {
    position: relative;
    padding-bottom: 50px;
    margin: 0;
    z-index: 1;
}

.renglon {
    border-top: 1px solid var(--colorAzul);
    padding-top: 12px;
    margin-top: 10px;
}

.renglon b,
.sinrenglon b {
    width: 100px;
    display: inline-block;
}

.renglon:first-child {
    border: none;
}

p.parrafoDestacado {
    font-family: "AlvarProSemiBold";
    margin-top: 20px;
    line-height: 1.2;
}

.actoreColum {
    display: flex;
}

.actoreColum b {
    width: 104px;
    ;
    display: inline-block;
}




/* TABS */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #ffffff;

    background: url(../img/fondo-mancha-tabs.png) center center no-repeat;
    background-size: 100%;
    border-color: #dee2e6 #dee2e6 #fff;
    cursor: pointer;
}
.nav-link {
    display: block;
    padding: 0.5rem 2rem;
    cursor: pointer;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 0px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    color: #fff !important;
    text-decoration: none;
}
a {
    color: var(--colorAzul);
    text-decoration: none;
    background-color: transparent;
}
.nav-tabs {
    border-bottom: 0px solid #dee2e6;
}

.tab-content h4 {

    font-family: "AlvarProBold";
    font-size: 16px;
    color: var(--colorRojo);

}

ul {    font-family: "AlvarProRegular";
    font-size: 16px;
    line-height: 1.5;    color: var(--colorAzulOscuro);}


    @media screen and (max-width: 767px) {
        .nav {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-direction: column;
        }
        .nav-tabs .nav-link {
            text-align: center;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

            background: url(../img/fondo-mancha-tabs.png) center center no-repeat;
            background-size: contain;

        }


    }


/* TABS */



@media screen and (max-width: 767px) {
    .renglon:last-child {
        margin-bottom: 30px;
    }
}

.columnasCalendario {
    display: flex;
}

.colCalFecha {
    display: flex;
    align-items: center;
}

.colCalFecha h3 {
    margin: 0 30px 0 10px;
    font-size: 20px;
}

.calendario {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--colorAzul);
    border-radius: 5px;
    width: 45px;
}

.calendario p {
    color: var(--colorAzul);
    font-size: 18px;
}

.calendario span {
    color: var(--colorAzul);
    font-size: 30px;
    margin: -20px 0 -10px;
}

@media screen and (max-width: 767px) {
    .columnasCalendario {
        margin-bottom: 30px;
    }

    #section-4 .cards-mc .btnMancha1 {
        margin-top: 20px;
    }
}

.cardmc.is-collapsed .card__inner:after {
    content: "";
    opacity: 0;
}

.cardmc.is-collapsed .card__expander {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
    padding: 0;
}

.cardmc.is-expanded .card__inner:after {
    content: "";
    opacity: 1;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 15px);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid var(--colorAmarillo);
}

.cardmc.is-expanded .card__expander {
    min-height: 200px;
    overflow: hidden;
    opacity: 1;
}

.cardmc.is-expanded:hover .card__inner {
    transform: scale(1);
}

.cardmc.is-inactive .card__inner {
    pointer-events: none;
    opacity: 0.5;
}

.cardmc.is-inactive:hover .card__inner {
    background-color: var(--colorBeige);
    transform: scale(1);
}

.cardmc.is-collapsed {
    position: relative;
}

.cardmc.is-collapsed img {
    filter: grayscale(1);
}

.cardmc.is-collapsed img:hover {
    filter: grayscale(0);
}

.cardmc.is-expanded img {
    filter: grayscale(0);
}

img.closeCard {
    position: absolute;
    width: 15%;
    height: 15%;
    bottom: 28px;
    right: 28px;
}

img.openCard {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    width: 15%;
    height: 15%;
    bottom: 28px;
    right: 28px;
}

.cardmc.is-collapsed img.closeCard {
    display: none !important;
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    width: 15%;
    height: 15%;
    bottom: 28px;
    right: 28px;
}

.cardmc.is-expanded img.closeCard {
    display: block;
}

.cardmc.is-expanded img.openCard {
    display: none;
}

@media (max-width: 1000px) {
    .card__expander .col-12 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .card__expander .box-tx {
        padding: 20px;
    }
}

@media screen and (min-width: 992px) {
    .cardmc:nth-of-type(6n+2) .card__expander {
        margin-left: -100%;
    }

    .cardmc:nth-of-type(6n+3) .card__expander {
        margin-left: -200%;
    }

    .cardmc:nth-of-type(6n+4) .card__expander {
        margin-left: -300%;
    }

    .cardmc:nth-of-type(6n+5) .card__expander {
        margin-left: -400%;
    }

    .cardmc:nth-of-type(6n+6) .card__expander {
        margin-left: -500%;
    }

    .cardmc:nth-of-type(6n+8) {
        clear: left;
    }

    .card__expander {
        width: 600%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .cardmc:nth-of-type(2n+2) .card__expander {
        margin-left: calc(-100%);
    }

    .cardmc:nth-of-type(2n+3) {
        clear: left;
    }

    .card__expander {
        width: calc(200%);
    }
}

button.close {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 60px;
    right: 20px;
    opacity: 1;
    z-index: 1;
}

button.closeBottom {
    position: relative;
    width: 100%;
    opacity: 1;
    z-index: 1;
    background-color: transparent;
    border: none;
}

button.closeBottom p {
    font-family: "AlvarProBold";
    color: #000;
    text-align: center;
}

@media (max-width: 1000px) {
    button.close {
        width: 25px;
        height: 25px;
        top: 23.5px;
    }
}

#section-5 {
    position: relative;
    padding: 100px 0 0 0;
    background: #fff;
}

#section-5 span.destacadoInvitado {
    font-family: "AlvarProBold";
    color: var(--colorAzul);
}

.columnasInvitado {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.columnaInvitado {
    width: calc(50% - 20px);
}

.columnaInvitado h5 {
    border-bottom: 1px solid var(--colorAzul);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

span.vineta {
    font-size: 20px;
    line-height: 0;
}

p.cierreInvitado {
    border-top: 1px solid var(--colorAzul);
    padding-top: 10px;
    margin-top: 20px
}

@media (max-width: 1000px) {
    #section-5 {
        padding: 30px 0 30px 0;
    }

    .columnasInvitado {
        flex-flow: column;
    }

    .columnaInvitado {
        width: 100%;
    }
}

#section-6 {
    position: relative;
    background-color: var(--colorBeige);
    padding: 100px 0;
}

#section-6 h1.titulo {
    margin-bottom: 0;
}

img.bordeTopSec6 {
    width: 100%;
}

img.bordeBottomSec6 {
    position: absolute;
    top: 100%;
    left: 0;
}

@media (max-width: 1000px) {
    #section-6 {
        padding: 50px 0 0;
    }

    img.bordeTopSec6 {
        margin-bottom: -10px;
    }
}

#section-7 {
    position: relative;
    padding: 0;
}

#section-7 h2.tituloSec7 {
    font-family: "AlvarProBold";
    text-align: center;
    font-size: 30px;
}

#section-7 p.grande a {
    color: var(--colorAzul);
}

#section-7 p.grande a:hover {
    color: var(--colorRojo);
}

img.manchaCatalogo {
    width: 200px;
    display: flex;
    margin: 10px auto 0;
}

a.verMapa {
    color: var(--colorAzul);
}

a.verMapa:hover {
    color: var(--colorRojo);
}

.parrafoCentral {
    border-top: 1px solid #757575;
    /* border-bottom: 1px solid #757575; */
    margin: 10px 0;
    padding: 20px 0 0 0;
    width: 90%;
}

@media (max-width: 1000px) {
    #section-7 {
        padding: 30px 0;
    }

    #section-7 h2.tituloSec7 {
        font-size: 26px;
    }

    img.manchaCatalogo {
        width: 150px;
    }

    .parrafoCentral {
        width: 100%;
    }
}

#section-8 {
    position: relative;
    background-color: var(--colorBeige);
    padding: 50px 0;
}

img.bordeBottomSec8 {
    position: absolute;
    top: 100%;
    left: 0;
}

.marcasTop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    padding-bottom: 0px;
    margin-bottom: 0px;
}

img.marca1 {
    width: 18%;
}

img.marca2 {
    width: 18%;
}

img.marca3 {
    width: 11%;
}

img.marca4 {
    width: 12.5%;
}

img.marca5 {
    width: 12.5%;
}

img.marca6 {
    width: 12.5%;
}

img.marca17 {
    width: 12.5%;
}





img.marca7 {
    width: 17%;
}

img.marca8 {
    width: 8%;
}

img.marca9 {
    width: 7%;
}

img.marca10 {
    width: 10%;
}

img.marca11 {
    width: 13%;
}

img.marca12 {
    width: 7%;
}

img.marca13 {
    width: 6.6%;
}

img.marca14 {
    width: 10%;
}

img.marca15 {
    width: 10%;
}

img.marca16 {
    width: 10%;
}

.apoyo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 90px;
}

.apoyo p {
    font-family: "AlvarProMedium";
}

.auspiciantes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
}

@media (max-width: 1000px) {
    #section-8 {
        padding: 20px 0 10px;
    }

    .marcasTop {
        flex-wrap: wrap;
        padding-bottom: 5px;
        margin-bottom: 20px;
    }

    img.marca1 {
        width: 40%;
    }

    img.marca2 {
        width: 40%;
    }

    img.marca3 {
        width: 20%;
    }

    img.marca4 {
        width: 25%;
    }

    img.marca5 {
        width: 25%;
    }

    img.marca6 {
        width: 25%;
    }

    img.marca17 {
        width: 25%;
    }


    img.marca7 {
        width: 30%;
    }
    
    img.marca8 {
        width: 15%;
    }
    
    img.marca9 {
        width: 12%;
    }
    
    img.marca10 {
        width: 20%;
    }
    
    img.marca11 {
        width: 30%;
    }
    
    img.marca12 {
        width: 12%;
        margin-top: -40px;
    }
    
    img.marca13 {
        width: 12%;
        margin-top: -40px;
    }
    
    img.marca14 {
        width: 20%;
        margin-top: -40px;
    }
    
    img.marca15 {
        width: 20%;
        margin-top: -40px;
    }
    
    img.marca16 {
        width: 20%;
        margin-top: -40px;
    }
    

    .apoyo {
        flex-flow: column;
        padding: 0;
    }

    .apoyo p {
        text-align: center;
        width: 100%;
    }

    /* .auspiciantes {
        width: 90%;
    } */

    .auspiciantes {
        width: 70%;
        display: flex;
        justify-content: space-between;
        /* flex-direction: column; */
        flex-wrap: wrap;
    }



}

#section-9 {
    position: relative;
    padding: 150px 0 100px;
}

#section-9 h1.titulo {
    margin-bottom: 20px;
    line-height: 1;
}

#section-9 p.grande {
    font-size: 24px;
}

#section-9 form {
    margin-top: 40px;
}

#section-9 input {
    font-family: "AlvarProRegular";
    font-size: 16px;
    width: 90%;
    border-radius: 0;
}

#section-9 input#nombre {
    border-top: 1px solid #757575;
    border-bottom: 1px solid #757575;
    border-left: none;
    border-right: none;
    padding: 30px 0;
}

#section-9 input#correo {
    border-top: none;
    border-bottom: 1px solid #757575;
    border-left: none;
    border-right: none;
    padding: 30px 0;
}

#section-9 input#nombre::placeholder,
#section-9 input#correo::placeholder {
    color: #111528;
}

#section-9 button.btnMancha1 {
    margin-top: 40px;
    border: none;
    background-color: transparent;
}

#section-9 .btnMancha1 p {
    font-family: "AlvarProSemiBold";
}

#section-9 .btnMancha1 p:hover {
    color: var(--colorRojo);
}

button:focus {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 1000px) {
    #section-9 {
        padding: 50px 0;
    }
}

#section-10 {
    position: relative;
    background-color: var(--colorAzulOscuro);
    padding: 10px 0 110px;
}

.logoFooter {
    width: 100%;
    /* transform: scale(1.1); */
    transform-origin: left center;
    margin-top: -100px;
}
#section-10 p {
    font-family: "AlvarProMedium";
    line-height: 1.2;
    color: var(--colorBeige);
}

#section-10 a.mailTo {
    font-family: "AlvarProMedium";
    color: var(--colorBeige);
    font-size: 16px;
    line-height: 1.2;
}

#section-10 a.mailTo:hover {
    color: var(--colorRojo);
}

@media (max-width: 1000px) {
    #section-10 {
        padding: 1px 0 50px;
    }

    .logoFooter {
        margin-left: 10px;
    }

    #section-10 p,
    #section-10 a {
        margin-left: -2px;
    }
}

#section-11 {
    position: fixed;
    background-color: var(--colorRojo);
    padding: 10px 0;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 2px solid var(--colorRojo);
    z-index: 1;
}

#section-11 p {
    color: #dfdad0;
}

#section-11 p.grande {
    font-family: "AlvarProSemiBold";
}

#section-11 input {
    font-family: "AlvarProRegular";
    font-size: 16px;
    border: 1px solid #dfdad0;
    padding: 4px 10px;
    background-color: transparent;
    border-radius: none;
    color: var(--colorBeige);
    border-radius: 0;
}


#section-11 input#nombre::placeholder,
#section-11 input#correo::placeholder {
    color: var(--colorBeige);
}

#section-11 button.btnMancha1 {
    border: none;
    background-color: transparent;
}

#section-11 button.btnMancha1 p {
    margin-top: 3px;
}

#section-11 button.btnMancha1 p:hover {
    color: var(--colorRojo);
}

.redesSociales {
    display: flex;
    justify-content: center;
    align-items: center;
}

.redesSociales img {
    width: auto;
    height: 30px;
    padding: 0 10px;
}

@media (max-width: 1000px) {
    #section-11 {
        position: relative;
        padding: 50px 0 30px;
    }

    #section-11 p.grande {

        margin-left: 15px;
    }

    .redesSociales {
        justify-content: flex-start;
        margin-left: 10px;
        margin-top: 20px;
    }
}

/* Menú */
.button_container {
    position: absolute;
    top: 5%;
    right: 2%;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.25s ease;
}

.button_container:hover {
    opacity: 0.7;
}

.button_container.active .top {
    transform: translateY(10px) translateX(0) rotate(45deg);
    background: var(--colorRojo);
}

.button_container.active .middle {
    opacity: 0;
    background: var(--colorRojo);
}

.button_container.active .bottom {
    transform: translateY(-10px) translateX(0) rotate(-45deg);
    background: var(--colorRojo);
}

.button_container span {
    background: var(--colorRojo);
    border: none;
    height: 5px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    transition: all 0.35s ease;
    cursor: pointer;
    height: 3px;
}

.button_container span:nth-of-type(2) {
    top: 10px;
}

.button_container span:nth-of-type(3) {
    top: 20px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s, width 0.35s;
    z-index: 50;
}

/* .overlay:before {
    content: "";
    background: var(--colorRojo);
    left: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    transition: left 0.35s ease;
} */

/* .overlay:after {
    content: "";
    background: var(--colorRojo);
    right: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    transition: all 0.35s ease;
} */

.overlay.open {
    opacity: 0.9;
    visibility: visible;
    height: 100%;
}

.overlay.open:before {
    left: 0;
}

.overlay.open:after {
    right: 0;
}

.overlay.open li {
    -webkit-animation: fadeInRight 0.5s ease forwards;
    animation: fadeInRight 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: 0.55s;
    animation-delay: 0.55s;
}

.overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.overlay.open li:nth-of-type(5) {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

.overlay.open li:nth-of-type(6) {
    -webkit-animation-delay: 0.85s;
    animation-delay: 0.85s;
}

.overlay nav {
    /* position: relative;
    font-family: "AlvarProSemiBold";
    text-align: center;
    font-size: 50px;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    z-index: 100; */

    position: relative;
    font-family: "AlvarProSemiBold";
    font-size: 24px;
    text-align: right;
    margin: 100px 30px 0 0;
    z-index: 100;
}

@media (max-width: 1000px) {
    .button_container {
        top: 20px;
        right: 20px;
    }

    .overlay:after {
        width: 100%;
    }

    .overlay nav {
        margin: 55px 20px 0 0;
    }

    .button_container.active .top,
    .button_container.active .bottom {
        background: var(--colorRojo);
    }
}

.overlay ul {
    position: relative;
    display: inline-block;
    background-color: var(--colorRojo);
    list-style: none;
    padding: 30px;
    margin: 0 auto;
    height: 100%;
    border-radius: 10px;
}

.overlay ul li {
    position: relative;
    display: block;
    opacity: 0;
}

.overlay ul li a {
    display: block;
    position: relative;
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
    width: 100%;
}

.overlay ul li a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background: #FFF;
    transition: 0.35s;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}