@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

header nav ul  {
    list-style: none;
        margin: 0;
        padding: 2em;
        display:flex;
     flex-direction: row;
     align-content: space-around;
     justify-content: space-around;
     font-family:'Roboto', sans-serif;
     font-kerning: normal;
     font-size: 0.6em;
    color: rgb(1, 113, 87);
    text-decoration: none;
     
     
     }
header  a  {
     font-family:'Roboto', sans-serif;
     font-kerning: normal;
     font-size: 1em;
    color: rgb(1, 113, 87);
    padding: 0.3em;
    font-size: 1.5em;
    list-style: none;
    text-align: center;
     
      }

header h1 {
    color:rgb(255, 57, 57);
    font-family: 'Roboto', sans-serif;
    font-size: 4em;
    border: none;
    margin-bottom: 1em;
    text-align: center;
    font-family:'Roboto', sans-serif;
    
    
    
}
main  h2 {
     font-family:'Playfair Display', serif;
    color: rgb(255, 57, 57);
    font-size:3em;
    font-weight: 500;
    background-color: color: rgb(1, 113, 87);
    margin-bottom: auto;
    
    }
main  h3 {
     font-family:'Playfair Display', serif;
    color: rgb(255, 57, 57);
    font-size:3em;
    font-weight: 500;
    background-color: color: rgb(1, 113, 87);
    margin-bottom: 15px;
    }
.materias1er li {
     font-family:'Roboto', sans-serif;
    color: rgb(1, 113, 87);
    font-size:1em;
    font-weight: 500;
    margin-bottom: auto;
    list-style: none;
    }
 ul {
     font-family:'Roboto', sans-serif;
    color: rgb(255, 57, 57);
    font-size:2em;
    font-weight: 500;
    margin-bottom: auto;
    list-style: none;
    }
.materias2do li {
     font-family:'Roboto', sans-serif;
    color: rgb(1, 113, 87);
    font-size:1em;
    font-weight: 500;
    margin-bottom: auto;
    list-style: none;
    }

    
    main section p {
    font-family: 'Roboto', sans-serif; }
header img {
    border-radius: 10px;
    height:18em;
    margin-bottom: 2em;
    margin-top: 1em;
    align-content: center;
    image-orientation: center;
    display:block;
    margin:auto;
    }
div img {
   padding: 5em;
  margin-top: 2em;
    }
main img {
   padding: 5em;
  margin-top: 2em;
  image-orientation: center;
  
    }
main p  {
    font-family:'Roboto', sans-serif;
    color: rgb(1, 113, 87);
    font-size:0,5em;
    font-weight: 500;
    background-color: color: rgb(1, 113, 87);
    }
.redes  {
    text-align: center;
    
    }
aside {
   background-color: rgb(255, 57, 57);  
    }
.contacto  {color: rgb(255, 255, 255);
    font-size: 2em;
    list-style: none;
    text-align: center;
    }
    footer{
        font-family:'Roboto', sans-serif;
        font-size:0.8em;
        color: rgb(255, 57, 57);
        }
        
    
.slider {
        
    width: 95%;
    margin: auto;
    overflow: hidden;
    margin-top: 40px;
}

.slider ul {
    display: flex;    
    padding: 0;
    width: 400%;
    
    animation: cambio 20s infinite;
    animation-direction: alternate ;
}

.slider li {
    width: 100%;    
    list-style: none;
    
}
.slider img {
    width: 100%;    
    
    
}

@keyframes cambio {
   0%  { margin-left: 0%}
   20%  { margin-left: 0%} 
    
    
      25%  { margin-left: -100%}
   45%  { margin-left: -100%} 
    
     50%  { margin-left: -200%}
   70%  { margin-left: -200%} 
    
      75%  { margin-left: -300%}
   100%  { margin-left: -300%} 
}
@media (max-width:768px){
    form { width: 75%;
    }
}
@media (max-width:480px){
    form { width: 95%;
    }
}