@charset "utf-8";                                                                                @charset "utf-8";
 
*{margin:0;}
body {
    background-color: #F8F8F8;
    font-family: Verdana, Geneva, sans-serif;    
}
h2,h3,h4{color:#686868;}

 
#contenedor #empresa {
    box-sizing:border-box;
    width: 100%;    
    border: thin solid #CECECE;  
    background-color: #F6F6F6;   
    padding: 2%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
}
#contenedor #galeria1 {
/*Espacio para 6 fotos y fondo gris*/
    box-sizing:border-box;
    width: 100%;             
    border: thin solid #CECECE;  
    background-color: #BEBEBE;   
    padding: 2%;
    margin-top: 5px;
    margin-height: 5px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
} 
#contenedor #galeria2 {
/*Espacio 50 % alto, para 6 fotos y fondo blanco*/
    box-sizing:border-box;
    width: 100%;  
    border: thin solid #CECECE;  
    background-color: #FFFFFF;   
    padding: 1%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
} 
#contenedor #galeria3 {
/*Espacio 50 % alto, para 6 fotos y fondo blanco*/
    box-sizing:border-box;
    width: 100%;  
    border: thin solid #CECECE;  
    background-color: #FFFFFF;   
    padding: 1%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
} 
#contenedor #galeria4 {
/*Espacio para 6 fotos y fondo blanco*/
    box-sizing:border-box;
    width: 100%;  
    border: thin solid #CECECE;  
    background-color: #FFFFFF;   
    padding: 2%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
} 
#contenedor #galeria5 {
/*Espacio 50 % ancho, para 3 fotos y fondo blanco*/
    box-sizing:border-box;
    width: 100%;  
    border: thin solid #CECECE;  
    background-color: #FFFFFF;   
    padding: 2%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
} 
#contenedor #galeria6 {
/*Espacio 50 % ancho, para 2 fotos y fondo blanco*/
    box-sizing:border-box;
    width: 100%;  
    border: thin solid #CECECE;  
    background-color: #FFFFFF;   
    padding: 1%;
    margin-top: 5px;
    margin-height: auto;
    margin-right: auto;
    margin-left: auto;
  
} 
/*-------------------------------------------------------------------------------------------------------*/ 
 
/*Diseño para el móvil con
ancho de la resolución <=480px 
dejamos 1 columna debajo de otra*/
 
 
/*Adaptación de las fuentes*/
    body{font-size: 0.8em;}
 
/*Adaptación del contenedor general*/
#contenedor {
    width: 85%;
    margin: 2% auto 2% auto;
    padding: 2%;
    border: thin solid #696969;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    background-color: #FFF;
}
#contenedor header {
    padding: 3px;
    background-color: #FFFFFF;
    border-radius: 10px 10px 0 0;
     
} 

/*Adaptación de la imagen*/

#contenedor header img {
    width:100% !important;
    height: auto;
}

#contenedor #columna1 img {
    width:100% !important;
    height: auto;
}   
#contenedor #columna3 img {
    width:100% !important;
    height: auto;     
}
#contenedor #empresa img {
    width:30% !important;
    height: auto;     
} 
#contenedor #galeria1 img {
    width:100% !important;
    height: auto;     
}  
#contenedor #galeria2 img {
    width:100% !important;
    height: auto;     
}  
#contenedor #galeria3 img {
    width:100% !important;
    height: auto;     
} 
#contenedor #galeria4 img {
    width:100% !important;
    height: auto;     
} 
#contenedor #galeria5 img {
    width:100% !important;
    height: auto;     
} 
#contenedor #galeria6 img {
    width:100% !important;
    height: auto;     
}     
 #contenedor #empresa {    
    width: 100%;
    height: auto;    
} 
/*Adaptación del mapa */ 
#contenedor .google-maps {
position: relative;
padding-bottom: 45%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}       

/*Adaptación del menú */
#contenedor nav {
    margin-top: 5px;
    background-color: #F0F0F0;
    border-top-width: thin;
    border-right-width: 0;
    border-bottom-width: thin;
    border-left-width: 0;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #CCC;
    border-right-color: #CCC;
    border-bottom-color: #A0A0A0;
    border-left-color: #CCC;
     
}
#contenedor nav ul {
    list-style-type: none;
    margin-left: -40px;
}
#contenedor nav ul li {
     
    padding: 3px;
    border: thin solid #BEBEBE;
    margin: 1px auto 1px auto;
    text-align: center;
    border-radius:5px;
    background-color: #B0B0FF;
     
     
}
#contenedor nav ul li a {
    color: #686868;
    text-decoration: none;
}
 
#contenedor nav ul li a:hover {
            background: #4b545f;
            background: linear-gradient(#4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(#4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(#4f5964 0%,#5f6975 40%);
             
            border-radius:7px;
            color: #fff;
        }
/* CABECERA */
#contenedor header #cabecera1 {
    box-sizing:border-box;
    width: 100%;
    background-color: #FFFFFF;   
    padding: 0%;
    margin-top:  0px;
    height: auto;
    margin-right: auto;
    margin-left: auto;     
} 
#contenedor header #cabecera2 {
    font-style: italic;
    color: #040100;
    text-align: left;     
    padding:  0px; 
    box-sizing:border-box;
    width: 100%;
    background-color: #FFFFFF;      
    padding: 0%;
    margin-top:  0px;
    height: auto;
    margin-right: auto;
    margin-left: auto;     
} 
 
/* COLUMNAS */
#contenedor #columna1 {
    box-sizing:border-box;
    width: 100%;
    border: thin solid #CECECE;  
    background-color: #F6F6F6;   
    padding: 2%;
    margin-top: 20px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
     
}
#contenedor #columna2 {
    box-sizing:border-box;
    padding: 2%;
    width: 100%;
    margin-top: 20px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
}
#contenedor #columna2 header h3 {
    text-align: center;
    background-color: #E9E9E9;
    color: #686868;
    margin-bottom: 10px;
}
 
#contenedor #columna3 {
    box-sizing:border-box;
    width: 100%;
    border: thin solid #CECECE;
    background-color: #F6F6F6;
    padding: 2%;
    margin-top: 20px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}
#contenedor footer {
    clear: both;
    height: 50px;
    border-top-width: thin;
    border-top-style: dotted;
    border-top-color: #515151;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    background-color: #F6F6F6;
    font-style: italic;
    text-align: center;
    border-radius: 0 0 10px 10px;
    padding-top: 40px;
         
}


/*-------------------------------------------------------------------------------------------------------*/



/*Adaptación para tabletas con
ancho de la resolución >=480px 
Estructura:
cabecera
menu
columna1 columna2
columa3
pie*/
 
 
@media only screen and (min-width: 480px){
 
/*Adaptación del contenedor general*/  
#contenedor {
    width: 85%;
    margin: 2% auto 2% auto;
    padding: 5px;
    border: thin solid #696969;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    background-color: #FFF;
}
 
/*Adaptación del menú*/
#contenedor nav ul li {
    display: inline-block;
    padding: 3px;
    border: none;
    margin: 0px;
    background-color: #F0F0F0;
    text-align: left;     
}

/*Adaptación de la imagen*/

#contenedor header img {
    width:65% !important;
    height: auto;
} 
/*Adaptación de la imagen*/
#contenedor header img {
    width:65% !important;
    height: auto;
} 
/*Adaptación de la cabecera*/
#contenedor header {
    width: 100%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    float:left;
    background-color: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
} 
#contenedor header #cabecera1 {
    width: 60%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    float:left; 
}   
#contenedor header #cabecera2 {
    width: 40%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    float:left;
}     
/*Adaptación de las columnas*/ 
#contenedor #columna1 {
    width: 50%;;
    padding: 2%;
    margin-top: 40px;
    float:left;
}      
#contenedor #columna2 {
     
    padding: 2%;
    width: 50%;
    margin-top: 40px;
    float:left;
}
 
#contenedor #columna3 {
     
    width: 100%;
    padding:2%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    float:none;
    margin-bottom:20px;
}
/*Adaptación de empresa */ 
#contenedor #empresa img {
    width:20% !important;
    height: auto;     
}
#contenedor #empresa {    
    width: 100%;    
    height: 400px;  
}
/*Adaptación galeria*/
#contenedor #galeria1 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria2 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria3 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria4 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria5 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria6 img {
    width:48% !important;
    height: auto;      
}
#contenedor #galeria1 {    
    width: 100%;    
    height: 100%;  
}
#contenedor #galeria2 {    
    width: 100%;    
    height: 100%;  
}
#contenedor #galeria3 {    
    width: 100%;    
    height: 100%;  
}
#contenedor #galeria4 {    
    width: 100%;    
    height: 100%;  
}
#contenedor #galeria5 {    
    width: 100%;    
    height: 100%;  
}
#contenedor #galeria6 {    
    width: 100%;    
    height: 100%;  
}
    }

/*-------------------------------------------------------------------------------------------------------*/



/*Adaptación para ordenadores de escritorio con
ancho de la resolución >=769px 
Estructura:
    cabecera
    menu
    columna1 columna2 columa3
    pie
*/
     
@media only screen and (min-width: 769px){
 
/*Adaptación del contenedor general*/  
#contenedor {
    width: 85%;    
    margin: 5px auto 5px auto;
    padding: 5px;
    border: thin solid #696969;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    background-color: #FFF;
}

/*Adaptación de la imagen*/

#contenedor header #cabecera1 img {
    width: 40% !important;
    height: auto;     
} 
*#contenedor #empresa img {
    width: 10% !important;
    height: auto;     
}  
*#contenedor #galeria1 img {
    width: 19% !important;
    height: auto;    
} 
*#contenedor #galeria2 img {
    width: 10% !important;
    height: auto;    
}  
*#contenedor #galeria3 img {
    width: 14% !important;
    height: auto;    
}  
*#contenedor #galeria4 img {
    width: 19% !important;
    height: auto;    
}  
*#contenedor #galeria5 img {
    width: 25% !important;
    height: auto;    
}  
*#contenedor #galeria6 img {
    width: 48% !important;
    height: auto;    
}  
/*Adaptación de la cabecera*/
#contenedor header {
    width: 100%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    float:left;
    background-color: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
} 
#contenedor header #cabecera1 {
    width: 70%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    float:left; 
}   
#contenedor header #cabecera2 {
    width: 30%;
    height: auto;
    padding: 0px;
    margin-top: 2%;
    float:left;
}   
/*Adaptación de las columnas*/ 
#contenedor #columna1 {
     
    width: 25%;
    padding: 3px;
    margin-top: 40px;
    float:left;
}   
     
#contenedor #columna2 {
    padding: 3px;
    width: 40%;
    margin-top: 40px;
    float: left;
    margin-bottom: 40px;
}

#contenedor #columna3 {
    width: 35%;
    padding: 3px;
   margin-top: 40px;  
    float:right;     
}
#contenedor #empresa { 
    height: 550px;   
}
#contenedor #galeria1 { 
    height: 100%;   
} 
#contenedor #galeria2 { 
    height: 100%;   
} 
#contenedor #galeria3 { 
    height: 100%;   
} 
#contenedor #galeria4 { 
    height: 100%;   
} 
#contenedor #galeria5 {     
    height: 100%;        
} 
#contenedor #galeria6 { 
   width: 50%;
   padding: 2%;    
   float:left;       
} 
/*Adaptación de las fuentes*/
    body{font-size: 14px;}  
}