/*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{
    width: 60%;}

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

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

.izquierda{text-align: left;}

.derecha{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: center;
    padding-top: 40px;
    padding-bottom: 80px;}

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

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

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

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

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


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

.conferencistaDGImg1{
    height: 360px;
    background-image: url(../images/conferencistas/DG_RafaArias.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);}

.conferencistaDGImg2{
    height: 360px;
    background-image: url(../images/conferencistas/DG_MaricrisHerrera.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaDGImg3{
    height: 360px;
    background-image: url(../images/conferencistas/DG_IvanMayorquin.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);}

.conferencistaDIImg1{
    height: 360px;
    background-image: url(../images/conferencistas/DI_WilfridoHaro.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaDIImg2{
    height: 360px;
    background-image: url(../images/conferencistas/DI_AnaElenaMallet.png);
    background-size: cover;
    background-position: top;
    filter: grayscale(100%);}

.conferencistaARQImg1{
    height: 360px;
    background-image: url(../images/conferencistas/ARQ_Dinora.png);
    background-size: cover;
    background-position: 50% 30%;
    filter: grayscale(100%);}

.conferencistaARQImg2{
    height: 360px;
    background-image: url(../images/conferencistas/ARQ_Carlos.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);}

.conferencistaARQImg3{
    height: 360px;
    background-image: url(../images/conferencistas/ARQ_Heidy.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);}

.conferencistaARQImg4{
    height: 360px;
    background-image: url(../images/conferencistas/ARQ_selena.png);
    background-size: cover;
    background-position: center;
    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: 30%;}

.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){
.fondo{background-size: 12%;}

.izquierda, .derecha{display: none;}    
    
    
.titular{padding: 0px 0px 0px 0px;}

.titular div{
    padding: 80px 0px 80px 0px;
    width: 100%;}

.titular div img{
    height: 280px;
    max-width: 80%;
    object-fit: contain;}    
    
.titular h1{font-size: 2.4em;}
  
.contenedorColumnas{flex-direction: column;}
    
.conferencistas{
    align-items: center;
    flex-direction: column;}

.columna{width: 100%;}

.cardo{
    margin-bottom: 40px;
    width: 80%;}    

.conferencistaImg1, .conferencistaImg2, .conferencistaImg3, .conferencistaImg4{
    height: 280px;}

.horizontal .dia{ width: 40%;}
    
.horizontal{
    flex-direction: column;}

.horizontal .dia{ width: 100%;}

.horizontal .descripcion{ width: 100%;}

    
}