@charset "utf-8";

* {
  margin:0px;
  padding:0px;
  }

body {
     margin:auto;
     font-family: "lato","open sans";
     width: 100%;
     height: auto;
     background-image: url(imagenes/fondorotulo.jpg);
     }

div#circulogo {
               margin-right:auto;
               margin-left:auto;
               margin-top: 45px;
               margin-bottom: 45px;
               display: block;
               width: 150px;
               height: 150px;
               border-radius: 100%;
               background-color: rgba(255,255,255,0.5);
               }

div#textologo {
               margin-right:auto;
               margin-left:auto;
               padding-top: 45px;
               color:darkgreen;
               text-align: center;
               font-size: 35px;
               }

div#nomenclador {
               margin-right:auto;
               margin-left:auto;
               padding-top: 5px;
               text-align: center;
               color:darkgreen;
               font-size: 15px;
              
               }

div#encabezado {
               margin-right:auto;
               margin-left:auto;
               width: 100%;
               height: 200%;
               background-color: rgba(0,0,0,0.0);
               }

div#navegacion {
               margin-right:auto;
               margin-left:auto;
               width: 50%;
               padding-bottom: 10px;
               height: auto;
               }



li {
   margin: 10px;
   width: 100%;
  
   text-align: center;
   list-style-type: none;
   }

a  {display: block;
   color: white;
   font-size: 20px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }

a:hover  {display: block;
   color: skyblue;
   font-size: 20px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }


main {
     padding-top: 15px;
     padding-bottom: 15px;
     margin-right:auto;
     margin-left:auto;
     width: 100%;
     height: auto;
     }

div#mapasitio {
     margin-top: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     background-color: rgba(0,45,0,0.3);
    
    }

div#icono {
     width: 100%;
    }

div#mapasitio a {
     margin: 5px;
     padding: 5px;
    border-radius: 100px;
     width: 100px;
     height: 100px;
    margin-left: auto;
    margin-right: auto;
     background-color: rgba(0,0,0,0.2);}




div#textoprincipal {
     margin-top: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     padding-right:auto;
     padding-left:auto;
     width: 100%;
     height: auto;
     background-color: rgba(0,0,0,0.3);
    }

div#rotulo {
     margin-top: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     padding-right:auto;
     padding-left:auto;
     width: 100%;
     height: auto;
     text-align: center;
     background-color: rgba(0,0,0,0.3);
    }



div#textorotulo {margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: white;
    font-size: 18px;
    }

h1 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: white;
    font-size: 24px;
     }

h2 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: white;
    font-size: 18px;
     }

h3 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: white;
    font-size: 14px;
     } 


footer {
     margin-top: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     padding-right:auto;
     padding-left:auto;
     width: 100%;
     height: auto;
     background-color: rgba(0,0,0,0.3);
     }

div#textofooter {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: white;
    font-size: 18px;
    }

@media screen and (min-width: 400px) {

    div#navegacion {
               margin-right:auto;
               margin-left:auto;
               width: 80%;
               height: auto;
               text-align: center;
               }
    
    nav {display: inline;}
    
    ul {display: inline;
        list-style-type: none;}
    br {overflow: hidden}

    li {display: inline;
       list-style-type: none;
    
       }
    
a  {display: inline-block;
   color: white;
   font-size: 18px;
   margin-left: -10.5px;
   margin-right: -10.5px;
   margin-top: 5px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }

a:hover  {display: inline-block;
   color: skyblue;
   font-size: 18px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }
    }



 div#logorotulo1 {margin-top: 25px;
    padding-right: 5px;
    display:inline;
    }
    
    div#logorotulo2 {margin-top: 25px;
    padding-right: 5px;
    display:inline;
    }
    
    div#logorotulo3 {margin-top: 25px;
    padding-right: 5px;
    display:inline;
    }





@media screen and (min-width: 720px) {
    
div#circulogo {
               margin-right:auto;
               margin-left:15px;
               margin-top: 45px;
               margin-bottom: 45px;
               display: block;
               width: 150px;
               height: 150px;
               border-radius: 100%;
               background-color: rgba(255,255,255,0.5);
               }
    
    div#navegacion {
               margin-right:auto;
               margin-left:15px;
               width: 97%;
               height: auto;
               text-align: left;
               }
    
    nav {display: inline;}
    
    ul {display: inline;
        list-style-type: none;}
    br {overflow: hidden}

    li {display: inline;
       list-style-type: none;
        padding: 45px 0px 45px 0px;
       }
    
a  {display: inline-block;
   color: white;
   font-size: 16px;
   margin-left: -10px;
   margin-right: -10px;
   margin-top: 5px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }

a:hover  {display: inline-block;
   color: skyblue;
   font-size: 16px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.2);
   padding: 5px 15px 5px 15px;
   }
    
    div#logorotulo1 {margin-top: 25px;
    padding-right: 3px;
    float: right;
    }
    
    div#logorotulo2 {margin-top: 25px;
    padding-right: 3px;
    float: right;
    }
    
    div#logorotulo3 {margin-top: 25px;
    padding-right: 3px;
    float: right;
    }

div#textorotulo {
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    color: white;
    font-size: 18px;
    }
    
h1 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    color: white;
    font-size: 24px;
     }

h2 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    color: white;
    font-size: 18px;
     }

h3 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    color: white;
    font-size: 14px;
     }    
    
div#textofooter {
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    }
}