/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
	font: 14px/26px gr, Helvetica, Helvetica Neue, Arial;
}

.wrapper {
	width: 90%;
	margin: 0 5%;
}

/* ==============
	MOBILE: Menu
   ============== */

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav a {
	display: block;
	margin-bottom: 10px;
	padding: 15px 0;

	text-align: center;
	text-decoration: none;
	font-weight: bold;

	color: white;
	background: #e44d26;
}

nav a:hover,
nav a:visited {
	color: white;
}

nav a:hover {
	text-decoration: underline;
}

/* ==============
	MOBILE: Main
   ============== */

.main {
	padding: 30px 0;
}

.main article h1 {
	font-size: 2em;
}

.main aside {
	color: white;
	padding: 0px 5% 10px;
}

.footer-container footer {
	color: white;
	padding: 20px 0;
}

/* ===============
	ALL: IE Fixes
   =============== */

.ie7 .title {
	padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{}
.menu{position: fixed;top:0;margin:0;padding:0;z-index:100;min-width:160px;width:160px;}
.menu.menuprincipal {left: 0;width: 50%}
.menu.menusecundario{left:50%;}

.menuprincipal .barra{background-color: black;width:200%;}
.menuprincipal .logo{display: inline-block;margin-bottom:5px;background-color: black;min-height:auto;padding:1.5em 2em;box-sizing: border-box;max-width: 50%;width:160px;}
.menuprincipal .hamburguesa{margin-top:2em;margin-left:2em;margin-top: 2em;margin-right: 2em;float: right;display: inline-block;}
.menuprincipal .line{width:30px;height:5px;background-color:white;margin-bottom:5px;}
.menuprincipal .lista{background: rgba(255,255,255,1);padding:1em 0;width: 100%}
.menuprincipal .lista td{vertical-align: middle;min-height:40px;}
.menuprincipal .lista a{text-decoration:none;display:block;line-height:40px;padding-left:1em;padding-right:1em;color:black;text-transform: uppercase;}
.menuprincipal .lista a.active{font-weight: bold;}
.menuprincipal .lista a:hover{background: rgba(0,0,0,.5);color:white;}
.menuprincipal .contrae{margin-top:20px;min-height:30px;display: block;position:absolute;bottom:0;}
.menuprincipal .diagup{width:18px;height:4px;border-radius:100px;background-color:white;transform: rotate(135deg);}
.menuprincipal .diagdown{width:18px;height:4px;border-radius:20px;background-color:white;transform: rotate(45deg);margin-left: 10px;margin-top: -4px;}
.menuprincipal .reserva{background-color:black;margin-top:4px;height:160px;position: relative;width: 100%;min-height: 40px;}
.menuprincipal .reserva a{display:block;line-height:40px;padding-left:1.5em;text-decoration:none;color:white;}
.menuprincipal .reserva a:hover{background: rgba(255,255,255,.5);color:black;}
.menuprincipal .reserva .contrae:hover{background:transparent;}
.menuprincipal .sociales{background:black;margin-top:5px;width: 100%}
.menuprincipal .sociales .icon{display:inline-block;padding:3px;}
.menuprincipal .sociales .icon img{width:30px;}

.reserva .logotrip{padding-right: 1em;padding-bottom:1em;margin-top: -1em;position:absolute;bottom: 0;right:0;}
.menuprincipal .reserva .logotrip:hover{background:transparent;}
.reserva .logotrip img{width:60px;}

.goDown {position:fixed;z-index: 10;bottom:20px;height:60px;padding-top: 2em;cursor:pointer;}
.goDown .diagup{width:25px;height:4px;border-radius:100px;background-color:white;transform: rotate(45deg);}
.goDown .diagdown{width:25px;height:4px;border-radius:20px;background-color:white;transform: rotate(135deg);margin-left: 15px;margin-bottom: -4px;}

.menusecundario{top:100px;max-width:220px;max-width:50%;width:50%;font-family:grk;}
.menusecundario .lista{background: rgba(255,255,255,.8);}
.menusecundario .lista a{box-sizing: border-box;text-decoration:none;display:block;line-height:35px;padding-left:1.5em;padding-right:1.5em;color:black;border-bottom:solid darkgrey 1px;text-transform: uppercase;font-size:.8em;}
.menusecundario .lista a:hover{background: rgba(0,0,0,.5);color:white;}
.menusecundario .lista a:last-child{border-bottom:solid transparent 1px;}
.menusecundario a.active{font-weight: bold;font-family:gr;}

article{padding-top:80px;}
.imgGal{width:100%;overflow: hidden;position: relative;}
.imgGal img{max-height: 100%;min-width:100%;}
.imgGal .slide{display:none;background-size:cover;background-position: center center;background-repeat: no-repeat;}
.imgGal .slide.active{display:block;}
.imgGal .bolitas{color:white;position: absolute;bottom:1em;padding-left: 1em;width: 100%;text-align: center;z-index: 11;}
.imgGal .bolita{cursor:pointer;color:white;width:15px;height:15px;display: inline-block;background-color: rgba(255,255,255,.2);border-radius: 100px;border:0px solid white;margin-right: 1em;}
.imgGal .bolita.active{background-color: rgba(255,255,255,.8);}

.footer-container{background-color: black;}
footer.wrapper{max-width:500px;margin:0 auto;padding:2em 0;width:100%;box-sizing: border-box;}
.tripadvisor{text-align: center;font-size: .9em;}
.logotrip{max-width:70px;}
footer .footMap{}
footer .mapa{padding: 0 1.7em;}
footer .mapa img{max-width:100%;}
footer .documents{clear: both;text-align: center;margin:1.5em 0;}
footer .documents a, .englishversion.hidbig{color:white;text-decoration: none;display:block;font-size:.9em;font-weight:500;text-align: center;}
.copy{text-align: center;}
.copy div{font-size:.8em;line-height: 1.5;}
.copy a{display: inline-block;color:white;text-decoration: none;}
.contacto{padding:0 1.2em;}
.contacto p{font-size:.8em;line-height:1em;margin-top:0;letter-spacing: 1px;}
.contacto a{color:white;text-decoration:none;}
.contacto h4{text-transform: uppercase;margin-bottom:.1em;font-size: 1em;letter-spacing: 3px;}

article header img{width: 100%;}
article section{padding:1.5em;}

.testimonio{margin:.8em 0;}
.testimonio .nombre{font-weight:bold;font-style:italic;}
h4.titulo{margin-bottom:0;margin-top:1em;}
h4.slogan{margin:0;}
h4.frase{margin:0;font-style: italic;}

.etiqueta{font-weight: bold;}

#docloader{position:fixed;top:0;left:0;background-color: white;padding:1em;z-index: 10001;overflow-y: scroll;}
.closeX{font-size:3em;position: fixed;top:.5em;right:.5em;cursor:pointer;}

.menucover{position: fixed;width:100%;height: 100%;background-color: rgba(255,255,255,.6);z-index: 95;}
.gallerycover{position: fixed;width:100%;height: 100%;background-color: rgba(0,0,0,.6);z-index: 95;}

input, button, textarea{border-radius: 10px;border:1px lightblue solid;padding:.5em .5em;}
fieldset{padding:1em;border:1px solid lightgrey;margin-bottom:1em;max-width: 620px;}
label{font-weight: bold;}
.plusbtn{font-size:3em;position: fixed;bottom:5em;box-shadow: 5px 5px 10px -5px;}

section{position:relative;}
.categoria{position:relative;display:none;}
.categoria.active{display:block;}

.entrada{}
.entrada .texto{display: inline-block;width: 80%;}
.entrada .precio{display: inline-block;width: 5em;}

.floater.elmenu .categoria,.floater.desayunos .categoria{margin-bottom:0;font-weight: bold;display: block;margin-top:1em;}
.floater.elmenu h3,.floater.desayunos h3{margin-bottom:-.5em;}
.floater .mini{font-size:.8em;display:none;}
.floater .frasecat{margin-bottom:.5em;font-weight:bold;}
.floater .titulo{font-weight:bold;}
.floater .frasetit{font-weight:bold;margin-bottom:-.8em;}
.floater .texto{margin-top:.8em;}
.floater .slogan{font-weight:bold;margin:.5em 0;font-style: italic;}
.floater .textodesc{display: inline-block;width: 80%;font-style:italic;}
.floater .precio{margin-bottom:.5em;display: inline-block;width: 5em;display:none;}
small.nota{margin-top: 1.5em;display: block;}

.tratamiento{padding: 0 1em;margin: 0 auto;display:none;}
.tratamiento.active{display:block;}
.tratamiento .titulo{font-weight:bold;text-transform:uppercase;}
.tratamiento .descripcion{font-weight:normal;}
.tratamiento .costo{display:none;}

.paquete {display:none;}
.paquete.active{display:block;padding: 0 1em;}
.paquete .titulo{font-weight:bold;text-transform:uppercase;}

.testimonio.movil {display:none;padding: 0 1em;min-height: 120px;}
.testimonio.movil.active{display:block;}
.testimonio.movil .titulo{font-weight:bold;}

.trataNext,.trataLast{width:30px;height:30px;position:absolute;z-index:99;}
.trataNext img,.trataLast img{width:30px;height:30px;}
.trataNext{top:18em;right:.5em;
	-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
}
.trataLast{top:18em;left:.5em;}

span.line {display: inline-block;}
.hidsmall{display: none;}
.hidsmall.important{display: none!important;}

header{position: relative;}
.largeGal{max-height:230px;position:relative;}
.largeGal .slide{min-height:230px;display:inline-block;width:100%;background-size:contain;background-repeat: no-repeat;margin-right: -5px;}
.largeGal .galSlides{overflow-x: scroll;overflow-y: hidden;}
.largeGal .galSlides::-webkit-scrollbar{height:12px;background-color: transparent;}
.largeGal .galSlides::-webkit-scrollbar-track{background-color: transparent;}
.largeGal .galSlides::-webkit-scrollbar-thumb{background-color: transparent;}
.largeGal .galSlides::-webkit-scrollbar-button{background-color: transparent;}
.slideTitle{background-color: black;text-align: center;color:white;}
.scrollBar{background-color: rgba(255,255,255,.5);width:100%;min-height:10px;border-radius: 10px;position: absolute;bottom: 30px;pointer-events:none;}
.scrollBar .scrollButton{background-color: #C6CE23;min-height:10px;border-radius: 10px;pointer-events:none;}

.miraFoto{position: absolute;color: white;top: 195px;left: 1239px;z-index: 999;width:30px;height:30px;cursor:pointer;}
#miraInfo{position: fixed;color: white;top: 200px;left:  240px;z-index: 999;width:20px;height:20px;cursor:pointer;-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);display:none;}

section.floater h2{text-transform:uppercase;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
	INTERMEDIATE: Menu
   ==================== */

	nav a {
		float: left;
		width: 27%;
		margin: 0 1.7%;
		padding: 25px 2%;
		margin-bottom: 0;
	}

	nav li:first-child a {
		margin-left: 0;
	}

	nav li:last-child a {
		margin-right: 0;
	}

/* ========================
	INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li {
		display: inline;
	}

	.oldie nav a {
		margin: 0 0.7%;
	}


	article{padding-top:0;}

	.contacto p{font-size:.8em;line-height:1em;}
	.contacto h4{text-transform: uppercase;margin-bottom:.3em;margin-top: 0;}

	.hidsmall{display: inline-block;}
	.menuprincipal .barra{background-color: black;width:100%;}

	footer .mapa{padding: 0;}
	a.fotos{display: block;box-sizing: border-box;text-align: right;}
	section.tratamientos .tratamiento{margin-bottom:2em;}
	section.tratamientos .tratamiento .titulo{font-weight:bold;}
	section.paquetes .paquete .titulo{font-weight:bold;}

	.tratamiento{height:auto;padding: 0;display:block;position:relative;}
	.paquete{height:auto;padding: 0;display:block;position:relative;}
	#elmenu .categoria{height:auto;padding: 0;display:block;position:relative;}
	.testimonio.movil{height:auto;padding: 0;display:block;position:relative;min-height: auto;}

	.largeGal .slide{background-size:cover;}
	.largeGal .slide {margin-right: 0;}
	.slideTitle{position: fixed;bottom: 30px;width: 100%;font-size: 1.5em;background-color:rgba(0,0,0,.8);padding-bottom: 20px;z-index:10;padding-top: 10px}
}

@media only screen and (min-width: 768px) {

	header.galeria{position: fixed;
	z-index: 100001;
	width: 100%;
	background: black;padding-bottom:150px;top: 0;
	left: 0;}

	.galeria .imgGal{
	width: 70%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	margin-bottom: 150px;}

	.galeria .active{background-size:contain;}

	.galleryExit,.galleryNext,.galleryLast{width:50px;height:50px;position:fixed;z-index:100002;display:none;}
	.galleryExit img,.galleryNext img,.galleryLast img{width:50px;height:50px;}
	.galleryExit{top:2em;left:2em;}
	.galleryNext{top:5em;right:2em;
		-ms-transform: rotate(180deg); /* IE 9 */
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
			transform: rotate(180deg);
	}
	.galleryLast{top:5em;left:2em;}

	.hidbig{display: none;}

	.menu{min-width:230px;width:230px;}
	.menu.menuprincipal {left: 0;width: auto;}
	.menu.menusecundario{left:235px;top:230px;max-width:230px;}

	.short .menu.menuprincipal{top:0px;}

	.menuprincipal .logo{display: inline-block;width:100%;margin-bottom:5px;background-color: black;min-height:225px;padding:6em 2em;box-sizing: border-box;max-width: 100%;}
	.menuprincipal .lista a{line-height:50px;font-size: 1.25em;}
	.menuprincipal .reserva, .menuprincipal .lista, .menuprincipal .sociales{width: 100%}
	.menuprincipal .reserva .logotrip{display:none;}
	.menuprincipal .reserva a{line-height:60px;font-size: 1.5em;}

	.menu.menusecundario .lista{max-width:250px;}
	.menu.menusecundario .lista a{line-height: 50px;font-size:1.2em;}

	article{position:relative;}
	section.floater{font-size: 16px;}
	section.floater{position: absolute;z-index: 10000;top: 230px;left: 470px;background: rgba(255,255,255,.85);max-height:350px;overflow-y: auto;overflow-x:hidden;width: 500px;}

	section.floater::-webkit-scrollbar{width: 12px;background-color: transparent;}
	section.floater::-webkit-scrollbar-track{border-radius: 10px;background-color: #FFF;padding:1em;}
	section.floater::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #C6CE23;}
	section.floater::-webkit-scrollbar-button{height:30px;background-color: transparent;}

	.footMap .mapa{width: 49%;display: inline-block;box-sizing: border-box;}
	.footMap .mapa img{margin-top:0em;vertical-align: bottom;}
	.footMap .contacto{width: 49%;display: inline-block;box-sizing: border-box;vertical-align: top;}
	.tripadvisor{float:right;width:35%;text-align: left;}
	.tripadvisor a.logotrip{display: inline-block;width: 70px;}
	.tripadvisor img.logotrip{margin-top: -32px}
	.triptext{display: inline-block;max-width: 100px;line-height: 1.5;text-align: left;color: white;text-decoration: none;margin-top: 1em;}

	footer .documents {padding-top:.5em;margin-bottom:.5em;}
	footer .documents a {display:inline-block;}

	.bottombar{background-color: black;position: fixed;right:0;bottom:70px;z-index:10;padding:.5em 2em;color:white;}
	.bottombar a{color:white;text-decoration: none;text-transform: uppercase;padding:0 1em;font-size:.8em;letter-spacing: 2px;}
	.hidsmall{display: inline-block;}

/* ====================
	WIDE: CSS3 Effects
   ==================== */

	.header-container,
	.main aside {
		-webkit-box-shadow: 0 5px 10px #aaa;
		   -moz-box-shadow: 0 5px 10px #aaa;
				box-shadow: 0 5px 10px #aaa;
	}

/* ============
	WIDE: Menu
   ============ */

	.title {
		float: left;
	}

	nav {
		float: right;
		width: 38%;
	}

/* ============
	WIDE: Main
   ============ */

	.main article {
		float: left;
		width: 57%;
	}

	.main aside {
		float: right;
		width: 28%;
	}

	#content{max-width:60%;margin:0 auto;}

}

@media only screen and (min-width: 1140px) {

/* ==============
	Local styles
   ============== */

	.menuprincipal{top:70px;}
	.short .menuprincipal{top:0px;}
	.menu.menusecundario{top:300px;}
	.short .menu.menusecundario{top:230px;}
	.menusecundario .lista{min-width:220px;}
	.menusecundario .lista a{min-width:220px;box-sizing: border-box;}
	.footMap{display: inline-block;width:60%;margin-top:-3em;border-right:1px solid white;}
	.footer-container{padding-top:4em;}
	footer hr{display:none;}
	footer.wrapper{max-width:900px;}
	.documents{padding-top:2.5em;padding-bottom:.5em;}
	.documents div{display:inline-block;font-size:1em;}

	article{position:relative;}
	article section{max-width:50%;margin:0 auto;}
	section.floater{position: absolute;z-index: 10000;top: 300px;background: rgba(255,255,255,.85);max-height:400px;overflow-y: auto;overflow-x:hidden;min-width: 750px;}
	.short section.floater{top:230px;max-height:350px;}

	.bottombar{bottom:100px;}
	.short .bottombar{bottom:70px;}
	.hidsmall{display: inline-block;}
	.hidbig{display: none;}

/* ===============
	Maximal Width
   =============== */

	.wrapper {
		width: 1026px; /* 1140px - 10% for margins */
		margin: 0 auto;
	}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	*,
	*:before,
	*:after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}