@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

body {background: linear-gradient(rgba(102, 102, 102, 0.4), rgba(102, 102, 102, 0.4)), url("../img/fondo.jpg"); font-family: 'Montserrat', sans-serif; font-weight: 300;}

footer {width: 100%; height: 390px; overflow: hidden; color: #FFF;}


header {width: 100%; height: 166px; overflow: hidden; margin: 0 auto;}

nav {float: right; width:72%; height: auto;}
nav .menu-principal {padding: 0; margin: 0; overflow: hidden; float: right; display: block;}
nav .menu-principal > .li {float: left; list-style: none; position: relative;}
nav .menu-principal > .li > a {padding: 51px 14px 55px; display: block; color: #000; font-size: .85em; text-transform: uppercase; border-width: 5px 0 0 0; border-style: solid;border-color: rgba(255, 255, 255, 0);}
nav .menu-principal > .li:before {content: ""; display: block; height: 30px; width: 1px; float: left; margin: 49px 0 0; background: #B4B4B4;}
nav .menu-principal > .li:first-child:before {width: 0px;}
nav .menu-principal > .li:hover > a {color: #fff; border-color: #D1AC6D; background: #C0942E; text-decoration: none;}
nav .menu-principal > .li:hover > ul{opacity: 1; visibility: visible; margin-top: 0px;}
nav .menu-principal > .li > ul {opacity: 0; visibility: hidden; position: fixed; list-style: none; width: 200px; text-align: left; margin-top: 30px; padding: 0px; z-index: 99;}
nav .menu-principal > .li > ul > li {position: relative;}
nav .menu-principal > .li > ul {color: #FFF;}
nav .menu-principal > .li > ul > li > a {color: #888; background-color: #FFF; font-size: 0.8em; display: block; padding: 10px 10px;text-transform: uppercase;position: relative; border-bottom: 1px solid #DDD; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear; -ms-transition: all 0.2s linear;}
.menu-principal > .li > ul > li:hover  a {color: #FFF; background-color: #D1AC6D;}
nav select {display: none;}

.contenedor {width: 100%; height: auto; overflow: hidden; margin: 0 auto;}
.top {width: 100%; height: 36px; overflow: hidden; background: #851A11; color:#FFF;}
.top p {margin: .5em 0; float: left;}
.top p:last-child {float: right;}
.top p img {width: 19px;}
.top p a{color: #FFF;}
.cabecera {width: 100%; height: 130px; overflow: hidden; background: #F0EFE9}
.logo {float: left; width: 311px; height: 70px;margin: 2.1em 0;}
.logo h1 {color: transparent; background: url(../img/logo-hotel-198.png) no-repeat; background-size: 100%; display: block; width: 311px; height: 70px; margin: 0;}
.logo h1 a {color: transparent;}

.slider {width: 100%; height: auto; overflow: hidden; position: relative; border-bottom: 1px solid #C0942E;}
#carousel-main.carousel {margin: 0 auto !important;}
.carousel-indicators .active {background: #851A11 !important;}
#carousel-main i {margin-top: 3.5em;}

.inicio, .promocion, .cerca {padding: 5em 0;}

/* Habitaciones Inicio */

.foto {width: 100%; height: auto; position: relative; overflow: hidden; cursor: pointer;}
.foto .mask {background-color: #dcbc86;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.foto .mask {position: absolute; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%;}
.foto:hover .mask {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.foto img {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.foto:hover img {-webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.foto img {width: 100%;}
.foto h2 {text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0;}
.foto h2 {border-bottom: 1px solid #E9C78C; background: transparent; margin: 40px 40px 0px 40px;}
.foto h3 {font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center;}
.foto h3 {color: #fff;}

.texto-room {width: 100%; height: 116px; background: #FFF; overflow: hidden; text-align: center;}
.texto-room h3 {font-weight: 400; margin-top: 20px; margin-bottom: 10px;}
.texto-room h3 a {color: #C0942E;}
.linea {width: 155px; height: 4px; margin: 0 auto 10px; background: #851A11; display: block;}
.texto-room p a {color: #333333;}

/* Reservacion inicio */

.reservacion-inicio {width: 100%; height: auto; overflow: hidden;background: #CFCDB9; padding: 4em 0;}
.reservacion-inicio h3 {font-size: 24px; display: inline-block; color: #C0942E; margin-top: 20px; margin-bottom: 10px;}
.reservacion-inicio p {color: #333333;}
.reservacion-inicio button {width: 242px; border: none; height: 62px; background: #C0942E; color: #FFF; margin: 17px 0 0; position: relative; transition: all 0.3s;}
.reservacion-inicio button:hover {background: #FFF; transition: all 0.3s; color: #C0942E; border: 1px solid #C0942E;}
.reservacion-inicio button:before {position: absolute; width: 242px; height: 2px; left: 0px; bottom: 0px; content: ''; background: #C0942E; opacity: 0.3; transition: all 0.3s;}
.reservacion-inicio button:hover:before {height: 62px; transition: all 0.3s;}


/* Carrusel Pie */

#carrusel {float:left; width:100%; overflow:hidden; height:205px; position:relative; margin: 5em auto;}
#carrusel .izquierda_flecha{position:absolute; left:10px; z-index:1; top:50%; margin-top:-9px;}
#carrusel .derecha_flecha{position:absolute; right:10px; z-index:1; top:50%; margin-top:-9px;}
.carrusel {width:4000px;left:0px; position:absolute; z-index:0}
.carrusel > div{float: left; height: auto; margin: 0 15px; width: 360px;}
.carrusel > div img{ width: 100%;}
#content {float:left; width:600px; margin-bottom:40px; margin:0px auto;}

/* Titulo general */

.titulo {width: 100%; height: 167px; background: linear-gradient( rgba(192, 148, 46, 0.7),rgba(192, 148, 46, 0.7)),url(../img/titulos.jpg); background-size: 100% 100%; text-align: center;padding: 3em 0;}
.titulo h1 {color: #FFF; text-transform: uppercase;}
.sub-titulo {width: 100%; text-align: left; border-bottom: 3px solid #851A11; height: auto; overflow: hidden; margin-bottom: 1.5em; }
.sub-titulo h4 {color: #C0942E; font-weight: 300; text-indent: .5em;}

/* Habitaciones */
.habitacion {padding: 5em 0;}
.habitacion .col-md-4 {margin: 1em 0;}

.foto .mask {background-color: #dcbc86;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.foto .mask {position: absolute; overflow: hidden; top: 0; left: 0; height: 100%;}
.foto:hover .mask {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.foto img {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.foto:hover img {-webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}

.detalle-suite {width: 90%; margin: 0 auto;  padding: 2em 0;}
.detalle-suite img {width: 100%; height: auto;}
.list-habitacion {margin: 12px 0;}
.detalle-suite button {width: 152px; border: none; height: 42px; background: #C0942E; color: #FFF; margin: 17px 0 0; position: relative; transition: all 0.3s;}
.detalle-suite button:hover {background: #FFF; transition: all 0.3s; color: #C0942E; border: 1px solid #C0942E;}
.detalle-suite button:before {position: absolute; width: 152px; height: 2px; left: 0px; bottom: 0px; content: ''; background: #C0942E; opacity: 0.3; transition: all 0.3s;}
.detalle-suite button:hover:before {height: 42px; transition: all 0.3s;}

.menu-suite {width: 80%; margin: 0 auto;  padding: 2em 0;}

.menu-habitaciones { padding-left: 0; list-style: none;}
.menu-habitaciones li {margin-bottom: 0; border-bottom: 1px solid #e9e9e9; position: relative; cursor: pointer;}
.menu-habitaciones li a {display: list-item; padding-top: 12px; padding-bottom: 12px; color: #272727; text-decoration: none; text-indent: .5em; z-index: 99;}
.menu-habitaciones li:hover a {transition: all 0.3s; color: #FFF;}
.menu-habitaciones li:before {position: absolute; width: 100%; height: 2px; left: 0px; bottom: 0px; content: ''; background: #C0942E; opacity: 0.3; transition: all 0.3s; z-index: 9;}
.menu-habitaciones li:hover:before {height: 100%; transition: all 0.3s;}

/* Contacto */

.col-xs-12 {background: #CFCDB9;}
.formulario {width: 80%; margin: 0 auto; padding: 2em 0;}
.formulario label {font-weight: 300; color: #333333; font-size: 16px;}
.formulario span {color: #B3B3B3;}
.formulario input {border: 1px solid #666666; border-radius: 0;}
.formulario #datepicker, #datepicker-2 {background: #FFF url(../img/calendario.png) no-repeat 98% 28%; background-size: 6%;}
.formulario select {border: 1px solid #666666; border-radius: 0; appearance: none; -o-appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; background: #FFF url(../img/bajo.png) no-repeat 98% 54%;}
.formulario textarea {border: 1px solid #666666; border-radius: 0;}
.formulario button {width: 100px; border: none; height: 42px; background: #C0942E; color: #FFF; margin: 17px 0 0; position: relative; transition: all 0.3s;}
.formulario button:hover {background: #FFF; transition: all 0.3s; color: #C0942E; border: 1px solid #C0942E;}
.formulario button:before {position: absolute; width: 100px; height: 2px; left: 0px; bottom: 0px; content: ''; background: #C0942E; opacity: 0.3; transition: all 0.3s;}
.formulario button:hover:before {height: 42px; transition: all 0.3s;}

.mapa {width: 80%; margin: 0 auto;  padding: 2em 0;}

/* Galerias */

.galeria {width: 90%; margin: 0 auto; overflow: hidden;}
.galeria .col-md-3 {margin: 1em 0;}
.galeria:last-child {padding: 0 0 2em}
.galeria .sub-titulo:first-child {padding-top: 1em;}
.galeria p {width: 90%; text-align: center; padding: 1em 0; margin: 0 auto;}
.fancybox-title-inside-wrap {font-size: 19px !important;}

/* Promocion */

.promocion .col-md-6 {margin: 1em 0;}
.promocion .col-md-6 img {width: 100%;}
.promocion .col-md-6 .soporte {width: 569px; height: 100%; overflow: hidden; position: relative;}
.promocion .col-md-6 .sobre {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; /*background: rgba(207, 205, 185, 0.6);*/ color: #851A11;}
.promocion .col-md-6 .sobre > span {margin: 1em; display: block; color: #FFF;}
.promocion .col-md-6 .sobre .des-pro { margin: 3.7em auto; width: 100%; height: auto; overflow: hidden; background: rgba(207, 205, 185, 0.8);;}
.promocion .col-md-6 .sobre p, h2, h3 {text-align: center; margin: 0;}
.promocion .col-md-6 .sobre h2, h3 {/*float: left;*/}
.promocion .col-md-6 > span {width: 100px; height: 100px; color: #FFF; background: url(../img/promo.png) no-repeat; position: absolute; top: -24px; right: 0; display:block; z-index: 999;background-size: 97%; padding: 36px 24px; font-size: 20px; transform: rotate(22deg); -moz-transform: rotate(22deg);-webkit-transform: rotate(22deg); -o-transform: rotate(22deg); -ms-transform: rotate(22deg);}
.promocion .col-md-6 .sobre small {position: absolute; bottom: 5%; left: 2%; color: #FFF;} 

/* footer */

footer a {color: #FFF;}
.degradado {width: 100%; height: 150px; overflow: hidden; background: linear-gradient(transparent, #808080);background: -moz-linear-gradient(transparent, #808080);background: -webkit-linear-gradient(transparent, #808080);background: -o-linear-gradient(transparent, #808080);background: -ms-linear-gradient(transparent, #808080);}
.footer {width: 100%; height: 240px;background: #808080; overflow: hidden;}
.footer h3 {border-bottom: #FFF solid 2px; text-align: left;}
.nav {width: 100%; text-align: center; height: auto;}
.nav ul {padding: 0; overflow: hidden; margin: 0;}
.nav ul li {list-style: none; float: left;}
.nav ul li a {color: #fff; padding: 24px 2px; display: block; font-size: 10px;}
.nav ul li:before {content: ""; display: block; height: 23px; width: 1px; float: left; margin: 20px 0 0; background: #FFF;}
.nav ul li:first-child:before {width: 0px;}
.redes {width: 100%; height: auto;}

@media (max-width: 768px) {
	header {height: auto;}
	nav {float: none; width: 100%; height: auto; margin: 2em 0;}
	nav .menu-principal {display: none;}
	nav select {display: block;width: 100%; text-align: center; padding: .5em 0;}
	footer {height: auto;}
	.footer {height: auto;}
	.cabecera {height: auto;}
	.top p:first-child {display: none;}
	.logo {float: none;width: 90%; height: auto; margin: 2.1em auto;}
	.logo h1 {width: 308px; height: 70px;}
	.col-md-4 {padding-bottom: 15px;}
	.titulo {background-size: auto;}
	.promocion .col-md-6 > span {display: none;}
	.promocion .col-md-6 .soporte {width: 95%; margin: 0 auto;}
	.promocion .col-md-6 .sobre > span {display: none;}
	.promocion .col-md-6 .sobre .des-pro {margin: auto;}
	footer .col-md-6 {display: none;}
 }