body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    font-size: 17px;
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
        text-decoration: none;
}

div#pagina {
    width: 90%;
    height: 100%;
    margin: auto;
    background-color: #E2007A;
}


header {
    width: 90%;
    margin: auto;
    background-color: #fff;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

article {
    overflow: hidden;
    clear: both;
    background-color: rgb(255, 255, 255);
    margin-top: 1rem;
    padding: 1rem;
}

section{
margin: 0rem;
}

footer{
    text-align: center;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 60%;
    color: #fff;
}



h1 {
font-family: 'Anton', sans-serif;
    width: 90%;
    font-size: 200%;
    line-height: 2.4rem;
    color: #E2007A;
    font-weight: 300;
    text-align: center;
    margin: auto;
    background-color: rgba(226, 0, 122, 0.2)
}

h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 200;
    font-size: 120%;
    color: #009EE0;
    margin-bottom: 0rem;
    background-color: rgba(0, 158, 224, 0.15);
    line-height: 1.5rem;
    padding: 1%;

}

h3 {
    background-color: rgba(0, 158, 224, 0.06);
    font-size: 100%;
    color: #009EE0;
    margin-bottom: 0rem;
    padding: 2%;
}

p{
    margin: 0rem;
    font-size: 100%;
}


li{
    width: 90%;
    margin: auto;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
}

a{
    font-family: 'Anton', sans-serif;
    font-weight:100;
    font-size: 120%;
   margin:0rem;
     color: #fff;
    text-decoration: none;
        list-style: none;
}


img{
width: 100%;
}

div#logo img{
    width: 100%;
    height: 100%;
    margin: 0rem;
} 

header li{    background-color: #E2007A;
}

 
ul{padding: 0rem;}


#redes{margin-left: 5%}

#redes ul li {color: #fff;
    background-color: rgb(0, 0, 0);
    width: 9%;
    margin: 1%;
    float: left; 
    padding: 1%;
    
}


#menu li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
    padding: 0rem;
}

#menualumno li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    color: white;
    list-style: none;
    text-align: center;
    padding: 0rem;
}

#gruposfacebook li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
    padding: 0rem;
}

#mapa li{
}

#mapa2 li{
    background-color: rgba(226, 0, 122, 0.42);
}



#gruposfacebook{
background-color: rgba(255, 237, 0, 0.15)}


.link{
    color: rgb(0, 0, 0);
font-size: 80%;
}


.textodestacado{
    font-weight: bold;
    font-size: 100%;
}

.vermas{
    color: rgb(0, 0, 0);
font-size: 80%;
}


/*reglas generales y especificas para cels*/

@media all and (min-width: 320px) {
  /*hereda lo anterior y sólo las modificaciones para cels mayores */
}




@media all and (min-width: 640px)  {
  /*hereda lo anterior y sólo las modificaciones para tabletas mayores */
    


body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    font-size: 17px;
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
        text-decoration: none;
}

div#pagina {
    width: 90%;
    height: 100%;
    margin: auto;
    background-color: #E2007A;
}


header {
    width: 90%;
    margin: auto;
    background-color: #fff;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

article {
    overflow: hidden;
    clear: both;
    background-color: rgb(255, 255, 255);
    margin-top: 1rem;
    padding: 1rem;
}

section{
margin: 0rem;
    float: left;
    margin-left: 1rem;
}

footer{
    text-align: center;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 60%;
    color: #fff;
}



h1 {
font-family: 'Anton', sans-serif;
    width: 90%;
    font-size: 200%;
    line-height: 2.4rem;
    color: #E2007A;
    font-weight: 300;
    text-align: center;
    margin: auto;
    background-color: rgba(226, 0, 122, 0.2)
}

h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 200;
    font-size: 120%;
    color: #009EE0;
    margin-bottom: 0rem;
    background-color: rgba(0, 158, 224, 0.15);
    line-height: 1.5rem;
    padding: 1%;

}

h3 {
    background-color: rgba(0, 158, 224, 0.06);
    font-size: 90%;
    color: #009EE0;
    margin-bottom: 0rem;
    padding: 2%;
}

p{
    margin: 0rem;
    font-size: 90%;
}


li{
    width: 90%;
    margin: auto;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
}

a{
    font-family: 'Anton', sans-serif;
    font-weight:100;
    font-size: 120%;
   margin:0rem;
     color: #fff;
    text-decoration: none;
        list-style: none;
}


img{
width: 100%;
}

div#logo img{
    float: left;
    width: 30%;
    height: 100%;
    margin: 0rem;
} 
    
    #inicio{
       float: left;
    width: 70%;
    height: 100%;
    margin-top: 1rem;}

header li{    background-color: #E2007A;
}

 
ul{padding: 0rem;}


#redes{margin-left: 30%;
margin-top: 0rem;}

#redes ul li {color: #fff;
    background-color: rgb(0, 0, 0);
    width: 10%;
    margin: 0.5%; 
    padding: 1%;
    
}


#menu li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
    padding: 0rem;
}

#menualumno li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    color: white;
    list-style: none;
    text-align: center;
    padding: 0rem;
}
#zachin{
width: 47%;
    float: left;
    margin-right: 1rem;
}
    #nosotros{
width: 47%;
        float: left;
}
#gruposfacebook li{
    width: 100%;
    background-color: #009EE0;
    margin: 0rem;
    margin-bottom: 1%;
    font-size: bold;
    list-style: none;
    text-align: center;
    padding: 0rem;
}

#mapa li{
}

#mapa2 li{
    background-color: rgba(226, 0, 122, 0.42);
}



#gruposfacebook{
background-color: rgba(255, 237, 0, 0.15)}


.link{
    color: rgb(0, 0, 0);
font-size: 80%;
}


.textodestacado{
    font-weight: bold;
    font-size: 100%;
}

.vermas{
    color: rgb(0, 0, 0);
font-size: 80%;
}

#fotozachin{
width: 47%;
float: left;
margin-right: 1rem;}
    
    #textofotozachin{
    width: 47%;
float: left;
    overflow: hidden;}

#ideas{
    clear: both;
overflow: hidden;
}

}



@media all and (min-width: 840px)  {
  /*hereda lo anterior y sólo las modificaciones para tabletas mayores */
    
    body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    font-size: 17px;
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
        text-decoration: none;
}
    
    
div#pagina {
    width: 95%;
    height: 100%;
    margin: auto;
    background-color: #E2007A;
}


header {
    width: 95%;
    margin: auto;
    background-color: #fff;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

article {
    overflow: hidden;
    clear: both;
    background-color: rgb(255, 255, 255);
    margin-top: 1rem;
    padding: 1rem;
}

    
    div#logo img{
    float: left;
    width: 15%;
    height: 100%;
    margin: 0rem;
} 
    
#gruposfacebook{
width: 46%}
    #gruposfacebook h2{
width: 210%}
     
    #gruposfacebook li{
width: 210%}
      
    
    
    #fotos img{
    width: 48%;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;}
}

#zachin img{
width: 50%;
margin-top: 1rem;}