@font-face{
	font-family: Oxygen;
    src: url(../fonts/Oxygen-Light.woff2),
         url(../fonts/Oxygen-LightLight.woff),
	     url(../fonts/Oxygen-Regular.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: Oxygen;
    src: url(../fonts/Oxygen-Regular.woff2),
         url(../fonts/Oxygen-Regular.woff),
	     url(../fonts/Oxygen-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Oxygen;
    src: url(../fonts/Oxygen-Bold.woff2),
         url(../fonts/Oxygen-Bold.woff),
	     url(../fonts/Oxygen-Bold.ttf);
    font-weight: 600; font-display: swap;}
*{
	margin: 0;
	padding: 0;}
body{
	font-family: 'Oxygen', sans-serif;
	font-size: 13px;
	line-height: 24px;}
img a, a, a img{
	text-decoration: none;}
.neg{
	font-weight: bold;}
.noneg{
	font-weight: normal;}
.bajo{
	padding: 0 0 30px 0;}
#slider img{
	width: 100%; height: auto;}
#idiomas{
	float: right; width: 100px; margin: 0 10px 0 0;}
#idiomas ul li{
	float: left; list-style-type: none;}
#idiomas li a{
	font-weight: 700; font-size: 12px; display: block; float: left;
	width: 40px; text-align: center; color: #999;}
#idiomas ul li.viendo a{
	font-weight: 400; color:#AF1232;}
#idiomas a:hover{
	background: #EEE;}
#menu{
	text-align: center; font-size: 13px;}
#menu nav ul li{
	list-style-type: none;}
#menu nav ul li a{
	display: block;
	color: #FFF; background: #000; 
	padding: 2px 0 1px 0; 
	height: 25px;}
#menu nav ul li a:hover{
	color: #AF1232;
	background: #FFF;}
#menu nav ul li.viendo a, #menu nav ul li.mayorv a, #menu nav ul li.menorv a, #menu nav ul li.mediov a{
	color: #BBB;}
#rojo{
	color: #AF1232;}
#rojo a{
	display: inline-block; padding: 5px 10px; margin: 0 0 0 20px;
	color: #af1232; border: 1px solid #af1232; 
	font-size: 0.8em;}
#rojo a:hover{
	color: #fff; background: #af1232; font-weight: 700;}
p{
	margin: 0 0 10px 0;}
#titulos, #titulos2{
	color: #FFF; background: #AF1232; text-align: center;
	height: auto; padding: 10px 0;}
#titulos2{font-size: 0.9em;}
#titulos h1{
	font-size: 26px; font-weight: 700; display: block; padding: 0 0 10px 0;
	margin: 5px 15px 5px 15px; border-bottom: 1px solid #FFF;}
#titulos h2{
	font-size: 14px; font-weight: 300;}
#titulos h3{
	font-size: 28px; font-weight: 300; padding: 0 0 10px 0; display: block;
	border-bottom: 1px solid #FFF; 	margin: 5px 15px 5px 15px; }
#titulos2 h3{
	font-size: 19px; line-height: 25px;
	font-weight: 300; padding: 0 0 8px 0; margin: 3px 15px 5px 15px; 
	border-bottom: 1px solid #FFF;}
#ventajas h2{
	color: #AF1232; font-size: 19px;}
#ventajas a img{
	border: none;}
#ventajas a:hover img{
	opacity: 0.3;}
.derecho h1{
	color: #AF1232; font-size: 30px; line-height: 40px; font-weight: 300;}
.derecho ul, #ventajas ul{
	margin: 10px 0 0 16px;}
.derecho ul li{
	margin: 5px 0 0 0;}
#servicios ul li a{
	color: #af1232; font-weight: 600; display: inline-block; padding: 1px 6px;
	border: 1px solid #fff;}
#servicios ul li a:hover{
	border: 1px solid #af1232;}
#faldon-index{
	background: #CCC; }
address{
	font-style: normal; display: inline; color: #FFF; font-style:normal;
	font-weight: 300;}	
.borra{
	clear: both;}
#seguridad{
	color: #AF1232; background: #DDD;
	font-size:15px; font-weight:400; text-align: center;
	height: 65px; padding: 15px 0 0 0;}
#faldon{
	background: #CCC; padding: 20px 0 0 20px;}
#faldontexto{
	padding: 0 20px 0 0; }
#faldontexto h2{
	font-size: 18px; font-weight: 300; color: #AF1232;}
#faldonfoto1{
	width: 180px; height: 120px; }
#faldonfoto2{
	width: 180px; height: 120px; }
#faldonfoto1 img, #faldonfoto2 img{
	border: #FFF 1px solid;}
#climalit{
	color: #0070b0; background: #FFF; padding: 3px 0 0 0;
	font-weight:300; font-size: 12px; text-align: center; line-height: 16px;
	height: 117px}
#climalit img{
	margin: 5px 0 0 15px;}
#logo-seeglass{
	margin: 10px 0;}
#see img{
	width: 100%; height: auto;}
#pie{
	margin: 20px 0 0 0;}
#direccion{
	background: #AF1232; padding: 20px 0 30px 20px; }
#direccion a{
	color: #fff; display: block; padding: 0 0 20px 0;}
.telefono{
	font-size: 27px; font-weight: 300; display: block;
	margin: 0 20px 0 0; border-bottom: 1px #FFF solid;
	padding: 0 0 10px 0;}
#firma{
	font-size: 11px;}
#firma a{
	color: #000; text-decoration: none; padding: 5px 0; display: inline-block;}
iframe{
	border: none; width: 100%; height: 450px; margin: 0 0 20px 0;}
.mapa{padding: 250px 0; background: url( "../imagenes/mapa.jpg") no-repeat left top; background-size: cover; text-align: center;}
.mapa a{padding: 15px 0; width: 160px; color: #fff; background: #AF1232; display: block; margin: 0 auto;}
	
@media only screen and (max-width : 500px) {
#fijamovil, .grande, .tab, #puertas{ display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
#idiomas{
	margin: 0 0 0 0; text-align: center;}
#idiomas li a {
    font-size: 13px; width: 50px; padding: 10px 0;}
#logo{
	max-width: 300px; padding: 30px 0 15px 0; clear: both;}
#logo img{
	width: 100%; height: auto;}
#menu{
	margin: 0 0 20px 0; font-size: 1.1em;}
#menu nav ul li a{
	padding: 15px 0; height: auto;}
.izquierdo{
	width: 100%; margin: 0 0 20px 0;}
.derecho{
	width: 100%; margin: 0 0 20px 0;
	font-size: 14px;}
.galeria .izquierdo{
	width: 100%; }
.galeria .derecho{
	width: 100%;}
.left{
	width: 100%; }
.left img, .right img{
	width: 100%; height: auto;}
.center{
	width: 100%; margin: 20px 0 0 0;}
.right{
	width: 80%; margin: 20px auto 0 auto;}
#faldon-index, #ventajas{
	width: 100%; font-size: 1.1em;
	margin: 0 0 20px 0;}
#faldon-index, #faldon{
	width: 90%; padding: 5%; text-align: center;}
#faldontexto{ 
	width: 95%; padding: 0 5% 0 0; }
#faldontexto h2{
	margin: 0 0 7px 0; }
#faldonfoto1, #faldonfoto2{
	margin: 10px auto 0 auto;}
#logos, #see{
	width: 100%; margin: 20px 0 0 0;}
#see{
	margin: 20px 20px 20px 0;}
#logos img{
	margin: 10px 20px 0 0;}
#rojo{
	margin:40px 0 0 0;}
#rojo a{
	display: block; margin: 10px 0; text-align: center;}
#servicios h1{
	margin: 40px 0 10px 0; font-size: 24px; line-height: 30px;}
#seguridad{
	margin: 40px 0 0 0;}
.rg-image img{
	width: 100%; height: auto;}
#direccion{
	width: 90%; padding: 5%; text-align: center;}
.guion{
	display: none;}
.linea{
	display: block;}
#firma{
	width: 100%; text-align: right;}
iframe{
	display: none;}
.mapa{padding: 200px 0 140px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto;}
}
	
@media only screen 
and (min-width : 501px)
and (max-width : 650px) {
#fijamovil, .movil, .peq, .notab, #puertas{ display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
#logo{
	width: 300px; float: left; margin: 30px 0;}
#menu{
	margin: 0 0 20px 0;}
#menu nav ul li a{
	padding: 6px 0;}
.izquierdo{
	width: 100%; margin: 0 0 20px 0;}
.derecho{
	width: 100%;margin: 0 0 20px 0;
	font-size: 14px; padding: 0; }
.galeria .izquierdo, #servicios{
	width: 380px; margin: 0 auto;}
.galeria .derecho{
	width: 100%;}
.rg-image img{
	width: 100%; height: auto;}
.left{
	width: 48%; float: left; height: 160px;}
.left img{
	width: 100%;}
.center{
	width: 48%; float: left; height: 160px; margin: 0 0 0 4%;}
.right{
	width: 200px; float: right; height: 160px; }
#faldon-index, #ventajas, #faldon{
	width: 90%; font-size: 1.1em;
	margin: 0 0 20px 0;}
#faldon-index, #faldon{
	padding: 5%;}
#faldontexto{ 
	width:  100%; padding: 0 0 5% 0; }
#faldontexto h2{
	margin: 0 0 7px 0; }
#faldonfoto1{
	width: 48%; height: auto; float: left;}
#faldonfoto2{
	width: 48%; height: auto; float: right; }
#faldonfoto1 img, #faldonfoto2 img{
	width: 100%; height: auto;}
#climalit{
	height: auto; padding: 2% 0;}
#climalit img{
	display: block; width: 85%; height: auto; padding: 3% 0;}
#climalit .notab{
	display: none;}
#ventajas h2{
	font-size: 16px; margin: 30px 0 0 0;}
#logos, #see{
	width: 100%; margin: 20px 20px 0 0;}
#see{
	margin: 20px 20px 20px 0;}
#logos img{
	margin: 10px 20px 0 0;}
#rojo{
	margin:20px 0 0 0;}
.cort{
	margin: 30px 0 10px 0;}
#servicios h1{
	margin: 30px 0 10px 0; font-size: 26px; line-height: 30px;}
#seguridad{
	margin: 70px 0 0 0;}
#direccion{
	width: 90%; margin: 0 0 10px 0; padding: 5%;}
.ooc{
	display: none;}
iframe{
	width: 100%; height: 500px;}
.mapa{padding: 300px 0 150px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto;}
}
	
@media only screen 
and (min-width : 651px)
and (max-width : 999px) {
#fijamovil, .movil, .peq, .notab{ display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 50px;}
#logo{
	width: 300px; float: left; margin: 30px 0;}
#menu{
	width: 100%; margin: 0 0 20px 0; font-size: 12px;}
#menu ul li{
	float: left; width: 22%;}
#menu ul .mayor, #menu ul .mayorv{
	width: 26%;}
#menu ul .menor, #menu ul .menorv{
	width: 16%;}
#menu ul .medio, #menu ul .mediov{
	width: 18%;}
.izquierdo{
	width: 57%; float: left; margin: 0 0 20px 0;}
.derecho{
	width: 40%; float: right; margin: 0 0 20px 0;
	font-size: 14px;}
.galeria .izquierdo{
	width: 50%; }
.galeria .derecho{
	width: 45%;}
#cuadros-index .izquierdo{
	width: 100%;}
#cuadros-index img{
	width: 100%;}
#titulos h1 {
	font-size: 23px;}
#titulos h2{
	font-size: 13px;}
.rg-image img{
	width: 100%; height: auto;}
.left{
	width: 32%; float: left; height: 160px;}
.center{
	width: 32%; float: left; height: 160px; margin: 0 2%;}
.right{
	width: 32%; float: right; height: 160px;}
#faldon-index{
	width: 95%; font-size: 1.1em;
	margin: 0 0 20px 0; padding: 20px 0 5% 5%;}
#faldon{
	padding: 5%; width: 90%;}
#faldontexto{ 
	padding: 0 0 20px 0; font-size: 1.1em;}
#faldontexto h2{
	margin: 0 0 7px 0;}
#faldonfoto1{
	float: left; width: 48%; height: auto;}
#faldonfoto2{
	float: right; width: 48%; height: auto; margin: 0 0 0 0;}
.puertas{
	display: none;}
#faldonfoto1 img, #faldonfoto2 img, #puertas img{
	width: 100%; height: auto;}
.bloque-rojo .derecho{
	width: 100%; float: none; clear: both; }
#climalit{
	height: auto; padding: 8% 0;}
#climalit img {
    width: 70%; text-align: center; margin: 3% 0 3% 10%; display: block;}
#climalit .notab{
	display: none;}
#logos, #see{
	width: 100%; margin: 20px 0 0 0;}
#see{
	width: 40%; float: right;}
#ventajas{
	width: 55%; float: left;}
#ventajas h2{
	font-size: 16px;}
#logos img{
	margin: 10px 15px 0 0;}
#rojo{
	margin:20px 0 0 0;}
.derecho .cort{
	margin: 30px 0 10px 0; font-size: 24px; line-height: 30px;}
#servicios h1{
	margin: 30px 0 10px 0; font-size: 24px; line-height: 30px;}
#seguridad{
	margin: 30px 0 0 0;}
#direccion{
	width: 250px; }
.guion{
	display: none;}
.linea{
	display: block;}
#firma{
	margin: 10px 0;}
iframe{
	width: 100%; height: 500px;}
.ooc{
	display: none;}}
	
@media only screen 
and (min-width : 1000px){
body{
	background: #eee url(../imagenes/banda.jpg) top left repeat-x;}
#fijamovil, .movil, .tab, #puertas{ display: none;}
.container {
	width: 1000px; margin: 0 auto;}
.todo {
	margin: 0 30px;}
#logo{
	width: 300px; float: left; margin: 30px 0;}
#menu{
	width: 860px; margin: 0 0 20px 0;}
#menu ul li{
	float: left; width: 22%;}
#menu ul .mayor, #menu ul .mayorv{
	width: 26%;}
#menu ul .menor, #menu ul .menorv{
	width: 16%;}
#menu ul .medio, #menu ul .mediov{
	width: 18%;}
#contenido{
	padding: 40px 40px 0 40px; background: #fff;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.75);}
.izquierdo{
	width: 620px; float: left; margin: 0 0 20px 0;}
.derecho{
	width: 200px; float: right; margin: 0 0 20px 20px;
	font-size: 14px;}
.margen{
	margin: 40px 0 0 0;}
#titulos, #titulos2{
	padding: 10px 0 0 0; height: 150px;}
.galeria .izquierdo{
	width: 420px; }
.galeria .derecho{
	width: 400px;}
.left{
	width: 200px; float: left; height: 160px;}
.center{
	width: 200px; float: left; height: 160px; margin: 0 0 0 20px;}
.right{
	width: 200px; float: right; height: 160px; }
#faldon-index, #ventajas{
	width: 400px; float: left; font-size: 1.1em;
	margin: 0 0 20px 0; padding: 20px 0 0 20px;}
#faldon-index{
	height: 140px; }
#faldon{
	height: 140px;}
#faldontexto{ 
	width: 200px; padding: 0 20px 0 0; float: left; font-size: 1.1em;}
#faldontexto h2{
	margin: 0 0 7px 0; }
#faldonfoto1{
	float: left;}
#faldonfoto2{
	float: right; margin: 0 20px 0 0;}
#logos, #see{
	width: 420px; float: right; margin: 20px 0 0 0;}
#logos img{
	margin: 10px 12px 0 0;}
#rojo{
	margin:20px 0 0 0;}
.cort{
	margin: 100px 0 10px 0;}
#servicios h1{
	margin: 110px 0 10px 0;}
#seguridad{
	margin: 70px 0 0 0;}
#direccion{
	width: 440px; float: left;}
#firma{
	width: 420px; float: right; text-align: right;}
iframe{
	width: 860px; height: 500px;}}