@charset "utf-8";


*{box-sizing: border-box;
margin: 0em;
padding: 0em;
border: 0em;}

img{max-width:  100%;}



body {background-color: #ffffff;

}


header{ 
    justify-content: space-between;
    align-content: center;
    padding: 1.5em 1em 1em 1em;
   
}

    #redes {
        display: flex;
        justify-content: flex-end;
        position:relative;
        top: 92%;
        bottom: 0em;
        right: 0em;
        left: 0em;
        
       
   }

#redes a{ margin-right: 0.5em;}

  #instagram {width: 1.8em;}
    
  #whatsapp { width: 1.8em; }
    
  

#llamamenu {
    background-color: black;
    color: white;
    margin: 0.5em 0em 0.5em 1em;
    width: 3em;
    cursor: pointer;
    position: fixed;
    z-index: 9999;
}



header ul{
position: fixed;
background-color: rgba(0, 0, 0, 0.64);
top: 100%;
bottom: 0em;
right: 0em;
left: 0em;
padding-top: 7em;    
text-align: center;
transition: all .5s ease;}


header ul li {
    list-style: none;
    margin: 3em 1em 0em 1em;
}

header ul a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-family: sans-serif;
    

    }

.visible{
    top: 0%;
bottom: 0em;
right: 0%;
left: 0em;
}


.imgmenu {width: 2em;
    border-radius: 1em;
    margin-right: 0.1em;}







main {
    display: flex;
    flex-wrap: wrap;
    padding: 0em;
    text-align: center;
}

#jadir {
    max-width: 22em;
    line-height: 2em;
    padding-top: 0em;
    margin: auto;
   
     
}

h1 {
    font-family:inherit;
    color: rgb(0, 0, 0);
    font-size: 1.5em;
    text-align: center;
    margin: 0.5em 0em 0.5em 0em;
}

#foto{
    text-align: center;
    margin: 0.5em;
}

#foto img {
    opacity: 100%;
    width: 19em;
    

  
        
}





#jadir p {
    margin: auto;
    text-align:left;
    width: 19em; 
}


h2 {
    
    font-family: sans-serif;
    font-size: 1em;
    padding: 0.3em 0.3em 0.3em 0.3em;
    margin: 2em 0em 1.5em 0.5em;
    color: rgb(0, 0, 0);
    width: 10em;
    text-align: center;
    border: 1px solid gray;
     box-shadow:    inset 0 -0em 1em rgba(0, 0, 0, 0.1), 
             0em 0.1em 0.5em rgba(0, 0, 0, 0.3);
}

#jadir li{
   margin: 1em 0em 1em 1em;
    text-align: start;
}
    

#jadir ul li a{
    text-decoration: none;
    color: rgb(118, 118, 118);
    padding: 0.5em;
} 

#materiasaprobadas {
    text-align: center;
    margin: 3em 0em 4em 0em;
    
}

#materiasaprobadas a{
   
    padding: 0.5em;
    text-decoration: none;
    background-color: black;
    color: white;
    font-family: sans-serif;
    border-radius: 0.5em;
}

#materiasaprobadas a:hover {
    color: rgb(37, 109, 147);
}


#contenedor {
    display: flex;
    flex-wrap: wrap;
}


#acumar {
    
    
   
    
}

#acumar{
    
    
    margin: 1em auto 1em auto;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    max-width:  90%;
    padding:0em 0em 2em 0em;
    text-align: center;
    border: 1px solid #c6c6c6;
    box-shadow:    inset 0 -0em 3em rgba(0, 0, 0, 0.1), 
        0em 0.3em 1em   rgba(0, 0, 0, 0.3)}


#logomoron{
   
     background-image:url(imagenes/moronsurco.jpg);
    padding: 0em;
    margin: 0em;
}


h3{
    color: rgb(0, 0, 0);
    margin: 2em 3em 1em 3em;
    
}

#acumar p{
    margin: 0em 1.5em 0em 1.5em;
    text-align: left;
}


.imge {
    
    margin: 2em auto 0em auto;
    width: 70%;
  
}

#boceto {
    text-align: center;
    margin:2.5em auto 2.5em auto;
    
}

#boceto a {
    padding: 0.5em;
    text-decoration: none;
    background-color: black;
    color: white;
    font-family: sans-serif;
    border-radius: 0.5em
}

#boceto a:hover{
   
     color: rgb(37, 109, 147);
    
}


#datos {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    padding:1em;
    margin: 1em;
    border: 1px solid #c6c6c6;

 }

#datos div{
    margin: 2em 0em 0em 0em;
}

#datos h4{
    margin: 1em auto 0em auto;
}

#datos a{
    text-decoration: none;
    color: black;
    font-weight: 800;
}


#datos ul {
    list-style: none;
    margin-top: 1em;
}

#datos div ul li {
    text-align: left;
}




footer p {
   
    padding: 1em;
    background-color: black;
    color: rgb(116, 116, 116)
}









@media screen and (min-width: 640px) {
    body{background-color: #f2f2f2 }
  
    
    
    #redes {
        display: flex;
        position: fixed;
        top: 2%;
        bottom: 0em;
        right: 71em;
        left: 0%;
        padding-right: 0em;
   }
    
    #redes a{
        padding-left: 2em;
    }
    
    #instagram {width: 1.8em;}
    
    #instagram:hover{opacity: 30%;}
    
    #whatsapp { width: 1.8em; }
    
    #whatsapp:hover{opacity: 30%;}
    
    #llamamenu{color: #ffffff;
    position: relative;
    z-index: -1;}
    
   
    header ul{ 
        display: flex;
          background-color: #1e9faa;
        top: 0em;
        bottom: 0%;
        right: 0%;
        left: 0em;
        padding: 1.2em 0em 0em 30em;
        margin: 0em 0em 0em 0em;
        align-items: baseline;
        width: 100%;
        }
    
    header ul li {
        margin: 0em 10em 0em 0em;
       
        
   }
    header ul li a{ color: #000000;
    font-weight: 700}
    
    header ul li a:hover{color: rgb(193, 193, 193);}
    
   
    .visible{
         
        top: 0em;
        bottom: 92%;
        right: 0em;
        left: 0em;
    }
  
    
  
    
    main {background-color: #f2f2f2}
    
   
    
    .imgmenu {width: 2em;
    border-radius: 1em;
    margin-right: 0.5em;}
    
    #jadir {
        background-color: white;
    margin: 1em;
        box-shadow:    inset 0 -0em 3em rgba(0, 0, 0, 0.1), 
             0em 0.3em 1em   rgba(0, 0, 0, 0.3);
    }
    
    
#contenedor {
    margin: 1em auto 1em auto;
    display: flex;
    flex-direction: column;
    max-width: 70%;
   
    

 
}
    
    
    
    
    #jadir {
    max-width: 18em;
    line-height: 2em;
    padding-top: 1em;
    margin: 1em 1em 1em 1em;
   
     
}

h1 {
    font-size: 1.1em;
    margin: 1em 0em 1em 0em;
}

#foto{
    margin: 0.5em 2em 0em 2em;
}

#foto img {
    width: 15em;
}

#jadir p {
    text-align:left;
    width: 13em; 
}


h2 {
    
    
    margin: 3em auto 2em auto;
    color: rgb(0, 0, 0);
    width: 10em;
}

#jadir li{
   margin: 1em 0em 1em 2.2em;
    text-align: start;
}
    
    
    #materiasaprobadas{
        margin-top: 4em;
        
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #acumar{
     background-color: #ffffff;
   max-width:  100%;
    margin: 0em auto 4em auto;
    padding:1em 1em 2em 1em;
    text-align: center;
            box-shadow:    inset 0 -0em 3em rgba(0, 0, 0, 0.1), 
             0em 0.3em 1em   rgba(0, 0, 0, 0.3);
}
    
    #logomoron {
        padding: 0em;
        
        width: 100em;
    }
    
    #acumar h3 {
        margin: 1.5em auto 1em auto;
        padding: 0em 10em 0em 10em;
    }
    
    #acumar p {margin: 0em auto 1em auto}
    
    #acumar img{
     width: 30%;
        margin: 1em auto 0em auto;
    }   
    
    #boceto{
        margin: 1em 7em 3em 7em;
    }
    
    
    
    
    
    
    
  #datos{
      background-color: white;
     
    max-width: 100%;
    padding:1em;
    margin-top: 2em;
    border: 1px solid #c6c6c6;
    box-shadow:    inset 0 -0em 3em rgba(0, 0, 0, 0.1), 
        0em 0.3em 1em   rgba(0, 0, 0, 0.3)}
    
      
    #datos h4{
        margin: 1em auto 1em auto;
        text-align: center;
        padding: 0em 30% 0em 30%;
       
    }
    
    #datos div{
        margin: 1em auto 0em auto;
        max-width: 33%;
        text-align: center;
        
    }
 
   
    #datos div ul li {
    font-size: 0.8em;
        text-align: center;
}


    
}