* { margin: 0; padding: 0; border: 0; }
body { margin: 0; padding: 0; font-family: 'Raleway', Arial, sans-serif; color: #000; font-size: 16px; line-height: 20px; }
ul { margin: 14px 20px; }
li { margin-left: 4px; }
p { margin: 15px 0px; }

.ancho { width: 1100px; margin: 0 auto; padding: 0; }
.ancho:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.limpiar { clear: both; }
h1 { font-size: 34px; line-height: 56px; margin: 20px 0; padding: 20px 0; color: #333; }
h2 { font-family: 'Lobster', cursive; font-size: 28px; margin: 20px 0; padding: 0; color: #333; }
h2 a { text-decoration: none; }
h3 { margin: 20px 0; padding: 0; }

h2 a.rojo { color: #ED3426; }
h2 a.verde { color: #8DC642; }
h2 a.azul { color: #2CABE2; }
h2 a.morado {color: #A055A0; }

.bloque1de2 { float: left; width: 50%; }
.bloque2de2 { float: left; width: 50%; }
.bloque1de2:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.bloque2de2:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

.bloque1de3 { float: left; width: 33.33%; }
.bloque2de3 { float: left; width: 33.33%; }
.bloque3de3 { float: left; width: 33.33%; }
.bloque1de3:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.bloque2de3:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.bloque3de3:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

.bloque1de4 { float: left; width: 25%; }
.bloque2de4 { float: left; width: 25%; }
.bloque3de4 { float: left; width: 25%; }
.bloque4de4 { float: left; width: 25%; }
.bloque1de4:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque2de4:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque3de4:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque4de4:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.bloque1de6 { float: left; width: 16.66%; }
.bloque2de6 { float: left; width: 16.66%; }
.bloque3de6 { float: left; width: 16.66%; }
.bloque4de6 { float: left; width: 16.66%; }
.bloque5de6 { float: left; width: 16.66%; }
.bloque6de6 { float: left; width: 16.66%; }
.bloque1de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque2de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque3de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque4de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque5de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque6de6:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.bloque1de6 section { width: 160px; margin: 0 auto; text-align: center; }

#boton-menu { display: none; position: absolute; top: 52px; right: 35px; }
#boton-menu img { width: 19px; }
#boton-idioma { display: none; position: absolute; top: 52px; right: 85px; }
#boton-idioma img { width: 19px; }
.abrir { }
.cerrar { }
/* Botones Generales */
.botones-pie { padding: 14px 10px; text-align: center; }
.boton-regresar { background: #f82; padding: 14px 80px; text-decoration: none; color: white; }
.boton-regresar:hover { background: #e71; }
/* nueva opción para botones */
div.boton { padding: 0 30px; text-align: center; }
a.boton { background: orange; padding: 16px 80px; font-size: 20px; text-decoration: none; color: white; }

/* Encabezado */
#encabezado { padding: 20px 0px; }
#encabezado:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#logo { float: left; width: 23%; }
#logo img { width: 200px; }
#encabezado .boton-menu { display: none; }

/* Navegacion */
nav { font-family: 'Open Sans', sans-serif; font-size: 16px; }

#nav-horizontal { position: relative; float: left; width: 77%; text-align: right; padding: 40px 0 0 0; }
#nav-horizontal:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#nav-horizontal ul { float: right; list-style: none; margin: 0; }
#nav-horizontal ul li { float: left; padding: 14px 20px; border: thin solid transparent; }
#nav-horizontal ul li:hover { border: thin solid #ccc; }
#nav-horizontal ul li a { display: block; text-decoration: none; color: #000; }
#nav-horizontal ul li:first-child { padding: 7px 20px; }
#nav-horizontal ul li:last-child { padding: 0px 20px; }
#nav-horizontal ul li a.menuActivo { color: red; }

#nav-vertical { display: none; position: absolute; z-index: 10; right: 0; background: white; }
#nav-vertical ul { list-style: none; margin: 0px; }
#nav-vertical ul li { border-top: thin solid #ddd; }
#nav-vertical ul li a { display: block; padding: 15px; text-decoration: none; color: #000; }
#nav-vertical ul li a.menuActivo { color: red; }

/* SlideShow */
#slideshow { position: relative; width: 100%; color: #ffffff; text-shadow: 4px 4px 3px #000; }
#slideshow #boton-anterior { position: absolute; z-index: 9; top: 10px; left: 10px; }
#slideshow #boton-siguiente { position: absolute; z-index: 9; top: 10px; right: 10px; }
#ind-abajo { position: absolute; z-index: 8; bottom: 10px; }
#slideshow { width: 100%; height: 100%; overflow: hidden; }
#slideshow .s_element { height: 100%; }
#slideshow .s_element img { position: absolute; width: 100%; height: 100%; }
#slideshow .s_visible { display: block; }
#slideshow .s_visible .texto,
#slideshow .s_visible .textoIzqBajo,
#slideshow .s_visible .textoDerAlto { display: block; }
#slideshow .textoIzqBajo { display: none; position: absolute; bottom: 20%; left: 10%; padding: 20px; }
#slideshow .textoDerAlto { display: none; position: absolute; top: 10%; right: 10%; padding: 20px; }
#slideshow h2 { color: #fff; font-size: 100px; font-weight: 800; line-height: 80px; }
#slideshow h2 span { font-family: 'Anton', Impact, sans-serif; font-size: .8em; }

/* animate.css */
.toBeAnimated { animation-duration: 3s; animation-delay: 2s; }
.os-animation{ opacity: 0; }
.os-animation.animated{ opacity: 1; }

/* parallax */
.parallax-window { position: relative; clear: both; width: 100%; height: 500px; background: transparent; }
.parallax-window .contenedor { display: table; width: 100%; height: 100%; }
.parallax-window .parallax-titulo { display: table-cell; vertical-align: middle; text-align: center; color: #fff;
font-size: 100px; text-shadow: 10px 10px 15px #000; }
.parallax-titulo .texto1 { font-family: 'Lobster', cursive; }
.parallax-titulo .texto2 { font-family: 'Anton', Impact, sans-serif; }

/* Ajustes Parallax y Flyers */
.flyers { position: relative; overflow: hidden; }
.flyers img { position: absolute; width: 100%; height: 100%; }
.flyers h1 { font-family: 'Anton', Impact, sans-serif; font-size: 120px; color: #fff; text-shadow: 2px 2px 6px #000; }
.flyers h2 , .parallax-window h2 { position: absolute; font-family: 'Lobster', cursive; font-size: 140px; color: #fff; text-shadow: 2px 2px 6px #000; }
.flyers h2 span , .parallax-window h2 span { font-family: 'Anton', Impact, sans-serif; font-size: .8em; }
.flyers h2.texto1tr , .parallax-window h2.texto1tr { top: 25%; right: 10%; }
.flyers h2.texto2tr , .parallax-window h2.texto2tr { top: 42%; right: 7%; }
#nuestrosvalores { }
#nuestrosvalores h1 { position: absolute; bottom: 27%; right: 3%; }
#nuestrosvalores h2 { position: absolute; bottom: 16%; right: 9%; }
#servicioyexperiencia { position: relative; }
#servicioyexperiencia h1 { position: absolute; bottom: 38%; right: 18%; }
#servicioyexperiencia h2 { position: absolute; bottom: 27%; right: 4%; }

#bloques::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#bloques { margin: 150px 0; font-size: 16px; }
#bloques header { text-align: center; }
#bloques section { text-align: justify; }
#bloques footer a { font-family: 'Lobster', cursive; font-size: 20px; text-decoration: none; color: #555; }
#bloques footer a:hover { color: blue; }
#bloques .caja-1 { text-align: center; }
#bloques .caja-2 { margin: 0 auto; width: 220px; }
#bloques .caja-2 section { height: 210px; }

main { margin: 100px 0; }
main header { margin: 50px 0; text-align: center; }
main section { }
main section .margen .caja h2 { color: #fff;}
main section .margen { padding: 8%; }
main section .margen .caja { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; background: #fff; }
main section .margen .caja:hover { background: #0cf; }
main section .margen .caja img { position: absoluta; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: none; transition: all 2s ease; 
-webkit-transition: all 1s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; }
main section .margen .caja:hover img.fondo { margin-top: -70px; margin-left: -70px; width: 150%; height: 150%; opacity: 0.7; }
main section .margen .caja .texto { position: absolute; z-index: 9; bottom: 0px; left: 0; right: 0; padding: 30px 12px;
text-align: center; color: white; text-shadow: 4px 4px 4px #000; transition: all 2s ease; -webkit-transition: all 1s ease; 
-moz-transition: all 2s ease; -ms-transition: all 2s ease; }
main section .margen .caja .texto h2 { margin: 0; padding: 0; font-family: 'Anton', Impact, sans-serif; font-weight: normal; font-size: 26px;
line-height: 32px; letter-spacing: 1px; }
main section .margen .caja .capa { position: absolute; z-index: 8; margin: 0 auto; top: 0; left: 15%; right: 15%; opacity: 0.0; 
transition: all 2s ease; -webkit-transition: all 1s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; }
main section .margen .caja .capa img { height: 70%; }
main section .margen .caja:hover .capa { top: 15%; opacity: 1.0; }

main article .imagen { float: left; width: 	38%; padding: 20px 0; text-align: center; }
main article .imagen img { padding-bottom: 50px; }
main article .intro { float: left; width: 62%; }

article header { text-align: center; margin: 0 30px; }
article header h1, main header h1 { display: inline; font-family: 'Raleway'; }
article header h2 { display: inline; font-family: 'Raleway'; }
article header h3 { font-family: 'Raleway'; margin: 36px 0px 0px; }
article header img { width: 100%;}
article header .marco-titulo, main header .marco-titulo { display: inline; padding: 10px 30px; border-bottom: 4px solid orange; }
article section { padding: 30px; }
article section h3 { text-align: left; margin: 0; padding: 0px 0px 14px 0px;}
article section p { text-align: justify; }
article:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
article footer { padding: 30px; }

.marcas { width: 100%; margin: 0px 0px 0px 0px; }
.marcas:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.marca-1 { clear: both; float: left; width: 50%; text-align: center; }
.marca-2 { float: left; width: 50%; text-align: center; }
.marca-2a { float: left; width: 50%; text-align: left; }

aside { margin: 100px 0; }

.subarticulos { margin: 50px 0; }
.subarticulos article:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.subarticulos article .imagen { float: left; width: 38%; padding: 20px 0; text-align: center; }
.subarticulos article .imagen img { padding-bottom: 50px; }
.subarticulos article .intro { float: left; width: 62%; }

/* Catalogo de Productos */
.pestanas { background: white; margin: 0; padding: 100px 0; width: 100%; }
.pestanas h1 { text-align: center; }
.pestanas ul.tabs { list-style-type: none; margin: 0; padding: 0; }
.pestanas ul.tabs li { float: left; width: 12.5%; height: 127px; margin: 0; padding: 0; background: url("../imagenes/globos/globo_1.png") no-repeat center top; text-align: center; }
.pestanas ul.tabs li:last-child { background: url("../imagenes/globos/globo_4.png") no-repeat center top; } 
.pestanas ul.tabs li > div { display: table; width: 100%; height: 100%; }
.pestanas ul.tabs li > div > div { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding-bottom: 26px; }
.pestanas ul.tabs li > div > div a { color: white; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 2px black; }
.pestanas ul.tabs li.active { background: url("../imagenes/globos/globo_2.png") no-repeat center top; }
.pestanas ul.tabs li.active:last-child { background: url("../imagenes/globos/globo_5.png") no-repeat center top; }
.pestanas ul.tabs li.active a { color: #ffffff; }
.pestanas .clr { clear: both; }
.pestanas article { padding: 0; }
.pestanas section section p { text-align: center; }

.titulo-seccion { display: inline; padding: 10px 30px; font-family: 'Raleway'; line-height: 60px; border-bottom: 4px solid orange; }

#certificados { margin: 100px 60px; }
#certificados header { padding: 20px 0px 60px; text-align: center;}
#certificados article:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#certificados article .imagen { float: left; width: 25%; text-align: center; padding: 20px 0; }
#certificados article .intro { float: left; width: 75%; }

#cobertura { }
#cobertura header { padding: 20px 0px 60px; text-align: center;}
#cobertura .contenedor { padding: 60px; }
#cobertura .imagen { float: left; width: 60%; text-align: center; }
#cobertura .contenido { float: left; width: 40%; }
#cobertura .contenedor:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

/* Formularios */
#contacto { padding: 3% 0; background: #f82; color: #fff; }
#contacto p {font-family: Arial; }
#contacto .nota { border: thin solid #C3D9EF; border-radius: 10px; background: #def; padding: 10px 30px; color: #123E70; }
#contacto:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#contacto .imagen { float: left; width: 50%; font-size: 18px; text-align: center; }
#contacto .imagen h2 { padding: 7% 0 0 0; }
#contacto .imagen img { width: 198px; padding: 15% 0 5%; }
#contacto .formulario { float: left; width: 50%; padding-bottom: 5%; }
#contacto .formulario form { padding: 10%; line-height: 25px; }
#contacto .formulario form label { display: block; margin: 0 1%; padding: 0; }
#contacto .formulario form input { width: 96%; margin: 1%; padding: 5px; background: #f82; border: 1px solid #fff; 
font-family: 'Open Sans', sans-serif; }
#contacto .formulario form input.boton { float: left; width: 48%; margin: 4% 1% 1% 1%; background: #fff; padding: 15px;
color: #DA7319; font-size: 15px; }
#contacto .formulario form input.boton:hover {background: #eee;}
#contacto .formulario form input.boton::last-child { margin: 0; }
#contacto .formulario form textarea { width: 96%; height: 60px; margin: 1%; background: #f82; border: 1px solid #fff; padding: 5px; 
font-family: 'Open Sans', sans-serif; }

footer { padding: 30px 0px 0px 0px }
footer:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
footer #derechos-pie { float: left; width: 30%; padding: 15px 0px; font-size: 13px; }
footer #navegacion-pie { float: left; width: 60%; }
footer #navegacion-pie nav { }
footer #navegacion-pie nav ul { list-style: none; text-align: center; }
footer #navegacion-pie nav ul li { display: inline; }
footer #navegacion-pie nav ul li a { font-size: 14px; padding: 13px; text-decoration: none; color: #e71; }
footer #sociales-pie { float: left; width: 10%; text-align: right; }
footer #sociales-pie img { width: 30px; margin: 10px 0px 0px 6px; }

@media screen and (max-width: 1200px) {
	.ancho { width: 100% }
	
	#encabezado #logo img { margin-left: 20px; }
	#encabezado #logo img { margin-bottom: 10px; width: 130px; margin-bottom: 0px; }
	#boton-menu { display: block; }
	#boton-idioma { display: block; }
	#nav-horizontal { display: none; }
	
	.bloque1de4 { width: 50%; }
	.bloque2de4 { width: 50%; }
	.bloque3de4 { width: 50%; }
	.bloque4de4 { width: 50%; }
	
	.bloque1de6 { float: left; width: 20%; }
	
	article { padding: 0 60px; }
	.subarticulos article { padding: 0 60px; }
	
	.caja-1 { margin: 20px 40px; padding: 20px 40px; }
	
	#cobertura .imagen { width: 100%; }
	#cobertura .contenido { width: 100%; }
	#cobertura .imagen img { width: 100%; }
	
	#certificados article .imagen { width: 100%; }
	#certificados article .intro { width: 100%; }
	
	footer #derechos-pie { float: none; width: 100%; text-align: center;  }
	footer #navegacion-pie { float: none; width: 100%; }
	footer #sociales-pie { float: none; width: 100%; text-align: center; }
	footer #sociales-pie img { width: 30px; margin: 10px 0px 0px 6px; }
	
}
@media screen and (max-width: 1000px){
	
	#encabezado #logo { }
	
	#encabezado #nav-horizontal { display: none; }
	#encabezado .boton-menu img:last-child { margin-right: 20px; }
	
	#slideshow h2 { font-size: 5em; }
	
	main article .imagen { width: 100%; }
	main article .intro { width: 100%; }
	
	article header { text-align: center; margin: 30px; }
	
	.subarticulos article .imagen { width: 100%; }
	.subarticulos article .intro { width: 100%; }
	
	#bloques { margin: 80px 0; }
	
	.bloque1de2 { width: 100%; }
	.bloque2de2 { width: 100%; }
	
	.bloque1de4 { width: 100%; }
	.bloque2de4 { width: 100%; }
	.bloque3de4 { width: 100%; }
	.bloque4de4 { width: 100%; }
	
	.bloque1de6 { float: left; width: 25%; }
		
	.flyers h1, .parallax-window h1 { font-size: 80px; }
	.flyers h2, .parallax-window h2 { font-size: 100px; }
	.parallax-window .parallax-titulo { font-size: 40px; text-shadow: 10px 10px 15px #000; }
	
	.marcas { margin-bottom: 40px; }
	.marca-1 { }
	.marca-2 { text-align: center; }
	.marca-2a { text-align: center; }
}
@media screen and (max-width: 860px){
	#slideshow h2 { font-size: 3em; line-height: .8em; }
	
	main footer article .imagen { width: 100%; }
	main footer article .intro { width: 100%; }

	#contacto .imagen { width: 100%; }
	#contacto .formulario { width: 100%; }
	
	.bloque1de3 { width: 100%; }
	.bloque2de3 { width: 100%; }
	.bloque3de3 { width: 100%; }
	
	.bloque1de6 { float: left; width: 33.33%; }
	
	.pestanas ul.tabs li { width: 16.66%; }
	
}
@media screen and (max-width: 700px){
	#encabezado #logo { width: 50%; }
	#encabezado #logo img { width: 110px; }
	#encabezado .boton-menu { width: 50%; }
	
	#slideshow .textoIzqBajo { bottom: 40%; left: 20%; padding: 10px; }
	#slideshow .textoDerAlto { top: 1%; right: 20%; padding: 10px; }
	#slideshow h2 { font-size: 3em; }
	
	#bloques { margin: 40px 0; }
	
	.bloque1de6 { float: left; width: 50%; }
	
	main { }
	main header {  }

	.flyers h1, .parallax-window h1 { font-size: 50px; }
	.flyers h2, .parallax-window h2 { font-size: 63px; }
	
	footer #navegacion-pie nav ul { list-style: none; text-align: center; }
	footer #navegacion-pie nav ul li { display: block; }
	footer #navegacion-pie nav ul li a { display: block; font-size: 14px; padding: 10px; text-decoration: none; color: #e71; }
	
	.pestanas ul.tabs li { width: 25%; }
}
@media screen and (max-width: 467px){
	#bloques .caja-2 { margin: 0; width: 100%; }
	
	#slideshow .textoIzqBajo { bottom: 60%; left: 20%; padding: 10px; }
	#slideshow h2 { font-size: 2em; }
	.flyers h1, .parallax-window h1 { font-size: 40px; }
	.flyers h2, .parallax-window h2 { font-size: 50px; }
	
	.titulo-seccion { padding: 10px 10px; font-size: 20px;  }
	
	#contacto .imagen img { padding: 30px 0 0 0; }
	
	.bloque1de6 { float: left; width: 100%; }
	
	article { padding: 0 18px; }
	.marco-titulo h1 { font-size: 30px; }
	.marco-titulo h2 { font-size: 20px; }
	article header .marco-titulo, main header .marco-titulo { padding: 10px 0px; }
	
	.marcas { margin-bottom: 0px; }
	.marca-1 { float: none; width: 100%; margin-bottom: 40px; }
	.marca-2 { float: none; width: 100%; text-align: center; margin-bottom: 40px; }
	.marca-2a { float: none; width: 100%; margin-bottom: 40px; }
}

@media screen and (max-width: 400px){
	.caja-1 { margin: 20px 15px; padding: 20px 15px; }
	#bloques .caja-1 section { height: 240px; }
	.flyers h1 { font-size: 31px }
	.flyers h2 { font-size: 38px }
}