@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-ExtraLight.woff2),
         url(../fonts/SourceSans3-ExtraLight.woff),
	     url(../fonts/SourceSans3-ExtraLight.ttf);
    font-weight: 200; font-display: swap;}
@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-Light.woff2),
         url(../fonts/SourceSans3-Light.woff),
	     url(../fonts/SourceSans3-Light.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: "Source Sans 3";
    src: url(../fonts/SourceSans3-Regular.woff2),
         url(../fonts/SourceSans3-Regular.woff),
	     url(../fonts/SourceSans3-Regular.ttf);
    font-weight: 400; font-display: swap;}
*{
	margin: 0; padding: 0;}
body{
	font-family: "Source Sans 3", serif; line-height: 1.9em; background: #313439;	color: #333;}
#cabecera, .contenido{
	background: #fff;}
#cabecera{
	position: relative;}
#cabecera .redes{
	position: absolute; top: 0; right: 5%;}
#cabecera .redes img{
	border: 2px solid #ccc; border-radius: 30px; width: 35px; height: 35px;}
#cabecera .redes a img{opacity: 0.3;}
#cabecera .redes a:hover img{opacity: 0.6;}
img a, a, a img{
	text-decoration: none;}
#imagen img, .foto img, .combi2 img, .banner{
	width: 100%; height: auto;}
.banner{
	margin-top: 40px;}
.neg{
	font-weight: bold;}
.noneg{
	font-weight: normal;}
#menu ul li{
	list-style-type: none; text-align: center;}
#menu ul li a{
	color: #000; padding: 20px 0; display: block;}
p{
	margin: 15px 0 0 0; font-size: 18px;}
h1{
	font-size: 45px; font-weight: 200; line-height: 40px; text-transform:uppercase;}
.subt{
	font-size: 14px; font-weight: 400; color: #777; display: block; }
.frase{
	font-size: 26px; line-height: 40px; text-align: center; color: #555;}
.centrado{
	text-align: center;}
.boton a{
	background: #008fce; color: #fff; display: block; font-size: 17px; letter-spacing: 2px;
	padding: 10px 5px; text-align: center; }
.duo .boton a{
	margin-top: 30px; background: #fff; color: #333;  border: 1px solid #333;}
.duo .boton a:hover{
	background: #efefef;}
.duo, .foto{
	margin-top: 150px;}
.duo, .foto, .combi2{
	margin-top: 150px;}
.duo .izdo ul{
	margin-left: 20px; margin-top: 20px; font-size: 18px;}
.duo img{
	width: 100%; height: auto;}
.duo h2{
	color: #008fce; font-size: 16px; letter-spaccing: 2px;}
.duo h3{
	font-size: 85px; line-height: 88px; font-weight: 200;}
.producto h3{
	font-size: 70px; line-height: 80px; }
.bloques .in{
	color: #aaa; padding: 60px; font-size: 1.2em;}
.bloques .negro{
	background: #000; }
.bloques .azul{
	background: #008fce; }
.t-azul, .horario{
	color: #008fce;}
.bloque1 .t-azul{
	letter-spacing: 2px;}
.bloque3 .t-azul{
	color: #222; margin-top: 10px; display: block;}
.g1{
	font-weight: 200; font-size: 100px; display: block; line-height: 100px;}
.g2{
	font-weight: 300; font-size: 30px; display: block; line-height: 30px;}
.g3{
	font-weight: 300; font-size: 40px; line-height: 45px;}
.g4{
	font-weight: 200; font-size: 90px; display: block; line-height: 95px; color: #008fce;
	letter-spacing: -1px;}
.g5{
	font-weight: 300; font-size: 30px; line-height: 45px; text-transform: uppercase;
	letter-spacing: 2px;}
.g6{
	font-weight: 400; font-size: 22px; line-height: 38px; text-transform: uppercase; letter-spacing: 1px; color: #445;}
.bloque3 .g3{
	color: #fff;}
.mtop{
	margin-top: 60px !important;}
.comb .in h3{
	font-weight: 200; font-size: 55px; line-height: 50px; }
.comb{
	position: relative;}
.comb img{
	z-index: 1; position: relative;}
.comb .t-comb{
	font-size: 44px; height: 40px; position: absolute; margin-top: -38px; z-index: 2;
	color: #efefef; font-weight: 200;}
.gris{
	background: #efefef; padding: 100px 0;}
.gris h6, .galeria h4{
	font-size: 14px; letter-spacing: 2px; text-transform:uppercase;}
.gris .logos{
	margin-top: 20px;}
.gris .logos a{
	text-decoration: none; border: none; display: inline-block; margin: 0 10px 20px 10px;}
.gris .logos a img{
	filter: grayscale(100%); opacity: 0.7;}
.gris .logos a:hover img{
	filter: none; opacity: 1;}
.esquemas, .materiales, .producto{
	margin-top: 0; margin-bottom: 80px;}
.materiales{
	margin-bottom: 0;}
.esquemas .dcho{
	font-size: 14px; letter-spacing: 1px;}
.esquemas .izdo, .producto .izdo{
	border-top: 1px solid #008fce; padding-top: 100px;}
.galeria{
	text-align: center;}
.galeria img{
	height: auto;}
.galeria h4{
	margin-bottom: 10px;}
footer .boton a:hover{
	background: #313439;}
footer{
	background: #1a1a1e; color: #aaa;}
.infooter{
	padding: 50px 0; font-weight: 300; font-size: 17px;}
.infooter .boton{
	padding-top: 15px;}
address{
	font-style: normal; display: inline;}	
.borra{
	clear: both;}
#aviso{ 
	font-size: 0.9em; clear: both;}
#aviso a{
	color: #aaa; display: inline-block; padding: 5px 0;}
iframe{
	border: none; width: 100%;}
.telefono{
	color: #aaa; display: block; font-size: 58px; font-weight: 200; line-height: 60px;
	 letter-spacing: 2px; margin-bottom: 10px;}
.duo .telefono:hover{
	color: #008fce;}
.redes a{
	display: inline-block; padding: 5px; }
.redes a img{
	border-radius: 25px; opacity: 0.5;}
.redes a:hover img{
	opacity: 1;}
.top{
	color:#000; padding-top:10px; display:block; text-align: center; width: 45px;
	margin-top: 10px; position:relative; text-decoration:none;
	transition:all .3s ease-out;}
.top:before{
	content:'▲'; font-size:20px; position:absolute; top:0; left:50%; margin-left:-.7em;
	border-radius:25px; background: #fff; padding: 6px;
	width:1.4em; height:1.4em; line-height:1.3em; transition:transform .5s ease-in;}
.top:hover{
	color:#008fce;}
.infooter .redes{
	width: 110px; float: left;}
.infooter .flecha{
	width: 50px; float:right;} 
.infooter .boton{
	clear: both;}
.dir strong{
	font-size: 1.3em; font-weight: 400;}
.trabajos h3{
	font-weight: 300; margin-top: 60px; font-size: 30px;}
.trabajos p{
	margin-top: 6px;}
.trabajos img{ height: auto; position: relative; z-index: 1;}
.foto{	position: relative; }
.botoncito a{
	display: inline-block; background: #fff; color: #333;  border: 1px solid #333;
	margin-left: 10px; padding: 2px 10px; font-size: 0.8em;}
.botoncito a:hover{	background: #eee; border: 1px solid #eee;}
.tooltip {
    position: absolute; z-index: 2; display: block; color: #fff; text-align: center;
	font-size: 34px; width: 40px; height: 30px; background: #333; top: 86%; font-weight: 200;}
.tooltip .tooltiptext {
    visibility: hidden; font-size: 15px; font-weight: 300; background: #fff; color: #777;
    padding: 20px; position: absolute; z-index: 1; border: 1px solid #aaa;}
.tooltip .tooltiptext {
    width: 300px; top: -6px; left: 40px; text-align: left; }
.tooltip:hover .tooltiptext {
    visibility: visible; }
.tooltip .tt{	font-size: 1.2em; font-weight: 400;}
#velux{	position: absolute; top: 5px; right: 195px;}
#velux a {    text-decoration: none; border: none; display: block; }
#velux a img {    filter: grayscale(100%); opacity: 0.7;}
#velux a:hover img {    filter: none; opacity: 1;}
.lpd h2{	margin-top: 60px;}
.singular{width: 300px !important; margin-top: 80px; opacity: 0.8;}
.mapa{padding: 200px 0; background: url( "../imagenes/mapa.jpg") no-repeat left top; background-size: cover; }
.mapa a{margin: 0 auto; width: 100%; max-width: 300px; text-transform: uppercase; background: #fff;
display: block; padding: 13px 0; color: #008fce; border: 1px solid #008fce;}
.mapa a:hover{background: #008fce; color: #fff; }

@media only screen 
and (max-width : 520px){
.pantalla, .tablet{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
#cabecera{
	padding-top: 2%;}
#cabecera .redes {
    right: 1%;}
#logo{
	width: 150px; margin: 20px auto; }
#menu{
	font-size: 20px; font-weight: 300;}
#menu ul li li{
	width: 100%;}
#menu ul li a:hover{
	background: #eee;}
.menu-wrapper li .sub-menu.active {
	width: 100%; }
.contenido{
	padding: 80px 0;}
.sin-slider img{
	display: block;}
h1 {
    font-size: 36px; font-weight: 300; line-height: 40px;}
.mbj{
	padding-bottom: 80px;}
.foto, .duo{
	margin-top: 80px;}
.duo .izdo{
	text-align: center;}
.duo .dcho{
	width: 100%; max-width: 400px; margin: 50px auto 0 auto;}
.producto{
	margin-top: 0 !important;}
.producto1{
	margin-top: 60px !important;}
.producto h3, .duo h3{
    font-size: 40px; line-height: 45px;}
.esquemas .izdo, .producto .izdo {
    padding-top: 70px;}
.esquemas .dcho{
	width: 90%; margin: 0 auto;}
.frase {
    font-size: 20px; line-height: 30px;}
footer{
	text-align: center;}
footer .izdo{
	margin-bottom: 30px;}
footer .dcho a{
	font-size: 14px;}
footer address{
	font-size: 0.9em;}
footer .boton a{
	width: 70%; margin: 0 auto;}
.infooter .boton {
    padding-top: 10px;}
.infooter .redes{
	width: 110px; margin: 30px auto 0 auto; float: none;}
.infooter{
	padding: 20px;}
.top {
    margin-bottom: 50px; float: none; position: absolute;}
#aviso{
	padding-left: 4%;}
.telefono{
	font-size: 40px; letter-spacing: 1px;}
.fondo{
	padding: 5% 0 200px 0;}
.fondo1{
	background: url(../imagenes/fondo-m.jpg) no-repeat center center;
	background-size: cover;}
.fondo .bloques{
	width: 90%; margin-left: 5%; text-align: center;}
.fondo .bloque2{
	background: #000 url(../imagenes/punto.jpg) repeat-x left top;}
.fondo .bloque3{
	clear: both; background: #008fce url(../imagenes/punto.jpg) repeat-x left top;}
.fondo .bloques .in{
	padding: 30px 10px;}
.fondo .g1 {
    font-size: 70px; line-height: 70px;}
.fondo .g2{
    font-size: 20px; line-height: 30px;}
.fondo .g3 {
    font-size: 27px; line-height: 40px;}
.fondo .g5 {
    font-size: 24px; line-height: 32px;}
.comb .t-comb {
    font-size: 50px; height: 40px; margin-top: -40px;}
.comb .in h3 {
    font-size: 45px; line-height: 50px; }
.g4 {
    font-size: 65px; line-height: 70px;}
.combi2{
	text-align: center; margin-top: 80px;}
.combi2 .comb{
	width: 90%; margin: 2% auto; display: block;}
.combi2 .estilos{
	display: block; width: 100%;}
.esquemas .dcho{
	margin-top: 40px;}
.esquemas img{
	width: 70%; padding: 15%; border: 2px solid #ddd;}
.esquema{
	width: 43%; display: inline-block; margin: 3%; text-align: center; color: #777;}
.producto .dcho{
	width: 80%; margin: 30px auto 0 auto;}
.top100{
	margin-top: 100px;}
.galeria{
	text-align: center;}
.galeria img{
	width: 70%; float: none; display: block; margin: 0 auto;}
.trabajos .foto{
	display: inline-block; width: 98%; margin: 1%;}
.trabajos img{
	display: block;}
.tooltip {
    top: 86%; height: 32px; padding-top: 6px;}
.singular{width: 250px !important; margin: 80px auto;}
.mapa{padding: 300px 0; background: url( "../imagenes/mapa-m.jpg") no-repeat left top; }
}

@media only screen 
and (min-width : 521px)
and (max-width : 800px) {
.pantalla, .movil{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 6%;}
#cabecera{
	padding-top: 2%;}
#cabecera .redes {
    right: 1%;}
#logo{
	width: 160px; margin: 10px auto 0 auto; }
#menu{
	width: 420px; font-size: 16px; font-weight: 400; margin: 30px auto 0 auto;}
#menu ul li{
	float: left; width: 22%;}
#menu ul li a{
	color: #555;}
#menu ul .uno{
	width: 29%;}
#menu ul .dos{
	width: 27%;}
#menu ul li li{
	width: 100%;}
#menu ul li a:hover{
	background: #eee;}
#imagen{
	margin: 2% auto 0px auto; width: 96%;}
.sin-slider{
	margin-top: 1% !important;}
.contenido{
	padding: 100px 0;}
h1 {
    font-size: 38px; line-height: 40px;}
.mbj{
	padding-bottom: 100px;}
.foto, .duo{
	margin-top: 80px;}
.duo .izdo{
	text-align: center;}
.duo .dcho{
	width: 100%; max-width: 400px; margin: 50px auto 0 auto;}
.producto{
	margin-top: 0 !important;}
.producto1{
	margin-top: 80px !important;}
.producto h3, .duo h3{
    font-size: 45px; line-height: 50px;}
.esquemas .dcho{
	width: 90%; margin: 0 auto;}
.frase {
    font-size: 22px; line-height: 30px;}
footer .izdo{
	margin-bottom: 30px;}
footer .cent{
	width: 55%; float: left;}
footer .dcho{
	width: 35%; float: right;}
footer .dcho a{
	font-size: 14px;}
footer address{
	font-size: 0.9em;}
.infooter{
	padding: 4%;}
footer .cent{
	float: left;}
#aviso{
	padding-left: 4%;}
.telefono{
	font-size: 40px; letter-spacing: 1px;}
.fondo{
	padding: 5% 0 200px 0;}
.fondo1{
	background: url(../imagenes/fondo-t.jpg) no-repeat center center;
	background-size: cover;}
.fondo .bloques{
	width: 90%; margin-left: 5%; text-align: center;}
.fondo .bloque1{
	width: 50%; float: left;}
.fondo .bloque2{
	float: right; width: 50%;}
.fondo .bloque2{
	background: #000 url(../imagenes/punto.jpg) repeat-y left top;}
.fondo .bloque3{
	clear: both; background: #008fce url(../imagenes/punto.jpg) repeat-x left top;}
.fondo .bloques .in{
	 height: 120px; padding: 40px 10px;}
.fondo .bloques .bloque3 .in{
	 height: 100px; padding: 30px;}
.fondo .g1 {
    font-size: 70px; line-height: 70px;}
.fondo .g2{
    font-size: 20px; line-height: 30px;}
.fondo .g3 {
    font-size: 27px; line-height: 40px;}
.fondo .g5 {
    font-size: 24px; line-height: 32px;}
.comb .t-comb {
    font-size: 30px; height: 40px; margin-top: -30px;}
.comb .in h3 {
    font-size: 45px; line-height: 50px; }
.g4 {
    font-size: 65px; line-height: 70px;}
.combi2{
	text-align: center; margin-top: 80px;}
.combi2 .comb{
	width: 43%; margin: 2%; display: inline-block;}
.combi2 .estilos{
	display: block; width: 100%;}
.esquemas .dcho{
	margin-top: 40px;}
.esquemas img{
	width: 70%; padding: 15%; border: 2px solid #ddd;}
.esquema{
	width: 43%; display: inline-block; margin: 3%; text-align: center; color: #777;}
.producto .dcho{
	margin-top: 40px;}
.top100{
	margin-top: 100px;}
.galeria{
	text-align: center;}
.galeria img{
	width: 32%; float: none; display: inline-block; margin: 0 auto;}
.trabajos .foto{
	display: inline-block; width: 47%; margin: 1%;}
.trabajos img{
	display: block;}
.tooltip {
    top: 80%;}
#velux{
	right: 100px;}
.mapa{padding: 180px 0; background: url( "../imagenes/mapa-t2.jpg") no-repeat left top; background-size: 100% auto; }

}
@media only screen 
and (max-width : 660px){
#velux{
	top: 50px; right: 0px;}
#velux a img{
	width: 110px; height: auto;}}
@media only screen 
and (min-width : 620px)
and (max-width : 800px) {
.fondo .bloques .bloque2 .in{
	padding: 40px 30px;}}
@media only screen 
and (min-width : 801px)
and (max-width : 1199px) {
.movil, .tablet{
	display: none;}
.container {
	width: 96%; margin: 0 auto;}
.todo {
	margin: 0 40px;}
#logo{
	width: 160px; float: left; margin: 10px 0 0 0;}
#menu{
	width: 500px; float: right; font-size: 16px; font-weight: 400; margin-top: 64px;}
#menu ul li{
	float: left; width: 22%;}
#menu ul li a{
	color: #555;}
#menu ul .uno{
	width: 29%;}
#menu ul .dos{
	width: 27%;}
#menu ul li li{
	width: 100%;}
#menu ul li a:hover{
	background: #eee;}
#imagen{
	margin: 2% auto 0px auto; width: 96%;}
.sin-slider{
	margin-top: 30px !important;}
.contenido{
	padding: 100px 0;}
.mbj{
	padding-bottom: 140px;}
.foto, .duo{
	margin-top: 100px;}
.duo .izdo{
	width: 50%; float: left; margin-top: 0;}
.duo .dcho{
	width: 40%; float: right; }
.producto{
	margin-top: 0 !important;}
.producto1{
	margin-top: 80px !important;}
.producto h3, .duo h3{
    font-size: 55px; line-height: 60px;}
.combi2 .comb{
	width: 29.6%; margin-bottom: 5%; display: inline-block;}
.combi2 .cc{
	margin: 0 5% 5% 5%;}
.esquemas .dcho{
	width: 40%;}
.frase {
    font-size: 22px; line-height: 30px;}
footer .izdo{
	margin-bottom: 30px;}
.cent{
	width: 50%; float: left;}
.dcho{
	width: 30%; float: right;}
.infooter{
	padding: 40px;}
footer .cent{
	float: left;}
#aviso{
	padding-left: 40px;}
.telefono{
	font-size: 45px;}
.fondo{
	padding: 100px 0;}
.fondo1{
	background: url(../imagenes/fondo.jpg) no-repeat center center;
	background-size: cover;}
.fondo .bloques{
	width: 86%; margin-left: 14%;}
.fondo .bloque1{
	width: 50%; float: left;}
.fondo .bloque2, .fondo .bloque3{
	float: right; width: 50%;}
.fondo .bloque2{
	background: #000 url(../imagenes/punto.jpg) repeat-y left top;}
.fondo .bloque3{
	clear: both; background: #008fce url(../imagenes/punto.jpg) repeat-x left top;}
.fondo .bloques .in{
	 height: 140px;}
.fondo .g1 {
    font-size: 85px; line-height: 90px;}
.fondo .g2, .fondo .g5 {
    font-size: 26px; line-height: 32px;}
.fondo .g3 {
    font-size: 34px; line-height: 40px;}
.comb .t-comb {
    font-size: 36px; height: 40px;}
.comb .in h3 {
    font-size: 45px; line-height: 50px;}
.g4 {
    font-size: 80px; line-height: 90px;}
.esquemas .dcho{
	margin-top: 70px;}
.esquemas img{
	width: 70%; padding: 15%; border: 2px solid #ddd;}
.esquema{
	width: 40%; display: inline-block; margin: 2%; text-align: center; color: #777;}
.producto .dcho{
	margin-top: 100px;}
.top100{
	margin-top: 100px;}
.galeria{
	text-align: center;}
.galeria img{
	width: 25%; float: none; display: inline-block; margin: 0 auto;}
.trabajos .foto{
	display: inline-block; width: 31%; margin: 1%;}
.trabajos img{
	display: block;}
.tooltip {
    top: 80%;}
#velux{
	right: 155px;}
.mapa{padding: 180px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto;}
}
@media only screen 
and (min-width : 890px)
and (max-width : 940px) {
.esquema .dobles{
	width: 90%; display: block; margin-left: auto;}}
	
@media only screen 
and (min-width : 1200px){ 
.movil, .tablet{
	display: none;}
.container, #imagen, .infooter, #aviso {
	width: 90%; margin: 0 auto;}
.todo {
	margin: 0 80px;}
#logo{
	width: 300px; float: left; margin: 10px 0 0 0;}
#menu{
	width: 560px; float: right; font-size: 18px; font-weight: 300; margin-top: 64px;}
#menu ul li{
	float: left; width: 22%;}
#menu ul .uno{
	width: 29%;}
#menu ul .dos{
	width: 27%;}
#menu ul li li{
	width: 100%;}
#menu ul li a:hover{
	background: #eee;}
#imagen{
	margin: 40px auto 0px auto;}
.sin-slider{
	margin-top: 30px !important;}
.contenido{
	padding: 100px 0;}
.mbj{
	padding-bottom: 140px;}
.duo .izdo{
	width: 40%; float: left; margin-top: 100px;}
.duo .dcho{
	width: 40%; float: right;}
.combi2 .comb{
	width: 29.6%; margin-bottom: 5%; display: inline-block;}
.combi2 .cc{
	margin: 0 5% 5% 5%;}
.esquemas .dcho{
	width: 55%;}
footer .izdo, .dcho, .cent{
	width: 30%; float: left;}
footer .cent{
	margin: 0 5%;}
.fondo{
	padding: 100px 0;}
.fondo1{
	background: url(../imagenes/fondo.jpg) no-repeat center center;
	background-size: cover;}
.fondo .bloques{
	width: 65%; margin-left: 35%;}
.fondo .bloque1{
	width: 50%; float: left;}
.fondo .bloque2, .fondo .bloque3{
	float: right; width: 50%;}
.fondo .bloque2{
	background: #000 url(../imagenes/punto.jpg) repeat-y left top;}
.fondo .bloque3{
	clear: both; background: #008fce url(../imagenes/punto.jpg) repeat-x left top;}
.fondo .bloques .in{
	 height: 140px;}
.esquemas .dcho{
	margin-top: 240px;}
.esquemas img{
	width: 70%; padding: 15%; border: 2px solid #ddd;}
.esquema{
	width: 20%; display: inline-block; margin: 2%; text-align: center; color: #777;}
.producto .dcho{
	margin-top: 100px;}
.top100{
	margin-top: 100px;}
.galeria img{
	width: 20%; float: left; display: block;}
.trabajos .foto{
	display: inline-block; width: 31.1%; margin: 1% 2% 1% 0;}
}
@media only screen 
and (min-width : 1200px)
and (max-width : 1500px) {
.esquema .simples{
	width: 65px; display: block; margin: 0 auto;}
.esquema .dobles{
	width: 90%; display: block; margin-left: auto;}}
@media only screen 
and (min-width : 1500px){ 
	#velux{	right: 10%;}}