@import url(../external.html?link=https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);

@media only screen and (min-width : 768px) 
/* CSS Document */
* {margin:0; padding:0;}

body {margin-top: 0px; font-family:'Lora';
      font-size:18px;      
      align-content: center; }

a {text-decoration:none;}


#container {margin:0 auto;
	box-sizing:border-box;	
	max-width:1100px;overflow: hidden;}



/*PROPIEDADES GENERALES*/

h1 {font-size: 36px;
    margin-top: 2%;
    margin-bottom: 2%;}
h2 {font-size: 22px;
    color: #004673;
    text-decoration:underline;
    margin-bottom: 1%;
    margin-right: 0px;
    margin-top: 18px;}

h3{
	font-size: 19px;
	text-decoration: underline;
	color: #000;
	margin-bottom: 6%;}

h4{margin: 2%;font-size: 16px;text-shadow: 1px 0px 1px #aaa;}



/*BARRA DE NAVEGACIÓN*/
header {/*position: fixed;*/width: 100%;
        margin-bottom: 0px%;
       }

#top-header {background-color: #fff;width: 100%; }

#logo {position: relative;
       margin-left:37%;
       align-content: center;
       }

nav {
     color:#fff;
	width:100%;
	float:left;
	background:#004673;    
    }
	
nav ul {margin-left: 25%;
	list-style-type:none;
}
nav ul li { overflow: hidden;
	float:left;
	color:#fff;
	font-size:20px;text-decoration:none;}

nav .menu  {
	float:left;
	color:#fff;
	font-size:20px;
	padding:10px 10px;	
	text-decoration:none;	
	font-weight:300;	}

nav a.menu:hover  {
	float:left;
	color:#fff;	
	text-decoration:none;
	background:#00a4a1;	
	}


#posicionbarra {align-content: center;margin-top: 0}

#portadados {width: 100%;display: block;float: left;}
#portada {width: 100%;display: block;float: left;}

/*QUIENSOMOS*/


#contienehome {width: 75%;
               display: block;
               float: left;}

#informacion {display: block;
              float: left;
               width: 95%;
               padding-left: 20px;
               padding-top: 5px;
               padding-right: 0px;}

#frase {background-color: #00648b;
        color: #fff;
        font-weight: 400;
         display: block;
         float: left;
         font-size: 28px;
         padding: 20px;
         width: 90%;
         margin-left: 20px;margin-bottom: 30px;margin-top: 38px;
         line-height: 45px;
          text-align: center;}

#cuadrotextosecundario {background-color:#00a4a1;
         display: block;
         float:left;         
         width: 22%;        
         margin-top:3%;
         padding: 1%;
         color: #fff;
          padding-left: 2%;
         
         margin-bottom: 3%;
         margin-right: 0px;}

#textosecundario {background-color:#00a4a1;
         display: block;
         float:left;         
         width: 100%;        
         margin-top:3%;
         padding: 1%;
         color: #fff;
          padding-left: 2%;
         line-height: 22px;
         margin-bottom: 3%;
         margin-right: 0px;}

#textosecundariodos {background-color:#00a4a1;
         display: block;
         float: right;         
         width: 22%;         
         margin-top: 2%;
         margin-right: 0px;
         padding: 1%;
         padding-left: 2%;
         color: #fff;
         line-height: 22px;
    margin-bottom: 3%;}

#quiensomos2 {width: 95%;padding-left: 20px;padding-right: 20px;margin-top: 1%;display: block;float: left;}

/*FOOTER*/
#piepag{background-color: #004673;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding:2%;
        width: 100%;display: block; height: 30px;
        line-height: 18px;margin-top: 6%; 
        }

/*SERVICIOS*/
article {width: 43%;height: 400px; background-color: #00648b;
         color: #fff;
         display: block;
         font-size: 16px;
         float: left;padding-bottom: 0px;
         padding-right: 1%;        
         padding-left: 4%;         
         margin-top: 4%;
         padding-bottom:  2%;}

.importa {width: 100%;display: block;float: left;margin: 0px;
          margin-top: 1%;height: 400px;}

.fotoservicio { width: 51%;height: 401px; float: right;display: block;padding-bottom: 0px;
         padding-right: 1%;        
                
         margin-top: 4%;
         padding-bottom:  2%;}
.fotoservicio img {width:100%;
                    margin: 0px%;box-shadow:3px 2px 2px #aaa;}

#servicioadicional {background-color: #00a4a1;width: 100%;margin-top: 2%;color:#fff;
                    padding-right: 1%;        
                    padding-left: 4%;         
                    margin-top: 2%;
                    padding-bottom:  2%;
                    float: left;display: block;}

/*CONTACTO*/





/*#contactodato {display: block;float: left;width: 10%; font-size: 16px;line-height:30px;margin-bottom: 4%;color:#fff;margin-left: 2%;padding-right: 10%;}*/

#cuerpocontacto {background-image: url(img/fondo.jpg);background-size:cover;}
#mapa {width: 65%;display: block;float: right;margin-top: 4%;}

#iconos {background-color: #00a4a1;line-height:30px;padding: 3%;margin-bottom: 4%;}
#iconos h3 {margin: 0px;}
#iconos img {margin-right: 5%;margin-left: 3%;margin-top: 2%;}

#contactos { width: 27%;
            display: block;
            float: left;            
            background-color: #00a4a1;color: #fff;
             margin-top: 5%; margin-right:1%;padding-top:2%;padding-right: 2%;padding-left: 2%;line-height: 30px;font-size: 14px;
            }

#redes {padding-right: 3%;}

/*GALERIA*/

#cuerpogaleria {background-image: url(img/fondo.jpg);background-size: cover;}
#galeria { width: 100%;
    margin-top: 110px;  }
	
/*COTIZACIÓN*/
#p {
	align-content: center;
	background-color: #00a4a1;
	color: #fff;
	margin-top: 100px;
	display: block;
	width: 800px;
	font-family: lora;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	padding: 20px;}

#formulario {align-content: center; display: block;clear: both;}

#botones {background-color:#00a4a1; margin-left:20%;color: #fff; width: 150px; height:40px;  }


 /* RESPONSIVE PARA CELULAR*/  


@media screen and (max-width: 1020px) { #contienehome {width: 100%;}
                                       #frase {width: 100%; margin: auto; height: auto;padding: 0%;}
    #cuadrotextosecundario  {width: 100%;}     
    #textosecundariodos {width: 100%;}
    article {width:100%; margin: auto;padding: 3%;}    
    .fotoservicio { width: 100%;}
    #contactos { width: 100%;}
    #mapa {width: 100%;}