@charset "utf-8";
/*------|| $CONTENIDO ||------*/

/**

 * Base.......................... Estilos CSS base y generales

 * Elementos..................... Elementos que se repiten (botones, paginación, etc)

 * Componentes................... Partes de una página que se repiten

 * Secciones..................... Estilos particulares para cada página

 * Misceláneas................... Otras reglas CSS

 */


/*------|| $FUENTES ||------*/
@font-face{
	font-family: BLANCH;
	src: url(../fonts/BLANCH_CAPS.otf);
}


/*------|| $BASE ||------*/
body{
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 30px;
	color: #303030;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	background: #FFF;
}
html{
	scroll-behavior: smooth;
}
html,
.container{
  min-width: 320px;
}
a:link, a:visited, a:hover, a:active{
	text-decoration: none;
}
a,
button,
input[type="submit"]{
	-webkit-transition: all .20s ease-in-out;
	-moz-transition:    all .20s ease-in-out;
	-o-transition:      all .20s ease-in-out;
	-ms-transition:     all .20s ease-in-out;
	transition:         all .20s ease-in-out;
}
ol, ul, li{
	margin: 0;
	padding: 0;
	list-style: none;
}
h1, .h1{
	font-family: 'BLANCH';
	font-size: 90px;
	line-height: 60px;
	color: #01E8FF;
	text-transform: uppercase;
	margin: 0 0 25px;
}
h2, .h2{
	font-family: 'BLANCH';
	font-size: 75px;
	line-height: 60px;
	color: #01E8FF;
	text-transform: uppercase;
	margin: 0 0 15px;
}
h3, .h3{
	font-size: 26px;
	line-height: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin: 0 0 10px;
}
h4, .h4{
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin: 0 0 5px;
}
h5, .h5{
}
h6, .h6{
}
p{
	margin-bottom: 15px;
}
	p a{
		font-weight: 400;
		color: #01E8FF;
	}
		p a:hover,
		p a:focus{
			color: #00FF00;
		}
strong{
	letter-spacing: 1.2px;
}
.blanch{
	font-family: 'BLANCH';
	font-size: 45px;
}
.regular{
	font-weight: 400;
}
.texto{
	margin: 0 0 30px;
}
.destacado{
	font-size: 27px;
	font-weight: 700;
	letter-spacing: 0.3px;
}
.aclaracion{
	font-size: 19px;
	line-height: 24px;
	margin: 0;
}
	.lista-aclaracion{
		margin: 15px 0 20px 30px;
	}
		.lista-aclaracion li{
			font-size: 19px;
			line-height: 22px;
			margin: 0 0 5px;
		}
			.lista-aclaracion i{
				font-size: 16px;
				line-height: 22px;
				margin-right: 5px;
				color: #01E8FF;
			}
	.aclaracion strong{
		letter-spacing: 0.8px;
	}

.tipo-celeste{
	color: #01E8FF;
}
.tipo-verde{
	color: #00FF00;
}

.fondo-celeste{
	background-color: #01E8FF;
}
.fondo-verde{
	background-color: #0F0;
}
.img-responsive{
	display: inline-block;
}

/*------|| $ELEMENTOS ||------*/

/*Bandas*/
#main{
	margin-top: 90px;
}
	.s_home #main{
		margin-top: 0;
	}
.banda{
	padding: 80px 0;
}
.blanca{
	background: #FFF;
}

/*Línea*/
.linea{
	display: block;
	width: 60px;
	height: 2px;
	margin: 25px auto 35px;
	background: #00BBC5;
}

/*Before*/
.icono:before,
.icono:after{
	font: normal normal normal 14px/1 FontAwesome;
	position: absolute;
	top: 0;
	left: 0;
}

/*Botón*/
.boton{
	display: inline-block;
	font-family: 'BLANCH';
	font-size: 40px;
	font-weight: 500;
	line-height: 22px;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	padding: 11px 70px 16px;
	border: none;
	border-radius: 40px;
	cursor: pointer;
	position: relative;
}
	.boton:focus,
	.boton:hover{
		color: #FFF;
		background: #303030;
		outline: none;
	}


/*Formularios*/
/*BUSQUEDA INDEX*/
.buscador__form{
}
.contacto__form{
	margin: 35px 0;
}
	.msje-estado{
	    font-weight: 700;
	}
	.formulario .alert{
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 15px auto;
	}
	.form-horizontal .form-group{
		margin-bottom: 20px;
		margin-right: -15px;
		margin-left: -15px;
	}
		.buscador__form.form-horizontal .form-group{
			margin: 0 0 25px;
		}
	.form-control,
	select.form-control{
		display: block;
		width: 100%;
		height: 45px;
		font-size: 24px;
		font-weight: 300;
		line-height: 24px;
		color: #303030;
		padding: 10px 12px;
		margin: 0;
		border: 2px solid #01E8FF;
		border-radius: 25px;
		background-color: #FFF;
		box-shadow: 1px 4px 6px rgba(0, 255, 255, .45);
	}
		.buscador__input{
			display: block;
			width: 100%;
			min-height: 45px;
			border: 2px solid #01E8FF;
			border-radius: 25px;
			background-color: #FFF;
			box-shadow: 1px 4px 6px rgba(0, 255, 255, .45);
			position: relative;
		}
			.buscador__input.resultados{
				padding: 10px;
			}
			.buscador__input input{
				display: block;
				width: 100%;
				height: 45px;
				font-size: 34px;
				font-weight: 300;
				line-height: 36px;
				text-align: left;
				color: #303030;
				margin: 0;
				padding: 5px 10px 2px 15px;
				border-top-right-radius: 25px;
				border-top-left-radius: 25px;
				border: none;
				background-color: transparent;
			}
				.buscador__input input:focus{
					border: none;
					background-color: transparent;
					box-shadow: none;
					outline: none;
				}
				.buscador__input input::-webkit-input-placeholder{
				   font-size: 24px;
				   line-height: 36px;
				   color: #B5B5B5;
				}
				.buscador__input input:-moz-placeholder{ /* Firefox 18- */
				   font-size: 24px;
				   line-height: 36px;
				   color: #B5B5B5;  
				}
				.buscador__input input::-moz-placeholder{  /* Firefox 19+ */
				   font-size: 24px;
				   line-height: 36px;
				   color: #B5B5B5;  
				}
				.buscador__input input:-ms-input-placeholder{  
				   font-size: 24px;
				   line-height: 36px;
				   color: #B5B5B5;  
				}
				.buscador__input.resultados input{
					background: #FFF;
					margin: 0 0 10px;
					border-bottom: 4px solid #01E8FF;
				}
				/* Change the white to any color ;) */
				input:-webkit-autofill,
				input:-webkit-autofill:hover, 
				input:-webkit-autofill:focus, 
				input:-webkit-autofill:active{
					color: red !important;
					background-color: #FFF !important;
				}
				.buscador__resultados{
					/*padding: 0 10px;*/
				}
				.resultados__se-recicla{
					display: block;
					font-size: 70px;
					font-weight: 700;
					line-height: 70px;
					text-align: center;
					padding: 15px 0 0;
				}
					.resultados__se-recicla.si{
						color: #01E8FF;
					}
					.resultados__se-recicla.no{
						color: #FF0000;
					}
					.resultados__se-recicla.compostables{
						color: #00FF00;
					}
					.resultados__se-recicla.ni{
						color: #FF4200;
					}
					.resultados__se-recicla.drogas{
						color: #FF00FF;
					}
				.resultados__reciclado{
					display: block;
					font-size: 18px;
					line-height: 20px;
					padding: 5px 20px 10px;
				}
					.resultados__reciclado a{
						font-weight: 400;
						color: #01E8FF;

					}
						.resultados__reciclado a:hover,
						.resultados__reciclado a:focus{
							color: #00FF00;
						}
				.resultados__otros{
					display: block;
				}
				.resultados__no{
					display: block;
				}
					.borrar{
						display: none;
						font-size: 22px;
						line-height: 21px;
						text-align: center;
						text-transform: uppercase;
						color: #FFF;
						padding: 8px 20px 5px;
						border: none;
						border-radius: 20px;
						cursor: pointer;
						position: relative;
						position: absolute;
					    top: 10px;
					    right: 10px;
					}
						.buscador__input.resultados .borrar{
							display: block;
						}
						.borrar:focus,
						.borrar:hover{
							color: #FFF;
							background: #303030;
							outline: none;
						}
/*BUSQUEDA NAV*/
.cabecera .buscador__form{
	text-align: right;
	padding: 35px 60px 10px 0;
	position: relative;
	z-index: 100;
}
	.s_home .cabecera .buscador__form{
		opacity: 0;
	}
	.cabecera .buscador__form.form-horizontal .form-group{
		margin: 0 5px;
	}
		.cabecera .buscador__input{
			display: inline-block;
			max-width: 370px;
			min-height: 30px;
			border-radius: 15px;
			margin-right: 10px;
			vertical-align: top;
		}
			.cabecera .buscador__input.resultados{
				/*padding: 5px;*/
			}
			.cabecera .buscador__input input{
				height: 30px;
				font-size: 20px;
				line-height: 20px;
				padding: 5px 0 0 5px;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
			}
				.cabecera .buscador__input input::-webkit-input-placeholder{
				   font-size: 16px;
				}
				.cabecera .buscador__input input:-moz-placeholder{ /* Firefox 18- */
				   font-size: 16px;
				}
				.cabecera .buscador__input input::-moz-placeholder{  /* Firefox 19+ */
				   font-size: 16px;
				}
				.cabecera .buscador__input input:-ms-input-placeholder{
				   font-size: 16px;
				}
			.cabecera .buscador__form .boton{
				font-size: 26px;
				line-height: 26px;
				padding: 3px 25px 5px;
				vertical-align: top;
			}
				.cabecera .buscador__resultados{
					text-align: left;
				}
					.cabecera .resultados__se-recicla{
						display: inline-block;
						font-size: 30px;
						line-height: 32px;
						padding: 0 5px;
						vertical-align: top;
					}
					.cabecera .resultados__reciclado{
						display: inline-block;
						width: 100%;
						max-width: 305px;
						font-size: 16px;
						line-height: 18px;
						padding: 5px 0 5px 10px;
						vertical-align: top;
					}
					.cabecera .resultados__no{
						font-size: 18px;
						line-height: 20px;
					}
						.cabecera .borrar{
							font-size: 16px;
							line-height: 14px;
							padding: 4px 15px ;
						}

	textarea.form-control{
		border-radius: 10px;
		min-height: 170px;
		resize: vertical;
	}
			.contacto__form .form-control::-webkit-input-placeholder{
			   color: #A8A8A8;
			}
			.contacto__form .form-control:-moz-placeholder{ /* Firefox 18- */
			   color: #A8A8A8;  
			}
			.contacto__form .form-control::-moz-placeholder{  /* Firefox 19+ */
			   color: #A8A8A8;  
			}
			.contacto__form .form-control:-ms-input-placeholder{  
			   color: #A8A8A8;  
			}


/*------|| $COMPONENTES ||------*/
/*CABECERA*/
.cabecera{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
	.cabecera .navbar{
		width: 100%;
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		background-color: #D9FFD9;
		box-shadow: 1px 2px 5px rgba(0,0,0,0.20);
		position: fixed;
		z-index: 600;
	}
		.s_home .cabecera .navbar{
			background: transparent;
			box-shadow: none;
		}
		.navbar-header{
			width: 100%;
			position: relative;
		}
			.cabecera__logo{
				display: inline-block;
				padding: 10px 0 15px;
			}
				.cabecera__logo img{
					width: 100%;
					max-width: 166px;
				}
					.s_home .cabecera__logo img{
		  				opacity: 0;
					}
			.cabecera__redes{
				text-align: right;
				position: absolute;
				top: 0;
				right: 0;
			}
				.cabecera__instagram{
					display: inline-block;
					padding: 10px 5px;
					text-align: center;
				}
					.cabecera__instagram img{
						display: inline-block;
						width: 100%;
						max-width: 74px;
					}
					.cabecera__instagram span{
						display: block;
						font-family: 'BLANCH';
						font-size: 32px;
						line-height: 24px;
						color: #00FF00;
						opacity: 0;
					}
						.s_home .cabecera__instagram span{
							opacity: 1;
						}
						.cabecera__instagram:hover span,
						.cabecera__instagram:focus span{
							color: #F00;
						}
				.cabecera__instagram.oculto{
					display: none;
				}

/*Cabecera con scroll*/
.scroll.cabecera{
}
	.s_home .scroll.cabecera .navbar{
		background-color: #D9FFD9;
		box-shadow: 1px 2px 5px rgba(0,0,0,0.20);
	}
	.s_home .scroll .cabecera__logo img,
	.s_home .scroll.cabecera .buscador__form{
		opacity: 1;
	}
	.s_home .scroll .cabecera__instagram img{
		max-width: 32px;
	}
	.s_home .scroll .cabecera__instagram span{
		opacity: 0;
	}


/* Pie */
.pie{
	padding: 35px 0;
	background-color: #01E8FF;
	position: relative;
}


/*------|| $SECCIONES ||------*/
/*Home*/
/*.s_home{
	padding-top: 100px;
}*/
.buscador{
	padding: 30px 0 15px;
	background-color: #D9FFD9;
}
	.buscador h1{
		display: inline-block;
		padding: 72px 10px 20px 95px;
		position: relative;
	}
		.buscador h1:before{
			content: '';
			display: inline-block;
			width: 114px;
			height: 196px;
			background: no-repeat center url('/images/estoserecicla-logo.png');
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
		}

/*Scroll*/
@keyframes scroll {
	0%   { transform: translateY(0); opacity: 1; }
	25%  { opacity: 1; }
	75%  { transform: translateY(.75em); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

.scrollea{
	text-align: center;
	padding: 40px 0 20px;
}

	.scrollea__icono {
	  display: inline-block;
	  width: 30px;
	  height: 50px;
	  border: 3px solid #01E8FF;
	  border-radius: 16px;
	  position: relative;
	}
		.scrollea__icono-punto{
			display: block;
			width: 10px;
			height: 15px;
			margin-left: -5px;
			background: #01E8FF;
			border-radius: 5px;
			position: absolute;
			top: 6px;
			left: 50%;
			transform-origin: top center;
			backface-visibility: hidden;
			animation: scroll 2s ease-out infinite;
		}
	.scrollea__contenido{
		display: block;
		text-align: center;
	}
		.scrollea__titulo{
			display: block;
			font-family: 'BLANCH';
			font-size: 25px;
			line-height: 16px;
			color: #01E8FF;
			margin: 0 0 5px;
		}
		.scrollea__texto{
			display: block;
			font-size: 16px;
			line-height: 16px;
			color: #303030;
		}

.bienvenides{
	padding: 80px 0 10px;
	background: #FFF;
}
	.bienvenides__imagen{
		text-align: center;
		padding-left: 10px;
		margin: 0 0 30px;
		animation-delay: .5s;
	}
	.bienvenides__texto{
		animation-delay: .7s;
	}

.las-tres-r{
}
	.las-tres-r__texto{
		margin: 0 0 50px;
	}
	.las-tres-r-modulo{
		display: inline-block;
		width: 100%;
		max-width: 360px;
		margin: 0 10px 30px;
		vertical-align: top;
	}
		.las-tres-r-modulo__imagen{
			display: block;
			margin: 0 0 15px;
			vertical-align: top;
		}
		.las-tres-r-modulo__texto{
			min-height: 170px;
			text-align: center;
			margin: 0 0 30px;
		}
			.las-tres-r-modulo__texto p{
				font-size: 22px;
				line-height: 28px;
				margin: 0;
			}
		.las-tres-r-modulo__consejo{
			text-align: left;
		}

.que-es-reciclar{
}
	.que-es-reciclar i{
		font-size: 22px;
		margin-right: 5px;
	}
	.que-es-reciclar__compostable,
	.que-es-reciclar__reciclable,
	.que-es-reciclar__no-resciclable{
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 1.2px;
	}
		.que-es-reciclar__compostable{
			color: #00FF00;
		}
		.que-es-reciclar__reciclable{
			color: #01E8FF;
		}
		.que-es-reciclar__no-resciclable{
			color: #FF0000;
		}
	.que-es-reciclar__mapa{
		width: 100%;
		height: 600px;
		margin: 0 0 30px;
	}

.el-compost-es-lo-mas{
	background: url('/images/bg__compost.png') top center;
}


.contacto{
	padding: 70px 0;
}
	.contacto__instagram{
		text-align: center;
		padding: 10px 0;
	}
		.contacto__instagram > span{
			display: inline-block;
			font-size: 36px;
			line-height: 30px;
			font-weight: 700;
			color: #0F0;
			margin: 20px 0 0;
			position: relative;
			-webkit-transition: all .20s ease-in-out;
			-moz-transition:    all .20s ease-in-out;
			-o-transition:      all .20s ease-in-out;
			-ms-transition:     all .20s ease-in-out;
			transition:         all .20s ease-in-out;
		}
			.contacto__instagram > span > span{
				display: block;
				font-family: 'BLANCH';
				font-size: 55px;
				line-height: 55px;
				font-weight: 400;
				text-transform: uppercase;
				-webkit-transition: all .20s ease-in-out;
				-moz-transition:    all .20s ease-in-out;
				-o-transition:      all .20s ease-in-out;
				-ms-transition:     all .20s ease-in-out;
				transition:         all .20s ease-in-out;
			}
			.contacto__instagram:hover span,
			.contacto__instagram:focus span{
				color: #F00;
			}
				


/*EL BLOG*/
.modulo-blog{
	display: inline-block;
	width: 100%;
	max-width: 380px;
	text-align: left;
	padding: 15px;
	margin: 0;
	border: 1px solid  #01E8FF;
	background: #FFF;
	vertical-align: top;
	position: relative;
}
	.modulo-blog:hover,
	.modulo-blog:focus{
		box-shadow: 0 0 20px -3px rgba(1,232,255,0.6);
		z-index: 100;
	}
	.modulo-blog__imagen{
		text-align: center;
		margin: 0 0 30px;
	}
	.modulo-blog__titulo{
		min-height: 60px;
		margin: 0 0 10px;
	}
		.modulo-blog h3{
			text-transform: none;
			letter-spacing: none;
			color: #303030;
			margin: 0;
		}
	.modulo-blog__contenido{
		min-height: 90px;
	}
		.modulo-blog p{
			font-size: 18px;
			line-height: 20px;
			color: #303030;
		}
	.modulo-blog__boton{
	}
		.modulo-blog .boton{
			font-size: 30px;
			line-height: 15px;
			padding: 7px 30px 11px;
			-webkit-transition: all .20s ease-in-out;
			-moz-transition:    all .20s ease-in-out;
			-o-transition:      all .20s ease-in-out;
			-ms-transition:     all .20s ease-in-out;
			transition:         all .20s ease-in-out;
				}
			.modulo-blog:hover .boton,
			.modulo-blog:focus .boton{
				color: #FFF;
				background: #303030;
				outline: none;
			}
	.articulo__detalles{}
		.articulo__autore{
			display: inline-block;
			font-size: 20px;
			font-weight: 700;
			line-height: 20px;

		}
	.s_articulo p{
		font-size: 22px;
		line-height: 26px;
		margin: 0 0 25px;
	}
	.s_articulo small{
		display: block;
		font-size: 19px;
		line-height: 22px;
		margin: 0 0 35px;
	}
	.s_articulo ul{
		margin: 15px 0 25px 15px;
	}
	.s_articulo ol{
		counter-reset: counter;
		margin: 15px 0 25px 15px;
	}
		.s_articulo ul li{
			font-size: 22px;
			line-height: 22px;
			/*padding-left: 25px;*/
			margin: 0 0 10px;
			position: relative;
		}
		.s_articulo ol li{
			counter-increment: counter;
			font-size: 22px;
			line-height: 22px;
			/*padding-left: 25px;*/
			margin: 0 0 10px;
			position: relative;
		}
			.s_articulo ul li:before{
				content: '- ';
				font-weight: 700;
				color: #01E8FF;
			}
			.s_articulo ol li:before{
				content: counter(counter) "- ";
				font-weight: 700;
				color: #01E8FF;
			}




/*------|| $MISCELÁNEA ||------*/
.contenedor-modulos{
	font-size: 0;
	text-align: center;
}
	.sin-resultados{
		font-size: 14px;
	}

.full{
    padding-left: 0;
    padding-right: 0;
}


/* Animación suave */
.anim-suave{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition:    all 1s ease-in-out;
    -o-transition:      all 1s ease-in-out;
    -ms-transition:     all 1s ease-in-out;
    transition:         all 1s ease-in-out;
}

@media (max-width: 1200px){	
	.cabecera .buscador__input{
		max-width: 270px;
	}
	.cabecera .buscador__input input{
		font-size: 18px;
		line-height: 20px;
	}
	.cabecera .resultados__reciclado{
		max-width: 210px;
	}
}
@media (max-width: 990px){
	.scroll .cabecera__logo,
	.cabecera__logo{
		max-width: 120px;
	}
	.cabecera .buscador__form{
		text-align: center;
		padding: 5px 0 15px;
	}
	.cabecera .buscador__input{
		max-width: 80%;
	}
	.cabecera .resultados__reciclado{
		max-width: 75%;
	}
}
@media (max-width: 767px){
	.scroll.cabecera .navbar{
		padding: 0 0 10px;
		background: rgba(255,255,255,0.5);
	}
	.cabecera__instagram.oculto{
		display: inline-block;
	}
	.cabecera__instagram img{
		max-width: 50px;
	}
	.cabecera__instagram span{
		display: none;
	}
	.bienvenides__imagen{
		display: none;
	}
	.buscador__input input{
		font-size: 24px;
		line-height: 24px;
	}
	.que-es-reciclar{
		padding: 50px 0;
	}
}
@media (max-width: 630px){
	.cabecera .buscador__input{
		max-width: 70%;
	}
	.cabecera .resultados__reciclado{
		max-width: 60%;
	}
	.buscador__input input::-webkit-input-placeholder{
	   font-size: 18px;
	   line-height: 26px;
	}
	.buscador__input input:-moz-placeholder{ /* Firefox 18- */
	   font-size: 18px;
	   line-height: 26px;  
	}
	.buscador__input input::-moz-placeholder{  /* Firefox 19+ */
	   font-size: 18px;
	   line-height: 26px;  
	}
	.buscador__input input:-ms-input-placeholder{  
	   font-size: 18px;
	   line-height: 26px;  
	}
}
@media (max-width: 530px){
	.cabecera .buscador__input{
		max-width: 100%;
		margin: 0 0 10px;
	}
	.cabecera .resultados__se-recicla{
		display: block;
		font-size: 30px;
		line-height: 30px;
		text-align: center;
	}
	.cabecera .resultados__reciclado{
		max-width: 100%;
	}
	.cabecera .buscador__input input::-webkit-input-placeholder{
	   line-height: 16px;
	}
	.cabecera .buscador__input input:-moz-placeholder{ /* Firefox 18- */
	   line-height: 16px;
	}
	.cabecera .buscador__input input::-moz-placeholder{  /* Firefox 19+ */
	   line-height: 16px;
	}
	.cabecera .buscador__input input:-ms-input-placeholder{
	   line-height: 16px;
	}
}