html {
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	    background-color: #005189;
	cursor: default;
}

h1, h2, h3, h4, h5 { margin: 0; padding: 0; }


.wrapper {
	min-height: 900px;
	position: relative;
	overflow: visible;
	display: table;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.scene,
.layer {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.scene {
	min-height: 660px;
	position: relative;
	overflow: hidden;
	overflow: hidden;
}



.background {
	background: url(../img/header_bg2.jpg) no-repeat 50% 100%;
	bottom: -100px;
	background-size: cover;
	position: absolute;
	width: 110%;
	left: -5%;
	top: -5%;
}

.humo {
	background: url(../img/manchas.png) no-repeat 50% 100%;
	bottom: -100px;
	background-size: cover;
	position: absolute;
	width: 110%;
	left: -5%;
	top: -5%;
}

.producto2 {
	width: 33%;
    position: absolute;
    bottom: 95px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.producto3 {
	width: 33%;
	position: absolute;
	bottom: 95px;
	left: 0;
	right: 0;
	margin-right: auto;
}
.producto {
	width: 33%;
	position: absolute;
	bottom: 95px;
	left: 0;
	right: 0;
	margin-left: auto;
	
}
.new_title {
	width: 25%;
	position: absolute;
	top: 5%;;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.header_title {
	color: #FFF;
	font-size: 30px;
	text-align: center;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
}
.causa_box {
	margin-bottom: 0;
	left: 50%;
	width: 600px;
	margin-left: -300px;
	top: 0;
}
.causa_box img { width: 100%; height: auto; vertical-align: middle; text-align: center; }
.causa_box h1 { margin: 0; font-size: 45px; line-height: 40px; text-align: left !important; }
.causa_box h3 { margin: 0; font-size: 25px; line-height: 25px; text-align: left !important; }
.causa_box .left h1, .causa_box .left h2, .causa_box .left h3 { text-align: right !important; }
.causa_box .left {
	/*float: left;*/
	display: inline-block;
	width: 46%;
	vertical-align: middle;
	text-align: center;
}
.causa_box .right {
	/*float: right;*/
	display: inline-block;
	width: 48%;
	padding-left: 4%;
	vertical-align: middle;
	text-align: center;
}

.producto img, .new_title img {
	width: 100%;
	height: auto;
}

.titulo {
	font-size: 45px;
}
.titulo2 {
	font-size: 40px;
}
.clear { clear: both; }
#causas {
	position: relative;
	height: 4255px;
	overflow: hidden;
	background: #00478a url(../img/ciudad.png) no-repeat scroll center bottom;
}
#causas_title {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#causas_text {
	position: absolute;
	top: 130px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#trafico {
	position: absolute;
	top: 265px;
}

#fabricas {
	position: absolute;
	top: 510px;
}
#fabricas img { width: 90%; }

#incendios {
	position: absolute;
	top: 935px;
}

#basura {
	position: absolute;
	top: 1225px;
}

#cigarro {
	position: absolute;
	top: 1495px;
}
#cigarro img { width: 70%; }

#polvo {
	position: absolute;
	top: 1915px;
}

#particulas {
	position: absolute;
	top: 2245px;
}

#mancharoja_izq {
	width: 225px;
	position: absolute;
	left: 0;
	top: 725px;
}
#manchaazul_izq {
	width: 225px;
	position: absolute;
	left: 0;
	top: 1020px;
}
#mancharoja_der {
    width: 225px;
    position: absolute;
    right: 0;
    top: 1425px;
}
#manchaazul_der {
    width: 225px;
    position: absolute;
    right: 0;
    top: 1720px;
}
#mancharoja_izq2 {
    width: 225px;
    position: absolute;
    left: 0;
    top: 325px;
}
#manchaazul_izq2 {
    width: 225px;
    position: absolute;
    left: 0;
    top: 620px;
}
#mancharoja_der2 {
    width: 225px;
    position: absolute;
    right: 0;
    top: 1025px;
}
#manchaazul_der2 {
    width: 225px;
    position: absolute;
    right: 0;
    top: 1320px;
}
#manchaazul_izq img, #mancharoja_izq img, #manchaazul_der img, #mancharoja_der img, #manchaazul_izq2 img, #mancharoja_izq2 img, #manchaazul_der2 img, #mancharoja_der2 img { width: 100%; height: auto }
#pintor, #pintor2 {
	position: absolute;
	right: 0;
	top: -282px;
	margin-right: 50px;
	width: 300px;
}
#pintor img, #pintor2 img { width: 100%; height: auto; }

#sintomas_title {
	position: absolute;
	top: 2660px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#sintomas_text {
	position: absolute;
	top: 2760px;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 20px;
}

#ojo1, #ojo2, #ojo3, #ojo4 {
	position: absolute;
	width: 350px;
	top: 3000px;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: none;
}
#ojo1 { display: none; }
#ojo1 img, #ojo2 img, #ojo3 img, #ojo4 img, #nubes img { width: 100%; height: auto; }

#nubes {
	position: absolute;
	top: 3000px;
	left: 0;
	width: 100%;
}

#carritos {
	position: absolute;
	left: 0;
	bottom: 0;
}



#como_usar {
	position: relative;
	background-color: #FFF;
	height: 2100px;
	color: #00478a;
}
#usar_title {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.paso {
	position: absolute;
	width: 600px;
	margin: 0 auto;
	top: 215px;
	left: 0;
	right: 0;
}
.paso img, #ruleta img { width: 100%; height: auto; }
#paso2 { top: 385px; }
#paso3 { top: 567px; }
#imeca {
	width: 400px;
	top: 850px;
}
#imeca_text {
	position: absolute;
	top: 975px;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 20px;
}

#ruleta {
	position: absolute;
	top: 1300px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 700px;
}

#calidad_title {
	position: absolute;
	top: 2125px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#indicaciones_title {
	position: absolute;
	top: 600px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#indicaciones_text {
    position: absolute;
    top: 685px;
    left: 0;
    right: 0;
    max-width: 465px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-size: 18px;
}
#nubes2 {
	position: absolute;
	top: 815px;
	left: 0;
}
#nubes2 img { width: 100%; height: auto; }
#carritos2, #carritos3 {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3000px;
}
#carritos2 img {
	display: inline-block;
	margin-left: -50px;
}



#logo {
    width: 100px;
    float: left;
}
#menu ul#menu_links { margin: 10px 0 0 0; padding: 0; float: right; }
#menu ul#menu_links li { float: left; list-style: none; margin-right: 20px; }
#menu ul#menu_links li a { color: #FFF; text-decoration: none; font-size: 14px; }
#facebook { float: right; width: 24px; margin-top: 13px; }
#facebook img { width: 100%; height: auto; }
.clear { clear: both; }
.slicknav_menu {
	display:none;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.puntos_bg {
	background: #00478a url(../img/ciudad.png) no-repeat scroll center bottom;
}
.siguenos_bg {
	background: #015381; /* Old browsers */
	background: url(../img/ciudad.png) no-repeat center bottom, -moz-linear-gradient(top, #015381 0%, #0c9cb3 100%);
	background: url(../img/ciudad.png) no-repeat center bottom, -webkit-linear-gradient(top, #015381 0%,#0c9cb3 100%);
	background: url(../img/ciudad.png) no-repeat center bottom, linear-gradient(to bottom, #015381 0%,#0c9cb3 100%);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#015381+0,0c9cb3+100 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#015381', endColorstr='#0c9cb3',GradientType=0 ); /* IE6-9 */
}
#puntos {
	position: relative;
	padding-bottom: 450px;
}
#puntos #menu {
	margin-top: 50px;
	margin-bottom: 50px;
	position: initial;
	top: initial;
}
#puntos h1 { margin-bottom: 50px; }
#puntos #manchaazul_izq {
    width: 225px;
    top: 620px;
}
#puntos #mancharoja_izq {
    width: 225px;
    top: 385px;
}
#tiendas {
	background-color: #FFF;
	width: 100%;
	padding: 10px 0;
	position: relative;
}
#navLogos {
	 position: absolute;
    width: 540px;
    top: 50%;
    z-index: 500;
    left: 0;
    right: 0;
    margin: -12px auto 0 auto;
}
.owl-prev {
	position: absolute;
	left: -50px;
	background: transparent url(../img/prev.png) no-repeat scroll 0 0;
	background-size: contain;
	width: 24px;
	height: 24px;
	border: none;
	text-indent: -5000px;
	cursor: pointer;
}
.owl-next {
	position: absolute;
	right: -50px;
	background: transparent url(../img/next.png) no-repeat scroll 0 0;
	background-size: contain;
	width: 24px;
	height: 24px;
	border: none;
	text-indent: -5000px;
	cursor: pointer;
}
.owl-prev:focus, .owl-next:focus { outline: none; }
.owl-carousel-container {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
}
.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}
#map {
	margin: 0 0 30px 0;
	height: 700px;
	width: 100%;
}

#videos div {
	float: left;
	width: 32%;
	margin-right: 1%;
}
#videos div:first-child { margin-left: 1%; }
#videos div img { width: 100%; height: auto; }

.page {
    display: none;
}
#page_home { display: block; }

@media screen and (min-width: 1900px) {
	.causa_box {
		width: 900px;
		margin-left: -450px;
	}
	#fabricas { top: 595px; }
	#fabricas img {
	    width: 75%;
	}
	#incendios { top: 1155px; }
	#basura { top: 1527px; }
	#cigarro { top: 1909px }
	#polvo { top: 2455px; }
	#particulas { top: 2800px; }
	#sintomas_title { top: 3250px; }
	#sintomas_text { top: 3325px; }
	#ojo1 { top: 3540px; }
	#nubes { top: 3556px }
}

@media screen and (max-width: 1800px) {
	#causas { height: 3615px }
}

@media screen and (max-width: 1310px) {
	#pintor, #pintor2 {
		top: -235px;
		width: 250px;
	}
}

@media screen and (max-width: 1100px) {
	#pintor, #pintor2 {
		display: none;
	}
}

@media screen and (max-width: 1035px) {
	#manchaazul_izq, #mancharoja_izq, #manchaazul_der, #mancharoja_der, #manchaazul_izq2, #mancharoja_izq2, #manchaazul_der2, #mancharoja_der2 {
		width: 180px;
	}
}

@media screen and (max-width: 768px) {
	#manchaazul_izq, #mancharoja_izq, #manchaazul_der, #mancharoja_der, #manchaazul_izq2, #mancharoja_izq2, #manchaazul_der2, #mancharoja_der2 {
		width: 100px;
		display: none;
	}
	#carritos img { width: 90%; }
}
#mask1 {
    position: absolute;
    background-color: #FFF;
    top: 0;
    left: 0;
    width: 23%;
    height: 100%;
    display: none;
}
#mask2 {
    position: absolute;
    background-color: #FFF;
    top: 0;
    right: 0;
    width: 24%;
    height: 100%;
    display: none;
}
@media only screen and (max-width: 600px) {
    #ruleta img {
            width: 152%;
    height: auto;
    margin: 0 0 0 -27%;
    }
    #ruleta { overflow: hidden; }
    #mask1, #mask2 { display: block; }
	html {
		font-size: 12px;
	}
	.wrapper {
		min-height: 160px;
	}
	.scene {
		min-height: 160px;
	}
	.producto {
	    bottom: -5px;
	}
	#navLogos { display: none; }
	.new_title {
		width: 80%;
		top: 25%;
	}
	.header_title {
	    font-size: 20px;
	    top: 50%;
	}
	#menu { padding: 0 10px; }
	body {
		font-size: 17px;
	}
	#carritos {
	    left: -18px;
	    bottom: -4px;
	}
	#carritos2 {
	    bottom: 7px;
	}
	#carritos img { width: 60%; height: auto; }
	#carritos2 img { width: 7%; height: auto; }
	#carritos2 img { margin-left: -10px; }
	#carritos2 img:last-child { display: none; }
	#causas { background-size: contain; height: 1920px; }
	#sintomas_text { font-size: 13px; }
	.titulo { font-size: 35px; }
	.titulo2 { font-size: 25px; }
	.causa_box h1 {
	    font-size: 30px;
	    line-height: 25px;
	}
	.causa_box h3 {
	    font-size: 15px;
	    line-height: 15px;
	}
	.causa_box {
		width: 90%;
		margin-left: -45%;
	}
	#faq {
		height: 890px;
		background-size: contain;
	}
	#fabricas { top: 430px; }
	#incendios { top: 695px; }
	#basura { top: 860px; }
	#cigarro { top: 1020px; }
	#polvo { top: 1245px; }
	#particulas { top: 1410px; }
	#sintomas_title { top: 1580px; }
	#sintomas_text { top: 1660px; }
	#ojo1, #ojo2, #ojo3, #ojo4 { top: 1820px; width: 200px; }
	#nubes { top: 1790px; }
	#nubes2 { top: 763px; }
	.paso { width: 90%; }
	#paso1 { top: 170px; }
	#paso2 { top: 285px; }
	#paso3 { top: 405px; }
	#imeca { width: 90%; top: 530px; }
	#imeca_text { top: 625px; font-size: 13px; }
	#ruleta { width: 100%; top: 800px; }
	#calidad_title { top: 1190px; }
	#como_usar { height: 1480px }
	#faq_title { top: 32px; }
	#faq_text { top: 145px; font-size: 12px; width: 90%; max-width: 90%; }
	#indicaciones_title { top: 520px; }
	#indicaciones_text {
	    position: absolute;
	    top: 632px;
	    left: 0;
	    right: 0;
	    max-width: 90%;
	    width: 90%;
	    margin: 0 auto;
	    padding: 0 0 0 35px;
	    font-size: 12px;
	}
	#menu ul#menu_links { display: block; margin-right: 5px; margin-right: 13px; }
	#menu ul#menu_links li { float: left; list-style: none; margin-right: 5px; }
	#menu ul#menu_links li a { color: #FFF; text-decoration: none; font-size: 10px; }
	#facebook {     display: block;
    margin-right: 20px; }
	.slicknav_menu {
		display:none;
	}
	#puntos { padding-bottom: 50px; }
	.puntos_bg { background-size: contain; }
    .siguenos_bg { background-size: contain; }
   

@media(max-width: 480px){
	.producto2 {width: 55%; top: 10%; margin-left: 30%;}
	.producto3 {width: 50%; top: 35%; margin-left: 5%;}
	.producto {width: 45%; top: 50%; margin-left: 50%;}
	.header_title {top: 0%;}
	.new_title {top: 5%;}
}

.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 990;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden
}

.cd-transition-layer .bg-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
    height: 100%;
    width: 2500%;
    background: url(../img/ink.png) no-repeat 0 0;
    background-size: 100% 100%
}

.cd-transition-layer.visible {
    opacity: 1;
    visibility: visible
}

.cd-transition-layer.opening .bg-layer {
    -webkit-animation: cd-sprite .8s steps(24);
    -moz-animation: cd-sprite .8s steps(24);
    animation: cd-sprite .8s steps(24);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.cd-transition-layer.closing .bg-layer {
    -webkit-animation: cd-sprite-reverse .8s steps(24);
    -moz-animation: cd-sprite-reverse .8s steps(24);
    animation: cd-sprite-reverse .8s steps(24);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.no-cssanimations .cd-transition-layer {
    display: none
}

@-webkit-keyframes cd-sprite {
    0% {
        -webkit-transform: translateY(-50%) translateX(-2%)
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-98%)
    }
}

@-moz-keyframes cd-sprite {
    0% {
        -moz-transform: translateY(-50%) translateX(-2%)
    }
    100% {
        -moz-transform: translateY(-50%) translateX(-98%)
    }
}

@keyframes cd-sprite {
    0% {
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%)
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%)
    }
}

@-webkit-keyframes cd-sprite-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%)
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-2%)
    }
}

@-moz-keyframes cd-sprite-reverse {
    0% {
        -moz-transform: translateY(-50%) translateX(-98%)
    }
    100% {
        -moz-transform: translateY(-50%) translateX(-2%)
    }
}

@keyframes cd-sprite-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%)
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%)
    }
}