@font-face {
    font-family: "GraphikR";
    src: url(../fonts/Graphik-Regular-01.otf);
    font-weight: normal;
    font-display: swap;
}



@font-face {
    font-family: "GraphikB";
    src: url(../fonts/Graphik-Bold.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikM";
    src: url(../fonts/Graphik-Medium.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikItalicMedium";
    src: url(../fonts/Graphik-MediumItalic.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikSB";
    src: url(../fonts/Graphik-Semibold.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikL";
    src: url(../fonts/Graphik-Light.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikI";
    src: url(../fonts/Graphik-LightItalic.otf);
    font-display: swap;
}

@font-face {
    font-family: "GraphikCompactR";
    src: url(../fonts/GraphikCompact-Regular.otf);
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "GraphikCompactB";
    src: url(../fonts/GraphikCompact-Bold.otf);
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: "PoppinsL";
    src: url(../fonts/Poppins/Poppins-Light.ttf);
    font-display: swap;
}
@font-face {
    font-family: "PoppinsB";
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
    font-display: swap;
}

.poppins {
    font-family: "Poppins";
}
.poppinsB {
    font-family: "PoppinsB";
}
.poppinsL {
    font-family: "PoppinsL";
}

:root {
    --negro: #1D1D1B;
    --negroL: #1e1e20;
    --darkgrey: #444444;
    --white:#fefefe;
    --beige: #d5a940;
    --gold: #ffc107;
    --rojo:  #b63635;
    --poppins: "GraphikR";
    --poppinsB: "GraphikB";
    --poppinsM: "GraphikM";
    --poppinsI: "GraphikI";
    --poppinsIM: "GraphikItalicMedium";
    --poppinsL: "GraphikL";
    --poppinsSB: "GraphikSB";
    --poppinsCompact: "GraphikCompactR";
    --poppinsCompactB: "GraphikCompactB";
    --gris: #707070;
    --calabaza: #e4813d;
    --poppins: "Poppins";
    --poppinsB: "PoppinsB";
    --poppinsL: "PoppinsL";
    --radius: 20px;
}

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    background-color: #f2f2f2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
    margin-top: 85px;
    min-height: calc(100vh - 70px);
    overflow-x: hidden;
    width: 100%;
}

/* Clases para mostrar/ocultar contenido en desktop/mobile */

.is-mobile{display:none}

.is-desktop{}

@media (max-width:800px){
.is-desktop {display:none}
.is-mobile {display:block}
.text-mobile {
    font-size:12px
}
}

::-webkit-scrollbar {
    width: 10px;
    margin: 0;
}

.colmob {
    height:100vh;
}

@media all and (max-width: 600px) {
    .colmob {
        height:50vh;
    }
}




/* Track */

 ::-webkit-scrollbar-track {
    background: var(--negro);
    margin: 0;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--beige);
    margin: 0;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: var(--beige);
}

.container-fluid {
    padding: 0;
    margin-right: 0;
}

.Content {
    flex: 1 0;
    width: 100%;
}

.over-hidden {
    overflow: hidden;
}

#preload-humo {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 9999 !important;
    padding: 0
}

#preload-humo>div {
    height: 100%;
}

#preload-humo .content-preload {
    padding: 0;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

#video {
    width: 500px;
    height: 500px;
}

.blanco {
    color: white;
}

.negro {
    color: var(--negro);
}

.beige {
    color: var(--beige);
}
.rojo {
    color: var(--rojo);
}

.light {
    font-family: var(--poppinsL)
}

.italic-medium {
    font-family: var(--poppinsIM);
}

.textBlack {
    color: var(--negro);
    font-size: 35px;
    font-family: var(--poppinsB);
}

.textBlack2 {
    color: var(--negro);
    font-size: 24px;
    font-family: var(--poppinsB);
}

.textBlack3 {
    color: var(--negro);
    font-size: 16px;
    font-family: var(--poppinsB);
}
.textBlack-white {
    color: var(--white);
    font-size: 16px;
    font-family: var(--poppinsB);
}
.textBlack-xl {
    color: var(--negro);
    font-size: 4rem;
    font-family: var(--poppinsB);
}

.textWhite {
    color: var(--white);
    font-size: 35px;
    font-family: var(--poppinsB);
}
.textWhite2 {
    color: var(--white);
    font-size: 24px;
    font-family: var(--poppinsB);
}
.textWhite2L {
    color: var(--white);
    font-size: 24px;
    font-family: var(--poppins);
}

.textBeige {
    margin-top: 4px;
    color: var(--white);
    font-size: 18px;
    font-family: var(--poppinsB);
    text-align: center !important;
}
.textBeige2 {
    color: var(--black);
    font-size: 18px;
    font-family: var(--poppinsB);
    text-align: center !important;
}
.textGold {
    color: var(--gold);
    font-size: 35px;
    font-family: var(--poppinsB);
}
.textGold2 {
    color: var(--gold);
    font-size: 24px;
    font-family: var(--poppinsB);
}
.textGold3 {
    color: var(--gold);
    font-size: 20px;
    font-family: var(--poppinsB);
}
.textRojo {
    color: var(--rojo);
    font-size: 35px;
    font-family: var(--poppinsB);
}


a,
a:hover {
    text-decoration: none;
    color: inherit;
}

.whatsapp-fixed {
    position: fixed;
    right: 5%;
    bottom: 10%;
    z-index: 100;
    width: 6%;
    height: 6%;
}

.whatsapp-fixed img {
    width: 70%;
    height: auto;
}

.degradado {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 9)), to(rgba(0, 0, 0, 0)));
}


/**Header*/

nav {
    height: 100%;
    position: relative;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: #1D1D1B;
    -webkit-box-shadow: -1px -1px 34px -3px rgba(0, 0, 0, 0.66);
    -moz-box-shadow: -1px -1px 34px -3px rgba(0, 0, 0, 0.66);
    box-shadow: -1px -1px 34px -3px rgba(0, 0, 0, 0.66);
}

.navbar-brand img {
    width: 125px;
    padding-bottom: 3px!important;
}

.navbar-brand {
    padding: 0!important;
    padding-bottom: 3px!important;
}

.header {
    height: 100%;
}

.nav-link {
    color: white!important;
    font-family: var(--poppins);
    font-size: 18px;
}

.nav-link-dark {
    color: var(--black);
    font-family: var(--poppins);
    font-size: 18px;
}

.nav-item {
    align-items: center;
    display: flex;
    justify-content: center;
    height: inherit;
    padding: 1em;
    font-family: var(--poppins);
}

.navbar {
    padding-bottom: 0;
}

.nav-item:hover {
    background-color: var(--beige);
}

.navbar-collapse ul {
    height: 100%!important;
    align-items: center;
    padding: 0;
}

.btn-alumnos {
    background-color: var(--beige);
    border-radius: 15px;
    border: none;
    padding: 0.2em;
    margin-left: auto;
}

.btn-alumnos:hover,
.btn-alumnos:hover .btn-alumnos .nav-link {
    background-color: var(--gris);
    /* color: var(--negro)!important; */
}

header .dropdown-menu {
    position: fixed !important;
    left: 0!important;
    right: 0 !important;
    top: 84px;
    padding: 3em;
    z-index: 1000;
    margin: 0;
}

.round {
    padding: 0;
}

ul.round li {
    list-style: none;
    position: relative;
    padding: 0 0 0 20px;
}

ul.round li::before {
    content: ""!important;
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background-color: #1D1D1B;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.navbar-full .dropdown,
.navbar-full .navbar-nav .nav-item.dropdown {
    position: static !important;
}

.link-header:hover {
    font-family: var(--poppinsB);
    cursor: pointer;
}

.two-columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.three-columns {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}


/**Footer*/

.foot {
    display: flex;
    justify-content: space-around;
    padding: 2em;
    flex-wrap: wrap;
}

footer {
    background-color: var(--negro);
}

.icon-footer {
    width: 30px;
    height: 30px;
    margin: 5px;
    padding: 5px;
}

.foot p {
    color: white;
}

.iconos-footer {
    display: flex;
    align-items: center;
}

.ftTitle {
    font-family: var(--poppins);
    font-size: 20px;
}

.ftSubContent {
    font-family: var(--poppins);
    font-size: 15px;
    font-weight: normal;
    margin: 5px;
    padding:5px;
}

.copy {
    background-color: #000;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.copy p {
    color: white;
    margin: 0;
}

.copyTitle {
    font-family: var(--poppins);
    font-size: 15px;
}

.copySub {
    font-family: var(--poppins);
    font-size: 15px;
    font-weight: normal;
}


/** INICIO **/

.index {
    height: 250px;
    background-color: var(--negro);
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.index2 {
    height: 800px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
}

.txtIndex {
    font-size: 80px;
    color: white;
    font-family: var(--poppinsB);
}

.txtAlt {
    font-size: 65px;
    color: var(--beige);
    font-family: var(--poppinsB);
    padding: 5px;
}

.centroIndex img {
    width: 300px;
    max-width: 95%;
}
.tracking-in-contract{
    -webkit-animation:tracking-in-contract .8s cubic-bezier(.23,1.000,.32,1.000) both;animation:tracking-in-contract .8s cubic-bezier(.23,1.000,.32,1.000) both}

.centroIndex {
    max-width: 95%;
}

.eslogan-img {
    background-image: url('../img/eslogan.webp');
    background-position: center;
    background-size: cover;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.eslogan-imgb {
    background-image: url('../img/Beca_fondo.png');
    background-position: center;
    background-size: cover;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.eslogan-imgc {
    background-image: url('../img/titulacion2.webp');
    background-position: center;
    background-size: cover;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.eslogan-imgd {
    background-image: url('../img/ServicioSocial.webp');
    background-position: center;
    background-size: cover;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.eslogan:hover .eslogan-img {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}
.esloganb:hover .eslogan-imgb {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

.eslogan {
    position: relative;
    height: 450px;
}

.esloganb {
    position: relative;
    height: 450px;
}
.esloganc {
    position: relative;
    height: 450px;
}
.eslogand {
    position: relative;
    height: 450px;
}

.txtBeige {
    color: var(--beige);
}
.txtBeige2Enlaces {
    color: var(--beige) !important;
    text-decoration: none;

}
.txtBeige2Enlaces:hover{
    color: var(--beige) !important;
}
.txtcalabaza {
    color: var(--calabaza);
}

.text-eslogan {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--poppins);
    color: white;
    font-size: 58px;
    line-height: 65px;
}
.text-esloganb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--poppins);
    color: white;
    font-size: 58px;
    line-height: 65px;
}
.text-esloganc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--poppins);
    color: white;
    font-size: 58px;
    line-height: 65px;
}
.text-eslogand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--poppins);
    color: white;
    font-size: 58px;
    line-height: 65px;
}

.div-information {
    padding-bottom: 0em;
    padding-top: 5em;
}

.divTexto {
    padding-top: 3em;
    padding-bottom: 3em;
}

.textnormal {
    font-family: var(--poppins) !important;
    color: var(--negro);
    font-size: 16px;
    margin: 0;
    word-wrap: break-word;
}

.textnormal-2 {
    font-family: var(--poppins) !important;
    color: var(--white);
    font-size: 16px;
    margin: 0;
    word-wrap: break-word;
}

.textnormal-white {
    font-family: var(--poppins);
    color: white;
    font-size: 16px;
    margin: 0;
    
}
.textnormal-black {
    font-family: var(--poppins);
    color: var(--negro);
    font-size: 18px;
    margin: 0;
    word-wrap: break-word;
}

.textnormal-beige {
    font-family: var(--poppins);
    color: var(--beige);
    font-size: 19px;
    margin: 0;
    word-wrap: break-word;
}
.textnormal-rojo {
    font-family: var(--poppins);
    color: var(--rojo);
    font-size: 19px;
    margin: 0;
    word-wrap: break-word;
}

.backgroundIndex {
    background-image: url('../img/linea-back.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 9)), to(rgba(0, 0, 0, 0)));
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

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

.img-galeria {
    max-width: 100%;
    height: auto;
    width: 80%;
}

.img-center {
    z-index: 10;
    min-width:400px;
}

.img-top,
.img-bottom,
.img-left
.img.right{
    position: absolute;
    opacity: 0;
}

.img-galeria {
    transition: 0.5s ease-in-out;
}

.indexGaleria:hover .img-galeria {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    max-width: 100%;
    height: auto;
    width: 80%;
    transition: 0.3s linear;
    opacity: 1;
}

.indexGaleria:hover .img-top {
    transform: translate(-50px, -250px);
}

.indexGaleria:hover .img-bottom {
    transform: translate(-50px, 250px);
}

.textInformation {
    padding: 2em;
    margin-bottom: 2em;
}

.btn-ver_mas {
    background-color: var(--negro);
    padding: 15px 51px;
    border-radius: 10px;
    color: white;
    margin-top: 1em;
    display: inline-block;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    line-height: 22px;
    transition: 0.3s linear;
}

.btn-ver_mas:hover {
    background-color: var(--beige);
    color: var(--negro);
    text-decoration: none;
}

.btn-beige {
    background-color: var(--beige);
    padding: 15px 51px;
    border-radius: 10px;
    color: white;
    margin-top: 1em;
    display: inline-block;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    line-height: 22px;
    transition: 0.3s linear;
}

.btn-beige:hover {
    background-color: var(--negro);
    color: white;
    text-decoration: none;
}

.btn-blanco {
    background-color: white;
    padding: 15px 51px;
    border-radius: 10px;
    color: var(--negro);
    margin-top: 1em;
    display: inline-block;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    line-height: 22px;
    transition: 0.3s linear;
}

.btn-blanco:hover {
    background-color: var(--beige);
    color: white;
    text-decoration: none;
}

.btn-blanco:hover path {
    fill: white;
}

.btn-blanco path {
    fill: var(--negro);
}

.btn-negro {
    background-color: var(--negro);
    padding: 1.2em 4em;
    border-radius: 10px;
    color: white;
    margin-top: 1em;
    display: inline-block;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    line-height: 22px;
    transition: 0.3s linear;
}

.btn-negro:hover {
    background-color: var(--beige);
    color: white;
    text-decoration: none;
}

.noticia:not(:last-child) {
    padding-right: 3em;
}

.texto-noticias {
    padding-top: 1em;
}

.title-noticia {
    position: absolute;
    bottom: 0;
    left: 1em;
    font-family: var(--poppinsB);
    font-size: 36px;
    color: white;
    word-break: break-word;
}

.img-noticias,
.img-noticias img {
    position: relative;
    width: 100%;
    z-index: 0;
    border-radius: 10px;
}

.noticias {
    margin-bottom: 3em;
}


/* Historia */

.back-oferta {
    opacity: 0.1;
    height: 100%;
    right: -5%;
    bottom: 0;
    width: 70%;
    background-repeat: no-repeat;
    background-size: cover;
}

.txtSomosCec {
    position: absolute;
    top: 2.7em;
    left: 2em;
    font-size: 40px;
    color: white;
    font-family: var(--poppins);
    font-weight: bold;
}

.text-directorio{
    font-size: 40px;
    color: white;
    font-family: var(--poppinsB);
}
.txtConvocatoria {
    position: absolute;
    top: 15.7em;
    left: 3em;
    right: 3em;
    font-size: 45px;
    color: white;
    font-family: var(--poppinsB);
}
.titulo-convocatoria-concurso {
    position: absolute;
    top: 12.7em;
    left: 2em;
    right: 1em;
    font-family: var(--poppinsB);
    font-size: 35px;
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
    flex-wrap: wrap
}

.txtinfo {
    font-size: 20px;
    color: white;
    font-family: var(--poppins);
    margin-top: 7em;
    margin-left: 7em;
}

.img-historia {
    width: 100vw;
    max-height: 100%;
}

.nosotros-historia {
    padding: 5em;
}

.img-nosotros {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7vw;
}

.backgroundNosotros {
    background-image: url('../img/back-nosotros.png');
    background-size: 90% 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 9)), to(rgba(0, 0, 0, 0)));
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.B-N {
    
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: 0.3s;
}

.B-N:hover {
    -webkit-filter: grayscale(100);
    -moz-filter: grayscale(100);
    -ms-filter: grayscale(100);
    -o-filter: grayscale(100);
    filter: grayscale(100);
}

.img-contain {
    height: auto;
    width: 38em;
    max-width: 100%;
    max-height: 100%;
    /* opacity: 0; */
}

.card-historia {
    padding: 1em;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    border-radius: 20px;
    margin-bottom: 2em;
    padding: 2em;
    width: 100%;
}

.content-card-up {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.content-card-up svg {
    min-width: 20px;
}

.text-card {
    font-size: 24px;
    font-family: var(--poppinsB);
    margin-left: 1em;
    margin-bottom: 0;
}

.container-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.arrow-right {
    margin-left: auto;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.5s linear;
}

.arrow-right.open {
    transform: rotate(180deg);
    transition: transform 0.5s linear;
}

.open path {
    fill: var(--beige);
}

.btn-descarga {
    background-color: var(--negro);
    padding: 1em 3em;
    border-radius: 25px;
    color: white;
    margin-top: 1em;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    /* width: 300px; */
    max-width: 100%;
    line-height: 22px;
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
}
.btn-descargaP {
    background-color: var(--negro);
    padding: 1em 3em;
    border-radius: 25px;
    color: white;
    margin-top: 1em;
    font-family: var(--poppinsCompactB);
    font-size: 22px;
    /* width: 300px; */
    max-width: 100%;
    line-height: 22px;
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.btn-descarga:hover {
    background-color: var(--beige);
    color: var(--negro);
    fill: var(--negro);
}
.btn-descargaP:hover {
    background-color: var(--rojo);
    color: var(--negro);
    fill: var(--negro);
}
.btn-descargaP:hover path {
    fill: var(--negro)!important;
}

.btn-descarga:hover path {
    fill: var(--negro)!important;
}

.oferta-valor {
    background-color: var(--negro);
    padding: 5em 0em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.titleOferta {
    color: white;
    font-size: 36px;
    font-family: var(--poppinsB);
}

.list-oferta {
    color: white;
    font-family: var(--poppins);
    font-size: 20px;
    margin-bottom: 1.5em;
}


/* Directorio */

.container-img {
    position: relative;
    height: auto;
    display: flex;
}

.img-directorio {
    position: relative;
    width: 100vw;
}

.bold {
    font-family: var(--poppinsB);
}

.medium {
    font-family: var(--poppinsM);
}

.gris {
    color: var(--gris);
}

.regular {
    font-family: var(--poppins);
}

.italic {
    font-family: var(--poppinsI);
}

.directorio {
    margin-top: -300px;
}

.directorio-text {
    font-family: var(--poppins);
    color: white;
    font-size: 16px;
    word-wrap: break-word;
}
.directorio-text  a{
     display: inline-block;
        max-width: 100%;
    color: white;
    font-size: 11px;
    word-wrap: break-word;
}


/*Producciones*/

.producciones-container {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.producciones-list {
    font-size: 60px;
    width: 100%;
    padding-left: 0;
    list-style-type: none;
}

.producciones-list li {
    padding-bottom: 1em;
    text-transform: uppercase;
}

.producciones-list li:hover {
    color: var(--beige);
    font-family: var(--poppins);
    cursor: pointer;
}

.after {
    display: none;
}

.producciones-list li:hover .after {
    display: inline-block;
}

#tracker {
    position: absolute;
    transition: 0.3s
}

.img-produccion {
    width: 200px;
    height: 300px;
}

.title-producciones {
    font-family: var(--poppinsB);
    font-size: 80px;
    margin-top: 1em;
}


/* Producciones "individuales" */

.portada-produccion,
.portada-produccion img {
    width: 100vw;
    min-height: 40vh;
    max-height: 80vh;
}

.descripcion-produccion {
    margin-top: -20em;
}

.title-produccion {
    font-size: 48px;
    color: white;
    font-family: var(--poppinsB);
    margin-bottom: 11vw;
}

.title-produccion2 {
    font-size: 48px;
    line-height: 45px;
    color: white;
    font-family: var(--poppinsB);
    margin-bottom: 1.5em;
}

.subtitle-produccion {
    font-family: var(--poppinsB);
    font-size: 36px;
    color: var(--negro);
    margin-top: 0;
    line-height: 36px;
}

.subtitle-produccion2 {
    font-family: var(--poppinsB);
    font-size: 36px;
    color: white;
    margin-bottom: 3em;
}

.informacion-produccion {
    font-family: var(--poppins);
    font-size: 20px;
    width: 80%;
    color: var(--negro);
}


/*Control escolar*/

.control-escolar {
    padding: 2vw;
    height: auto;
    padding-bottom: 0;
}

.titulo-control-escolar {
    font-family: var(--poppinsB);
    font-size: 35px;
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
    flex-wrap: wrap
}

.back-control {
    height: 95%;
    width: 100%;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
}

.texto-control {
    /* padding-right: 8em; */
    padding-top: 3em;
    padding-bottom: 0;
}

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

.img-oferta {
    height: auto;
    width: 80%;
    max-width: 100%;
    margin: 15px;
}


/*Becas*/

.becas {
    background-color: var(--negro);
    display: flex;
    align-items: center;
    flex-direction: column;
    height: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.info-becas {
    color: white;
    padding: 5em;
    padding-top: 8em;
}

.back-becas {
    opacity: 0.1;
    height: 80%;
}

.title-becas {
    font-size: 34px;
    color: white;
}
.title-becasP {
    font-size: 34px;
    color: red;
}

.convocatoria {
    font-size: 23px;
    font-family: var(--poppins);
}


/* Convenio */

.convenio {
    -webkit-box-shadow: -1px 0px 17px 0px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: -1px 0px 17px 0px rgba(0, 0, 0, 0.64);
    box-shadow: -1px 0px 17px 0px rgba(0, 0, 0, 0.64);
    /* height: 450px; */
    padding: 0;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.convenio:hover {
    transform: scale(1.02, 1.05);
}

.up {
    flex-direction: column;
    text-align: center;
    height: 85%;
    padding: 2em;
}

.up p {
    margin: 1px;
}

.down {
    background-color: var(--negro);
    margin-top: auto;
    height: 15%;
    width: 100%;
}

.slider {
    background-color: white;
    position: relative;
    border-radius: 15px;
    margin-top: 2.5em;
    padding: 3em;
    padding-left: 28%;
    width: 133%;
    left: -25%;
    z-index: 10;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: url('../img/iconos/arrow-left.svg')!important;
    border-radius: 20px;
    padding:20px;
    background-color: #FFF;
}

.carousel-control-next-icon {
    transform: rotate(180deg);
}

.controls {
    position: absolute;
    top: 1em;
    right: 0;
    width: 10%;
}

.textpeque {
    font-size: 16px;
    font-family: var(--poppins);
    color: var(--negro);
}

.subtitle-aspirantes {
    font-size: 34px;
    color: white;
    font-family: var(--poppinsI);
    margin-top: 0;
}


/*Aspirantes*/

.becas img {
    z-index: 100;
    opacity: 1;
    width: 100%;
    max-height: 350px;
}

.aspirantes {
    padding-top: 7em;
}


/* Contacto */

.contacto {
    background-color: var(--negro);
}

.field {
    margin: 30px auto;
}

.inp-black {
    border: none;
    border-bottom: 2px solid #d9d9d9;
    width: 80%;
    outline: 0;
    font-size: 24px;
    padding: 15px 15px 5px;
    background-color: var(--negro);
    width: 100%;
    color: white;
}

.lbl-black {
    color: #fff;
    position: absolute;
    margin-top: -60px;
    margin-left: 10px;
    pointer-events: none;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    font-size: 24px;
    background-color: var(--negro);
    font-family: var(--poppinsSB)
}

.inp-black:focus~label,
.inp-black:valid~label {
    margin-top: -52px;
    font-size: 10px;
    color: #999;
    margin-left: 10px;
}

.inp-white {
    border: none;
    border-bottom: 2px solid #1D1D1B;
    width: 80%;
    outline: 0;
    font-size: 24px;
    padding: 15px 15px 5px;
    background-color: inherit;
    width: 100%;
    color: black;
}

.lbl-white {
    color: #000;
    position: absolute;
    margin-top: -60px;
    margin-left: 10px;
    pointer-events: none;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    font-size: 24px;
    background-color: inherit;
    font-family: var(--poppinsSB)
}

.inp-white:focus~label,
.inp-white:valid~label {
    margin-top: -52px;
    font-size: 10px;
    color: #999;
    margin-left: 10px;
}

.map {
    height: 500px;
    max-height: 100%;
    width: 100%;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.subcontacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* premios */

.crop-up {
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}

.crop-down {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.crop-beige {
    background-color: var(--beige);
}
.crop-negro {
    background-color: var(--negro);
}
.crop-rojo {
    background-color: var(--rojo);
}
.crop {
    margin-right: -75px;
    height: 250px;
    width: 270px;
    background-position: center;
    background-size: 100% 100%;
    transition: 1s ease-in-out;
}

.map2 {
    height: 300px;
    max-height: 100%;
    width: 100%;
    border-top-left-radius: 20px;
}

.r-90 {
    transform: rotate(-90deg);
}

.crop:hover {
    background-size: 140% 140%;
    transition: 0.3s ease-in-out;
}

.festival-centered {
    align-items: center;
    justify-content: center;
}

.festival-parent {
    background-color: var(--negro);
}

.festival-parent .row {
    background-color: var(--negro);
    padding-bottom: 3em;
}

.list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 2.5em;
    bottom: 3.5em;
    z-index: 10;
}

.list a:hover {
    color: var(--rojo);
}

.titulo-premios {
    font-size: 80px;
    margin-left: 5%;
    line-height: 80px;
    margin-bottom: 0;
}

.festival-mapa {
    padding-top: 7em;
    padding-bottom: 7em;
}

.link:hover {
    color: white;
}

.flechita {
    width: 15px;
    height: 15px;
}

.festival-info {
    padding: 4em;
    padding-left: 1em;
}

.back-negro {
    background-color: var(--negro);
}

.ubicacion {
    padding: 3em;
    max-height: 300px;
}

.texto-BG {
    font-size: 80px;
    font-family: var(--poppinsB);
}
.texto-h1 {
    font-size: 6rem;
    font-family: "PoppinsB";
    word-wrap: break-word;
}
.texto-h2 {
    font-size: 3rem;
    font-family: "PoppinsB";
    word-wrap: break-word;
}
.texto-h3 {
    font-size: 1.5rem;
    font-family: "PoppinsB";
    word-wrap: break-word;
}

.jurado {
    width: 100%;
    padding-top: 2.5em;
}

.back-negro-70 {
    background: linear-gradient(180deg, #1D1D1B 72%, #fafbfd 28%);
}

.galeria {
    padding-top: 5em;
}

.swiper-container,
.swiper-wrapper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    height: calc((100% - 30px) / 2);
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    width: 100%;
}

.arrows-gallery {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    
}

.button-next {
  transform: rotate(180deg);
}


.button-next,
.button-prev {
    cursor: pointer;
}

.ocultar {
    display: none;
}

.patrocinadores {
    padding: 5em;
    
}

.galleryh{
    transition: transform .4s;
    
}
.galleryh:hover {
  transform: scale(1.05);
}
.alianzash{
    transition: transform .4s;
    
}
.alianzash:hover {
  transform: scale(1.3);
}


.v-container {
	position: relative;
	padding-bottom: 56.25%; /* proporción 16:9 */
	padding-top: 25px;
	height: 0;
}

.v-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Ediciones premios*/

.ediciones {
    height: 80vh;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.ediciones .swiper-container,
.ediciones .swiper-wrapper {
    overflow: visible;
}

.ediciones .swiper-container,
.ediciones .swiper-wrapper,
.ediciones .slide {
    transform: rotate(-24deg);
    background-color: #fafbfd;
}

.ediciones img {
    height: 80%;
    width: 30%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    border-radius: 10px;
}

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

.ediciones .swiper-slide:hover img {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    transition: 0.3s ease-in-out;
}

.flecha-gif {
    position: absolute;
    font-size: 18px;
    top: 50%;
    left: 20%;
    width: 9%!important;
    height: 9%!important;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.year,
.edicion {
    opacity: 0;
    transition: 0.3s ease-in-out;
    position: absolute;
}

.ediciones .swiper-slide-active:hover .year,
.ediciones .swiper-slide-active:hover .edicion {
    z-index: 100;
    transform: rotate(24deg);
    opacity: 1;
}

.ediciones .year {
    left: 30%;
    top: 30%;
}

.ediciones .edicion {
    right: 25%;
    top: 35%;
}

#ediciones-premios {
    cursor: pointer;
}


/*Licenciaturas*/

.licenciaturas {
    background-size: 70% 100%;
    background-position: right;
    background-repeat: no-repeat;
}

.perfiles {
    -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    padding: 0;
}

.perfil {
    position: relative;
    padding-left: 4em;
    padding-right: 0;
}

.director {
    font-size: 28px;
    font-family: var(--poppinsB);
}

.info-cuadro {
    padding-left: 5em;
    padding-right: 5em;
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom-right-radius: 10px;
}

.beneficios {
    margin: 6em 2em;
}

.instalaciones {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.fecha-lic {
    line-height: 25px;
    font-size: 25px;
}

.back-licenciatura {
    opacity: 1;
    height: 70%;
    left: 0;
    bottom: 0;
    width: 55%
}

.title-lic {
    line-height: 50px;
    font-family: var(--poppins);
    font-size: 50px;
    color: var(--beige);
    margin-bottom: 0;
}

.title-lic-white {
    line-height: 50px;
    font-family: var(--poppinsB);
    font-size: 50px;
    color: #fff
    ;
    margin-bottom: 0;
}

.subtitle-lic {
    line-height: 25px;
    font-size: 25px;
    font-family: var(--poppinsB);
    color: var(--beige);
    margin-top: 1.5em;
}

.nav-pills {
    height: 100%;
    max-width: 120px;
}

.nav-pills .nav-link {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    background-color: #1d1d1d;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 24px;
    font-family: var(--poppinsB);
    width: 100%;
    flex-direction: column;
    text-transform: uppercase;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #E7BA8A;
}

.tab-content {
    padding: 4em 0em;
}

.titular-lic {
    display: flex;
    align-items: center;
    right: 0;
    top: 50%;
    bottom: 50%;
    width: 55%;
    position: absolute;
}

.titular-lic img {
    max-height: 400px;
}

.proceso-seleccion {
    border-radius: 10px;
}

.numeros-left {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: rotate(-90deg);
    left: -40px;
    font-family: var(--poppinsL);
    font-size: 70px;
    line-height: 0px;
    color: var(--gris);
    opacity: 0.3;
}
.numeros-left-2 {
    position: absolute;
    
    top: 30%;
    transform: rotate(-90deg);
    left: -40px;
    font-family: var(--poppinsL);
    font-size: 70px;
    line-height: 0px;
    color: var(--white);
    opacity: 1;
}

.numero-gris {
    color: var(--gris);
    font-size: 90px;
}

.texto-director {
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 1em;
}

.cuadro { 
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    background-color: white;
    border-radius: 10px;
    padding: 1.5em;
    height: 90%;
    width: 97%;
    margin-top: 2.5em;
    margin-bottom: 1em;
}
.cuadro-2 { 
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    height: 90%;
    width: 97%;
    margin-top: .5em;
    margin-bottom: none;
    transition:.3s;
}
.cuadro-3{
    background-color: rgb(0, 0, 0) !important;
    color: white !important;
    border-radius: 10px;
    padding: 20px;
    height: 50%;
    width: 97%;
    margin-top: .5em;
    margin-bottom: none;
    transition:.3s;
}
.cuadro-2:hover {
    background-color: var(--beige);
    transition:.3s;
    transform:translateY(-10px);

}


.card-inscribete {
    height: 95%;
    background-color: #1D1D1B;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.21);
    padding: 2em;
    border-radius: 10px;
}

.card-inscribete2 {
    height: 110%;
    width: 90%;
    margin-left: auto;
    background-color: #1D1D1B;
    -webkit-box-shadow: 0px 0px 25px -21px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 25px -21px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 25px -21px rgba(0, 0, 0, 1);
    border-radius: 10px;
}

.btn-send {
    position: absolute;
    bottom: -1em;
    left: 0;
}

.btn-send2 {
    position: absolute;
    bottom: -8.5em;
}


/* On screens that are 992px or less, set the background color to blue */

@media all and (max-width: 1200px) {
    .titular-lic {
        align-items: center;
        position: relative;
        width: 100%;
    }
    .tab-content {
        padding: 1em;
    }
    .flotante img {
        height: auto;
    }
    .flotante {
        position: relative;
        padding: 3em;
    }
    .nav-pills .nav-link {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        flex-direction: row;
        width: auto;
    }
    .nav-pills {
        height: auto;
        max-width: 100%;
        justify-content: center;
    }
    .perfil {
        padding-left: 0!important;
    }
    .ediciones img {
        height: 52%;
        width: 43%;
    }
}

@media all and (max-width: 991px) {
    .patrocinadores .texto-BG {
        font-size: 35px;
    }
    .beneficios {
        margin: 3em 0em;
    }
    header .dropdown-menu {
        position: relative!important;
        background-color: var(--negro);
        color: white;
        width: 100%;
        top: 0;
    }
    .navbar-collapse {
        max-height: 90vh;
        overflow-y: auto;
    }
    .nav-item {
        flex-direction: column;
    }
    .index2 {
        height: auto;
    }
    .dropdown {
        padding-left: 0;
        padding-right: 0;
    }
    .link-header:hover,
    .link-header {
        font-family: var(--poppinsB);
        cursor: pointer;
        color: white!important;
    }
    .nosotros-historia,
    .img-nosotros {
        padding: 1em;
    }
    .txtSomosCec {
        left: 20px;
        font-size: 60px;
    }
    .txtinfo {
        left: 20px;
        font-size: 60px;
    }
    .title-produccion,
    .title-produccion2,
    .subtitle-produccion2 {
        color: var(--negro);
    }
    .slider {
        position: relative;
    }
    .img-oferta {
        height: auto;
    }
    .back-negro-70 {
        background: linear-gradient(180deg, #1D1D1B 60%, #fafbfd 40%);
    }
    .crop-beige,
    .crop-negro {
        display: none;
    }
    .titulo-premios {
        font-size: 62px;
    }
    .directorio {
        margin-top: 0px;
    }
    .img-directorio {
        width: 100%;
        padding: 0;
    }
    .indexGaleria:hover .img-top {
        transform: translate(-20%, 10%) rotate(-20deg);
    }
    .indexGaleria:hover .img-bottom {
        transform: translate(10%, 10%) rotate(20deg);
    }
    .noticias {
        padding-left: 1em;
        margin-bottom: 0;
    }
    .noticia {
        padding: 2em;
    }
    .card-inscribete2 {
        height: 100%;
        width: 100%;
    }
    .btn-send2 {
        position: relative;
        bottom: 0;
    }
    .ediciones img {
        height: auto;
        width: 70%;
    }
    .flecha-gif {
        top: 50%;
        left: 5%;
        font-size: 13px;
        width: 10%!important;
        height: 10%!important;
    }
}


/* On screens that are 600px or less, set the background color to olive */

@media all and (max-width: 600px) {

    .textnormal {
        font-size:16px;
    }
    .textnormal-white {
        font-size:16px;
    }
    #to-change {
        font-size: 35px;
    }
    .patrocinadores {
        padding: 1em;
    }
    .patrocinadores .texto-BG {
        font-size: 25px;
    }
    .indexGaleria:hover .img-galeria,
    .img-galeria {
        height: auto;
    }
    .title-producciones {
        font-size: 40px;
        text-align: center;
    }
    .producciones-list li {
        font-size: 35px;
    }
    .producciones-list {
        padding-left: 0;
    }
    .title-produccion {
        font-size: 38px;
    }
    .two-columns {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
    .numeros-left {
        position: absolute;
        top: 50%;
        bottom: 50%;
        transform: rotate(-90deg);
        left: -15px;
        font-family: var(--poppinsL);
        font-size: 70px;
        line-height: 0px;
        color: var(--gris);
        opacity: 0.3;
    }
    .titulo-premios {
        font-size: 40px;
        line-height: 45px;
    }
    .crop-negro,
    .crop-beige {
        display: none;
    }
    .title-noticia {
        left: 0.5em;
        font-size: 25px;
        word-break: break-word;
    }
    .crop {
        height: 120px;
        width: 120px;
        margin-right: -5px;
    }
    .list {
        right: 2.5em;
        left: auto;
        bottom: 3.5em;
        z-index: 10;
    }
    .texto-BG {
        font-size: 47px;
    }
    .texto-h1 {
        font-size: 52px;
    }
    .txtSomosCec {
        font-size: 40px;
    }
    .txtinfo {
        font-size: 20px;
        margin-top: 6em;
        margin-left: 0px;
    }
    .info-cuadro {
        padding-left: 1em;
    }
    .title-lic {
        line-height: 45px;
        font-family: var(--poppinsB);
        font-size: 36px;
        color: var(--beige);
        margin-bottom: 5px;
    }
    .subtitle-lic {
        line-height: 24px;
        font-size: 24px;
        font-family: var(--poppinsB);
        color: var(--beige);
        margin-top: 1.5em;
    }
    .index {
        height: 280px;
    }
    .txtIndex {
        font-size: 40px;
    }
    #video {
        width: 300px;
        height: 300px;
    }
    .ediciones {
        height: 60vh;
        overflow: hidden;
        transition: 0.3s ease-in-out;
    }
    .whatsapp-fixed {
        width: 10%;
        height: 10%;
    }
    .whatsapp-fixed img {
        width: 100%;
        height: auto;
    }
    #tracker {
        display: none;
    }
    .ediciones .year {
        left: 20%;
        top: 20%;
    }
    .ediciones .edicion {
        right: 10%;
        top: 15%;
    }

    .text-eslogand {
        font-size: 45px;
    }
}

@media all and (max-width: 400px) {
    .descripcion-produccion {
        margin-top: -10em;
    }
    .text-eslogan {
        font-size: 35px;
        line-height: 47px;
    }
}


/** POPUP TEST */


#popup-containerTEST {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius:30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#btn-test {
    cursor:pointer;
    background-color:#000;
    color:#fff;
    padding:10px;
    border-radius:15px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content: center;
}



/* ==== ESTILOS CEC - SOCIAL - SLIDER ===== */


.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 1rem;
    color: #000;
    background-color: gold;
    font-family: var(--poppinsB);
    border-radius:30px;
    transition:.3s;
}


.slide-content p {
font-size: 32px;
}

.slide-content:hover {
color:#fff;
background-color:rgba(0,0,0,0.7);
cursor:pointer;
transition: .3s;
}


.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
margin-top: 50px;
background-color:#000;
padding:10px;
}


.mySlides {
display: none;
}

.mySlides p {
color:#fff;
}

/* botones < > */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 0 3px 3px 0;
}

.prev:hover {
    color:#fff;
}

.next:hover {
    color:#fff;
}

.next {
right: 0;
border-radius: 3px 0 0 3px;
}


.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}


.fade {
animation-name: fade;
animation-duration: 15s;
}

@keyframes fade {
from {opacity: .95}
to {opacity: 1}
}

@media all and (max-width:600px) {
.slide-content p {
    font-size:16px;
}

}



/* ====== TEST DE ESTILOS GENERALES ======== */ 

#prodCarousel {
    width:50%;
    font-size:18px;
  }
  
  @media screen and (max-width:500px) {
    #prodCarousel {
      width:90%;
      font-size:16px;
    }
  }
  
  

.slideshow-container h1 {
    color:var(--beige0);
    font-family: var(--poppins);
    font-weight:bolder;
}

.card-test:hover {
    background-color: #000;
    color:var(--beige);
    cursor: pointer;
    transition:ease-in .3s;
}

.card-test {
    transition: .3s;
}

.container-vid {
    max-width: 80vw;
    margin: 0 auto;
    padding: 25px;
    background-color:#000;
  }
  .container-vid p {
    font-size: 32px;
    padding:20px;
  }
  .container-yt {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    background-color:#000;
    margin: 25;
  }
  .container-yt iframe { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .accordion-btn {
    font-size: 32px;
    background-color:#000;
    color:var(--white);
    border:none;
    border-radius: 10px;
  }


  @media all and (max-width: 768px) {
    .container-vid p {
        font-size:20px;
        padding:5px;
    }

    .container-vid {
        max-width:100vw;
        padding:10px;
    }

    .accordion-btn {
        font-size: 20px;
      }
    
  }


  /* FAQ SECTION STYLING (DETAIL-SUMMARY TAGS) */

.faq-container {
    background-color: var(--black) !important;
    padding: 20px;
    font-family: sans-serif;
    font-size:20px;
}

details{
    background-color: #303030;
    color: #fff !important;
    font-size: 18px;
    transition:.3s;
    width:50vw;
    margin: 0 auto;
  }
  
  details:hover {
    transition:.3s;
    cursor:pointer;
  }
  
  summary {
    padding: .5em 1.3rem;
    list-style: none;
    display: flex;
    justify-content: space-between;  
    transition:.5s;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }
  
  summary:after{
    content: "\002B";
    transition:.5s;
  }
  
  details[open] summary {
      border-bottom: 1px solid #aaa;
      margin-bottom: .5em;
  }
  
  details[open] summary:after{
    content: "\00D7";
  }
  
  details[open] div{
    padding: .5em 1em;
  }

  @media all and (max-width: 600px) {
    details {
        width: 80vw;
    }

  }

  /* FIN FAQ SECTION STYLING (DETAIL-SUMMARY TAGS) */



/* Imagenes Por qué estudiar */
.beneficio-img {
    width: 100% !important;        /* ocupa todo el ancho disponible *
    max-width: 400px !important;   /* no crecerá más de 300px */
    height: 200px !important;      /* altura fija */
    object-fit: cover !important;  /* recorta sin deformar */
    display: block !important;     /* evita espacios raros */
    margin: 0 auto !important;     /* centra la imagen */
    border-radius: var(--radius);
}
/* Actuación */
/* .acordeon-plan-estudio-act{
    background-image: url('../img/Diplomados/Actuacion/background-actuación-plan.avif');
    background-attachment: fixed; 
    background-size: cover;
    background-position: center top; 
} */