.bannerproximamente{
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-top: 2px solid #F1DFB9;
}

.bannerproximamente h1{
    width: 60%;
    font-size: 4em;
    color: #FFFFFF;}


/*--------------------------------------- title*/

.carreraTitle{
    padding-top: 50px;
    display: flex;
    justify-content: center
}

.imgT img{width: 100px;}

.mainTitle{
    text-align: center;
    display: flex;
    align-items: center;
    padding: 0px 80px;
    font-family: 'Aleo', serif;
    font-size: 2.6em;
    text-transform: uppercase;
    color: #F1DFB9;}


/*---------------------------------main stage---*/

.title{
    margin-top: 80px;
    text-align: center;
    padding: 0px 80px;
    font-weight: 600;
    font-family: 'Aleo', serif;
    font-size: 2.6em;
    text-transform: uppercase;
    color: #F1DFB9;}

.titleStage{
    margin-bottom: 80px;
    text-align: center;
    padding: 0px 80px;
    font-family: 'Aleo', serif;
    font-size: 2.2em;
    text-transform: uppercase;
    color: #F1DFB9;}


.dosColumnas{
    width: 60%;
    margin:auto;
    display: flex;
    justify-content: space-around;}


.tresColumnas{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: space-around;}

.cardo{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    width: 30%;}

.cardo h2{
    font-family: 'Aleo', serif;
    font-size: 1.4em;
    text-align: center;
    text-transform: uppercase;
    color: #F1DFB9;}

.cardo div{
    align-self: flex-end
    margin: auto;
    height: 360px;
    margin: auto;
    max-width: 320px;}

.cardo img{
 
    filter: grayscale(100%);
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: cover;}



/*-----descripcion-----------*/

.matutina h2, .matutina h3, .matutina p{
    color: #F1DFB9;}

.aliR{text-align: right;}

.aliL{text-align: left;}

.cuatroColumnas{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;}

.columna{
    width: 20%;}

.matutina h2{
    text-align: center;
    font-family: 'Aleo', serif;
    font-size: 2.2em; 
    margin-top: 80px;
    margin-bottom: 30px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1DFB9;}

.matutina h3{
    margin-bottom: 8px;
    font-family: 'Aleo', serif;
    font-size: 1.4em;}

.tituloConf{
    font-style: italic;
    font-family: 'Aleo', serif;
    font-weight: 300;
    margin-bottom: 4px;
    font-size: 1em;}

.horario{
    font-family: 'Raleway', sans-serif;
    font-size: 0.8em;
    opacity: 0.6;
    margin-bottom: 32px;
}



/*----------------vespertinaaaa------------------------*/
.vespertina h2, .vespertina h1, .vespertina h3, .vespertina p{
    color: #1D1D1D;}

.vespertina{
    margin-top: 40px;
    padding-top: 5px;
    padding-bottom: 120px;}

.vespertina .cardo div{border: 4px solid #1D1D1D;}

.vespertina .columna h2{border-bottom: 1px solid #1D1D1D;}


@media only screen and (max-width: 960px){
 
    .dosColumnas{width: 80%;}
    
}


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


    .mainTitle{
        padding: 0px 40px;
        font-size: 2em;}

    .imgT img{width: 80px;}
    
    .title{
        margin-top: 50px;
        font-size: 2em;}

    .titleStage{
        font-size: 1.6em;}

    .tresColumnas{margin-bottom: 30px;}
    
    .cuatroColumnas, .dosColumnas, .tresColumnas{
        flex-direction: column;}
    
    
    .dosColumnas .cardo, .tresColumnas .cardo{
        margin-bottom: 40px;
    }
    
    .columna{
        width: 100%;}
    
    .aliR{text-align: left;}
    
    .matutina h2{
        margin-top: 40px;}
    
    .cardo h2{
        font-size: 1.2em;}


    
    .cardo h2{
        font-size: 1.2em;}
    
    
    .cardo{
        width: 80%; 
        margin: auto;}
    
    .cardo div{margin: auto;}
    
}