body{font-family: 'Anton' 'Roboto', sans-serif; margin:0; padding: 0;}

h1{text-align: center; font-family: 'anton'; font-size: 60px; text-transform: uppercase;}
/*p{text-align: center; font-family: 'roboto'; font-size: 30px;}*/
.grey{color: #646464;}
.white{color: #fff;}
.yellow{color: #FFD416;}
a{text-decoration: none;}

/*MENU*/
.header{background: url('../img/navbar-bg.png')center no-repeat #FFE600; height: 100px; margin-top: 50px; position: fixed; width: 100%; position: absolute; z-index: 99999; 
	padding-top: 15px; position: fixed;}
.header1{background: url('../img/navbar-bg.png')center no-repeat #FFE600; height: 100px; position: fixed; width: 100%; position: absolute; z-index: 99999; 
	padding-top: 15px; position: fixed;}
.header-2{background: url('../img/navbar-bg.png') center no-repeat;}
.header .marca, .header1 .marca{background:url('../img/logo.png') no-repeat; width:310px; height:150px; margin:0 auto; background-size: contain;}

.overlay-content li{list-style: none;}

.img-nav {cursor: pointer; width: 40px; height: 40px; position: absolute; right: 25px; top: 30px;}
.overlay {height: 0; width: 100%; position: fixed; z-index: 99; left: 0; top: 0; background-color: #646464; overflow-y: hidden; transition: 0.5s;}
.overlay-content {position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; color: #646464 !important;}
.overlay a {padding: 8px; text-decoration: none; font-size: 1.5em; letter-spacing: 1px; color: #FFD416; display: block; transition: 0.3s;}
.overlay a sub{padding: 8px; text-decoration: none; font-size: 1.5em; letter-spacing: 1px; color: #ccc; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #fff;}
.overlay .closebtn {position: absolute; top: 12px; right: 8px; width: 40px; height: 40px;}

/*MENU SCROLL*/
.header2{position: fixed; height: 100px; margin-top: 0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;}
.header2 .marca{background:url(../img/logo.png) no-repeat; width:310px; height:80px; margin:0 auto;}
.header2 .img-nav {top: 30px;}
.header2 .img-nav {width: 35px; height: 35px;}
/*FIN MENU SCROLL*/

.fp-logo{background: url('../img/logo.png') no-repeat center center; width: 320px; height: 64px; margin: 0 auto;}
.fp-menu-icon{background: url('../img/navbar.png') no-repeat center center;}
.fp-nav-ul{background: #FFE600;}


/*CAROUSEL*/
.fp-carousel h1{text-align: center; font-family: 'anton'; font-size: 60px; text-transform: uppercase; text-shadow: 1px 1px 3px #000000;}
.fp-carousel p{text-align: center; font-family: 'roboto'; font-size: 30px; text-shadow: 1px 1px 3px #000000;}
.fp-carousel .carousel-caption{top: 20% !important;}

section{height:100%; display:table; width:100%; padding: 0% 0;}
.contenido{display: table-cell; vertical-align: middle; margin: 0 auto;}

.pad{padding: 5% 0;}


/*EMPRESA*/
#empresa{background-color: #ffe600ba;}
.atencion-pers{background-color: #646464; background-image:url(../img/atencion-pers-bg.png) bottom right; position: relative; margin: 0; padding: 0; text-align: center; padding-bottom: 50px;}
.atencion-pers a{background: #FFE600; padding: 10px 40px; color: #000; top: 15px; position: relative; text-decoration: none;}
.atencion-pers a:hover{background-color: #000; color: #FFD416;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.atencion-pers p{color: #fff; font-size: 18px; line-height: 16px; margin-top: 15px;}
.atencion-pers-img img{text-align: center; margin: 0 auto; margin-top: 30px;}
.trama-sup{width: 100%; height: 60px; background: url(../img/navbar-bg-3.png) center; margin: 0; padding: 0; background-repeat-x: repeat;}
.boton{position: relative; z-index: 1;}
.scotch-1{position: absolute; z-index: 0; left: 0; left: -10px; top: -10px;}
.scotch-2{position: absolute; z-index: 9; right: 0; right: -18px; bottom: -15px;}

/*PRODUCTOS*/
/*.prod-title{padding: 15px;}
.prod-title a{text-decoration: none;}
.prod-title:hover{background: #3A3A3A;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}*/
/*#productos img{width: 100%; max-width: 400px;}*/
#productos h1{padding-bottom: 2%; margin: 0 auto;}
#productos {background-image: url(../img/atencion-pers-bg.png); background-repeat: no-repeat; background-position-x: center; }
#productos a:hover{text-decoration: none;}
.fp-card-deck .card-body {padding: 0; background-image: url(../img/bg-productos.png); background-repeat: no-repeat; background-position-y: bottom; background-position-x: right; min-height: 100px;}
.fp-card-deck .card-body h2{color: #fff; padding: 15px 30px;}
.fp-card-deck {background-color: #646464; border: 0;}
.fp-card-deck a {width: 100%; height: 100%; display: block;}
.fp-card-deck a:hover {text-decoration: none;}
.card-body .bg-productos{}

/*SERVICIOS*/
#servicios{background: url(../img/bg-servicios.jpg)no-repeat center center; background-size: cover;}
#servicios p{line-height: 16px;}
.servicios-camion{background: #FFD416; text-align: center; padding-top: 20px; position: relative;}
.servicios-camion img{}
.servicios-camion-texto{background: url(../img/bg-servicios-camion-texto.jpg)no-repeat center center; background-size: cover; padding: 3% 3% 1% 3%;}
.servicios-camion-texto h3{text-align: left; font-family: 'anton'; font-size: 30px; text-transform: uppercase; color: #646464;}
.servicios-camion-texto p{text-align: left; color: #646464;}
.dialog{position: absolute; top: -30px; left: 40%;}

/*CONTACTO*/
#contacto {background-color: #FFD416;}
#contacto h3{text-align: left; font-family: 'anton'; font-size: 30px; text-transform: uppercase; color: #000;}
#contacto form input, textarea{width: 100%; height: 50px; margin-bottom: 15px; background-color: rgba(255, 255, 255, .5); border: none;}
#contacto textarea{height: 150px;}
#contacto .boton{background-color: #000; padding: 10px 40px; color: #FFD416; top: 15px; position: relative; text-decoration: none;}
#contacto .boton:hover{background-color: #fff; color: #FFD416;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}

/*FOOTER*/
footer{background-color: #000;}
footer p{text-align: center; width: 100%;}
footer ul{display: block; text-align: center; width: 100%;}
footer ul li{display: inline-block; text-decoration: none;}
footer ul li img{width: 70%;}

.footer-2{background-color: #fff;}
.footer-2 ul{display: block; text-align: center; width: 100%; padding-left: 0;}
.footer-2 ul li{display: inline-block; text-decoration: none;}
.footer-2 ul li img{width: 80%;}
.footer-2 p{text-align: center; margin: 0 auto;}

/*PRODUCTOS*/
.banner{width: 100%; position: relative; min-height: 380px;}
.banner img{width: 100%;}
.banner-text{width: 100%; text-align: left; position: absolute; top: 25%; left: 5%;}
.banner-text h1{text-align: left; text-shadow: 1px 1px 3px #00000061;}
#banner-extintores{background-image: url(../img/header-productos-extintores-02.jpg); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}
#banner-indumentaria{background-image: url(../img/header-productos-indumentaria-03.jpg); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}
#banner-seguridad{background-image: url(../img/header-productos-seguridad-04.jpg); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}
#banner-iluminacion{background-image: url(../img/header-productos-iluminacion-05.jpg); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}
#banner-sifones{background-image: url("../img/header-productos-sifones.jpg"); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}
#banner-senales{background-image: url("../img/header-productos-senales.jpg"); background-repeat: no-repeat; background-size: cover; background-position-x:left; background-position-y:center;}

#extintores .productos-image{width: 100%; height: 260px; border: solid 10px #B50505; background-size: cover;}
#indumentaria .productos-image{width: 100%; height: 260px; border: solid 10px #F4623B; background-size: cover;}
#seguridad .productos-image{width: 100%; height: 260px; border: solid 10px #FFD416; background-size: cover;}
#iluminacion .productos-image{width: 100%; height: 260px; border: solid 10px #29ABE2; background-size: cover;}
#sifones .productos-image{width: 100%; height: 260px; border: solid 10px #662d91; background-size: cover;}
#senales .productos-image{width: 100%; height: 260px; border: solid 10px #22b573; background-size: cover;}

#extintores a:hover, #indumentaria a:hover, #seguridad a:hover, #iluminacion a:hover{text-decoration: none;}

#extintores-1{background: url(../img/miniaturas-extintores-_-co2.jpg) no-repeat center center;}
#extintores-2{background: url(../img/miniaturas-extintores-_-polvo.jpg) no-repeat center center;}
#extintores-3{background: url(../img/miniaturas-extintores-_-1kg.jpg) no-repeat center center;}
#extintores-4{background: url(../img/miniaturas-extintores-_-sifon.jpg) no-repeat center center;}
#extintores-5{background: url(../img/miniaturas-extintores_recarga-sifon.jpg) no-repeat center center;}
#extintores-6{background: url(../img/miniaturas-extintores-_-purificador.jpg) no-repeat center center;}

#indumentaria-1{background: url(../img/miniaturas-indumentaria-_-capa-azul.jpg) no-repeat center center;}
#indumentaria-2{background: url(../img/miniaturas-indumentaria-_-capa-negra.jpg) no-repeat center center;}
#indumentaria-3{background: url(../img/miniaturas-indumentaria-_-ambo.jpg) no-repeat center center;}
#indumentaria-4{background: url(../img/miniaturas-indumentaria-_-opalo.jpg) no-repeat center center;}
#indumentaria-5{background: url(../img/miniaturas-indumentaria-_-nacar.jpg) no-repeat center center;}
#indumentaria-6{background: url(../img/miniaturas-indumentaria-_-onix.jpg) no-repeat center center;}

#seguridad-1{background: url(../img/miniaturas-seguridad-_-cintas.jpg) no-repeat center center;}
#seguridad-2{background: url(../img/miniaturas-seguridad-_-cono-semi-flex.jpg) no-repeat center center;}
#seguridad-3{background: url(../img/miniaturas-seguridad-_-cono-rigido.jpg) no-repeat center center;}
#seguridad-4{background: url(../img/miniaturas-seguridad-_-balizas.jpg) no-repeat center center;}
#seguridad-5{background: url(../img/miniaturas-seguridad-_-valla.jpg) no-repeat center center;}
#seguridad-6{background: url(../img/miniaturas-seguridad-_-cable-canal.jpg) no-repeat center center;}

#iluminacion-1{background: url(../img/miniaturas-iluminacion-_-senal-led.jpg) no-repeat center center;}
#iluminacion-2{background: url(../img/miniaturas-iluminacion-_-senal-premium.jpg) no-repeat center center;}
#iluminacion-3{background: url(../img/miniaturas-iluminacion-_-luz-emerg.jpg) no-repeat center center;}
#iluminacion-4{background: url(../img/miniaturas-iluminacion-_-faro.jpg) no-repeat center center;}
#iluminacion-5{background: url(../img/miniaturas-iluminacion-_-estabilizador.jpg) no-repeat center center;}
#iluminacion-6{background: url(../img/miniaturas-iluminacion-_-ups.jpg) no-repeat center center;}

#senales-1{background: url(../img/miniaturas-iluminacion-_-senal_prohibicion.jpg) no-repeat center center;}
#senales-2{background: url(../img/miniaturas-iluminacion-_-senal_obligacion.jpg) no-repeat center center;}
#senales-3{background: url(../img/miniaturas-iluminacion-_-senal_advertencia.jpg) no-repeat center center;}
#senales-4{background: url(../img/miniaturas-iluminacion-_-senal_fotoluz.jpg) no-repeat center center;}
#senales-5{background: url(../img/miniaturas-iluminacion-_-senal_incendio.jpg) no-repeat center center;}
#senales-6{background: url(../img/miniaturas-iluminacion-_-senal_peligro.jpg) no-repeat center center;}


#extintores .boton{background-color: #B50505; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}
#indumentaria .boton{background-color: #F4623B; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}
#seguridad .boton{background-color: #FFD416; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}
#iluminacion .boton{background-color: #29ABE2; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}
#sifones .boton{background-color: #662d91; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}
#senales .boton{background-color: #22b573; padding: 10px 40px; color: #fff; top: 15px; position: relative; 
	text-decoration: none; margin: 0 auto;}


/*media queries*/
@media (max-width: 1024px){
	.fp-carousel h1{font-size: 40px;}
	.fp-carousel p {font-size: 16px; line-height: 16px;}
	.banner{min-height: 250px;}
	.header, .header1 {margin-top: 0px; height: 75px;}
	.header .marca, .header1 .marca {width: 200px; height: 55px;}
	.img-nav {top: 15px;}
	/*#myCarousel{margin-top: 70px;}*/
}


@media (max-width: 768px){
	footer ul li {width: 20%;}
	.footer-2 ul li img {width: 40%;}
	.banner-text h1 {font-size: 40px;}
	.fp-carousel .carousel-caption {top: 40% !important;}
	.fp-carousel h1{font-size: 30px;}
}


@media (max-width: 580px){
	.header .marca, .header1 .marca {margin: initial;}
	.fp-carousel h1{font-size: 24px;}
}