/* reseteo */
*{
	border: 0;
	margin: 0;
	padding: 0;
}

article,figcaption,figure,footer,header,hgroup,nav,section{
	display: block;
}

/* estilos de fuente */

@font-face {
    font-family: "great_vibesregular";
    src: url("../fonts/greatvibes-regular-webfont.woff2") format("woff2"),
         url("../fonts/greatvibes-regular-webfont.woff") format("woff");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "robotolight";
    src: url("../fonts/roboto-light-webfont.woff2") format("woff2"),
         url("../fonts/roboto-light-webfont.woff") format("woff");
    font-weight: lighter;
    font-style: normal;
}

/* estilos del sitio */

body{
	background: #fff;
	color: #adadad;
	font-family: "robotolight", Helvetica, Arial;
	font-size: 1em;
	margin: 0 auto;
	text-align: center;
}

a{
	color: #7f7f7f;
	text-decoration: none;
}

a:hover{
	color: #000;
}

figcaption{
	font-size: 0.85em;
	padding: 0.25em;
	text-align: center;
}

img, video{
	max-width: 100%;
}


/*----Estilos del header----*/

header{
	max-width: 100%;
	height: 5.65em;
}

/*----Estilos del menu----*/

div#verde{
	background-color: #8cc63e;
	width: 75%;
	height: 5px;
}

div#naranja{
	background-color: #f05a28;
	width: 25%;
	height: 5px;
}

div#verde, div#naranja{
	float: left;
	margin: 0;
}

/*inicio de contenedor del menu*/

section#cabecera{
	position: fixed;
	bottom: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	display: block;
	z-index: 5000;
	background-color: #fff;
}

/*final de contenedor del menu*/

nav#menu a#pull{									/*----Estilos para menu desplegable en movil----*/
	display: none;
}

nav#menu a#inicio-falso{
	display: none;
}

a#logo-movil{
	display: none;
}

nav#menu li#iconos-moviles{
	display: none;
}

nav#menu img, nav#menu a{
	display: block;
	vertical-align: middle;
}

nav#menu a#logo{
	padding-right: 7em;
}

nav#menu a#facebook{
	padding-left: 17em;
}

nav#menu{
	font-size: 0.8em;
	padding: 1em 0;
	text-align: center;
	background-color: #fff;
	width: 100%;
}

nav#menu ul{
	list-style: none;
	margin: 0 auto;
}

nav#menu li{
	display: inline-block;
	padding: 0 auto;
	margin-left: 2em;
}

nav#menu a{
	color: #7f7f7f;
	display: inline-block;
	font-family: Helvetica, Arial;
	transition: all 0.08s ease-in;
	-webkit-transition: all 0.08s ease-in;
	-moz-transition: all 0.08s ease-in;
	-o-transition: all 0.08s ease-in;
	-ms-transition: all 0.08s ease-in;
}

nav#menu a:hover{
	color: #000;
	transition: all 0.08s ease-out;
	-webkit-transition: all 0.08s ease-out;
	-moz-transition: all 0.08s ease-out;
	-o-transition: all 0.08s ease-out;
	-ms-transition: all 0.08s ease-out;	
}

nav#menu .activo{
	color: #000;
	cursor: pointer;
}

/*------Estilos Menu Gategorías------*/

nav#menu-categorias{
	font-size: 1.1em;
	padding-top: 0.75em;
	text-align: center;
	background-color: #fff;
	width: 100%;
}

nav#menu-categorias ul{
	list-style: none;
	margin: 0 auto;
	background-color: #cbcbcb;
}

nav#menu-categorias li{
	display: inline-block;
	padding: 0 auto;

}

nav#menu-categorias a{
	color: #fff;
	display: inline-block;
	font-family: Helvetica, Arial;
	transition: all 0.08s ease-in;
	-webkit-transition: all 0.08s ease-in;
	-moz-transition: all 0.08s ease-in;
	-o-transition: all 0.08s ease-in;
	-ms-transition: all 0.08s ease-in;
	padding: 1.5em;
}

nav#menu-categorias a:hover{
	color: #fff;
	background-color: #8cc63e;
	transition: all 0.08s ease-out;
	-webkit-transition: all 0.08s ease-out;
	-moz-transition: all 0.08s ease-out;
	-o-transition: all 0.08s ease-out;
	-ms-transition: all 0.08s ease-out;	
}

nav#menu-categorias .activo{
	color: #fff;
	cursor: pointer;
		background-color: #8cc63e;
}

/*------Estilos de galería------*/

div#texto-galeria{
	font-family: "robotolight";
	font-size: 2.2em;
	color: #adadad;
	margin-top: 2em;
	margin-bottom: 1em;
}

div#gallery {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}

div#gallery img{
	width: 100%;
	display: block;
	float: left;
	outline: 4px solid #fff;
}

div#gallery a{

}

div#gallery div#columna01{
	width: 19.91%;
}

div#gallery div#columna02{
	width: 40%;
}

div#gallery img#foto05{
	width: 33.333%;
}

div#gallery img#foto06{
	width: 33.333%;
}

div#gallery img#foto07{
	width: 33.333%;
}

div#gallery img#foto09{
	width: 50%;
}

div#gallery img#foto10{
	width: 50%;
}

div#gallery div#columna03{
	width: 38.62%;
}

div#gallery img#foto13{
	width: 50%;
}

div#gallery img#foto17{
	width: 50%;
}

div#gallery img#foto14{
	width: 33.333%;
}

div#gallery img#foto15{
	width: 33.333%;
}

div#gallery img#foto16{
	width: 33.333%;
}

div#gallery img#foto20a{
	width: 33.333%;
}

div#gallery img#foto21a{
	width: 33.333%;
}

div#gallery img#foto22a{
	width: 33.333%;
}

div#gallery img#foto24a{
	width: 50%;
}

div#gallery img#foto25a{
	width: 50%;
}

div#gallery img#foto28a{
	width: 50%;
}

div#gallery img#foto29a{
	width: 50%;
}

div#gallery img#foto32b{
	width: 33.333%;
}

div#gallery img#foto33b{
	width: 33.333%;
}

div#gallery img#foto34b{
	width: 33.333%;
}

div#gallery img#foto36b{
	width: 50%;
}

div#gallery img#foto37b{
	width: 50%;
}


div#gallery div#columna01, div#gallery div#columna02, div#gallery div#columna03{
	float: left;
	background-color: #000;
	margin-bottom: 200px;
	border-top: 8px solid #8cc63e;
	border-bottom: 8px solid #f05a28;
}




div#gallery img:hover{
	opacity: 0.5;
	background-image: url("../img/icon-zoom32.png");
	transition: .4s;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;

}

/*------Estilos OVERLAY CONTENT------*/

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(255,255,255); /* Black fallback color */
    background-color: rgba(255,255,255, 0.85); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* Position the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 50px !important; /* Override the font-size specified earlier (36px) for all navigation links */
    z-index: 2;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .closebtn {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}

/* CONTENIDO del OVERLAY: foto, nombre, descripción y botón; */

.caja-overlay{
	margin: 0 auto;
	width: 80%;
	background: #fff;
	margin-bottom: 120px;
	box-shadow: 5px 5px 15px #888888;
}

.foto-mueble{
	padding-top: 20px;
	margin: 0 auto;
	width: 90%;
}

.info{
	margin: 0 auto;
	width: 90%;
	padding-bottom: 40px;
}

div#nombre{
	width: 25%;
}

div#descripcion{
	width: 55%;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	color: #5f5f5f;
}

div#boton-cotizar{
	width: 15%;
}

div#boton-cotizar:hover{
	opacity: 0.75;
}

div#nombre, div#descripcion, div#boton-cotizar{
	display: inline-block;
	vertical-align: top;
	padding-top: 15px;
}


/*------Estilos de Sobre Nosotros------*/

section#contenedor-sobre-nosotros{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	margin-top: 5.5em;
	color: #7f7f7f;
}

article#texto-sobre-nosotros{
	width: 30%;
	text-align: left;
	font-family: "robotolight";
}

article#texto-sobre-nosotros h2{
	font-family: "robotolight";
	font-size: 2.75em;
	color: #adadad;	
}

article#texto-sobre-nosotros p{
	padding-bottom: 200px;
}

article#video-sobre-nosotros{
	width: 70%;
	text-align: center;
	padding-top: 1em;
}

article#texto-sobre-nosotros, article#video-sobre-nosotros{
	float: left;
	margin: 0;
}

/*------Estilos de Garantía------*/

section#contenedor-garantia{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	margin-top: 2.5em;
	color: #7f7f7f;
}

section#contenedor-garantia2{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: left;
	color: #7f7f7f;
}


article#texto-garantia{
	width: 90%;
	margin: 0 auto;
	padding-top: 2.5em;
	text-align: justify;
	font-family: "robotolight";
}

article#texto-garantia h2{
	font-family: "robotolight";
	font-size: 2.75em;
	color: #adadad;	
}


article#foto-garantia{
	text-align: center;
	padding-top: 1em;
}

article#texto-garantia, article#foto-garantia{
	margin: 0;
}

/*------Estilos de Contáctenos------*/

section#contenedor-contacto{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	margin-top: 5em;
	font-weight: lighter;
	font-family: "robotolight";
}

article#texto-horarios{
	background-color: #8cc63e;
	width: 30%;
	text-align: left;
	color: #fff;
	padding: 2em;
	margin-top: 20px;
}

article#formulario-contacto{
	width: 55%;
	text-align: center;
}

article#mapa{
	width: 100%;
	text-align: center;
	padding-bottom: 10em;
}

article#texto-horarios, article#formulario-contacto, article#mapa{
	float: left;
	margin: 0;
}

/* estilos del contacto */

div#contactanos{
	color: #7f7f7f;
	text-align: left;
}

form {
	font-family: Helvetica, Arial;
	text-align: left;
	width:80%;
	margin:0 auto;
}

label {
	display:block;
	margin-top:20px;
}

input, textarea {
	width:90%;
	height:15px;
	background:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#7f7f7f;
	font-weight: lighter;
}

	input:focus, textarea:focus {
		border:1px solid #7f7f7f;
	}

textarea {
	height:120px;
	font-family: Helvetica, Arial, sans-serif;
	background: #fff;
}

#submit {
	color: #fff;
	background: #8cc63e;
	width: 120px;
	height: 38px;
	text-indent: 8px;
	border: none;
	margin-top: 20px;
	cursor: pointer;
	margin-bottom: 5em;
	padding-left: 0px;
}

	#submit:hover {
		opacity:0.75;
	}

	                         /* estilos mediaquerys */

@media(min-width:1001px){

	}

@media(max-width:1195px){     			/* 1195 -------------------- 1 */
nav#menu a#facebook{
	padding-left: 9em;

}
	}


@media(max-width:1090px){				/* 1090 -------------------- 1 */
nav#menu a#logo{
	padding-right: 0em;
	padding-left: 0em;
}

nav#menu a#facebook{
	padding-left: 0em;
}
nav#menu a#inicio{
	padding-right: 0em;
}
article#texto-sobre-nosotros{
	width: 40%;
	text-align: left;
	font-family: "robotolight";
}

article#video-sobre-nosotros{
	width: 60%;
	text-align: right;
	padding-top: 1em;
}

.caja-overlay{
	width: 90%;
}

.foto-mueble{
	width: 95%;
}

iframe#mapa-insertado{
	width: 700px;
}
	}


@media(max-width:800px){				/* 800 -------------------- 1 */

	header{
		background-color: #fff;
	}

nav#menu{
	font-size: .85em;
}

nav#menu a#facebook{
	padding-left: 36em;
}

article#texto-sobre-nosotros{
	width: 100%;
	text-align: left;
	font-family: "robotolight";
}

article#video-sobre-nosotros{
	width: 100%;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 200px;
}

.overlay-content {
    margin-top: 0px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.caja-overlay{
	margin: 0 auto;
	width: 100%;
	background: #fff;
	margin-bottom: 120px;
	box-shadow: 5px 5px 15px #888888;
}

.foto-mueble{
	padding-top: 20px;
	margin: 0 auto;
	width: 95%;
}

.info{
	width: 95%;
}

div#nombre{
	width: 30%;
}

div#descripcion{
	width: 60%;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	color: #5f5f5f;
}

div#boton-cotizar{
	width: 25%;
	padding-bottom: 40px;
}

iframe#mapa-insertado{
	width: 600px;
}
	}


@media(max-width:700px){				/* 720 -------------------- 1 */

	nav#menu a#logo{
		display: none;
	}

	nav#menu li {
		display: block;
		float: none;
		width: 90%;
		text-align: left;
	}

	nav#menu li a {
		height: 32px;
	}

	nav#menu a {
		text-align: left;
		text-indent: 0px;
		font-size: 1.2em;

	}

	nav#menu {
		border-bottom: 0;
		width: 90%;
		padding-top: 0;
	}

	a#logo-movil{
		width: 40%;
	}

	nav#menu, a#logo-movil{
	display: inline-block;
	vertical-align: bottom;
	padding-top: 10px;
}

	nav#menu ul {
		display: none;
		height: auto;
	}

	nav#menu a#facebook{
	padding-left: 0em;

}

	nav#menu a#pull {
		display: block;
		width: 100%;
		position: relative;
		padding: 10px 0 10px 0;
		font-family: "robotolight";
	}

	nav#menu a#pull:after {
		content: "";
		background: url("../img/nav-icon.png") no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}

	nav#menu li#iconos{
		display: none;
	}

	nav#menu li#iconos-moviles{
		display: block;

	}
															/*----Finaliza Estilos para menu desplegable en movil----*/

nav#menu a#inicio-falso{
	display: block;
	padding-left: 50em;
	padding-right: 0em;
}
nav#menu a#facebook{
	padding-left: 1em;
}
article#texto-horarios{
	background-color: #8cc63e;
	width: 90%;
	text-align: left;
	color: #fff;
	padding: 2em;
	margin-top: 20px;
	margin-bottom: 50px;
}

article#formulario-contacto{
	width: 100%;
	text-align: center;
	padding-bottom: 0em;
}

iframe#mapa-insertado{
	width: 400px;
	padding-bottom: 2em;
}
	}


@media(max-width:500px){                /* 500 -------------------- 1 */


div#gallery div#columna01{
	width: 100%;
	margin-bottom: 0;
}
div#gallery div#columna02{
	margin-top: 1em;
	width: 100%;
	margin-bottom: 0;
}
div#gallery div#columna03{
	display: block;
	width: 100%;
	margin-bottom: 200px;
}

div#nombre{
	width: 80%;
}

div#descripcion{
	width: 90%;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	color: #5f5f5f;
}

div#boton-cotizar{
	width: 50%;
}

article#texto-horarios{
	width: 90%;
}

article#formulario-contacto{
	padding-bottom: 0em;
}

iframe#mapa-insertado{
	width: 300px;
	padding-bottom: 2em;
}
	}