@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: 1.0em;
	line-height: 1.9em; text-align: justify;}
#scabecera{
	background: #fff;}
.container{
	background: #fff;}
#faldon .container{
	background: none;}
p{
	margin: 20px 0 0 0;}
img a, a, a img{
	text-decoration: none;}
.neg{
	font-weight: 700;}
address{
	font-style: normal; display: inline;}	
.borra{
	clear: both;}
#membrete, .membrete{
	font-size: 30px; margin: 25px 0 20px 0;}
.nombre{
	color: #555; display: inline-block;}
.apellido{
	color: #e07302; display: inline-block;}
footer .nombre{
	color: #3d2e1d;}
footer .apellido{
	color: #fff;}
#menu{
	text-align: center;}	
#menu ul li{
	list-style-type: none; font-size: 0.8em;}
#menu ul li a{
	padding: 10px 0; color: #000;}
#menu ul .v a{
	color: #777;}
#imagen img{
	width: 100%; height: auto;}
#imagen #centrar{
	color: #fff;
	font-size: 14px; text-align: center;}
#imagen h2{
	border: 1px solid #fff; padding: 20px; font-weight: 300;
	background: url(../imagenes/color60.png);}
#imagen{
	background: #fff;}
.imagen img{
	width: 100%; height: auto;}
.taco{
	width: 10px; height: 10px;  display: inline-block; 
	margin: 0 10px 4px 10px; background: #e07302;}
#centrar .taco{
	background: #fff; margin: 0 10px 1px 10px;}
#servicios .taco, #galeria .taco{
	margin: 0 10px 2px 10px;}
h1, .subtit, .servicios{
	color: #b79b76; text-align: center;}
.servicios{
	display: inline-block;}
h1{
	font-weight: 300;}
.cab{
	color: #e07302; font-weight: 400; text-align: center; font-size: 16px;}
.desde{
	font-weight: 700; font-size: 0.8em; line-height: 1.5em;
	text-align: center; margin: 10px 0 0 0; display: block;}
.frase{
	color: #e07302; text-align: center; border-top: 1px solid #e07302;}
.red{
	font-size: 0.9em;}
.borde{
	border: 1px solid #e07302; padding: 30px; font-size: 1.3em;
	color: #e07302; margin: 30px 0 0 0; text-align: center;}
#mantenimiento{
	margin: 40px 0; text-align: center; padding: 60px 0 0 0;
	background: url(../imagenes/icono-martillo.jpg) top center no-repeat;}
#mantenimiento h3{
	color: #e07302;}
#mantenimiento h4{
	font-weight: 400;}	
#trio a{
	color: #000; text-align: center; display: block; padding: 70px 3% 0 3%;
	height: 150px; line-height: 1.7em; border-radius: 117px;}
#trio a h3{
	color: #e07302; margin: 0 0 5px 0;}
#trio a:hover h3{
	color: #888;
	-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;}
#trio #izdo a{
	background: url(../imagenes/icono-suelo.jpg) center 10px no-repeat;}
#trio #izdo a:hover{
	background: url(../imagenes/icono-suelo2.jpg) center 10px no-repeat;
	-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.50);}
#trio #cen a{
	background: url(../imagenes/icono-puerta.jpg) center 10px no-repeat;}
#trio #cen a:hover{
	background: url(../imagenes/icono-puerta2.jpg) center 10px no-repeat;
	-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.50);}
#trio #dcho a{
	background: url(../imagenes/icono-mueble.jpg) center 10px no-repeat;}	
#trio #dcho a:hover{
	background: url(../imagenes/icono-mueble2.jpg) center 10px no-repeat;
	-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.50);}
#servicios{
	margin: 40px 0 0 0;}
.naranja{
	background: #e07302; margin: 40px 0 0 0; text-align: center; padding: 20px 40px;}
.naranja h2{
	font-size: 20px; border-bottom: 1px solid #fff; display: block; 
	padding: 0 0 10px 0; color: #fff; font-weight: 300;}
#galeria a img{
	width: 100%; height: auto;}
#galeria .subtit{
	margin: 0 0 20px 0;}
#boton{
	width: 200px; margin: 60px auto 0 auto; text-align: center;}
#boton a{
	display: block; background: #e07302; color: #fff; padding: 10px 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.50);}
#boton a:hover{
	color: #e07302; background: #fff;}
.button{
	padding: 30px 0;}
.button a{
	display: block; background: #e07302; color: #fff; padding: 10px 0; max-width: 300px;
	margin: 0 auto; text-align: center; }
.button a:hover{
	background: #fff; color: #e07302; }
.ttel{text-align: center; }
.ttel a{
	color: #e07302; font-size: 27px; padding: 10px; display: block;}
#faldon{
	background: #e07302; padding: 40px 0; margin: 40px 0 0 0; text-align: center;}
.tel{
	display: block;}
.horario{
	text-align: center;}
#aviso{
	font-size: 0.7em; background: #3d2e1d; color: #fff;
	padding: 10px 0; text-align: center;}	
#aviso a{
	padding: 5px 0; color: #fff; display: inline-block;}
iframe{
	border: none; width: 100%; height: 400px;}
.segur{
	text-align: center; font-size: 14px; color: #666; margin: 40px auto 0 auto;
	width: 200px; border-bottom: 1px solid #C60;}
#texto-aviso h3, #texto-aviso h4{
	margin: 40px 0 0 0;}
#texto-aviso ul{
	margin-left: 20px;}
#texto-aviso ul ul{
	margin-left: 40px;}
#texto-aviso li{
	margin-top: 10px;}
.logos{
	text-align: center; margin: 20px auto;}
.logos img{
	margin: 0 10px;}
.fotos img{
	width: 100%; height: auto; display: block; margin-bottom: 15px;}
.fotos .una{
	clear: both;}
.mapa .boton a{display: block; width: 200px; margin: 80px auto; text-align: center; color: #fff; background: #e07302; padding: 10px ;
font-size: 16px;}
.mapa .boton a:hover{background: #444;}
	

@media only screen 
and (max-width : 520px){
body{text-align: center;}
.container{
	width: 100%;
	margin: 0 auto;}
.todo{
	margin: 0 20px;}
#scabecera .todo{
	margin: 0 20px; }
.margen{
	padding: 40px 0;}
#logo{
	width: 80%; margin: 0 0 0 10%;}
#menu{
	margin: 20px auto; width: 235px; font-size: 1.1em; }
#menu ul li a{
	padding: 20px 0; display: block;}
#menu ul .v a{
	border: 1px solid #e07302; margin: 0 20px;}
#menu ul li {
    font-size: 1em;}
#imagen{
	background: #e07302;}
#imagen #centrar {
    font-size: 12px; line-height: 18px;
    margin: 0; padding: 0 0 20px 0;}
#centrar .taco, h1 .taco, .subtit .taco, #inserv .taco {
    display: none;}
#imagen img{
	width: 100%; height: auto;}
#imagen h2{
	border: none; background: none; padding: 10px 0;
	border-bottom: 1px solid #fff; margin: 0 10px 20px 10px;
	font-size: 20px; line-height: 30px;}
h1{
	font-size: 30px; line-height: 38px;
	border-bottom: 1px solid #b79b76; margin: 0 10px; padding: 0 0 10px 0;}
.subtit{
	font-size: 27px; display: block; 
	border-bottom: 1px solid #b79b76; margin: 0 10px; padding: 0 0 10px 0;}
.frase{
	margin: 40px 0 0 0;
	padding: 40px 0 0 0;
	font-size: 1.1em;}
.servicios{
	border-bottom: 1px solid #b79b76; margin: 0 10px; padding: 0 0 10px 0;}
#fondo img, .imagen2 img{
	width: 100%; height: auto;}
.borde{
	font-size: 1.2em;}
.imagen{
	padding: 40px 0;}
.imagen2{
	padding: 10px 0;}
#trio #izdo{max-width: 220px; margin: 0 auto;}	
#trio #cen{max-width: 220px; margin: 5% auto;}	
#trio #dcho{max-width: 220px;margin: 0 auto;}
#servicios ul{
	margin: 10px 0 0 30px;}
.servicios, #galeria .subtit{
	font-size: 20px;}
#galeria{
	margin: 60px auto 0 auto;}
#galeria a{
	width: 250px; 
	margin: 0 auto 15px auto;
	display: block;
	height: 167px;}
#botellero{
	margin: 60px 0 0 0;}
footer{
	font-size: 0.9em;}
.guion{
	display: none;}
#aviso{
	padding: 10px 0 0 0; line-height: 20px;}
#aviso a{
	display: block;}
.mail a{
	font-size: 18px;}
#mapa iframe{
	display: none;}
#mapa img{
	widht: 100%; height: auto;}
#galeria-pant, .f-pant, #slider1{display: none;}
#galeria-movil{
	width: 100%; margin: 0 auto;}
#galeria-movil img{
	width: 100%; height: auto; margin-bottom: 15px;}}
	
@media only screen 
and (min-width : 521px)
and (max-width : 700px) {
body{text-align: center;}
.container{
	width: 100%;
	margin: 0 auto;}
.todo{
	margin: 0 30px;}
#scabecera .todo{
	margin: 0 20px;}
.margen{
	padding: 50px 0;}
#logo{
	width: 100%;
	text-align: center;}
#menu{
	width: 100%; 
	margin: 30px 0 0 0;}
#menu ul li{
	width: 16%; float: left;}
#imagen{
	background: #e07302;}
#imagen #centrar {
    font-size: 13px; line-height: 18px;
    margin: 0; padding: 0 0 20px 0;}
#imagen img{
	width: 100%; height: auto;}
#imagen h2{
	font-size: 26px; background: none; border: none;}
h1{
	font-size: 30px;}
.subtit{
	font-size: 27px;}
.subtit{
	display: block; }
.frase{
	margin: 40px 0 0 0;
	padding: 40px 0 20px 0;
	font-size: 1.2em;}
#fondo img, .imagen2 img{
	width: 100%; height: auto;}
.imagen{
	padding: 40px 0;}
.imagen2{
	padding: 10px 0;}
#trio #izdo{
	width: 100%; }	
#trio #cen{
	width: 100%; 
	margin: 5% 0;}	
#trio #dcho{
	width: 100%;}
#trio a {
    padding: 10px 10px 10px 70px; height: auto; border-radius: 0;
    text-align: left;}
#trio #izdo a {
    background: url(../imagenes/icono-suelo.jpg) no-repeat center left;}
#trio #izdo a:hover{
	background: url(../imagenes/icono-suelo2.jpg) center left no-repeat;}
#trio #cen a {
    background: url(../imagenes/icono-puerta.jpg) no-repeat center left;}
#trio #cen a:hover{
	background: url(../imagenes/icono-puerta2.jpg) center left no-repeat;}
#trio #dcho a {
    background: url(../imagenes/icono-mueble.jpg) no-repeat center left;}
#trio #dcho a:hover{
	background: url(../imagenes/icono-mueble2.jpg) center left no-repeat;}
#inserv{
	width: 450px; margin: 0 auto;}
#servicios ul{
	margin: 10px 0 0 30px;}
.servicios, #galeria .subtit{
	font-size: 20px;}
#galeria{ width: 450px; margin: 60px auto 0 auto;}
#galeria a{
	width: 47%;
	margin: 0 1% 15px 1%;
	display: inline-block;
	height: 150px;}
#botellero{
	margin: 40px 0 0 0;}
#mapa img{
	display: none;}
#galeria-movil, .f-mov, #slider3{display: none;}}
	
@media only screen 
and (min-width : 701px)
and (max-width : 999px) {
.container{
	width: 100%;
	margin: 0 auto;}
.todo{
	margin: 0 50px; max-width: 800px;}
#scabecera .todo{
	margin: 0 20px;}
.margen{
	padding: 50px 0;}
#logo{
	text-align: center;}
#menu{
	margin: 30px 0 0 0;}
#menu ul li{
	width: 16%; float: left;}
#imagen #centrar{
	z-index: 2;
	position: absolute;
	width: 450px; display: block; margin: -25% auto 0 auto;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right:0;}
#imagen #slider{
	z-index: 1; position: relative; }
#imagen h2{
	font-size: 30px;}
h1{
	font-size: 30px;}
.subtit{
	font-size: 27px;}
.subtit{
	display: block; }
.frase{
	margin: 40px 0 0 0;
	padding: 40px 0 20px 0;
	font-size: 1.2em;}
#fondo img, .imagen2 img{
	width: 100%; height: auto;}
.imagen{
	padding: 40px 0;}
.imagen2{
	padding: 10px 0;}
#trio{
	max-width: 600px; margin: 0 auto;}
#trio #izdo{
	width: 220px; float: left;}	
#trio #cen{
	width: 220px; float: right;}	
#trio #dcho{
	width: 220px; clear: both; margin: 10px auto 0 auto;}
#inserv{
	width: 450px; margin: 0 auto;}
#servicios ul{
	margin: 10px 0 0 30px;}
.servicios, #galeria .subtit{
	font-size: 20px;}
#galeria{ width: 550px; margin: 60px auto 0 auto;}
#galeria a{
	margin: 0 8px 16px 8px;
	display: inline-block;
	width: 250px; height: 167px;}
#botellero{
	margin: 60px 0 0 0;}
#mapa img{
	display: none;}
#galeria-movil, .f-mov, #slider3{display: none;}}

	
@media only screen 
and (min-width : 1000px){
body{
	background: #efefef;}
.container{
	width: 1000px; margin: 0 auto;}
.todo{
	margin: 0 100px;}
#scabecera .todo{
	margin: 0 20px;}
.margen{
	padding: 80px 0 40px 0;}
#logo{
	width: 30%; float: left; text-align: left;}
#menu{
	width: 60%; float: right; margin: 30px 0 0 0;}
#menu ul li{
	width: 16%; float: left;}
#imagen #centrar{
	z-index: 2; position: absolute;
	width: 450px; display: block; margin: -25% auto 0 auto;
	margin-left: auto; margin-right: auto; left:0; right:0;}
#imagen #slider{
	z-index: 1; position: relative; }
#imagen h2{
	font-size: 30px;}
h1{
	font-size: 30px;}
.subtit{
	font-size: 27px; display: block; }
.frase{
	margin: 40px 0 0 0; padding: 40px 0 20px 0; font-size: 1.2em;}
#fondo{
	background: url(../imagenes/fondo-carpinteria.jpg) repeat-x top center;}
.imagen{
	padding: 40px 0;}
.imagen2{
	padding: 10px 0;}
#trio #izdo{
	width: 28%; float: left;}	
#trio #cen{
	width: 28%; float: left; margin: 0 5% 0 5%;}	
#trio #dcho{
	width: 28%; float: left;}
#inserv{
	width: 450px; margin: 0 auto;}
#servicios ul{
	margin: 10px 0 0 30px;}
.servicios, #galeria .subtit{
	font-size: 20px;}
#galeria{
	margin: 60px 0 0 0;}
#galeria a{
	margin: 0 6px 15px 6px; width: 250px; display: inline-block; height: 167px;}
#botellero{
	margin: 60px 0 0 0;}
#mapa img{
	display: none;}
#galeria-movil, .f-mov, #slider3{display: none;}
.fotos .dosd{
	width: 49%; float: right;}
.fotos .dosi{
	width: 49%; float: left;}
}
@media only screen 
and (min-width : 1400px){
body{
	background: #efefef; font-size: 1.2em; line-height: 2em;}
.container{
	width: 1340px; margin: 0 auto;}
.todo{
	margin: 0 115px;}
.margen{
	padding: 100px 0 40px 0;}
#membrete, .membrete {
    font-size: 36px; margin: 25px 0 20px 0;}
#menu ul li{
	font-size: 18px;}
#imagen #centrar{width: 550px; font-size: 22px; text-shadow: 0px 0px 10px #000;}
#imagen h2 {
        font-size: 36px;  margin-bottom: 15px;  }
h1{
	font-size: 36px;}
.subtit{
	font-size: 28px; display: block; }
.desde{
	margin-bottom: 30px; margin-top: 15px; font-size: 17px;}
.frase {
    margin: 80px 0 0 0; padding: 80px 0 40px 0; font-size: 1.2em; }
.naranja h2 {
    font-size: 24px;}
	#galeria .subtit{font-size: 24px;}
.f-pant{
	margin: 0 auto; display: block;}
	#mantenimiento{margin-top: 80px;}
	#trio{margin: 80px 0;}
#trio #cen{
	margin: 0 10%; width: 26%;}	
	#trio #izdo, #trio #dcho{width: 26%;}
#trio a {
    padding: 100px 4% 0 4%; height: 190px; border-radius: 180px; }
.button a{
	font-size: 15px;}
#galeria{
	margin-top: 100px;}
	#inserv { width: 500px;}
	.naranja { padding: 80px 40px; margin-top: 80px; }
	.segur { font-size: 24px; margin: 80px auto 0 auto; width: 300px; padding-bottom: 15px;}
}