@font-face {
    font-family: 'IcoMoon-Free';
    src: url('fuentes/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body { font-family: 'Titillium Web', sans-serif; font-size: 18px; }

header { background-color: #EE2737; height: 100px; }

#contenedor-navegacion { margin: 0 auto; width: 100%; }

#img-logo { background: #FFF; display: inline-block; height: 100px; width: 370px; }

#img-logo img { display: inline; height: 65px; margin: 18px 34px; }

#menu-navegacion { display: inline-block; height: 100px; position: absolute; }

#menu-navegacion ul { list-style: none; display: inline; padding: 0; margin: 0; }

#menu-navegacion ul li { display: inline-block; margin: 40px -2px;}

#menu-navegacion ul li a { color: #FFFFFF; display: inline; font-weight: 700; font-size: 14px; padding: 40px 35px 42px 35px; text-decoration: none; transition: 0.50s; }

#menu-navegacion ul li a:hover { background-color: #FFFFFF; color: #EE2737; }

#servicio-telefono { background-color: #f6f6f6; }

#servicio-telefono div { font-weight: 700; margin: 0px; padding: 10px 0px; margin: 0 auto; width: 100%; }

.bullets { display: inline; margin-top: 2px; position: absolute; }

.info { margin: 0 10px 0 110px; color: #EE2737; font-size: 18px; }

#icono-telefono:before { content: "\e942"; font-size: 20px; }

#texto-telefono { color: #FF0000; display: inline; font-size: 24px; margin-top: -3px; position: absolute; }

#icono-horario { margin: 0 10px 0 270px; }

#icono-horario:before { content: "\e94e"; }

#icono-cobertura { margin: 0 10px 0 430px; }

#icono-cobertura:before { content: "\e9b0"; }

#banner-principal { background-color: #FFF; height: 350px; text-align: center; background-image: url("imagenes/home-banner.jpg"); background-size: auto 350px; background-repeat: no-repeat; background-position: right top; overflow: hidden; }

#banner-principal h1 { background-color: rgba(255,255,255,0.7); color: #EE2737; font-size: 40px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; width: 620px; letter-spacing: 4px; margin: 65px auto 40px auto; }

#banner-principal p { background-color: rgba(255,255,255,0.7); color: #333333; font-size: 23px; font-family: 'Montserrat', sans-serif; width: 400px; margin: 40px auto; padding: 5px 30px; }

#informacion { background-color: #FFFFFF; height: 330px; width: 100%; }

#informacion section { margin: 0 auto; padding: 35px 0; width: 1270px; }

#informacion ul { display: block; padding: 0; margin: 0; text-align: center; list-style: none; }

#informacion li { display: inline-block; }

#informacion aside { padding: 10px 40px; }

.ventajas { width: 100px; }

#informacion h4{ font-size: 25px; text-align: center; margin: 5px 0; }

#informacion p {  width: 300px; font-family: 'Open Sans', sans-serif; line-height: 1.7; }

#extintores { background-color: #FFFFFF; height: 460px; width: 100%; }

#extintores section { margin: 0 auto; width: 1400px; }

#extintores ul { display: block; padding: 0; margin: 0; text-align: center; list-style: none; }

#extintores li { display: inline-block; min-width: 380px; }

#producto { height: 137px; width: 100%; }

#producto-banner { margin: 0 auto; padding: 23.5px 0; width: 1200px; }

#extintores aside { padding: 0 20px; }

.extintores-demo { width: 225px; }

#extintores h3 { font-size: 28px; margin: 0 auto; padding: 20px 0; text-align: center; text-transform: uppercase; }

#extintores p { font-size: 18px; font-family: 'Open Sans', sans-serif; width: 270px; line-height: 1.7; margin: 0 auto; padding: 0; }

#boton-info a { background: #EE2737; border-radius: 5px; color: #FFF; font-weight: 700; padding: 10px 50px; text-decoration: none; }

#extintores h4 { font-size: 25px; text-align: center; margin: 5px 0; }

#servicio { background-color: #f7c02e; height: 137px; width: 100%; }

#servicio-banner { margin: 0 auto; padding: 23.5px 0; width: 980px; }

#servicio-banner-contenedor { position: relative; }

#servicio-banner-contenedor h2 { font-size: 45px; margin: 20px 0; }

#boton-contacto { position: absolute; margin-top: -70px; right: 0px; }

#boton-contacto a { background-color: #002e5b; text-transform: uppercase; letter-spacing: 0.8px; padding: 15px 33px; display: inline-block; border-radius: 27px; }

#boton-contacto span { font-size: 13px; font-weight: bold; color: #ffffff; }

#descripcion { height: 350px; width: 100%; }

#descripcion video { margin: 25px 0; }

#proceso-extintores { width: 1000px; margin: 0 auto; }

#servicio-extintores { font-family: 'Open Sans', sans-serif; font-size: 15px; display: inline-block; position: absolute; width: 500px; margin: 40px 0 0 30px; }

#servicio-extintores li { margin-bottom: 5px; }

#descripcion h3 { font-size: 28px; margin: 20px 0 20px 0; }

#descripcion video { width: 450px; height: 300; }

#marcas { background-color: #f6f6f6; height: 100px; width: 100%; }

#marcas section { width: 100%; margin: 0 auto; }

#marcas aside { width: 1270px; margin: 0 auto; }

#marcas ul { list-style: none; margin: 0; padding: 28px 0 0 0; display: block; }

#marcas li { display: inline-block; padding: 0 32px; }

#marcas img { height: 50px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }

footer { font-family: 'Montserrat', sans-serif; }

#footer-main { background-color: #333333; font-family: 'Open Sans', sans-serif; font-size: 16px; height: 220px; color: #FFFFFF; }

#footer-columna { width: 1000px; margin: 0 auto; }

#footer-logo { width: 25%; border-right: 1px solid #ee2737; display: inline-block; margin: 30px 0; text-align: center; }

#footer-logo img { width: 70%; margin: 65px 0; }

#footer-presentacion { width: 40%; display: inline-block; font-size: 14px; margin: 0 10px; text-align: justify; }

#footer-presentacion p { margin-top: -120px; position: absolute; width: 320px; padding: 0 40px;}

#footer-contacto { font-size: 14px; width: 20%; display: inline-block; margin-top: 20px; position: absolute; }

#footer-contacto a { text-decoration: none; color: white; }

.contacto { margin: 0 12px 0 10px; color: #EE2737; font-size: 20px; }

#footer-telefono { font-weight: 700; }

#footer-ubicacion p { display: inline-block; margin: 4px 0; position: absolute; }

#icono-ubicacion:before { content: "\e947"; }

#footer-hora p { display: inline-block; margin: 4px 0; position: absolute; }

#icono-hora:before { content: "\e94e"; }

#footer-redes { margin: 30px 0; }

.red { margin: 10px 12px; color: #FFFFFF; font-size: 32px; }

#icono-facebook:before { content: "\ea8d"; }

#icono-twitter:before { content: "\ea92"; }

#icono-linkedin:before { content: "\eac8"; }

#icono-youtube:before { content: "\ea97"; }

#contenedor-firma { background-color: #333333; height: 50px; }

#contenedor-firma aside { color: #C8C8C8; font-size: 14px; text-align: center; }

#contenedor-firma p { border-left: 1px solid #ee2737; display: inline-block; font-size: 12px; margin: 0; padding: 2px 10px; }

#contenedor-firma a { text-decoration: none; color: #C8C8C8; }

.titulo-item { position: relative; }

.titulo-item-texto { font-size: 45px; margin: 0 30px 0 30px; text-align: center; }

.barra { position: absolute; top: 50%; margin-top: -1px; border-bottom-style: solid; border-bottom-width: 3px; border-color: rgb(43, 81, 118); width: 250px; }

.derecha { right: 0px; }

.izquierda { left: 0px; }

.icono {
	font-family: 'IcoMoon-Free';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	
	/* Enable Ligatures ================ */
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 1270px){

    body { width: 100%; }

    #menu-navegacion ul li a { padding: 42px 12px; }

    #servicio-telefono { font-size: 15px;  }

    .info { margin: 0 10px 0 75px; }

    #icono-horario { margin: 0 10px 0 200px; }

	#icono-cobertura { margin: 0 10px 0 340px; }

    #informacion { height: auto; }

    #informacion section { width: 100%; }

    #extintores { height: auto; }

    #extintores section { width: 100%; }

	#extintores aside { padding: 20px; }    

	#descripcion { height: auto; }

	#descripcion video { margin: 40px; }

    #descripcion section { display: inline-block; width: 400px; }

    #marcas { height: auto; }

    #marcas aside { width: 100%; }

    #marcas ul { text-align: center; padding: 25px 0 25px 0; }

    #marcas li { padding: 20px 32px; }

}

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

}

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

	#informacion aside { padding: 10px 0; }

}

@media screen and (max-width: 425px){

	#img-logo { display: inline-block; height: 150px; width: 100%; text-align: center; padding: 0; }

	#img-logo img { margin-top: 50px; }

	#menu-navegacion { height: 260px; position: relative; background: red; width: 100%; display: none;}

	#menu-navegacion ul li { display: block; margin: 19.5px 0px; text-align: center; }

	#menu-navegacion ul li a:hover { background-color: none; color: none; }

	#servicio-telefono { display: none; }

	/*#banner-principal { margin-top: 311px; }*/

	#banner-principal { margin-top: 0px; }

	#banner-principal h1 { font-size: 30px; width: 290px; }

	#banner-principal p { font-size: 18px; width: 270px; }

	#producto { height: 100px; }

	#producto-banner { width: auto; text-align: center; }

	#producto h1 { font-size: 20px; }

	#producto img { display: none; }

	#servicio { height: 100px; }

	#servicio-banner { width: auto; text-align: center; }

	#servicio h1 { font-size: 20px; }

	#servicio img { display: none; }

	#descripcion section { width: 100%; }

	#descripcion video { width: 290px; height: auto; }

	#servicio-extintores { width: auto; position: initial; margin: 0px 0px 50px 15px;}

	#marcas img { height: 38px; }

	#footer-main { height: 470px; }

	#footer-columna { width: 100px; margin: 15px 10px; }

	#footer-logo { width: auto; display: block; margin: 0px; border-right: none; }

	#footer-logo img { margin: 65px 70px; width: 200px; }

	#footer-presentacion { display: block; }

	#footer-presentacion p { margin-top: 10px; position: initial; padding: 0px; }

	#footer-contacto { width: 100%; margin: 30px 0; }

	#contenedor-firma { height: 100px; }

}

@media screen and (min-width: 1270px){

	#contenedor-navegacion { margin: 0 auto; width: 1270px; }
	
	#servicio-telefono div { font-weight: 700; margin: 0px; padding: 10px 0px; margin: 0 auto; width: 1270px; font-size: 16px; }

	#banner-principal { background-size: 100% auto; background-position: left top;  height: 350px; }
	
	#contenedor-pie div { width: 100%; margin: 0 auto; }

}