*{
margin:0px;
padding:0px;
font-family: sans-serif;

}


body {
    width:100%;
    height:100%;
    
}





    /******** menu desplegable ********/
#menu_gral  {
   max-height:50%;
    z-index: 9;
    margin-right:4%;
    margin-top: auto;
    background-color:rgba black;border-radius:4px;
    box-shadow: 5px 5px, rgb(59, 77, 73);
}
#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0;
}
#menu_gral  ul li {
    width: 30%;

}
#menu_gral li a {
    
    font-size: 0.48rem;
    line-height: 0.83rem;
    color: black;
}
#menu_gral li:hover a, #menu_gral li a:focus {
    background: rgba black;
    color: rgb black; 
}

#menu_gral li ul {
    position: absolute;
    overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 33%;
    height: auto;
    margin-left: 1px;
    margin-top: 1px;
    padding: 0 1rem 1rem 1rem;
    background:  rgba(229, 224, 224, 0.27);
    z-index: 5;
}
#menu_gral li li {
    width: 100%; 
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .4rem;
    line-height: 1rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}

/******** menu desplegable ********/
#menu_gral {
    font-family: "Roboto Slab";
    font-weight: bold;
    float: right;
    position: relative;
    width: 97%;
    height: auto;
    margin-right:0%;
    margin-top: auto;
    background-color:rgba black;border-radius:4px;
    box-shadow: 5px 5px, rgb black;
};border-radius:4px;
#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0;
}
#menu_gral  ul li {
    display: inline-block;
    width: 25%;
    position: relative;
}
#menu_gral li a {
    display: block;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 2.5rem;
    color: rgb white;
}
#menu_gral li:hover a, #menu_gral li a:focus {
    background: rgba black;
    color: red;
}

#menu_gral li ul {
    position: absolute;
    width: 0;
    overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 100%;
    margin: 0 -1rem -1rem -1rem;
    padding: 0 1rem 1rem 1rem;
    background:  rgba white;
    z-index: 5;
}
#menu_gral li li {
    display: block;
    width: 100%;
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .9rem;
    line-height: 1.7rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}







/*CELULAR*/

@media all and (min-width:1px) and (max-width:480px){
    div#pagina{
    width:90%;
    margin:auto;
    margin-top: 0px;
    }
    header{
        width: 100%;
        height: auto;
        
    }
    div#contacto{
        width:100%;
        position: relative;
    }
    #contacto ul{
        width:auto;
        padding-bottom:0px;
        
        
    }
    #contacto ul li{
        width:auto;
        list-style: none;
        background-color: black;
        margin-bottom: 2%;
        text-align: center;
        padding: 2px;
        border-radius: 10px;
        
    }
    #contacto ul li a{
        color: white;
        font-family: "oswald";
        font-size: 20px;
        text-decoration: none;
    }
    header div#logo img{
        width: 100%;
        margin: auto;
        position: relative;
        margin-top: 0px;
        height: auto;
        overflow: auto;
        clear: both;
        float: right;
    }
    header div#nav{
        width:100%;
    }
    
    div#nav ul li{
        list-style: none;
    }
    
    
    div#nav ul li img{
        width: 100%;
        float: right;
        margin-top: 2%;
         
    }
    section{
        width: 100%;
        height: auto;
  
    }
    div#contenido{
        margin-top:2%;
        width:100%;
        height:auto;
        background-color: rgb(0,0,0);
        float:left;
        border-radius: 20px;
    }
    
    div.boton img {
        width: auto;
        height: 200px;
        margin:auto;
        position: relative;
        overflow: auto;
        margin-top: 20%;
        margin-left:20%;
        float: auto:
    }
    
    footer {
        margin:auto;
        margin-top:2%;
        width:90%;
        height:auto;
        background-color: rgb(255,255,255);
        float:left;
        padding: 5%;
    }
   footer p{
       font-family: sans-serif;
       color: rgb(168, 168, 168);
       font-weight: 200;
       text-align: center;
       font-size: 10px;
   }
    div#carta {
        width:100%;
        height: auto;
        background-color: black;
        border-radius: 10px;
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 6px;
        text-decoration: none;
    }
    div#carta p{
        color: white;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: 400;
        list-style: none;
    }
    section div#caja{
        width: 80%;
        margin: 6%;
        background-color: white;
        border-radius: 15px;
        position: relative;
        padding: 4%;
        padding-bottom: 2%;
        clear: both;
        
    }
    div#caja p{
        font-family: sans-serif;
        text-align: left;
        font-size: 15px;
        font-weight: 400;
    }
    div#volver {
        padding: 2px;
        margin-top: 2%;
        float: right;
    }
    div#fotolateral img{
        width: 30%;
        height: auto;
        margin-top: 2%;
        float: left;
        position: relative;
        clear: both;
    }
    div#placanegra{
        background-color: black;
        float: right;
        width:60%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
    div#cajaplacas{
        width: 100%;
        height: auto;
        
            
    }
    div#subtitulo{
        width: auto;
    }
    div#subtitulo p{
        color: white;
        font-family: "oswald";
        font-size: 20px;
    }
    div#texto{
        margin-top: 2%;
        float: right;
        width: 70%;
    }
    
    div#texto p{
        color: white;
        font-size: 15px;
        font-weight: lighter;
        
    }
    div#placacian{
        background-color: #189fe6;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
    div#galeria{
        float: right;
        border-radius: 10px;
    }
    div#galeria object{
        width: 100%;
        background-color: #189fe6;
        margin-top: 2%;
        
    }
    div#botoneralateral{
        width: 30%;
        float: left;
        margin-top: 3%;
        height: auto;
        clear: both;
        
    }
    div#botoneralateral ul{
        width:100%;
        
    }
    div#botoneralateral ul li{
        list-style: none;
    }
    
    
    div#botoneralateral ul li img{
        width: 100%;
        float: left;
        margin-bottom: 8%;
        
         
    }
    div#placamagenta{
        background-color: #de107e;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
      
    div#links{
        float: left;
        position: relative;
        width: 100%;
        clear: both;
    }
    div#links a{
        width: 70%;
        font-family: sans-serif;
        color: white;
        padding-left: 3px;
        font-size: 10px;
    }
    div#links p{
        width: 90%;
        font-size: 10px;
        margin-top:10%;
        font-family: "oswald";
        color: white;
    }
    div#placanoticias{
        width: 100%;
        clear: both;
        
    }
    div#placanoticias img{
        width: 50%;
        margin-top: 6%;
        margin-left: 25%;
        
    }


}
/*CELULAR MAS GRANDE*/

@media all and (min-width:481px) and (max-width:500px){
    div#pagina{
    width:60%;
    margin:auto;
    margin-top: 0px;
    }
    header{
        width: 100%;
        height: auto;
        
    }
    div#contacto{
        width:100%;
        position: relative;
    }
    #contacto ul{
        width:100%;
        padding-bottom:0px;
        
        
    }
    #contacto ul li{
        width:25;
        list-style: none;
        background-color: black;
        margin-bottom: 2%;
        text-align: center;
        padding: 2px;
        border-radius: 10px;
        
    }
    #contacto ul li a{
        color: white;
        font-family: "oswald";
        text-decoration: none;
    }
    header div#logo img{
        width: 50%;
        margin: auto;
        position: relative;
        margin-top: 0px;
        height: auto;
        overflow: auto;
        clear: both;
        float: left;
    }
    
    div#nav ul{
        width:100%;
        
    }
    div#nav ul li{
        list-style: none;
    }
    
    
    div#nav ul li img{
        width: 45%;
        float: right;
        margin-top: 4.5%;
        
         
    }
    section{
        width: 100%;
        height: auto;
  
    }
    div#contenido{
        margin:auto;
        margin-top:5%;
        width:90%;
        height:auto;
        background-color: rgb(0,0,0);
        float:left;
        border-radius: 20px;
        position: relative;
        padding: 2%;
    }
    
    div.boton img {
        width: auto;
        height: 200px;
        margin:auto;
        position: relative;
        overflow: auto;
        float:left;
        margin:1%;
        margin-left: 10%;
    }
    
    footer {
        margin:auto;
        margin-top:2%;
        width:90%;
        height:auto;
        background-color: rgb(255,255,255);
        float:left;
        padding: 5%;
    }
   footer p{
       font-family: sans-serif;
       color: rgb(168, 168, 168);
       font-weight: 200;
       text-align: center;
       font-size: 10px;
   }
    div#carta {
        width:100%;
        height: auto;
        background-color: black;
        border-radius: 10px;
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 6px;
        text-decoration: none;
    }
    div#carta p{
        color: white;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: 400;
        list-style: none;
    }
    div#caja{
        width: 80%;
        height: auto;
        float: right;
        margin-top: 2%;
        margin-right: 6%;
        background-color: white;
        border-radius: 15px;
        position: relative;
        padding: 4%;
        clear: both;
    }
    div#caja p{
        font-family: sans-serif;
        text-align: left;
        font-size: 15px;
        font-weight: 400;
    }
    div#volver {
        float: right;
        padding: 4px;
        margin-top: 1%;
    }
    div#fotolateral img{
        width: 30%;
        height: auto;
        margin-top: 2%;
        float: left;
        position: relative;
        clear: both;
    }
    div#placanegra{
        background-color: black;
        float: right;
        width:60%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
    div#cajaplacas{
        width: 100%;
        height: auto;
        
            
    }
    div#subtitulo{
        width: auto;
    }
    div#subtitulo p{
        color: white;
        font-family: "oswald";
        font-size: 20px;
    }
    div#texto{
        margin-top: 2%;
        float: right;
        width: 70%;
    }
    
    div#texto p{
        color: white;
        font-size: 15px;
        font-weight: lighter;
        
    }
    div#placacian{
        background-color: #189fe6;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
    div#galeria{
        float: right;
        border-radius: 10px;
    }
    div#galeria object{
        width: 100%;
        background-color: #189fe6;
        margin-top: 2%;
        
    }
    div#botoneralateral{
        width: 30%;
        float: left;
        margin-top: 3%;
        height: auto;
        clear: both;
        
    }
    div#botoneralateral ul{
        width:100%;
        
    }
    div#botoneralateral ul li{
        list-style: none;
    }
    
    
    div#botoneralateral ul li img{
        width: 100%;
        float: left;
        margin-bottom: 8%;
        
         
    }
    div#placamagenta{
        background-color: #de107e;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
      
    div#links{
        float: left;
        position: relative;
        width: 100%;
        clear: both;
    }
    div#links a{
        width: 70%;
        font-family: sans-serif;
        color: white;
        padding-left: 3px;
        font-size: 10px;
    }
    div#links p{
        width: 90%;
        font-size: 10px;
        margin-top:10%;
        font-family: "oswald";
        color: white;
        
    }
    div#placanoticias{
        width: 100%;
        clear: both;
        
    }
    div#placanoticias img{
        width: 50%;
        margin-top: 6%;
        margin-left: 25%;
        
    }

}

/*TABLET*/

@media all and (min-width:501px) and (max-width:800px){
    div#pagina{
    width:60%;
    margin:auto;
    margin-top: 0px;
    }
    header{
        width: 100%;
        height: auto;
        
    }
    div#contacto{
        width:100%;
        position: relative;
    }
    #contacto ul{
        width:100%;
        padding-bottom:0px;
        
        
    }
    #contacto ul li{
        width:25;
        list-style: none;
        background-color: black;
        margin-bottom: 2%;
        text-align: center;
        padding: 2px;
        border-radius: 10px;
        
    }
    #contacto ul li a{
        color: white;
        font-family: "oswald";
        text-decoration: none;
    }
    header div#logo img{
        width: 50%;
        margin: auto;
        position: relative;
        margin-top: 0px;
        height: auto;
        overflow: auto;
        clear: both;
        float: left;
    }
    
    div#nav ul{
        width:100%;
        
    }
    div#nav ul li{
        list-style: none;
    }
    
    
    div#nav ul li img{
        width: 45%;
        float: right;
        margin-top: 4.5%;
        
         
    }
    section{
        width: 100%;
        height: auto;
  
    }
    div#contenido{
        margin:auto;
        margin-top:5%;
        width:90%;
        height:auto;
        background-color: rgb(0,0,0);
        float:left;
        border-radius: 20px;
        position: relative;
        padding: 2%;
    }
    
    div.boton img {
        width: auto;
        height: 200px;
        margin:auto;
        position: relative;
        overflow: auto;
        float:left;
        margin:1%;
        display: block;
        
    }
    
    footer {
        margin:auto;
        margin-top:2%;
        width:90%;
        height:auto;
        background-color: rgb(255,255,255);
        float:left;
        padding: 5%;
    }
   footer p{
       font-family: sans-serif;
       color: rgb(168, 168, 168);
       font-weight: 200;
       text-align: center;
       font-size: 10px;
   }
    div#carta {
        width:100%;
        height: auto;
        background-color: black;
        border-radius: 10px;
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 6px;
        text-decoration: none;
    }
    div#carta p{
        color: white;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: 400;
        list-style: none;
    }
    
    div#caja{
        width: 35%;
        height: auto;
        float: right;
        margin-top: 2%;
        margin-right: 2%;
        background-color: white;
        border-radius: 15px;
        position: relative;
        padding: 4%;
        padding-bottom: 2%;
    }
    div#caja p{
        font-family: sans-serif;
        text-align: left;
        font-size: 15px;
        font-weight: 400;
    }
    div#volver {
        float: right;
        padding: 4px;
        margin-top: 1%;
    }
    div#fotolateral img{
        width: 30%;
        height: auto;
        margin-top: 2%;
        float: left;
        position: relative;
        clear: both;
    }
    div#placanegra{
        background-color: black;
        float: right;
        width:60%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
    div#cajaplacas{
        width: 100%;
        height: auto;
        
            
    }
    div#subtitulo{
        width: auto;
    }
    div#subtitulo p{
        color: white;
        font-family: "oswald";
        font-size: 20px;
    }
    div#texto{
        margin-top: 2%;
        float: right;
        width: 70%;
    }
    
    div#texto p{
        color: white;
        font-size: 15px;
        font-weight: lighter;
        
    }
    div#placacian{
        background-color: #189fe6;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
    div#galeria{
        float: right;
        border-radius: 10px;
    }
    div#galeria object{
        width: 100%;
        background-color: #189fe6;
        margin-top: 2%;
        
    }
    div#botoneralateral{
        width: 30%;
        float: left;
        margin-top: 3%;
        height: auto;
        clear: both;
        
    }
    div#botoneralateral ul{
        width:100%;
        
    }
    div#botoneralateral ul li{
        list-style: none;
    }
    
    
    div#botoneralateral ul li img{
        width: 100%;
        float: left;
        margin-bottom: 8%;
        
         
    }
    div#placamagenta{
        background-color: #de107e;
        float: right;
        width:60%;
        height: auto;
        margin-top: 3%;
        border-radius: 20px;
        padding: 4%;
    }
      
    div#links{
        float: right;
        width: 70%;
        position: relative;
    }
    div#links a{
        width: 70;
        font-family: sans-serif;
        color: white;
        padding-left: 3px;
        position: relative;
    }
    div#links p{
        width: 90%;
        height:30px;
        margin-top:10%;
        font-family: "oswald";
        color: white;
        position: relative;
    }
    div#placanoticias{
        width: 100%;
        clear: both;
        
    }
    div#placanoticias img{
        width: 50%;
        margin-top: 6%;
        margin-left: 25%;
        
    }
    

}

/*PC*/

@media all and (min-width:801px) and (max-width:2100px){
    div#pagina{
    width:80%;
    margin:auto;
    margin-top: 0px;
    }
    header{
        width: 100%;
        height: auto;
        
    }
    div#contacto{
        width:100%;
        position: relative;
    }
    #contacto ul{
        width:40%;
        height: 10%;
        padding-bottom:0px;
        float: right;
        background-color: black;
         border-radius: 8px;
        
        
    }
    #contacto ul li{
        list-style: none;
        margin-bottom: 2%;
        margin-top: 2%;
        float:right; 
        
    }
    #contacto ul li a{
        color: white;
        font-family: "oswald";
        text-decoration: none;
        text-align: center;
        margin-right:20px;
  
    }
    header div#logo img{
        width: 18%;
        margin: auto;
        position: relative;
        margin-top: -41px;
        height: auto;
        overflow: auto;
        clear: both;
        float: left;
    }
    
    div#nav ul{
        width:100%;
        
    }
    div#nav ul li{
        list-style: none;
    }
    
    
    div#nav ul li img{
        width: 15%;
        float: right;
        margin-top: 22%;
        margin-left: 5%;
        
         
    }
    section{
        width: 100%;
        height: auto;
  
    }
    div#contenido{
        margin:auto;
        margin-top:1%;
        width:100%;
        height:auto;
        background-color: rgb(0,0,0);
        float:left;
        border-radius: 20px;
        position: relative;
        padding: 2%;
    }
    
    div.boton img {
        display: block;
        width: auto;
        height: 230px;
        position: relative;
        overflow: auto;
        margin-left:3%;
        margin-right: 1%;
        margin-top: 2%;
        margin-bottom: 2%;
        float: left;
        
        
    }
    
    footer{
        margin:auto;
        margin-top:2%;
        width:90%;
        height:auto;
        background-color: rgb(255,255,255);
        float:left;
        padding: 5%;
    }
    footer{
        width: 94%;
        padding-top: 0px;
        padding-bottom: 10px;
        margin-top: 10px;
        
    }
   footer p{
       width: 100%;
       font-family: sans-serif;
       color: rgb(168, 168, 168);
       font-weight: 200;
       text-align: center;
       font-size: 10px;
   }
    div#carta {
        width:100%;
        height: auto;
        background-color: black;
        border-radius: 10px;
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 6px;
        text-decoration: none;
    }
    div#carta p{
        color: white;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: 400;
        list-style: none;
    }
    
    
    
    
    div#caja{
        width: 60%;
        height: auto;
        float: right;
        margin-top: 2%;
        margin-right: 2%;
        background-color: white;
        border-radius: 15px;
        position: relative;
        padding: 4%;
        padding-bottom: 2%;
    }
    div#caja p{
        font-family: sans-serif;
        text-align: justify;
        font-size: 15px;
        font-weight: 400;
    }
    div#volver {
        float: right;
        padding: 4px;
        margin-top: 2%;
    }
    div#fotolateral img{
        width: 20%;
        height: auto;
        margin-top: 1%;
        float: left
    }
    div#placanegra{
        background-color: black;
        float: right;
        width:70%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
    div#cajaplacas{
        width: 100%;
        height: auto;
        
            
    }
    div#subtitulo{
        width: 30%;
        float: left;
    }
    div#subtitulo p{
        color: white;
        font-family: "oswald";
        font-size: 20px;
    }
    div#texto{
        float: right;
        width: 70%;
    }
    
    div#texto p{
        color: white;
        font-size: 15px;
        font-weight: lighter;
        
    }
    div#placacian{
        background-color: #189fe6;
        float: right;
        width:70%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
    div#galeria{
        float: right;
        border-radius: 10px;
    }
    div#galeria object{
        width: 500;
        background-color: #189fe6;
        clear: both;
    }
    div#botoneralateral{
        width: 20%;
        float: left;
        margin-top: 1%;
        height: 500px;
        
    }
    div#botoneralateral ul{
        width:100%;
        
    }
    div#botoneralateral ul li{
        list-style: none;
        float: left;
    }
    
    
    div#botoneralateral ul li img{
        width: 100%;
        float: left;
        margin-bottom: 8%;
        
         
    }
    div#placamagenta{
        background-color: #de107e;
        float: right;
        width:70%;
        height: auto;
        margin-top: 1%;
        border-radius: 20px;
        padding: 4%;
    }
      
    div#links{
        float: right;
        width: 70%;
    }
    div#links a{
        width: 70%;
        font-family: sans-serif;
        color: white;
        padding-left: 6px;
    }
    div#links p{
        width: 70%;
        height:30px;
        margin-top: 2%;
        font-family: "oswald";
        color: white;
        
        
        
        
        
    }
    div#placanoticias{
        width: 100%;
        clear: both;
        
    }
    div#placanoticias img{
        width: 50%;
        margin-top: 6%;
        margin-bottom: 6%;
        margin-left: 25%;
        
    }
    
   
    
    
}