/* RESET*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, thead, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

* {box-sizing:border-box;}


/*ESTILOS GENERALES
****************************************/

body {
	font-family: 'Rubik', sans-serif;
	color: #707070;
	}
	
::-webkit-scrollbar {
	width: 10px;
	}
	
::-webkit-scrollbar-track { /*fondo-barra-scroll*/
	background-color: #E9E9E9;
	}

::-webkit-scrollbar-thumb { /*barra-scroll*/
	background-color: gray;
	}
	
::-moz-selection {
	background-color:#E9E9E9;
	}
	
::selection {
	background-color:#E9E9E9;
	}
	
a {
	text-decoration:none;	
		
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	}



header {
	width: 300px;
	height: 140px;
	padding-top: 20px;
	margin: auto;		
}

#boton-wa {
	position: fixed;
	width: 80px;
	height: 70px;
	background-color: #ff6c00;
	top: 30%;
	right: 0;
	border-radius: 35px 0 0 35px;
	z-index: 10;
	background-image: url(../imagenes/whatsapp.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 47%;
}

#boton-wa:hover {
	background-color: #db2701;
}

#productos {
	width: 100%;
	height: 2700px;	
	padding: 100px 0;
	background-image: url(../imagenes/whirlpool.png);	
}

.titulos {
	text-align: center;
	font-size: 40px;
	letter-spacing: 2px;
	margin-bottom: 50px;
	font-weight: 300;
	color: #ff8a00;
}

.titulos span {
	font-weight: 800;
}

#productos article {
	margin: auto;
	width: 1024px;
	height: 1350px;
	margin-top: 100px;	
}

#productos article section {
	width: 1024px;
	height: 400px;	
	text-align: left;
	margin: auto;	
	background-color: white;
	margin-bottom: 80px;
	box-shadow: 5px 5px 10px RGBA(0,0,0,0.2)
}

#productos article section figure {
	position: relative;
	float: left;
	width: 550px;
	margin-right: 50px;
	height: 400px;	
	background-position: center center;
	background-repeat: no-repeat;
}

#productos article section:nth-child(1) figure {
	background-image: url(../imagenes/duraluminio_7075_nacional.jpg);
}

#productos article section:nth-child(2) figure {
	background-image: url(../imagenes/Duralumino_importado_7075_t6.jpg);
}

#productos article section:nth-child(3) figure {
	background-image: url(../imagenes/laminas_duraluminio.jpg);
}

#productos article section:nth-child(4) figure {
	background-image: url(../imagenes/aluminio_alumaz.jpg);
}

#productos article section:nth-child(5) figure {
	background-image: url(../imagenes/duraluminio_en_arena.jpg);
}



#productos article section h2 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	color: #db2701;
	padding: 50px 30px 30px 50px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#productos article section figcaption {
	font-size: 15px;
	line-height: 30px;
	padding: 20px 30px;
}

/*

#servicios_complementarios {
	width: 1024px;
	height: 900px;
	margin: auto;
	margin-top: 100px;	
}

#servicios_complementarios section {
	width: 100%;
	height: 302px;
	margin: auto;
	padding-bottom: 80px;	
	margin-bottom: 50px;
	
}

#servicios_complementarios section figcaption {
	background-color: #F2F2F2;
	font-size: 16px;
	line-height: 30px;
	width: 90%;	
}

#servicios_complementarios section figcaption span {
	font-weight: 700;
	color: #db2701;
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 1px;
}

#servicios_complementarios section:nth-child(2) figcaption{
	margin-left: 10%;
	padding: 90px 50px 90px 150px;
}

#servicios_complementarios section:nth-child(3) figcaption{
	padding: 90px 50px 90px 150px;
	text-align: right;
}
*/

#hablemos {
	width: 100%;
	height: 650px;
	padding-top: 170px;
	background-image: url(../imagenes/hablemos.jpg);
	background-position: center center;
}

#hablemos section {
	width: 50%;
	height: 300px;
	background-color: rgba(204,0,30,0.8);
	border-radius: 0 200px 200px 0;
	color: white;
	font-size: 20px;
	line-height: 35px;
	padding: 4% 18%;
	text-align: center;
}

#hablemos section a:hover {
	opacity: 0.8;
}

#hablemos section span {
	font-weight: 700;
}

#preguntas {
	width: 100%;
	height: 400px;
	background-image: url(../imagenes/preguntas.jpg);
	background-position: center center;
}

#preguntas section {
	width: 50%;
	margin-left: 50%;
	height: 400px;
	background-color: rgba(250,250,250,0.9);	
	text-align: center;
	padding-top: 110px;
}

#preguntas section h2 {
	color: #db2701;
	font-size: 20px;
	line-height: 30px;	
	width: 300px;
	margin: auto;	
}

#preguntas section h2 span {
	font-weight: 700;
	font-size: 30px;
	line-height: 45px;
}

#preguntas section h2 a:hover {
	opacity: 0.8;
}

footer {
	width: 100%;
	height: 800px;
}

footer article {
	width: 100%;
	height: 400px;
}

footer article iframe {
	width: 50%;
	height: 400px;
}


footer article aside {
	width: 50%;
	height: 400px; 	
	float: left;
	color: white;
	text-align: right;	
	padding: 110px 50px 0 0;
	background-image: url(../imagenes/colores.jpg);	
}

footer article aside h6 {
	font-weight: 400;
	font-size: 22px;
	line-height: 42px;
	letter-spacing: 2px;	
}



footer section {
	width: 100%;
	height: 300px;
	padding-top: 50px;
	text-align: center;
}

footer section h4 {
	color: #db2701;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 30px;
}

footer section h4 span {
	color: #ff8a00;
	margin-left: 30px;
	margin-right: 30px;
}

footer aside {
	width: 100%;
	height: 100px;
	padding-top: 40px;
	background-image: url(../imagenes/whirlpool.png);
}

footer aside h5 {
	position: relative;
	float: left;
	width: 370px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 1px;	
	color: #ff8a00;
	margin-left: 50px;	
		
}

footer aside h4 {
	position: relative;
	float: right;
	width: 140px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 1px;	
	color: #ff8a00;
	margin-right: 50px;		
}

footer aside h4 a {
	color: #ff8a00;
}

footer aside h4 a:hover {
	color: #FF1830;	
}

/* M E D I A _ Q U E R Y
*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/


/*1536 x 864 */
@media screen and (max-width:1600px) {

header {	
	height: 80px;
	padding-top:5px;
	text-align: center;
}

header a img {
	width: 70%;	
}

#hablemos section {
	padding: 4% 14%;
}

}


/*1024*/
@media screen and (max-width:1200px) {

#hablemos section {
	padding: 7% 10%;
}

#productos {
	height: 2150px;	
}

#productos article {	
	width: 800px;
	height: 1800px;
}

#productos article section {
	width: 100%;
	height: 300px;		
	margin-bottom: 60px;
}

#productos article section figure {
	width: 250px;
	margin-right: 50px;
	height: 300px;	
	background-size: 100%;	
}

#productos article section h2 {
	padding: 40px 30px 0px 50px;
}

#productos article section:nth-child(3) h2 {
	padding-top: 80px;
}
	
}


/*768*/
@media screen and (max-width:800px) {

#productos {
	height: auto;	
}

#productos article {	
	width: 80%;
	height: auto;
}

#productos article section {
	height: auto;	
}

#productos article section figure {
	width: 200px;
	margin-right: 30px;
	height: 145px;	
}

#productos article section h2 {
	font-size: 16px;
	line-height: 26px;
	padding: 60px 30px 30px 50px;
}

#productos article section:nth-child(3) h2 {
	padding-top: 60px;
}

#productos article section figcaption {
	padding: 20px 30px 40px 30px;
}

#hablemos section {
	padding: 8% 8%;
}

footer aside h5 {
   margin-left: 30px;
}

footer aside h4 {
	margin-right: 30px;
}

}

/*414*/
@media screen and (max-width:600px) {

#boton-wa {
	width: 60px;
	height: 50px;
	top: 80px;
}

.titulos {
	font-size: 30px;
	padding: 0 40px;
	margin-bottom: 30px;
}

#productos {
	padding: 50px 0;	
}

#productos article {	
	width: 90%;
	margin-top: 40px;
}

#productos article section figure {
	width: 100%;
	height: 240px;
	background-position: top center;
    margin-bottom: 30px;
}

#productos article section h2 {
	text-align: center;	
	padding: 0 20px;
}

#productos article section figcaption {
	padding: 20px 30px 40px 30px;
}

#hablemos {
	background-image: url(../imagenes/hablemos-p.jpg);
}

#hablemos section {
	width: 260px;
	height: 260px;
	border-radius: 50%;
	font-size: 16px;
	line-height: 26px;
	padding: 50px 40px;
	margin: auto;
}

#preguntas section {
	width: 100%;
	margin-left: 0;
	height: 400px;
	background-color: rgba(0,0,0,0.5);	
	text-align: center;
	padding-top: 110px;
}

#preguntas section h2 {
	color: #fff;
}

footer article iframe {
	width: 100%;
	height: 200px;
}

footer article aside {
	width: 100%;
	height: 200px;
	text-align: center;	
	padding: 40px 0px 0 0px;
}

footer article aside h6 {
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 2px;	
}

footer section {
	padding-top: 70px;
}


footer section h4:nth-child(3) {
	display: none;
}

footer aside {
	padding-top: 30px;
}

footer aside h5, 
footer aside h4 {
	width: 100%;
	font-size: 12px;
	letter-spacing: normal;
	text-align: center;
	margin: 0;
 }


}