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

}


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

/*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: left;
    }
    
    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: 4px;
        margin-top: 3%;
        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%;
        
    }
}