@import url('https://fonts.googleapis.com/css?family=Signika+Negative|Fira+Sans|Jockey+One|Montserrat|Francois+One|Hammersmith+One|Carter+One');
@import url(fuentes.css);
@import url(analisis.css);
@import url(menu.css);
@import url(servicios.css);
@import url(servicios2.css);
@import url(servicio.css);
@import url(productos.css);
@import url(producto.css);
@import url(ozono.css);
@import url(contacto.css);
@import url(resultados.css);
@import url(resultado.css);
@import url(cloro.css);

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

header{
	width: 100%;
	height: 100px;
	background: #fff;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	font-family: 'concorduploaded_file';
	border-bottom: 1px solid rgba(1, 1, 1,0.15);
}

h1{
	float: left;
}


.texto_presentacion{
	z-index: 50;
	font-family: 'concord-bolduploaded_file';
	font-size: 1.5em;
	position: relative;
	color: #010D1A;
	width: 90%;
	top: 30%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	background: rgba(255,255,255,0.7);
	padding: 10px;
	text-align: center;
	//box-shadow: rgba(1,1,1,0.4) 0px 0px 20px ;
}

header .contenedor{
	height: 100px;
}

.identidad{
	padding: 5px;
	height: 100px;
	box-shadow: rgba(13, 13, 13, 0.15) 0px 0px 45px inset;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo{
	position: relative;
	left: 0%;	
}

.what{
	position: relative;
	top: 0px;
	font-family: 'Francois One';
	display: flex;
}

.what > figure {
	position: relative;
	top: 8px;
}

.what > figure > img{
	-webkit-animation: numWs 1s infinite;
	-moz-animation: numWs 1s infinite;
	-ob-animation: numWs 1s infinite;
}


.what > div{
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;	
}

.what > div > p{
	font-size: 0.8em;
}

.what > div:nth-child(2) > p{
	animation: contWs 1s infinite;
}

.what > div:nth-child(2) > p{
	color: rgb(21, 172, 213);
}

.what > div:nth-child(3) > p{
	color: rgb(47, 166, 33);
}


.what > div:nth-child(2) > p:nth-child(1){
	font-size: 0.8em;
	color: rgb(18, 153, 196);
}

.what > div:nth-child(2) > p:nth-child(2){
	font-size: 1.2em;
}

.what > div:nth-child(3) > p:nth-child(1){
	color: rgb(17, 104, 8);
}

.what > div:nth-child(3) > p:nth-child(2){
	font-size: 1.2em;
}

header .contenedor > div{
	height: 35px;
	background: rgb(35, 166, 216);
}


@keyframes numWs{
	0%{
		transform: scale(1);
	}

	10%{
		transform: scale(1);
	}

	30%{
		transform: scale(1.2);
	}

	40%{
		transform: scale(1.2);
	}

	100%{
		transform: scale(1);
	}

}

@keyframes contWs{
	0%{
		color: transparent;
	}
	40%{
		color: transparent;
	}
	50%{
		color: rgb(21, 172, 213);
	}

	100%{
		color: rgb(21, 172, 213);
	}

}

section .contenedor{
	margin-bottom: 80px;
}

.ozono_presentacion{
	z-index: 50;
	color: red;
	font-family: verdana;
	font-size: 4em;
	position: relative;
	top: 30%;
	left: 45%;
	color: rgb(172, 196, 49);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	padding: none;
	text-align: center;
	//box-shadow: rgba(1,1,1,0.4) 0px 0px 20px ;
}

.ozono_presentacion i:nth-child(1){
	color: rgb(21, 173, 214);
	font: 1.7em verdana;
}

.ozono_presentacion i:nth-child(2){
	color: #222;
	font: bold 0.7em verdana;
}

#aviso{
	position: absolute;
	top: -60px;
	//left: 72%;
	//width: 25%;
	width: 100%;
	display: flex;
	align-items: center;
	//animation: aviso_open 25s infinite;
	text-decoration: none;
}	

#aviso figure{
	width: 15%; 
	align-self: center;
}

#aviso figure img{
	width: 100%;
	background: #fff;
	border-radius: 50%;
	//box-shadow: rgba(208, 208, 208,1) 0px 0px 0px 1px;
	animation: doctor 0.7s infinite alternate;
	transition: all 0.5s;
	box-shadow: rgba(1, 180, 231,1) 0px 0px 0px 4px;
}
				
#aviso p{
	position: relative;
	left: 5%;
	font-family: 'Hammersmith One';
	width: 75%;
	margin-right: 0px;
	background: rgba(143, 219, 3, 1);
	padding: 5px;
	padding-left: 10px;
	align-self: center;	
	
	border-radius: 50px 0px 0px 50px;
	border: 1px solid rgba(18, 150, 193, 1);
	border: 1px solid rgba(143, 219, 3, 1);
	//box-shadow: rgba(21, 173, 214, 0.4) 0px -5px 20px inset;
	box-shadow: rgba(143, 219, 3, 0.4) 0px -5px 20px inset;
	//color: rgb(18, 150, 193);
	color: rgba(143, 219, 3,1);	
	color: #fff;
}

@keyframes aviso_open{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(0);
	}					
	52%{
		transform: scale(1);
	}
	98%{
		transform: scale(1);
	}
	100%{
		transform: scale(0);
	}										
}

@keyframes doctor{
	from{
		transform: scale(0.8);
	}	
	to{
		transform: scale(1);
	}		
}

@media (min-width: 320px){
	.ozono_presentacion{
		font-size: 3.5em;
		top: 40%;
	}
	
	.slides-container > li > .texto_presentacion{
		top: 40%;
	}	
}

@media (min-width: 360px){
	.ozono_presentacion{
		font-size: 4em;
		//top: 30%;
	}
	
	.slides-container > li:nth-child > .texto_presentacion{
		top: 40%;
	}		
}

@media (min-width: 1024px){

	.identidad{
		flex-direction: row;
		align-items: center;
	}
	
	.logo{
		position: relative;
		left: 45%;	
	}
	
	.what{
		left: 64%;
	}
	
	#aviso{
		top: 0px;
		left: 68%;
		width: 30%;
		z-index: 100;	
	}		

	#aviso figure img{
		box-shadow: none;
	}	
	
	#aviso:hover figure img{
		box-shadow: rgba(143, 219, 3, 1) 0px 0px 0px 4px;
	}	
	
	section .contenedor{
		font-size: 0.82em; /**/
		margin-bottom: 0px;
	}
	
	header{
		width: 92%;
		left: 4%;
		height: 50px;
	}

	header .contenedor{
		height: 50px;
		display: flex;
		flex-wrap: wrap;
		box-shadow: rgba(13, 13, 13, 0.3) 0px 0px 30px;
	}

	header .contenedor > figure{
		background: #fff;
		height: 50px;
		box-shadow: rgba(13, 13, 13, 0.15) 0px 0px 45px inset;
	}	

	header .contenedor > div,header .contenedor > figure{
		width: 100%;
	}	

	main .contenedor{
		width: 92%;
		position: relative;
		left: 4%;
		height: 87vh;
	}

	body{
		background-size: cover;
		background: #ddd;
	}
	
	.texto_presentacion{
		font-size: 2.8em;
		width: 60%;
	}

	.ozono_presentacion{
		font-size:8em;
		width: 40%;
		top: 35%;
		left: 24%;		
	}
		
}

@media (min-width: 1100px){
	.what{
		left: 72%;
	}
	
	#aviso{
		top: 0px;
		left: 72%;
		width: 25%;
	}
	
	section .contenedor{
		font-size: 1em; /**/
	}
}