/*tipografias-------------------------------*/

@font-face {
  font-family: mainFont;
  src: url(../fonts/BrutaProCondensed-Regular.ttf);
}

@font-face {
  font-family: mainFontSemiBold;
  src: url(../fonts/BrutaProCondensed-SemiBold.ttf);
}

@font-face {
  font-family: mainFontBold;
  src: url(../fonts/BrutaProCondensed-Bold.ttf);
}

@font-face {
  font-family: mainFontBlack;
  src: url(../fonts/BrutaProCondensed-Black.ttf);
}

@font-face {
  font-family: mainFontLight;
  src: url(../fonts/BrutaProCondensed-Light.ttf);
}

@font-face {
  font-family: mainFontBlackItalic;
  src: url(../fonts/BrutaProCondensed-BlackItalic.ttf);
}




.bannerproximamente{
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;}

.bannerproximamente h1{
    font-family: "mainFontBold", sans-serif;
    width: 60%;
    font-size: 4em;
    color: #201F20;}


@media only screen and (max-width: 768px){
     
    .bannerproximamente h1{
        width: 80%;
        font-size: 2em;}


}



.fondo{
    background-image: url(../images/images/fondoSeamless.png);
    background-size: 8%;
}



.titular{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 40px 0px 0px 0px;}

.titular div img{
    height: 280px;
    max-width: 100%;
    object-fit: contain;}

.carrera{
    width: 50%;
    margin: auto;
    text-align: center;}

.izquierda{
    width: 20%;
    text-align: left;}

.derecha{
    width: 20%;
    text-align: right;}

.titular, .jornadaTitular{
    width: 100%;
    text-align: center;}

.titular h1{
    font-family: "mainFontBlackItalic", sans-serif;
    font-size: 3em;
    margin-bottom: 8px;}

.titular h3, .jornadaTitular h3{
    font-family: "mainFont", sans-serif;
    font-size: 1.5em;}


.jornadaTitular h2{
    font-family: "mainFontBold", sans-serif;
    font-size: 2em;}

/*CARD---------------------*/

.conferencistas{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 40px 0% 80px 0%;}

.cardo{
    margin: 0px;
    width: 20%;
    text-align: center;
    background-color: #201F20;
    border: 4px solid #201F20;
    border-radius: 0px 0px 24px 0px;}

.cardoarq{
    margin: 0px;
    width: 18%;
    text-align: center;
    background-color: #201F20;
    border: 4px solid #201F20;
    border-radius: 0px 0px 24px 0px;}

.cardo h3, .cardo h4, .cardo h2, .cardoarq h3, .cardoarq h4, .cardoarq h3{
    text-transform: uppercase;
    color: white;}

.cardo h3, .cardoarq h3{
    margin-top: 20px;
    font-family: "mainFontSemiBold", sans-serif;
    font-size: 0.8em;}

.cardo h2, .cardoarq h2{
    font-family: "mainFontBlackItalic", sans-serif;
    font-size: 1.6em;}

.cardo h4, .cardoarq h4{
    margin-bottom: 20px;
    font-family: "mainFont", sans-serif;
    font-size: 1em;}


/*CONFERENCISTAS---------------------*/

.conferencistaImg1{
    height: 380px;
    background-image: url(../images/reconocimientos/Arq_01_Keren.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg2{
    height: 380px;
    background-image: url(../images/reconocimientos/Arq_02_Zamora.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg3{
    height: 380px;
    background-image: url(../images/reconocimientos/Arq_03_Mendez.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg4{
    height: 380px;
    background-image: url(../images/reconocimientos/Arq_04_Camey.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg5{
    height: 380px;
    background-image: url(../images/reconocimientos/Arq_05_Flores.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg6{
    height: 380px;
    background-image: url(../images/reconocimientos/DG_01_Quinonez.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg7{
    height: 380px;
    background-image: url(../images/reconocimientos/DG_02_Mata.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg8{
    height: 380px;
    background-image: url(../images/reconocimientos/DG_03_Cardona.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg9{
    height: 380px;
    background-image: url(../images/reconocimientos/DG_04_Castillopng.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg10{
    height: 380px;
    background-image: url(../images/reconocimientos/DI_01_Velasquez.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg11{
    height: 380px;
    background-image: url(../images/reconocimientos/DI_02_Alfaro.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg12{
    height: 380px;
    background-image: url(../images/reconocimientos/DI_03_Valdez.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg13{
    height: 380px;
    background-image: url(../images/reconocimientos/DI_04_Boj.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg14{
    height: 380px;
    background-image: url(../images/reconocimientos/Docente_Arq.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg15{
    height: 380px;
    background-image: url(../images/reconocimientos/Docente_DG.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg16{
    height: 380px;
    background-image: url(../images/reconocimientos/Docente_DI.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaImg17{
    height: 380px;
    background-image: url(../images/reconocimientos/administrativo.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}


/*PROGRAMAS---------------------*/



.programa{
    margin: auto;
    width: 80%;
    padding 0px 10%;}

.horizontal{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border: 1px solid #201F20;
    padding: 40px;
    border-radius: 0px 0px 24px 0px;}

.horizontal .dia{ width: 20%;}

.horizontal .descripcion{ width: 60%;}

.programa h2{
    font-family: "mainFontBold", sans-serif;
    font-size: 1.6em;}

.programa h5{font-size: 0.8em;}

.programa h3{
    font-family: "mainFontSemiBold", sans-serif;
    font-size: 1.2em;}

.programa h4{
    font-family: "mainFontSemiBold", sans-serif;
    text-transform: uppercase;
    font-size: 1em;}

.programa hr{
    margin: 12px 0px;
    width: 40px;}

.programa p{
    font-family: "mainFontSemiBold", sans-serif;
    font-size: 0.8em;}


.contenedorColumnas{
    padding-bottom: 120px;
    width: 100%;
    display: flex;
    justify-content: space-between;}

.columna{
    margin-top: 20px;
    width: 24%;
    border: 1px solid #201F20;
    padding: 40px;
    border-radius: 0px 0px 24px 0px;}


.evento{padding: 16px 0px;}

.evento h4{
    margin: 0px;
    font-family: "mainFontBold", sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;}

.evento p{
    margin-bottom: 12px;
    font-size: 0.8em;
    font-family: "mainFont", sans-serif; }



/*PROGRAMAS INVERT---------------------*/


.vespertina .contenedorColumnas{
    margin-bottom: 0px;
    padding-bottom: 40px;}

.vespertina .jornadaTitular{
    padding-top: 80px;}

.vespertina .cardo{
    background-color: #E5E5EB;
    border: 4px solid #E5E5EB;}

.vespertina .cardo h3, .vespertina .cardo h4, .vespertina .cardo h2{
    text-transform: uppercase;
    color: #201F20;}

.vespertina .horizontal, .vespertina .columna{
    border: 1px solid #E5E5EB;}

.vespertina h2, .vespertina h3, .vespertina h4, .vespertina p, .vespertina .columna .evento i{color: #E5E5EB;}

.vespertina hr{color: #E5E5EB;}




/*RESPONSIVE---------------------*/
/*RESPONSIVE---------------------*/
/*RESPONSIVE---------------------*/



@media only screen and (max-width: 768px){


.carrera{
    text-align: center;
    width: 80%;}

.izquierda, .derecha{display: none;}

    
.titular div img{
    height: 100px;
    max-width: 100%;
    object-fit: contain;}
    
.fondo{background-size: 12%;}

.titular{padding: 60px 0px 80px 0px;}

.titular .carrera h1{
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 2em;}

.conferencistas{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 10% 80px 10%;}

.cardo, .cardoarq{
    margin: 0px;
    width: 90%;
    text-align: center;
    background-color: #201F20;
    margin-bottom: 40px;
    border: 4px solid #201F20;
    border-radius: 0px 0px 24px 0px;}  

.contenedorColumnas{flex-direction: column;}

.columna{width: 100%;}  

.conferencistaImg1, .conferencistaImg2, .conferencistaImg3, .conferencistaImg4, .conferencistaImg5, .conferencistaImg6, .conferencistaImg7, .conferencistaImg8, .conferencistaImg9, .conferencistaImg10, .conferencistaImg11, .conferencistaImg12, .conferencistaImg13, .conferencistaImg14, .conferencistaImg15, .conferencistaImg16, .conferencistaImg17{
    height: 380px;}

.horizontal .dia{ width: 40%;}

    
}