body {font-family: 'Lato', sans-serif; font-weight: 400}
.block {padding-top: 60px; padding-bottom: 60px}

/*HEADER*/
#header {background: #8b8d92; font-size: 16px; font-weight: 300; color: #fff; width: 100%; position: fixed; z-index: 9999}
#header #logo img {width: 420px; height: auto; max-width: 100%; margin-top: 0}
#header li {list-style: none; display: inline-block; margin-left: 20px}
#header li a {color: #fff}
#header ul {text-align: right}
.social-icons a {display: inline-block; margin: 0 5px}

.top-head a {color: #fff}

.top-head {text-align: right; padding-top: 10px; margin-bottom: 15px}
.top-head img {height: 20px; width: auto}
.main-menu {font-size: 16px; font-weight: 300}

.mobile {display: none; visibility: hidden}
.desktop {display: block; visibility: visible}


/* -- HOME -- */
/*SLIDER*/
#slider {background: #8b8d92; position: relative; min-height: 655px; padding-top: 125px}
#slider .bx-wrapper {margin: 0; background: 0 none; border: 0 none; box-shadow: 0 0 0 #fff}
/*#slider::before {content: ''; background: url(images/deco-slider.png) no-repeat center; width: 530px; height: 530px; display: block; position: absolute; top: 123px; left: 0; z-index: 9998; background-size: contain}*/

#slider .slider div.slide {height: 530px}
#slider .bx-wrapper .bx-pager, .bx-wrapper #slider .bx-controls-auto {bottom: 50px; right: 30px}

#slider .slider div.slide:nth-child(1) {background: url(images/slider-2.jpg) no-repeat center; background-size: cover}
#slider .slider div.slide:nth-child(2) {background: url(images/slider-3.jpg) no-repeat center; background-size: cover}
#slider .slider div.slide:nth-child(3) {background: url(images/slider-1.jpg) no-repeat center; background-size: cover}

.slider > div h2 {text-align: right; color: #333; font-size: 70px; line-height: 65px; font-weight: 700; display: inline-block; background: rgba(225,225,225,0.70); float: right; margin-top: 180px; padding: 20px}
.slider > div span {font-weight: 700}
#slider .bx-wrapper .bx-pager {text-align: right}
#slider .bx-wrapper .bx-pager.bx-default-pager a {border-radius: 0; width: 50px; height: 6px; border: solid 1px #fff; background: 0 none}
#slider .bx-wrapper .bx-pager.bx-default-pager a.bx-pager-link.active {background: #fff}
#slider .bx-wrapper .bx-controls-direction {display: none; visibility: hidden}
span.small-l {font-size: 0.3em; display: block; font-weight: 300}

#top-home {background: #ededed /*url(images/home-top-bg.jpg) no-repeat center left; background-size: auto 100%*/}
.top-home-deco img {max-width: 100%; height: auto}
.top-home-info img {margin: 30px 0}
.about-home-image {background: url(images/home-about-image.jpg) no-repeat center; background-size: cover; min-height: 415px; margin-bottom: 60px}
.certificaciones-home-image {background: url(images/home-certificaciones-image.jpg) no-repeat center; background-size: cover; min-height: 415px}
.about-title {font-size: 36px; font-weight: 300; color: #3b3b3b; position: relative}
.about-title::before {content: ''; width: 80px; height: 3px; background: #071689; display: block; position: absolute; top: -20px; left: 0}
.certificaciones-title::before {content: ''; width: 80px; height: 3px; background: #071689; display: block; position: absolute; top: -20px; left: 0}
.certificaciones-title {position: relative}
.certificaciones p {position: relative; padding-left: 130px; margin-bottom: 45px; min-height: 90px}
.certificaciones .iso::before {background: url(images/iso.svg) no-repeat center; content: ''; display: block; position: absolute; top: -10px; left: 4px; width: 110px; height: 95px}
.certificaciones .fsc::before {background: /*url(images/fsc.svg) no-repeat center*/ 0 none; content: ''; display: block; position: absolute; top: -12px; left: 0; width: 115px; height: 145px}
#about-home h3 {color: #071689; font-weight: 700; font-size: 32px; margin-bottom: 30px; margin-top: 30px}
#about-home p {text-align: justify}

#video {background: url(images/video-bg.jpg) no-repeat center center; text-align: center; background-size: cover}
#video img {width: 420px; height: auto; max-width: 80%; display: block; margin: 0 auto 30px}
#video iframe {width: 560px; height: 315px}

/*productos*/
.producto-home {margin-bottom: 30px}
.producto-home .box {/*background: url(images/posicion.jpg) no-repeat center;*/ background-size: auto 100%; margin-bottom: 30px; overflow: hidden; transition: all 0.2s ease; height: 500px; position: relative}
.producto-home .box.industria {background: url(images/industria.jpg) no-repeat center; transition: all 0.2s ease; background-size: auto 100%}
.producto-home .box.materiales {background: url(images/materiales.jpg) no-repeat center; transition: all 0.2s ease; background-size: auto 100%}
.producto-home .box.acabados {background: url(images/acabados.jpg) no-repeat center; transition: all 0.2s ease; background-size: auto 100%}
.producto-home .box.especialidades {background: url(images/especialidades.jpg) no-repeat center; transition: all 0.2s ease; background-size: auto 100%}
.producto-home .box:hover, .producto-home .box.industria:hover, .producto-home .box.materiales:hover, .producto-home .box.acabados:hover, .producto-home .box.especialidades:hover {background-size: auto 105%; transition: all 0.2s ease}
.producto-home .info {position: absolute; bottom: 0; left: 0; height: 70px; background: rgba(225,225,225,0.80); box-sizing: border-box; padding: 0 20px; max-width: 80%; transition: all 0.5s ease}
.producto-home .box:hover .info {height: 200px; transition: all 0.5s ease}
.producto-home:nth-child(2) .box:hover .info {height: 500px; transition: all 0.5s ease}
.producto-home h3 {margin: 0; height: 70px; line-height: 70px; position: relative; padding-left: 35px}
.producto-home h3::before {position: absolute; left: 0px; top: 20px; background: url(images/icon-imper.svg) no-repeat center; background-size: cover; width: 30px; height: 30px; content: ''; display: block}
#productos-sec .row .col-xs-6 > ul {padding-left: 0}

/*galería*/
.row {margin: 15px;}
a.col-md-4 {overflow: hidden; height: auto}
#gallery {padding-top: 215px}
#gallery .col-md-4 {margin-bottom: 30px; text-align: center}
#gallery .col-md-4 img {max-width: 100%; height: auto; display: inline-block}
#gallery h2.about-title {padding: 0 30px; margin-bottom: 30px}
#gallery h2.about-title::before {left: 30px}

/*FOOTER*/
#footer {background: #464f96; border-bottom: solid 30px #071689}
.producto-home {height: 500px}
#footer h2 {font-size: 36px; font-weight: 300; color: #ffffff; position: relative}
#footer h2::before {content: ''; width: 80px; height: 3px; background: #ffffff; display: block; position: absolute; top: -20px; left: 0}
#footer #foot-logo {width: 305px; height: auto; margin-bottom: 20px}
#foot-box {padding: 20px; background: #fff; min-height: 340px}
#foot-box a {color: #333}
#footer #map {position: relative}
#footer #map::before {background: url(images/foot-pinter-deco.png) no-repeat center; width: 64px; height: 64px; position: absolute; top: -32px; left: 50%; margin-left: -32px; content: ''; display: block}
#footer #map::after {background: url(images/foot-pinter-deco.png) no-repeat center; width: 64px; height: 64px; position: absolute; bottom: -32px; left: 50%; margin-left: -32px; content: ''; display: block}
#footer form input[type="text"] {width: 100%; height: 42px; margin-bottom: 5px; border: solid 1px #fff; background: 0 none; color: #fff; padding: 0 10px; line-height: 42px; text-transform: uppercase}
#footer form input[type="submit"] {width: 100%; height: 42px; margin-bottom: 5px; border: solid 1px #fff; background: #fff; color: #464f96; padding: 0 10px; line-height: 42px; text-transform: uppercase}
#foot-media img {height: 20px; width: auto; margin-right: 5px}
#foot-media li {list-style: none; margin-bottom: 10px}
#foot-media {padding: 0}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

@media (max-width: 991px) {
	#foot-logo img {max-width: 80%; height: auto}
	.col-xs-6 {float: none; width: 100%; margin-bottom: 15px}
	#footer h2 {margin-top: 60px}
	.producto-home .box {background-size: 100% 100% !important}
	#slider::before {display: none; visibility: hidden}
	.slider > div {font-size: 40px; line-height: 45px}
	#slider {min-height: 300px}
	#slider .bx-wrapper {padding-top: 40px}
	#video iframe {width: 80%}
	#top-home {background-size: 100% auto; background-position: top; padding-top: 170px}
	.desktop {display: none; visibility: hidden}
	.mobile {display: block; visibility: visible}
}
@media only screen and (min-width: 360px) and (max-width: 767px) {
	#top-home {padding-top: 60px}
	#header #logo img {margin-top: 0}
	#header #logo {margin-bottom: 0}
	.top-head {text-align: center; padding-top: 10px; margin-bottom: 15px}
	#header ul {padding: 0; text-align: center}
	#slider .bx-wrapper {padding: 0}
	#slider::before {
		display: block;
		visibility: visible;
		width: 220px;
		height: 210px;
		background-size: contain;
		top: 135px;
		left: -85px;
		z-index: 9999
	}
	.slider > div {font-size: 28px; line-height: 30px}
	#slider {min-height: 345px}
	.block {padding-bottom: 30px; padding-top: 30px}
	#footer h2 {margin-top: 30px}
	.producto-home .box {height: 360px}
	.producto-home {height: 360px}
	#top-home .col-xs-6 {margin-bottom: 0}
	#top-home {padding-top: 0}
	.about-home-image, .certificaciones-home-image {height: 300px; min-height: 300px}
	.certificaciones .fsc::before {top: -3px}
	#slider {padding-top: 200px}
	.top-home-info img {margin-top: 0}
	#footer h2 {font-size: 28px}
	#map iframe {height: 250px !important}
	#top-home .col-xs-6.block.top-home-deco {padding-left: 0; padding-right: 0}
	.menu-mobile {margin-bottom: 0}
	#header .row {margin-bottom: 0}
	.slider > div h2 {font-size: 1em; line-height: inherit; margin-top: 70px}
	#slider .slider div.slide {height: 260px}
	#slider .bx-wrapper .bx-pager, .bx-wrapper #slider .bx-controls-auto {bottom: 20px; right: 10px}
	.producto-home:nth-child(3) .box:hover .info {height: 240px; transition: all 0.5s ease}
	.producto-home:nth-child(2) .box:hover .info li {margin-bottom: 0; line-height: 11px; font-size: 11px}
	.producto-home:nth-child(2) .box:hover .info {height: 345px}
	.producto-home:nth-child(2) .box:hover .info ul {padding: 0}
	.producto-home:nth-child(2) .box:hover .info {height: 300px; transition: all 0.5s ease}
	span.small-l {font-size: 0.4em; display: block}
}