@font-face{
	font-family: Open Sans;
    src: url(../fonts/OpenSans-Light.woff2),
         url(../fonts/OpenSans-Light.woff),
	     url(../fonts/OpenSans-VariableFont_wdth,wght.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: Open Sans;
    src: url(../fonts/OpenSans-Regular.woff2),
         url(../fonts/OpenSans-Regular.woff),
	     url(../fonts/OpenSans-VariableFont_wdth,wght.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Open Sans;
	src: url(../fonts/OpenSans-Bold.woff2),
         url(../fonts/OpenSans-Bold.woff),
	     url(../fonts/OpenSans-VariableFont_wdth,wght.ttf);
	font-weight: 700; font-display: swap;}
*{	margin: 0; padding: 0;}
body{	font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 1em; line-height: 1.6em;}
img a{	text-decoration: none; border: none #fff;}
a img{	text-decoration: none; border: none #fff;}
a {	text-decoration: none;}
#texto a{	color: #000;}
.neg{	font-weight: 700;}
.noneg{	font-weight: 400;}
.noneg strong{	font-weight: 400;}
address{ font-style: normal;}	
.borra{	clear: both;}
.tel-cab a{display: block; position: absolute; top: 10px; right: 20px; color: #309ebe; padding: 10px; font-size: 20px;}
.tel-cab a:hover{color: #444;}
#idioma{	background: #309ebe; text-align: center;}
#idioma a{	display: block; padding: 5px 0 3px 0; color: #fff; font-size: 0.8em;}
#verde{	height: 10px; background: #69b5f1; }
#menu ul li a{	text-decoration: none; color: #0b79cf; display: block;}
#menu ul li a:hover{	color: #7ab51d;}
#gris{	background: #dedede;}
#grupo{	margin: 80px 0 0 0;}
#texto p{	margin: 0 0 20px 0;}
.frase, #contenido h1{	font-size: 40px; font-weight: 300; color: #4da5eb; display: block; width: 450px; line-height: 50px; text-align: left;}
.frase{	margin: 40px 0 20px 0;}
#lista{	margin: 0 0 30px 20px; text-align: left; line-height: 2.2em;}
#imagen img{width: 100%; height: auto;}
#idioma a:hover{background: #444;}
#contenido h1{	margin: 0 0 20px 0;}
#contenido h2{	font-weight: 700; font-size: 17px; color: #69b5f1; margin: 0 0 10px 0; padding: 10px 0 0 0;	text-align: left;}
#servicios h3, #serviciosin h3{	color: #7ab51d; font-weight: 700; margin: 0 0 10px 0;}
#servicios li, #serviciosin li{	margin: 3px 0 0 20px;}
.grupof h3{	color: #69b5f1; font-weight: 400; margin: 0 0 10px 0;}
.grupof h2{	margin: 0;}
.grupof img{	box-shadow: 0 0 15px #888;}
#columna, #columnasub{
	font-size: 0.8em; background: #a9d4f5; text-align: center; line-height: 2.5em;}
#inferior{	background: #f6f6f6; margin-top: 140px;}
.m-top{margin-top: 140px;}
#faldon{	padding: 30px 0; }
#tels{	color: #047ddd; font-size: 30px; line-height: 40px; font-weight: 300;}
#tels strong{	font-weight: 400;}
.telefono{color: #047ddd; padding: 0 0 15px 0; display: block; font-size: 26px;}
.telefono:hover{color: #444;}
#aviso{	padding: 20px 0 0 0; font-size: 0.8em;}
#aviso a{	color: #000;}
#contacto a{	display: block; text-align: center; width: 150px; padding: 5px 0 5px 0;
	background: #047ddd; color: #fff; margin: 10px 0 0 0;}
#contacto a:hover{	background: #fff; color: #047ddd; font-weight: 700;}
.destacado{	color: #0b79cf; font-weight: 400;}
#sist{	background: #0b79cf; color: #fff; padding: 10px 30px 20px 30px;
	margin: 30px 0 0 0; font-size: 18px; line-height: 25px; font-weight: 700; text-align: left;}
#sist h2{	font-size: 20px; font-weight: 300; color: #fff; margin: 0 0 5px 0;}
#mapafoto img{	width: 100%; height: auto;}
h3{	font-weight: normal; color: #0b79cf; margin-bottom: 20px;}
.mapa {background: url("../imagenes/mapa-limpiezas-gipuzkoa.jpg") no-repeat left top; background-size: cover;
padding: 350px 0 200px 0;}
.mapa .boton a{display: block; border: 3px solid #7ab51d; padding: 10px; width: 250px; text-align: center; color: #7ab51d; background: #fff; margin: 0 auto; font-size: 17px;}
.mapa .boton a:hover{background: #7ab51d; color: #fff;}
.whatsapp img{width: 40px; height: auto;}
.whatsapp a{display: block; width: 40px; padding: 5px; position: fixed; top: 50px; right: 30px; z-index: 100;}
.whatsapp a:hover img{opacity: 0.5;}
.boton-what a{display: block; padding: 10px 15px; color: #2e8e02;  border: 3px solid #2e8e02; vertical-align: middle; 
	width: 150px; text-align: center; margin: 0 auto 30px auto;}
.boton-what a:hover{background: #2e8e02; color: #fff;}
.boton-what a img{width: 40px; vertical-align: middle;}

@media only screen 
and (max-width : 500px){
.container {
	margin: 0 auto;}
.todo {
	margin: 0;}
	#texto p{font-size: 17px; line-height: 34px;}
#logo{
	width: 150px; margin: 120px auto 30px auto;}
#idioma{
	width: 80px;}
#idioma a{
	padding: 8px 0 5px 0;}
#azul{
	background: #fff;}
.banner{
	display: none;}
#imagen{
	display: none;}
#imagenindex img, #imagen img, #imagenmovil img{
	width: 100%; height: auto;}
.guion{
	display: none;}
#menu ul{
	margin: 40px 20px 80px 20px; font-size: 1.1em;}
#menu ul li{
	list-style-type: none;}
#menu ul .v{
	color: #7ab51d; border-bottom: #7ab51d 2px solid;}
#menu ul li a{
	padding: 18px 0 18px 40px; border-bottom: #0b79cf 2px solid;}
#menu ul li a:hover{
	border-bottom: #7ab51d 2px solid;}
.uno{
	background:url(../imagenes/numero1.jpg) no-repeat center left;
	background-size: 25px auto;}
.dos{
	background:url(../imagenes/numero2.jpg) no-repeat center left;
	background-size: 25px auto;}
.tres{
	background:url(../imagenes/numero3.jpg) no-repeat center left;
	background-size: 25px auto;}
.cuatro{
	background:url(../imagenes/numero4.jpg) no-repeat center left;
	background-size: 25px auto;}
.cinco{
	background:url(../imagenes/numero5.jpg) no-repeat center left;
	background-size: 25px auto;}
.seis{
	background:url(../imagenes/numero6.jpg) no-repeat center left;
	background-size: 25px auto;}
.siete{
	background:url(../imagenes/numero7.jpg) no-repeat center left;
	background-size: 25px auto;}
.uno:hover{
	background:url(../imagenes/numero1hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.dos:hover{
	background:url(../imagenes/numero2hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.tres:hover{
	background:url(../imagenes/numero3hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cuatro:hover{
	background:url(../imagenes/numero4hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cinco:hover{
	background:url(../imagenes/numero5hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.seis:hover{
	background:url(../imagenes/numero6hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.siete:hover{
	background:url(../imagenes/numero7hover.jpg) no-repeat top left;
	background-size: 40px auto;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
#grupo{	margin: 50px 0 0 0;}
#texto{	text-align: justify; padding: 0 20px;}
.frase, #contenido h1{	width: 100%; font-size: 28px; line-height: 35px;}
#columna, #columnasub{	padding: 30px; font-size: 1em; line-height: 2.2em;}
#columna{	margin: 40px 20px 0 20px;}
#columnasub{	margin: 40px 20px 20px 20px;}
#columna #itel, #columnasub #itel{	width: 100px; padding: 10px; background: #fff; margin: 10px auto 0 auto; text-align: center;}
#columna #itel img, #columnasub #itel img{	width: 100%; height: auto;}
#datos{	margin: 0 20px;}
#furgo{	margin: 0 20px 40px 20px; }
#furgo img{	width: 100%; height: auto;}
.fder{	margin: 0 auto; max-width: 350px;}
.fder img{	box-shadow: 0 0 0 #fff; width: 100%; height: auto; max-width: 350px; margin: 5px 0 10px 0;}
.dato{	color: #047ddd; font-size: 22px; line-height: 30px; text-align: center; margin: 10px 0 30px 0;}
#inferior{	padding: 0 20px;}
#servicios{	background: url(../imagenes/productos-limpieza.jpg) no-repeat center bottom;
	background-size: 60% auto; padding: 30px 0 80% 0;}
#serviciosin{	padding: 50px 0;}
#logopie{	width: 100px; margin: 20px auto 20px auto;}
#tels{	text-align: center; margin: 20px auto 0 auto; padding: 55px 0 0 0;
	background: url(../imagenes/telefono.jpg) no-repeat top center;}
#direccion{	text-align: center; padding: 20px 0 0 0; border-left: 1px solid #999;}
#aviso{	margin: 20px 0 0 0; text-align: center;}
#imagen iframe{	display: none;}
#mapafoto a{	display: block; padding: 0 0 10px 0; margin: 0 0 20px 20px; font-size: 0.8em;}
#contacto{	width: 150px; margin: 0 auto;}
#azul .container .mapa {background: url("../imagenes/mapa-limpiezas-gipuzkoa-m.jpg") no-repeat left top; background-size: cover;
padding: 200px 0 150px 0; display: block;}
	.whatsapp a{position: absolute;}

}


@media only screen 
and (min-width : 501px)
and (max-width : 999px) {
	.whatsapp a{position: absolute;}
	body{font-size: 1em; }
	p, #inferior ul li{line-height: 2.1em;}
.container {	width: 100%; margin: 0 auto;}
.todo {	margin: 0;}
#logo{	width: 180px; margin: 20px auto 0 auto;}
#idioma{	width: 100px; margin: 0 0 0 82%;}
#azul{	padding: 0;}
#imagenindex, #imagenmovil{
	display: none;}
#imagen img{
	width: 100%; height: auto; margin: 0; padding: 0;}
.banner { 
	position: relative; overflow: auto; color: #fff; text-align: center; font-size: 16px;}
.banner ul li { 
	float: left; list-style: none; height: 295px;
	text-shadow: 0 0 8px #000; background-size: 100% auto;}
.banner h1, .banner h2{
	font-size: 26px; font-weight: 300; margin: 140px 0 10px 0;
	background: url(../imagenes/fondo-azul-70.png); padding: 12px; display: inline-block;}
.banner .btn{	border: 2px solid #fff; padding: 6px 20px 5px; font-size: 11px; margin: 20px auto;
	display: block; color: #fff; width: 100px;}
.banner .btn:hover{	background: url(../imagenes/fondo-azul-70.png);}
#menu ul{	margin: 60px 50px 120px 50px; background: url(../imagenes/logo-degradado.jpg) no-repeat top right;}
#menu ul li{	list-style-type: none;}
#menu ul li a{	padding: 18px 0 18px 40px; border-bottom: #0b79cf 1px solid; text-decoration: none;
	color: #0b79cf; display: block;}
#menu ul .v{	color: #7ab51d; border-bottom: #7ab51d 1px solid;}
#menu ul li a:hover{	border-bottom: #7ab51d 1px solid;}
.uno, .dos, .tres, .cuatro, .cinco, .seis, .siete{
	background-position: 0px 20px !important; }
.guion{	display: none;}
.uno{	background:url(../imagenes/numero1.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.dos{
	background:url(../imagenes/numero2.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.tres{	background:url(../imagenes/numero3.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.cuatro{	background:url(../imagenes/numero4.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.cinco{	background:url(../imagenes/numero5.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.seis{	background:url(../imagenes/numero6.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.siete{	background:url(../imagenes/numero7.jpg) no-repeat left 5px;
	background-size: 22px auto;}
.uno:hover{	background:url(../imagenes/numero1hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.dos:hover{
	background:url(../imagenes/numero2hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.tres:hover{
	background:url(../imagenes/numero3hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cuatro:hover{
	background:url(../imagenes/numero4hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cinco:hover{
	background:url(../imagenes/numero5hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.seis:hover{
	background:url(../imagenes/numero6hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.siete:hover{
	background:url(../imagenes/numero7hover.jpg) no-repeat top left;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
#grupo{	margin: 0 50px;}
#columna, #columnasub{	padding: 12% 8%; box-shadow: 0 0 15px #888; margin: 60px 0; font-size: 16px; line-height: 27px;}
#columna #itel, #columnasub #itel{	padding: 2%; background: #fff; margin: 20px auto 0 auto; 
	text-align: center; max-width: 180px;}
#columna #itel img, #columnasub #itel img{	width: 100%; height: auto;}
.frase, #contenido h1{	width: 100%; font-size: 30px; line-height: 35px;}
#datos{	width: 50%; float: left;}
#furgo{	width: 47%; float: right; margin: 0 0 40px 0;}
#furgo img{	width: 100%; height: auto;}
.fder img{	width: 100%; height: auto; margin: 60px 0;}
.dato{	color: #047ddd; font-size: 20px; text-align: center; margin: 20px 0 30px 0;}
#servicios{	padding: 50px;
	background: url(../imagenes/productos-limpieza.jpg) no-repeat right bottom;}
#serviciosin{	padding: 50px;}
footer{	width: 480px; margin: 0 auto;}
#logopie{	width: 100px; margin: 0 auto 40px auto;}
#tels{	width: 190px; float: left; padding: 0 0 0 50px;
	background: url(../imagenes/telefono.jpg) no-repeat left 5px;
	background-size: 35px auto;}
#direccion{	width: 215px; float: left; padding: 0 0 0 20px; border-left: 1px solid #999;}
#mapafoto{	display: none;}
#aviso{	text-align: center;}
#imagen iframe{	width: 100%; height: 430px;}
.mapa {background: url("../imagenes/mapa-limpiezas-gipuzkoa.jpg") no-repeat left top; background-size: cover;
padding: 250px 0 170px 0;}
#azul .mapa{display: block;}
.mapa {background: url("../imagenes/mapa-limpiezas-gipuzkoa.jpg") no-repeat left top; background-size: cover;
padding: 300px 0 110px 0; display: block;}
}
@media only screen 
and (min-width : 501px)
and (max-width : 750px) {
#servicios{	padding: 50px 50px 70% 50px;
	background: url(../imagenes/productos-limpieza.jpg) no-repeat center bottom; background-size: 50%;}
}
@media only screen 
and (min-width : 1000px){ 
.container {	width: 1000px; margin: 0 auto;}
.todo {	margin: 0 50px 0 50px;}
#logo{	width: 180px; margin: 20px auto 0 auto;}
#idioma{	width: 100px; margin: 0 0 0 800px;}
#azul{	height: 480px; background: #69b5f1; box-shadow: 0 0 15px #333;}
#imagenindex, #imagenmovil{	display: none !important;}
.banner { 	position: relative; overflow: auto;  color: #fff; text-align: center; font-size: 19px;}
.banner ul li { 	float: left; list-style: none; height: 480px; text-shadow: 0 0 8px #000;}
.banner h1, .banner h2{
	font-size: 45px; font-weight: 300; margin: 290px 0 10px 0;
	background: url(../imagenes/fondo-azul-70.png); padding: 20px; display: inline-block;}
.banner .btn{
	border: 2px solid #fff; padding: 8px 20px 6px; font-size: 12px; margin: 20px auto;
	display: block; color: #fff; width: 100px;}
.banner .btn:hover{
	background: url(../imagenes/fondo-azul-70.png);}
#menu ul{	margin: 60px 0 140px 0;}
#menu ul li{	float: left; width: 105px; list-style-type: none;}
#menu ul li a{	padding: 50px 0 5px 0; border-bottom: #0b79cf 10px solid;}
#menu ul .v{	color: #7ab51d; border-bottom: #7ab51d 10px solid;}
#menu ul li a:hover{	border-bottom: #7ab51d 10px solid;}
.uno{	background:url(../imagenes/numero1.jpg) no-repeat top left; margin: 0 27px 0 0;}
.dos{	background:url(../imagenes/numero2.jpg) no-repeat top left; margin: 0 27px 0 0;}
.tres{	background:url(../imagenes/numero3.jpg) no-repeat top left; margin: 0 27px 0 0;}
.cuatro{	background:url(../imagenes/numero4.jpg) no-repeat top left; margin: 0 27px 0 0;}
.cinco{	background:url(../imagenes/numero5.jpg) no-repeat top left; margin: 0 27px 0 0;}
.seis{	background:url(../imagenes/numero6.jpg) no-repeat top left; margin: 0 27px 0 0;}
.siete{	background:url(../imagenes/numero7.jpg) no-repeat top left; margin: 0;}
.uno:hover{	background:url(../imagenes/numero1hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.dos:hover{	background:url(../imagenes/numero2hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.tres:hover{	background:url(../imagenes/numero3hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cuatro:hover{	background:url(../imagenes/numero4hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.cinco:hover{	background:url(../imagenes/numero5hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.seis:hover{	background:url(../imagenes/numero6hover.jpg) no-repeat top left; margin: 0 27px 0 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.siete:hover{	background:url(../imagenes/numero7hover.jpg) no-repeat top left; margin: 0;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;}
.menor{	font-size: 0.9em;}
#texto{	width: 600px; float: left; text-align: justify;}
#columna, #columnasub{	width: 170px; float: right; padding: 30px; box-shadow: 0 0 15px #888;}
#columnasub{	margin: 0 0 40px 0;}
#columna #itel, #columnasub #itel{	width: 150px; padding: 10px; background: #fff; margin: 20px auto 0 auto; text-align: center;}
#datos{	width: 450px; float: left;}
#furgo{	width: 400px; height: 321px; float: right; box-shadow: 0 0 15px #888; margin: 0 0 40px 0;}
.fizq{	width: 325px; float: left;}
.fder{	width: 225px; float: right;}
.dato{	color: #047ddd; font-size: 20px; text-align: center; margin: 15px 0 30px 0;}
#servicios{	padding: 50px 0 40px 0; background: url(../imagenes/productos-limpieza.jpg) no-repeat right bottom;}
#serviciosin{	padding: 50px 0;}
#logopie{	width: 400px; float: left;}
#tels{	width: 200px; float: left; padding: 0 0 0 55px;
	background: url(../imagenes/telefono.jpg) no-repeat top left;}
#direccion{	width: 210px; float: left; padding: 0 0 0 20px; border-left: 1px solid #999;}
#azul .mapa{display: block;}
.mapa {background: url("../imagenes/mapa-limpiezas-gipuzkoa.jpg") no-repeat left top; background-size: cover;
padding: 300px 0 110px 0; display: block;}
}
@media only screen 
and (min-width : 1400px){ 
	.container {	width: 1300px; margin: 0 auto; font-size: 18px; line-height: 30px;}
	#azul, .banner ul li, iframe {    height: 640px;}
	.banner ul li{background-size: 100% auto !important;}
	#menu ul li{width: 11.7%; }
	#menu ul .uno, #menu ul .dos, #menu ul .tres, #menu ul .cuatro, #menu ul .cinco, #menu ul .seis{margin-right: 3%;}
	#texto{width: 700px; }
	#columna{width: 260px; font-size: 0.9em;}
	#servicios {    padding: 80px 0 70px 0; background: url(../imagenes/productos-limpieza.jpg) no-repeat right 50%;}
	#inferior{padding: 80px 0 70px 0;}
	.fizq {   width: 420px;}
	#logopie {		width: 600px;}
	#direccion {    width: 300px;   padding: 0 0 0 40px;}
	#contacto a { font-size: 15px;    margin: 15px 0 0 0;}
	iframe{width: 100%;}
	#idioma{margin-left: 1050px;}
}