/* reseteo universal MANDO TODOS LOS VALORES DE LA CAJA A 0 */
*{
	border: 0;
	margin: 0;
	padding: 0;
}

article,aside ,figcaption ,figure ,footer ,header , hgroup, nav, section {
	display:block ;
}
/* HOJA DE estilos del sitio */

body{
	background: #212121 url(../img/fondo-interno.jpg);
	color: #FFF;
	font-family: Helvetica, verdena, sans-serif; 
	font-size: 1.5em;
}
/* los enlaces */
/* a los enaces se borra esta liea subrayada */
a {
	color: #57ABB8;
	font-weight: bold;
	text-decoration: none
}
/* al pasar el mouse muestra un color naranjo en cualquier enlace */
a:hover {
	color: #f60;
}

audio, iframe, img, video {
	max-width: 100%;
	
}

fieldset {
	border: .1em solid #f60;
	border-radius: .5em;
	padding:  1em;
}

figcaption {
	font-size: 0.85em;
	padding: 0.25em;
	text-align: center;
}
/* ATRIBUTOS DEL FORMULARIO */
form{
	width: 100%
	}

form div{
      margin: .5em;
}


/* FIN ATRIBUTOS DEL FORMULARIO */
/* color texto h2 NARANJA */
h1, h2, h3{
	color:#f90;
}


h3{
	background: #E2E7F1
	border-radius: 1em;
	box-shadow: .25em .25em .25em rgba(255,153.0,5)
	margin-botton: .5em;
	padding-left: .5em;
}
/* Linea horizontal */
hr{
	border: 1px dashed #FFF;
	margin: 1em 0;
}
  /* el mapa se vera con radio*/
iframe{
	border-radius: .5em;
	}
  
   /* Cajas de textos*/
input[type="email"], input[type="Text"], textarea{
	background: #EEE;
	border-radius: .25em;
	Color: #F60;
	font-size: 1em;
	padding: .25em;
	width: 95%;
}
   input[type="email"]:focus, input[type="Text"]:focus, textarea:focus{
	 background: #C6ECF9;
	   
}
    /* BOTON ENVIAR*/
input[type="submit"] {
	background: #F90;
	border-radius:0 .25em;
	Color: #500;
	font-size: 1em;
	padding: 1.25em;
	padding: .25em;
	
}
      /* BOTON ENVIAR*/
  input[type="submit"]:hover {
	background: #7BBFD5;
	border-radius:.25em  0;
	Color: #000;
	cursor: pointer;
}
 
 label {
	 cursor: pointer;
 }
 
 legend{
	 color: #F90;
	 font-size: 1.2em;
	 font-weight: bold;
 }
 
   
ol{
	padding:0 2em;
	
}

ol li{
	padding: 1em 0;
}

textarea{
	resize:none;
}
header, section#contenido, footer {
    background: #FFF url(../img/fondo-interno.jpg); 
	 margin: 0 auto;
	 max-width: 90%;
	 text-align: center;  	
}

header h1, nav {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

nav ul{
	list-style: none;
}

nav li{
	display: inline-block; 
	padding: 0.1em;
	vertical-align: top;
}

nav a {
	background: #fff;
	border: 0.1em solid #57ABB8;
	border-radius: 0.25em;
	color: #F60;
	display: block;
	font-family: helvetica, Verdana, sans-serif;
	font-size: 1.4em;
	padding: 0.2em;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;	
}

nav a:hover {
	background: #212121;
	border: 0.1em dashed #f60;
	border-radius: 0 0.5em 0 0.5em;
	color: #fff;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

section#principal, aside{
	background: #1E6381;
	border-radius: 0.5em;
	display: inline-block;
	margin: 0 auto;
	max-width: 100%;
	padding: 0.25em;
	vertical-align: top;
	width: 65%;
}

article#galeria-inicio {
	border-radius: 0.5em;
	margin: 0.5em;
	padding: 0.5em;
	text-align:left;
	width: 95%;
}


aside {
	wiht: 30%;
}
aside img, #img-acerca img, #video-acerca, #img-servicios{
	border-radius: 0.5em;
}

/* background de azul petroleo 
display: inline-block  compaten el mismo ancho en linea
vertical-align: top;
*/
article#descripcion-acerca , article#multimedia-acerca{
	background: #1e6381;
	border-radius: .5em;
	display: inline-block;
	margin: 0 auto;
	max-width: 100%;
	min-height: 543px;
	padding: .5em;
	text-align: justify;
	vertical-align: top;
	width: 55%;
}
article#multimedia-acerca {
	text-align: center;
	width: 40%
}

section#servicios-principal, section#servicios-tipos {
	margin: 0 auto;
	max-width: 95%;
}

#img-servicios, article#nuestros-servicios{
	display: inline-block;
	margin: 1em 0;
	vertical-align: top;
	width: 40%;
}

article#nuestros-servicios, article#servicio1, article#servicio2, article#servicio3 {
	background: #1e6381;
	border-radius: .5em;
	max-width: 100%;
	min-height: 300px;
	padding: .5em;
	text-align: justify;
	width: 55%;
}

article#servicio1, article#servicio2, article#servicio3 {
     background: #011e30;
     display: inline-block;
	 width: 31%;   
     vertical-align: top;
}


article#servicio1 div, article#servicio2{
	text-align: center;
	
}

/* Aqui empieza la maquetacion de trabajos */

section#trabajos {
	background: #011e30;
	border-radius: .5em;
	margin: 0 auto;
	max-width: 80%;
	padding: .5em;
	text-align: center;
		
}

div.portafolio{
	margin: 2em auto;
}

div.portafolio article{
	display: inline;
	padding: 1em;
}


/* creo la caja que contine mi formulario */
section#contacto , section#mapa{
	
	background: #011E30;
	border-radius: .5em;
	display: inline-block;
	margin: 0 auto;
	min-height: 350px;
	padding: .5em;
	text-align: justify;
	vertical-align: top;
	width:45%;

}

	


article#info-contacto, article#contactanos {
	border: .1em solid #1E6381;
	border-radius: .5em;
	margin: .5em;
	min-height: 144px;
	padding: .5em;
	
	
}

span.datos-contacto {
	color: #F90;
	margin-left: 1em;
}

section#mapa {
	text-align:center;
}
footer{
	color: #FFF;
	font-size: 0.85em;
	padding: 0.75em 0;
}

.fade{
	opacity: 1;
	filter:alpha(opacity=10);	
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;	
}

.fade:hover{
	opacity: 0.7;
	filter:alpha(opacity=7);
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.redonda {
	border-radius: 4.125em; /* 50px/16px  */
	box-shadow: 5px 5px 10px rgba(255,255,255, .3);
}


.redonda2 {
	border-radius: 3.125em; /* 50px/16px  */
	box-shadow: 5px 5px 10px rgba(255,255,255, .3);
	
}

@media screen and (min-width:1081px){
	header h1{
		text-align: left;
		width: 35%
		
	}
	
	nav{
		text-align: right;
		width: 60%
	
	}
}


@media screen and(max-width:1080px){
	nav li{
		font-size: 1.3em;
		
	}
	
	article#galeria-inicio {
		text-align: right;
		width: 90%
	
	}
	
	aside{
		width:20%;
		
	}
	article#descripcion-acerca, article#multimedia-acerca, #img-servicios, article#nuestros-servicios {
		width: 45%;
	}
	
	article#servicio1, article#servicio2, article#servicio3 {
		width: 30%;
		
	}

    section#trabajos {
		max-width: 90%;
		
	}
	div.portafolio article{
		padding: .5em;
	}
	form{
		width: 95%;
	}

}
	
	@media screen and (max-width: 800px){
	nav li{
		font-size: 0.95em;
		
	}
	
	article#galeria-inicio {
				width: 88%
	
	}
	#img-servicios, article#nuestros-servicios, article#servicio1{
	    display:block;
		margin: 0 0 .25em 0;
		width: 95%;
		}
	#img-servicios {
		width: 98%;
		
	}
	article#servicio2, article#servicio3 {
		width: 45%;
		
	}
	
	section#trabajos {
		max-width: 95%;
		}
		div.portafolio article {
			padding: 2em;
			
		}
		
		section#contacto, section#mapa {
			display: block;
			width: 95%;
		}
			
			section#contacto {
			margin-bottom: .2em;
		}	
		
		form {
			width: 100%;
		}
	}
	
	@media screen and (max-width: 600px){
	nav lu, li{
		display:inline-block;
		margin: 0px;
		width: 98%;
		
		padding: 0.1em;
	font-size: 1.2em;
		
	}
	
	section#principal, aside, article#descripcion-acerca, article#servicio2{
		margin-bottom: 0.2em;
	}
	section#principal, article#descripcion-acerca, article#multimedia-acerca, article#servicio2, article#servicio3  {
				dispaly: block;
				 width: 95%
	
	}
	
	#img-servicios{
		display: none;
	}
	div.portafolio article{
		display: block;
		margin: .5em auto;
		padding: 0;
	}
	
	}
	aside{
		width:95%;
		
	}
}