@charset utf-8;

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Laila:400,500,600,700');

/*primero mobile*/
/* PANTALLA HOME */

div#pagina {
    width: 92%;
    margin: 1.5rem 1.5rem 1.5rem 1.5rem;     

}


* {
    box-sizing:border-box;
    list-style: none
}


/*FLEX*/
@media screen and (min-width:40rem)

    


/*
----------------------Responsive---------------------------*/


.contenedor{  
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: snow;

    }

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

    }
header, 
footer {
    flex: 0 1 auto;
}

body {
    background-color: #D68736;
    margin: auto;
    }

main {
    background-color: snow;
    margin: 0;
    }



.introduccion
{ 
color: black;
font-family: 'Laila';
font-weight: 500;
text-align: center;
padding-top: 7rem;
max-width: 1024px;
width: 1200px;
margin: auto;

}
.objetivo{
    
color: black;
font-family: 'Laila';
font-weight: 700;
text-align: center;
 margin-top: 5rem;
}

.opcion1 h2{
  font-family: 'Roboto';
    color: black;
    font-weight: 700;
    font-size: 24px;
    align-content: center;
padding: 6em;
     margin-top: -8rem;
     border-bottom: solid;
border-bottom-width: 5px;
    
}


.opcion2 h2{
    font-family: 'Roboto';
    color: black;
    font-weight: 700;
    font-size: 24px;
    align-content: center;
    padding: 6em;
    margin-top: -8rem;
    border-bottom: solid;
    border-bottom-width: 5px;
}

.opcion3 h2{
    
    font-weight: 700;
    font-size: 24px;
   align-content: center;
    padding: 6em;
    margin-top: -8rem;
    border-bottom: solid;
    border-bottom-width: 5px;
}





.opciones{
display: flex;
margin: auto;

flex-direction: row;
max-width: 1024px;
font-family: 'Roboto';
color: black;
font-weight: 400;
font-size: 15px;

font-size: 0.8rem;
text-align: center;
align-items: center;
margin-top: 5rem;
display: flex;



}
p{
    
    margin-top: -7rem;
   
    
}



.opcion1{
background-color: #E6BD69;
width: 900px;
height: 200px;
margin: auto;
margin: 20pt;
}

.opcion2{
background-color: #E6BD69;
width: 900px;
height: 200px;
margin: auto;
margin: 20pt;
}


.opcion3{
background-color: #E6BD69;
width: 900px;
height: 200px;
margin: auto;
margin: 20pt;
}







/*<!-- Barra de navegacion -->*/
.menu {
   
    margin: auto;
       
    padding: 10px 0 5px 0;
    display: flex;
    justify-content: center;
     
    }


.menus {
    display: flex;
    align-items: center;
    
    
    font-weight: 100;
    
}


.menus > li { 
justify-content:space-around;
margin-top: 4em;
font-size: 0.8rem;
padding: 0 90px 0 90px;
margin: auto;
    }


.menus > li > a {
    text-decoration: none;
    color: black;
    font-family: 'Roboto';
    font-weight: 700;
    
}

.menus > li > a:hover{
    color: black;
}


.menus > li > a:hover{
    color: white;
}

/*banner*/

/*<!-- Slider -->*/

.slider{
    max-width: 1024px;
    margin: auto;
    overflow: hidden;    
    height: 500px;
    position: relative;
    margin-top: 10rem;
    margin-bottom: 1em;
    background-image:url(fondo2.jpg);
   }






.slider ul{
    
    display: flex;
    padding: 0;
    width: 200%;
    animation: cambio 10s infinite alternate linear;
    margin-top: 30px;
    
}
.slider li{
    width: 100%;
    list-style: none;
    object-position: center;
    
   }

.slidert1, .slidert2, .slidert3
{
    background-color: #31A0B6;
   
    width: 400px;
    height: 160px;
    position:relative;
    left: 3em;
    top: 10rem;
    padding-left: 1em;
    align-items: center;
        
            
}


.slidert1 h3{
    font-family: 'Laila';
    font-size: 18px;
    margin-top: -1em;
    padding-top: 2rem;
    color: white;
        
    
        
}
.slidert1 p{
   width: 375px;
    font-family: "roboto";
    color: white;
    margin-top: 1.5rem;
    font-size: 16px;
    font-weight: 400;
        
}



.slidert2 h3{
    font-family: 'Laila';
    font-size: 18px;
    margin-top: -1em;
    padding-top: 2rem;
    color: white;
        
        
}
.slidert2 p{
   width: 375px;
    font-family: "roboto";
    color: white;
     margin-top: 1.5rem;
    font-size: 16px;
    font-weight: 400;
        
}
.slidert3 h3{
  font-family: 'Laila';
    font-size: 18px;
    margin-top: -1em;
    padding-top: 2rem;
    color: white;
        
}
.slidert3 p{
     width: 375px;
    font-family: "roboto";
    color: white;
     margin-top: 1.5rem;
    font-size: 16px;
    font-weight: 400;
        
}

        


@keyframes cambio{
    0% {margin-left: 0;}
    35% {margin-left: 0;}
    
    40% {margin-left: -100%;}
    65% {margin-left: -100%;}
    
    70% {margin-left: -200%}
    100% {margin-left: -200%}
}

/* Noticias home */


.noticias{
    display: flex;
    margin: auto;
    width: 1024px;
    margin-top: 8em;
    max-width: 1024px;
   
    
}

.materias{
margin-top: 3rem;
display: flex;
padding-left: 5em;
}

.materias1{
margin-top: 3rem;
display: flex;
margin: center;
padding-left: 4.2em;
}



.noticia1 , .noticia2 , .noticia3  {
    width:900px;
    height: 350px;
    margin: auto;
    margin: 20pt;
    border-bottom: solid;
    border-bottom-width: 5px;
}

.noticia1{ 
    background-color: #E6BD69;
     
}
.noticia2{
background-color: #E6BD69;
}

.noticia3{
background-color: #E6BD69;
    
}

.noticias h4{
font-family: 'Roboto';
color: black;
font-weight: 700;
font-size: 24px;
padding-left: 0rem;
    
}

.noticias p{
font-family: 'Roboto';
color: black;
font-size: 14px;
width: 185px;
margin-left: 3.5em;
text-align: center;
margin-top: -12rem;
}




.descargarapp{
background-color: #E6BD69;
max-width: 1024px;
width: 1200px;
height: 50px;
margin: auto;
text-align: center;
margin-top: 5em;
font-family: 'Roboto';
color: black;
font-size: 20px;
  
}
.botones{
    
    margin-top: 3rem;
   
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


.descarga2, .descarga3 {
    margin-top: 2rem;
    margin: 2em 2em 2em 2em;
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    }

.descarga2{
    
    margin-left: -5rem;
}
.descargar {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    
    
    
}

    
    


h6{padding-top: 1rem;}

h4{
font-family: 'Roboto';
color: white;
font-size: 15pt;
justify-content:space-around;
display:flex;
height: 200px;
text-align: center;
margin-top: 3rem;
}

.Elcentro {
color: black;
font-family: 'Laila';
font-weight: 700;
text-align: center;
 margin-top: 5rem;
font-size: 14px;
}

.desarrollo {
color: black;
font-size: 1rem;
font-family: 'Laila';
font-weight: 700;
text-align: center;
padding-top: 12rem;
max-width: 1024px;
width: 1200px;
margin: auto;
}


.alumnas{
color: black;
font-size: 0.8rem;
font-family: 'Laila';
font-weight: 700;
padding-top: 4rem;
display: flex;
margin-top: 4rem;
display: flex;
justify-content: space-around;
}

.estudiantes p{
color: black;
font-size: 0.9rem;
font-family: 'Roboto';
font-weight: 700;
padding-top: 4rem;
margin: center;
display: flex;
margin-top: 3rem;
display: flex;
justify-content: space-around;
    
    
    
}

    
    
    
    

.alumna1
{
    
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;

}


.alumna2
{
    
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
}

.alumna3
{
    
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
}


.texto{
color: black;
font-size: 14px;
font-family: 'Roboto';
font-weight: 200;
text-align: center;
padding-top: 4rem;
max-width: 1024px;
width: 1200px;
margin: auto;
    
    
}

.descarga{

align-items: flex-start;
display: flex;
flex-direction: row;
max-width: 1024px;
margin: auto;
overflow: hidden;    
height: 300px;
margin-top: 7rem;

    
}


.botonessocial {
height:40px;
background-color: #D68736;
display: flex;
justify-content:space-around;
align-items: center;
width: 100%;
margin-bottom: 40pt;
margin-top: 4em;
}

.logo{
margin-top: 3rem;
width: 70px;
margin: 0 auto;
    
}
  

.fotter p {
font-family: 'Roboto';
font-size: 10pt;
align-items: center;
width: 1200px;
height: 80px;
margin: auto;
display: flex;
text-align: center;
max-width: 1024px;
    
   
    
    

    }