@charset "utf-8";
/* CSS Document */

* { border:0;
margin:0;
padding:0;
box-sizing:border-box;}
a { text-decoration:none; }
img, video { max-width:100%;}
strong,  h2,   input[type="submit"] { font-family: 'DINPro-Bold', sans-serif; }
h1  {font-family: 'DIN-Medium', sans-serif; font-weight:normal;}
input[type="submit"]:hover, #contacto a:hover, #servicios span:hover, #videos a:hover, #pie a:hover{ opacity:0.8;}
input[type="submit"] { -webkit-appearance: none;}

body { font-family: 'din-regular', sans-serif; font-size:16px; color:#3e3d40; background:#fff;  }

#top, #slide, #empresa, #contacto, #map, #pie { 
display:block; width:100%;
}
.cont { width:1110px; margin:0 auto;}

#top {  font-size:0; z-index:200; }
#top .cont {padding:20px 0 0 0;}
h1, #nav, #menu, ul#menu li { display:inline-block;  vertical-align:bottom;}
h1 { width:48%; padding-bottom:20px; }
h1 span {font-size:20px;  padding-left:14px; padding-bottom:14px; display:inline-block; line-height:23px; text-transform:uppercase; vertical-align:bottom; }
#nav { width:52%; /*text-align:right;*/  z-index:20; padding-bottom:0;}
ul#menu  { list-style:none; }
ul#menu li:first-child { padding-left:0;}
ul#menu li { padding-left:10px; font-size:15px; padding-right:10px;  }
ul#menu li a { color:#3e3d40; }
ul#menu li a:hover, ul#menu li.current a { color:#cb221d; }

#slide {height:630px;   overflow:hidden; background:#cb221d url(images/bg-slide.jpg) repeat-x;}

h2{ font-size:32px; line-height:1; text-transform:uppercase; }
h3{ font-size:24px; line-height:1; text-transform:uppercase; margin-bottom:30px; color:#cb221d; border-bottom:solid 1px #3e3d40; padding-bottom:30px; }

.col2, .col3, .col4, .col4-3, .col3doble, .col6 { display:inline-block; vertical-align:top;}
.col3 { width:350px;}
.col3doble { width:730px;}
.col4 { width:255px;}
.col4-3 { width:825px;}
.col2 { width:540px;}
.col6 { width:160px;}
.right-gap { margin-right:25px;}
.left-gap { margin-left:25px;}

#empresa { padding:30px 0px 10px; background:#fff url(images/bg-empresa.jpg) bottom center no-repeat;}
#empresa h2, #contacto h2 { margin-bottom:30px;}
#empresa h2{ color:#cb221d; }
#empresa p { font-size:22px; margin-bottom:18px; line-height:1.4;}

#contacto { background:#3e3d40; color:#fff; padding:30px 0px;}
#contacto p {  line-height:21px; margin-bottom:24px;}
#contacto p strong { display:block; font-size:18px; color:#eb1b23;}
#contacto p a{ color:#fff; }
input, textarea { padding:5px 10px; color:#fff; font:inherit; border:solid 1px #cfcecf; height:40px; background:#3e3d40; width:100%; display:block; vertical-align:top; margin-bottom:30px; font-size:16px; }
textarea { height:180px; }
input[type="submit"] {background:#cb221d; color:#fff;  padding:0; border:none;font-size:16px; }

#map { height:300px;}

#tit {background:#cb221d url(images/bg-lines.jpg) repeat-x;}
#tit h2{font-size:32px; color:#fff;  line-height:100px; text-align:left; margin-bottom:0; font-family: 'din-regular', sans-serif; padding-top:16px;}

#main { padding:30px 0; min-height:350px; background:url(images/bg-main.jpg) no-repeat center bottom -170px;}
#main p { margin-bottom:10px;}

.catalogo .col4 { margin-right:25px; margin-bottom:30px; text-align:center;}
#main.catalogo .col4:nth-of-type(4n) { margin-right:0;}
.catalogo .foto-p {height:190px; background:#eee; overflow:hidden; padding:10px;}
.catalogo img { display:block; max-height:170px; margin:0 auto;}
.catalogo a { display:block;  position:relative;}
.catalogo .link { width:100%; height:190px; position:absolute; top:0; left:0; visibility:hidden; 
background:rgba(51, 51, 51, .5) url(images/plus.png) no-repeat center center;}
.catalogo a:hover .link { visibility:visible;}
.catalogo h4 { text-transform:uppercase; font-size:15px; padding:10px 4px; background-color:#3e3d40; color:#fff;}

.folletos .col6 { margin-right:25px; margin-bottom:30px; text-align:center;}
#main.folletos .col6:nth-of-type(6n) { margin-right:0;}
.folletos .foto-p {height:213px; background:#eee; }
.folletos img { display:block; max-height:213px; margin:0 auto;}
.folletos a { display:block;  position:relative;}
.folletos .link { width:100%; height:213px; position:absolute; top:0; left:0; visibility:hidden; 
background:rgba(51, 51, 51, .5) url(images/plus.png) no-repeat center center;}
.folletos a:hover .link { visibility:visible;}
.folletos h4 {  font-size:14px; padding:10px 4px; background-color:#3e3d40; color:#fff; }

.producto .col2:first-of-type { background-color:#eee; text-align:center; padding:20px;}
.producto p { line-height:20px;}

#footer {  font-size:0px; padding:20px 0; background:#cb221d; color:#fff; }
#footer p { display:inline-block; width:50%;font-size:12px; vertical-align:middle; }
#footer p.right { text-align:right;  }
#footer a {color:#fff;}

#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	overflow: hidden;
	width: 32px;
	height: 32px;
	border: none;
	text-indent: 100%;
	background: url(images/top-move.png) no-repeat right top; z-index:20;
}

::-webkit-input-placeholder {color: #fff;}
:-moz-placeholder {color: #fff;}
::-moz-placeholder {color: #fff;}
:-ms-input-placeholder {color: #fff;}


@media screen and (max-width: 1110px){
.cont { width:97%; }
.col3 { width:31.5%;}
.col3doble { width:65%;}
.col4 { width:23%;}
.col4-3 { width:74%;}
.col2 { width:48.6%;}
.col6 { width:14.4%; }
.right-gap { margin-right:2.2%;}
.left-gap { margin-left:2.25%;}
h1 {width:54%;}
#nav {width:46%;}
.catalogo .col4, .folletos .col6 { margin-right:2.2%; }
}

@media screen and (max-width: 1110px){
.folletos .foto-p, .folletos .link{ height:190px;}
}

@media screen and (max-width: 940px){
.folletos .foto-p, .folletos .link{ height:175px;}
}


@media screen and (max-width: 880px){
.catalogo .col4, .folletos .col6 { margin-right:2.15%; }
.catalogo .foto-p { height:auto;}
.folletos .foto-p, .folletos .link{ height:164px;}
}

@media screen and (max-width: 860px){
h1 {width:55%;}
#nav {width:45%;}
}

@media screen and (max-width: 840px){
.catalogo .link { height:180px;}
}

@media screen and (max-width: 820px){
h1 {width:78%;}
}

@media screen and (max-width: 800px){
#slide {height:500px;  background-position: left bottom;}
.catalogo .col4, .folletos .col6 { margin-right:2.1%; }
.catalogo .link { height:170px;}
#main { background-size:contain; background-position:center bottom -100px;}
.folletos .foto-p, .folletos .link{ height:150px;}
}

@media screen and (max-width: 768px){
.col3 { width:31.3%;}
#empresa p { font-size:20px; line-height:1.2;}
.catalogo h4 { font-size:14px;}
.folletos .col6 {width:31.3%;  }
#main.folletos .col6:nth-of-type(3n) { margin-right:0;}
.folletos .foto-p, .folletos .link{ height:228px; padding-top:8px;}
}

@media screen and (max-width: 730px){
.catalogo .foto-p { height:160px;}
	.catalogo .link { height:160px;}
	.catalogo .col4 { margin-right:2%; }
	.col2 { width:48.5%;}
}

@media screen and (max-width: 680px){
#slide {height:430px; }
.catalogo .col4 { width:48.6%;}
#main.catalogo .col4:nth-of-type(2n) { margin-right:0;}
.catalogo .foto-p, 	.catalogo .link { height:190px;}
}

@media screen and (max-width: 580px){
h1 { width:80%;  }
h1 img{ width:22%;  }
h1 span {font-size:17px;  padding-left:10px; padding-bottom:10px; line-height:20px; }
#slide {height:400px; }
}

@media screen and (max-width: 520px){
.col2, .col3, .col4, .col4-3, .col3doble, #main.catalogo .col4, .folletos .col6 { width:100%; display:block;}
#contacto .col3, #main.catalogo .col4, .folletos .col6, .producto .col2:first-of-type   {margin-bottom:20px; }
.right-gap, #main.catalogo .col4 { margin-right:0;}
.left-gap { margin-left:0;}
#footer p { width:100%; display:block; }
 #footer p.right {  text-align:left; margin-top:8px; }
 #main { background-position:center bottom -50px;}
 h3 { margin-bottom:20px; padding-bottom:20px;}
}

@media screen and (max-width: 480px){
#slide {height:380px; }
#tit h2 { font-size:24px; line-height:normal; padding:36px 0 20px 0;
}

@media (max-width: 420px) {
	h1 span {font-size:16px;}
	}
}

@media (max-width: 400px) {
h1 { width:79%;  }
h1 img{ width:28%;  }
h1 span {font-size:15px; line-height:16px;  padding-left:8px; padding-bottom:6px; width:68%; }
#slide {height:340px; }
}

@media screen and (max-width: 360px){
#slide {height:320px; }
}

@media screen and (max-width: 320px){
#slide {height:300px; }
}