*{ 	margin: 0;	padding: 0;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;}
body{font-family: Roboto; background: #252525;}
.contenedor{ width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden;}
header{	margin: 0; }
header>img{width: 30%; position: absolute;	top: 10px;	left: 90px;  background: rgba(255,255,255,0.1); }
.main{ width: 100%; padding: 10px;	float: left; margin-top: 5px;}

/*ESTILOS DEL BANNER*/
.banner{
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 500px;
	margin: auto;
	background-image: url(img/1.jpg);
	background-size: 100% 100%;

	/*Parametros de la animacion*/
	animation-name: banner; /*Damos nombre a la animacion*/
	animation-duration: 30s; /*Duracion de la animacion*/
	animation-iteration-count: infinite; /*Interacion*/
	/*Resumido seria*/
	/*animation: banner 10s infinite;*/
}
	
	/*Keyframes son las paradas que va a tener la animacion*/
	@keyframes banner {
		0%, 10%{
			background-image: url(../img/1.jpg);
			opacity: 1;
		}	
		11%, 20%{
			background-image: url(../img/2.jpg);
			opacity: 1;	
		}
		21%, 30%{
			background-image: url(../img/3.jpg);
			opacity: 1;	
		}
		31%, 40%{
			background-image: url(../img/4.jpg);
			opacity: 1;
		}
		41%, 50%{
			background-image: url(../img/5.jpg);
			opacity: 1;
		}
		51%, 60%{
			background-image: url(../img/6.jpg);
			opacity: 1;
		}
		61%, 70%{
			background-image: url(../img/7.jpg);
			opacity: 1;
		}
		71%, 80%{
			background-image: url(../img/8.jpg);
			opacity: 1;
		}
		81%, 90%{
			background-image: url(../img/9.jpg);
			opacity: 1;
		}
		91%, 100%{
			background-image: url(../img/10.jpg);
			opacity: 1;
		}
	}

/*ESTILOS DEL MENU DE NAVEGACION*/
nav{position: absolute; top: 0.1px; right: 73px;  margin: auto; width: 40%; background: rgba(37,37,37,0.5);}
nav ul {list-style: none;}
nav > ul{  display:table;  width:100%;  position:relative;}
nav > ul li { display: table-cell;}
/*Sub Mnenu*/
nav > ul > li:hover ul{  display: block; height: 100%;}
nav > ul >li > ul {  display: block;  position: absolute;  background: #000; left: 0;  right: 0;  overflow: hidden;  height: 0%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all 3.s ease;
    -o-transition: all 3.s ease;
    transition: all 3.s ease;}
nav > ul li a { color: #fff; font-size: 18px; font-weight: bold; display: block;  line-height: 20px; padding: 20px;  position: relative; text-align: center; text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all 3.s ease;
    -o-transition: all 3.s ease;
    transition: all 3.s ease;}
nav > ul > li > ul > li a:hover {line-height: 20px;}
nav > ul > li > a span{ background: #eb880e; display: block; height: 100%; width: 100%; left: 0; position: absolute; top:-55px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all 3.s ease;
    -o-transition: all 3.s ease;
    transition: all 3.s ease;}
nav > ul > li >a span .icon{ display: block;  line-height: 60px;}
nav > ul > li > a:hover > span{  top: 0px; }

/*Boton de Acceso a la Consulta de Certificados*/
.accesoaconsultas{position: absolute; width: 15%; padding: 10px; top:60px; right:73px; background: #eb880e;}
.accesoaconsultas a{font-weight: bold; text-decoration: none; color: #fff; font-size: 18px;}
.accesoaconsultas img{display: inline-block; float: left; width: 40px; margin: 0px 10px 0px 0px }

.etiq1{	background: #eb880e; width: 32%;	height: auto;	padding: 30px;	float: left; }
.margen{ margin-left: 1%; }
.main .etiq1 img{ width: 100%;}
.unoetiq1{background: rgba(235,136,14,0.9); border-bottom: 5px solid #fff; border-top: 2px solid #fff;  }
.dosetiq1{background: rgba(255,255,255,0.2); border-bottom: 5px solid #eb880e; border-top: 2px solid #eb880e; }


/*ESTILOS DE LA PAGINA DE CERTIFICACIONES*/
.CertP{width: 100%; max-width: 900px; margin:auto;}
.certesp{padding: 5px; margin:auto; color: #fff; font-weight: normal; width: 70%; display: inline-block; float: left; 
	text-align: center;  background: #252525; border-right: 5px solid #111111;}
.certnorma{ padding: 5px; margin:auto; color: #fff; font-weight: normal; width: 30%; display: inline-block; float: left; text-align: center; background: #252525;}
.certizq{text-align: justify;}
h1{color: #fff; padding: 10px 20px;}

.capac{width: 100%; max-width: 700px; margin:auto;}
.tabla{padding: 5px; margin:auto; color: #fff; width: 100%; text-align: center; 
	background: #eb880e;}
.tabla th{background: #eb880e;padding: 5px; font-size: 22px; font-weight: bold; color: #000;}
.tabla td{background: #252525;padding: 5px; font-size: 20px; text-align: justify;}

.asesorias{width: 100%; max-width: 800px; margin:auto;}
.medida{width: 30%; font-weight: bold;}
.medida2{width: 70%;}

/*ESTILOS DE LA PAGINA DE CONSULTA DE CERTIFICACIONES*/
.texto{margin: 10px 0; text-align: center; font-size: 20px; color: #fff;}
.main .etiq2{width: 48%; padding: 30px; float: left; margin: 10px;}
.main .etiq2 a{ width: 90%; margin:auto;}
.main .etiq2 img{ width: 100%; margin:auto;}
.main>h2{text-align: center; color: #fff; background: #000; padding: 10px 0px; font-size: 40px;}
.main>div>.p {color: #fff; font-size: 30px; text-align: center; margin: 10px 0pxs; }
.main div form input[type="text"] {width: 100%; padding: 10px; border: none; font-weight: bold; font-size: 16px; 
border-bottom: 1px solid #000; border-right: 1px solid #000; color: #000; background: #DDDDDD;}
.main div form input[type="submit"] { margin: 5px 0; width: 100%; background: #AAAAAA; border: none; 
	color: #000; font-weight: bold; font-size: 16px; padding: 10px; cursor: pointer; border-radius: 3px;-webkit-transition: all .3s ease;
	-o-transition: all .3s ease; transition: all .3s ease;}
.main div form input[type="submit"]:hover {background: #0074D9; color: #fff;}

.main>div>h2{
	text-align: center;
	color: #fff;
	background: #000;
	padding: 10px 0px;
	border-radius: 2px 2px 0px 0px;
	border: 1px solid #000;
	box-shadow: 0 0px 5px 0px #000;
	font-size: 20px;
}
.espacio{width: 100%; height: 160px; }

/*Estilos de la pagina de Servicios*/
.servicio{ width: 100%; height: auto; margin: 10px 0px; border-bottom: 5px solid #eb880e; border-top: 1px solid #eb880e; }
.servicio h3{color: #fff; font-size: 45px; padding: 10px; text-align: center;}
.centrar{width: 70%; margin: auto;}
.imgalq{width:50%; display: inline-block; float: left; text-align: center;}
.imgalq img{width:80%;}
.back{background: #eb880e; padding: 10px; color: #000; font-weight: bold; font-size: 20px;}
div .servicio>p{ clear: both; color: #fff; font-weight: normal; font-size: 22px; padding: 20px;}
.uno{background: rgba(0,0,0,0.5);}
.dos{background: rgba(255,255,255,0.2);}

.main p{ margin-top: 2px; color: #fff; text-align: justify; font-size: 17px; line-height: 22px;}


/*Estilos de la pagina de Contacto*/
.contactoh2{text-align: center; font-size: 40px; padding: 10px; background: #000; color: #fff; border-top: 1px solid #eb880e; border-bottom: 5px solid #eb880e;}
.Datos{ width: 50%; margin: 5px 0; background: rgba(235,136,14,0.9); display: inline-block; float: left; }
.Datos p{padding: 20px; line-height: 25px; font-size: 20px; }
.Datos span{padding: 10px; color: #000; margin: 5px;}
.wrap{ width: 50%; margin: 5px 0; max-width: 500px;	display: inline-block; float: left; padding: 40px; background: rgba(255,255,255,0.2);}
.wrap .formulario{ width: 100%;	margin: auto; }
	.wrap .formulario .input-group{	position: relative;	margin-bottom: 32px;}
		.wrap .formulario .input-group input[type="text"],
		.wrap .formulario .input-group input[type="email"]{ font-size: 16px; color: #fff; width: 100%; 
			outline: none; padding: 15px; background: #898989; border: none; border-bottom: 2px solid #252525; 
			border-right: 2px solid #252525;}
		.wrap .formulario .input-group input[type="text"]:focus,
		.wrap .formulario .input-group input[type="email"]:focus
		.wrap .formulario .input-group input[type="text"]:active,
		.wrap .formulario .input-group input[type="email"]:active{outline: none;border-bottom: 2px solid #eb880e;
			border-right: 2px solid #eb880e;}
		.wrap .formulario .input-group input[type="text"].error,
		.wrap .formulario .input-group input[type="email"].error{ border-right: 2px solid #D32F2F; 
			border-right: ;r-bottom: 2px solid #D32F2F; }
		.wrap .formulario .input-group label{ color: #000; font-size: 20px; }
		.wrap .formulario .input-group label.label{position: absolute; top:16px; left: 0px; font-size: 16px; 
			line-height: 16px; margin-left: 16px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; 
			transition: all .3s ease; }
		.wrap .formulario .input-group label.active{ top: -12px; font-size: 12px; line-height: 12px; color: #B6B6B6;}
		.wrap .formulario #mensaje{ height: 200px; }
		.wrap .formulario input[type="submit"] { margin: 5px 0; width: 100%; background: #AAAAAA; border: none; 
			color: #000; font-weight: bold; font-size: 16px; padding: 10px; border-radius: 3px; cursor: pointer;
			-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
		.wrap .formulario input[type="submit"]:hover{ background: #1976D2;}

		.mapa{width: 100%; margin: 5px;}
footer{	clear: both; float: left; margin-top: 20px; box-sizing: border-box;	width: 100%; height: 200px; padding: 20px;	color: #fff;}
.mapasitio{width: 100%;}
.mapasitio>li{list-style: none;}
.mapasitio>li>a{ color: #fff; line-height: 23px; font-size: 18px; text-decoration: none;}

/*PROPIEDADES DEL RESPONSIVE*/
@media screen and (max-width: 1300px){
	header>img{left: 70px;}
	nav{right:50px; width: 48%;}
	.accesoaconsultas{width: 20%; right:50px;}
}

@media screen and (max-width: 1250px){
	header>img{left: 70px;}
	nav{right:40px; width: 48%;}
	.accesoaconsultas{width: 20%; right:40px;}
}

@media screen and (max-width: 1200px){
	header>img{left: 60px;}
	nav{right:10px; width: 48%;}
	.accesoaconsultas{width: 20%; right:10px;}
	.accesoaconsultas a{font-size: 17px;}
	.accesoaconsultas img{width: 36px;}
}

@media screen and (max-width: 1100px){
	header>img{left: 60px;}
	nav{right:2px; width: 50%;}
	.accesoaconsultas{width: 20%; right:2px;}
	.accesoaconsultas a{font-size: 16px;}
	.accesoaconsultas img{width: 34px;}
}

@media screen and (max-width: 850px){
	.banner{ height: 350px;	}
	nav{ position: static; overflow: hidden; width: 100%;}
	nav > ul li a {	font-size: 15px; line-height: 15px; padding: 15px; }
	nav > ul > li > a span{ top:-42px; }
	nav > ul > li >a span .icon{line-height: 45px; }
	.accesoaconsultas{width: 30%; right:2px; top: 0px;}
	.accesoaconsultas a{font-size: 14px;}
	.accesoaconsultas img{width: 25px;}
	.main h2{ padding: 5px 0px; font-size: 18px;}
	.main p { font-size: 14px; }
	.etiq1{ padding: 10px;}
	.margen{ margin-left: 5px; }
	footer{font-size: 12px;}

	.servicio h3{font-size: 30px;}
	.centrar{width: 90%;}
	.imgalq{width:50%;}
	.imgalq img{width:100%;}
	.back{font-size: 16px; height: 40px;}
	div .servicio>p{font-size: 20px;}
	.logoserv{width: 60%;}

	.tabla th{font-size: 16px;}
	.tabla td{font-size: 14px;}

	.certesp{width: 70%; height:35px; font-size: 14px;}
	.certnorma{width: 30%; height:35px; font-size: 14px;}
	.certizq{text-align: justify;}
	h1{font-size: 18px;}

	.Datos{ width: 80%; display: inline-block; float: left; }
	.Datos p{padding: 20px; line-height: 25px;}
	.Datos span{padding: 10px; color: #000; margin: 5px;}
	.wrap{ width: 100%; display: inline-block; float: left; margin: 10px 0;}

}

@media screen and (max-width: 800px){
	header>img{left: 20px; width: 30%;}
	.accesoaconsultas{width: 40%; padding: 5px; top:0px; right:-18px;}
	.accesoaconsultas a{font-size: 12px;}
	.accesoaconsultas img{width: 20px;}
	.banner{min-width: 400px; height: 300px;}
	.main h2{  font-size: 17px;	}
	.main p{ margin-top: 5px;	font-size: 14px; }
	.main img{ width: 30%; margin: 5px 5px 0px 0px;	}
	.etiq1{	width: 95% ;  padding: 20px;}
	.margen{ margin-left: 0px; margin-top: 15px; }
	.imgalq img{width:100%;}
}

@media screen and (max-width: 700px){
	header>img{left: 20px; width: 35%;}
	.accesoaconsultas{width: 40%; padding: 5px; top:0px; right:-18px;}
	.accesoaconsultas a{font-size: 12px;}
	.accesoaconsultas img{width: 20px;}
	.main p{ margin-top: 5px; font-size: 14px;	}
}

@media screen and (max-width: 600px){
	header>img{left: 20px; width: 40%;}
	.accesoaconsultas{width: 40%; padding: 5px; top:0px; right:-18px;}
	.accesoaconsultas a{font-size: 13px;}
	.accesoaconsultas img{width: 22px;}
	.main p{ margin-top: 5px; font-size: 14px;	}

	.servicio h3{font-size: 25px;}
	.centrar{width: 100%;}
	.imgalq{width:50%;}
	.imgalq img{width:100%;}
	.back{font-size: 15px; height: 40px;}
	div .servicio>p{font-size: 20px;}
	.logoserv{width: 80%;}
}

@media screen and (max-width: 500px){
	header>img{left: 20px; width: 50%;}
	.banner{min-width: 400px; height: 200px;}
	.accesoaconsultas{width: 40%; padding: 5px; top:0px; right:-18px;}
	.accesoaconsultas a{font-size: 12px;}
	.accesoaconsultas img{width: 20px;}
	.main p{ margin-top: 5px; font-size: 14px;	}
	.logoserv{width: 80%;}
}

@media screen and (max-width: 400px){
	header>img{left: 20px; width: 50%;}
	.contenedor{min-width: 350px;}
	.accesoaconsultas{width: 40%; padding: 5px; top:0px; right:-18px;}
	.accesoaconsultas a{font-size: 12px;}
	.accesoaconsultas img{width: 30px;}
	.main{ padding: 5px;}
	.main h2{ font-size: 15px;}
	.main p{ margin-top: 2px; margin-left: 2px;	font-size: 15px;}
	.main img{margin: 0px 5px 0px 0px;}	
	.etiq1{ padding: 20px; min-width: 200px;}
	.margen{ margin-left: 0px; margin-top: 10px; }
	footer{ min-width: 450px; }


	.servicio h3{font-size: 22px;}
	.centrar{width: 100%;}
	.imgalq{width:50%;}
	.imgalq img{width:100%;}
	.back{font-size: 13px; height: 40px;}
	div .servicio>p{font-size: 15px;}
	.logoserv{width: 80%;}

	.tabla th{font-size: 15px;}
	.tabla td{font-size: 14px;}

	.certesp{width: 70%; height:30px; font-size: 12px;}
	.certnorma{width: 30%; height:30px; font-size: 12px;}
	.certizq{text-align: justify;}
	h1{font-size: 16px;}

	.Datos{ width: 100%;}
	.Datos p{padding: 20px; line-height: 25px;}
	.Datos span{padding: 10px; color: #000; margin: 5px;}
	.wrap{ width: 100%; padding: 20px; }

}