@font-face{
	font-family: "Manjari";
    src: url(../fonts/Manjari-Thin.woff2),
         url(../fonts/Manjari-Thin.woff),
	     url(../fonts/Manjari-Thin.ttf);
    font-weight: 100; font-display: swap; }
@font-face{
	font-family: "Manjari";
    src: url(../fonts/Manjari-Regular.woff2),
         url(../fonts/Manjari-Regular.woff),
	     url(../fonts/Manjari-Regular.ttf);
    font-weight: normal; font-display: swap; }
@font-face{
	font-family: "Manjari";
    src: url(../fonts/Manjari-Bold.woff2),
         url(../fonts/Manjari-Bold.woff),
	     url(../fonts/Manjari-Bold.ttf);
    font-weight: bold; font-display: swap;}
*{
	margin: 0; padding: 0;}
body{
	font-family: 'Manjari', sans-serif; line-height: 1.9em; color: #474137;}
#cabecera{
	background: #282726;}
img a, a, a img{
	text-decoration: none;}
img{
	height: auto;}
#imagen img, .tercio img{
	width: 100%; }
.neg{
	font-weight: bold;}
.noneg{
	font-weight: normal;}
#menu ul li{
	list-style-type: none; text-align: center;}
#menu ul li a{
	color: #fff; padding: 20px 0 10px 0; display: block;}
#menu ul li a:hover{
	background: #463f34;}
p{
	margin: 15px 0 0 0; font-size: 19px; color: #595348;}
h1{
	font-size: 28px; font-weight: 700; line-height: 40px; letter-spacing: 4px;}
.frase{
	font-size: 26px; font-weight: 400; color: #777; margin-top: 60px;}
.centrado{
	text-align: center;}
.boton a{
	background: #534b3f; color: #fff; display: block; font-size: 14px; letter-spacing: 2px;
	padding: 11px 5px 7px 5px; text-align: center; }
.gris{
	background: #e0dcd8; padding: 100px 0;}
.gris .boton a{
	border: 1px solid #534b3f; color: #534b3f; background: none; margin-top: 10px;}
.gris .boton a:hover{
	background: #fff;}
.doble .tercio, .armarios{
	background: url(../imagenes/blanco.png); border: none;}
.tercio .texto{padding: 10%;}
.reformas{
	background: #fff;}
.reformas h2{
	font-size: 33px; line-height: 40px;}
.reformas .mas{
	font-weight: bold; color: #534b3f; font-size: 1.2em; margin-top: 60px;}
.armarios .texto{
	padding: 5%;}
.armarios{
	margin-top: 60px;}
.mesas{
	width: 100%;}
.foto img{
	width: 100%; max-width: 700px;}
h3{
	margin-top: 60px; font-size: 1.3em;}
.grupo, .galeria{
	margin-top: 30px;}
.grupo img, .galeria img{
	display: inline-block; margin: 0.5% 1%;}
footer .boton a:hover{
	background: #21201f;}
footer{
	background: #282726; color: #aaa; text-align: center;}
footer h5{
	font-size: 13px; margin-bottom: 30px; font-weight: normal; letter-spacing: 2px;}
.infooter{
	padding: 50px 0; font-weight: 400; font-size: 17px;}
.infooter .boton{
	padding-top: 15px; width: 200px; margin: 0 auto;}
address{
	font-style: normal; display: inline;}	
.borra{
	clear: both;}
#aviso{ 
	font-size: 0.7em; clear: both; background: #21201f;}
#aviso a{
	color: #aaa; display: inline-block; padding: 5px 0;}
iframe{
	border: none; width: 100%;}
.telefono{
	display: block; color: #fff; margin-bottom: 10px;
	font-size: 28px; line-height: 30px; letter-spacing: 1px; }
.frase .telefono{
	color: #21201f;}
.mapa{ background: url("../imagenes/mapa.jpg") no-repeat left top; background-size: cover; padding: 200px 0; text-align: center;}
.mapa .boton a{width: 230px; margin: 0 auto; font-size: 15px; background: #fff;}
.mapa .boton a:hover{opacity: 0.8;}


@media only screen 
and (max-width : 520px){
.pantalla, .tablet{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
#cabecera{ padding-top: 20px;}
#logo{
	width: 270px; margin: 25px auto;}
#logo img{
	width: 100%;}
#menu{
	font-size: 20px;}
.viviendas{
	font-size: 1.6em; line-height: 1.2em;display: block; font-weight: 100;}
#imagen{
	margin: 0px auto;}
.contenido{
	padding: 80px 0 50px 0;}
.reformas{
	margin-top: 10px; border: none;}
.reformas .texto{
	padding: 8% 5% 6% 5%;}
.reformas h2 {
    font-size: 28px;}
.gris{
	padding-top: 40px;}
.doble .central{
	margin-bottom: 40px;}
.doble, .armarios{
	margin-top: 40px;}
.armarios img{
	width: 100%; display: block;}
.armarios .texto{
	padding: 10%;}
.grupo img, .galeria img{
	width: 100%;}
.foto img {
    margin: 40px auto 0 auto;}
iframe{
	height: 400px;}
}

@media only screen 
and (min-width : 521px)
and (max-width : 750px) {
.pantalla, .movil{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 30px;}
#cabecera{ padding-top: 20px;}
#cabecera .todo{
	margin: 0;}
#logo{
	width: 270px; margin: 25px auto;}
#logo img{
	width: 100%;}
#menu{
	width: 480px; font-size: 17px; font-weight: 300; margin: 0 auto;}
#menu ul li{
	letter-spacing: 1px;}
#imagen{
	margin: 0px auto;}
.contenido{
	padding: 80px 0 50px 0;}
p{
	font-size: 1.1em;}
.reformas{
	margin-top: 10px; border: none;}
.reformas .texto{
	padding: 8% 5% 6% 5%;}
.reformas h2 {
    font-size: 28px;}
.gris{
	padding: 40px 0;}
.doble, .armarios{
	margin-top: 40px;}
.doble .tercio{
	width: 47.5%; float: left;  height: 500px;}
.doble .central{
	margin-right: 5%;}
.doble, .armarios{
	margin-top: 40px;}
.armarios img{
	width: 100%; display: block;}
.armarios .texto{
	padding: 10%;}
.grupo img{
	width: 48%;}
.galeria img{
	width: 47%;}
.foto img {
    margin: 40px auto 0 auto;}
iframe{
	height: 460px;}
}

@media only screen 
and (min-width : 751px)
and (max-width : 1199px) {
.movil, .pantalla{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 50px;}
#cabecera .todo{
	margin: 0;}
.container, .infooter{
	width: 90%; margin: 0 auto;}
#logo{
	width: 270px; float: left; margin: 25px 0 0 0;}
#logo img{
	width: 100%;}
#menu{
	width: 530px; float: right; font-size: 18px; font-weight: 300; margin-top: 12px;}
#menu ul li{
	float: left; width: 24%; letter-spacing: 1px;}
#menu ul .uno, #menu ul .cuatro{
	width: 29%;}
#menu ul .dos{
	width: 21%;}
#menu ul .cuatro{
	width: 26%;}
#imagen{
	margin: 0px auto;}
.contenido{
	padding: 90px 0 60px 0;}
.reformas{
	margin-top: 10px; border: none;}
.reformas .texto{
	padding: 8% 5% 6% 5%;}
.reformas h2 {
    font-size: 28px;}
.doble, .armarios{
	margin-top: 40px; }
.doble .tercio{
	width: 47.5%; float: left;  height: 600px;}
.doble .central{
	margin-right: 5%;}
.armarios img{
	width: 50%; }
.grupo img{
	width: 48%;}
.galeria img{
	width: 47%;}
.foto img {
    margin: 0 auto;}
iframe{
	height: 460px;}
}
@media only screen 
and (min-width : 751px)
and (max-width : 940px) {
#cabecera{
	padding-top: 20px;}
#logo{
	width: 300px; float: none; margin: 25px auto; }
#menu{
	width: 530px; float: none; margin: 0 auto;}
.doble .tercio{
	height: 510px;}
}
@media only screen 
and (min-width : 941px)
and (max-width : 1050px) {
.doble .tercio{
	height: 540px;}
}
@media only screen 
and (min-width : 1200px){ 
.movil, .tablet{
	display: none;}
.container, #imagen, .infooter{
	width: 90%; margin: 0 auto;}
.todo {
	margin: 0 80px;}
#cabecera .todo{
	margin: 0;}
#logo{
	width: 300px; float: left; margin: 25px 0 0 0;}
#menu{
	width: 530px; float: right; font-size: 18px; font-weight: 300; margin-top: 20px;}
#menu ul li{
	float: left; width: 24%; letter-spacing: 1px;}
#menu ul .uno, #menu ul .cuatro{
	width: 29%;}
#menu ul .dos{
	width: 21%;}
#menu ul .cuatro{
	width: 26%;}
#imagen{
	margin: 0px auto;}
.contenido{
	padding: 100px 0;}
.tercio{
	width: 30%; float: left;}
.reformas{
	margin-top: 120px;}
.reformas .texto{
	padding: 20% 15%;}
.doble{
	width: 64%; float: right; }
.doble .tercio{
	width: 46%;}
.doble .central{
	margin-right: 8%;}
.armarios img{
	width: 50%; }
.grupo img{
	width: 48%;}
.galeria img{
	width: 31%;}
.foto img {
    margin: 60px auto;}
iframe{
	height: 580px;}
}