/*=============================================
GLOBAL
=============================================*/

*{
	font-family: 'Open Sans', sans-serif;
}

body {
	padding-top: 0;
	margin-top: 0;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Ubuntu', sans-serif;
}

ul, ol{
	list-style: none;
}

a:visited, a:link, a:focus, a:hover, a:active{
	list-style: none;
	text-decoration: none;
}

.btn-info, .bg-info, .badge-info, .btn-info:hover, .btn-info:focus, .btn-info:active{
	background-color: #47BAC1 !important;
	border-color: #47BAC1 !important;
}

.text-info{
	color: #47BAC1 !important;
}

.btn-primary, .bg-primary, .badge-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active{
	background-color: #2F4F4F !important;
	border-color: #2F4F4F !important;
}

.text-primary{
	color: #2F4F4F !important;
}

.btn-default, .bg-default, .badge-default, .btn-default:hover, .btn-default:focus, .btn-default:active{
	background-color: #FFCC29 !important;
	border-color: #FFCC29 !important;
}

.text-default{
	color: #FFCC29 !important;
}

.btn-danger, .bg-danger, .badge-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active{
	background-color: #FC4850 !important;
	border-color: #FC4850 !important;
}

.text-danger{
	color: #FC4850 !important;
}

.btn-success, .bg-success, .badge-success, .btn-success:hover, .btn-success:focus, .btn-success:active{
	background-color: #47D03E !important;
	border-color: #47D03E !important;
}

.text-success{
	color: #47D03E !important;
}

.btn-dark, .bg-dark, .badge-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:active{
	background-color: #343A40 !important;
	border-color: #343A40 !important;
}

.text-dark{
	color: #343A40 !important;
}

.btn-white, .bg-white, .badge-white, .btn-white:hover, .btn-white:focus, .btn-white:active{
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

.text-white{
	color: #FFFFFF !important;
}

.btn-black, .bg-black, .badge-black, .btn-black:hover, .btn-black:focus, .btn-black:active{
	background-color: #000000 !important;
	border-color: #000000 !important;
}

.text-black{
	color: #000000 !important;
}

.btn-link, .bg-link, .badge-link, .btn-link:hover, .btn-link:focus, .btn-link:active{
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

.text-link{
	color: #FFFFFF !important;
}

.bg-light{
	background-color: #F8F9FA !important;
}

.text-light{
	color: #F8F9FA !important;
}

.bg-dark-subtle{
	background-color: #D3D3D3 !important;
}

.text-dark-subtle{
	color: #D3D3D3 !important;
}

.bg-br-primary{
	background: linear-gradient(to bottom, #47BAC1, #2F4F4F);
}

.bg-br-black{
	background: linear-gradient(to bottom, #000000, #434343);
}

.bg-alpha-dark{
	background: rgba(0,0,0,.5);
}

.bg-alpha-white{
	background: rgba(255,255,255,.5);
}

.bg-alpha-primary{
	background: rgba(47,79,79,.5);
}

.bg-alpha-info{
	background: rgba(71,186,193,.5);
}

.bg-alpha-default{
	background: rgba(255,204,41,.5);
}

.bg-alpha-danger{
	background: rgba(252,72,80,.5);
}

.bg-alpha-success{
	background: rgba(71,208,62,.5);
}

.bg-alpha-dark{
	background: rgba(52,58,64,.5);
}

.bg-alpha-link{
	background: rgba(0,86,179,.5);
}

.shadow{
	box-shadow: 0px 5px 5px rgba(0,0,0,.1) !important;
}

.lead{
	font-size: 16px;
}

/*=============================================
GRID SYSTEM
=============================================*/

.container-fluid{
	position: relative;
	margin: auto;
	width: 100%;
	overflow: hidden;
}

.container{
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1140px;
	overflow: hidden;
}

.grid-container{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

/*=============================================
HEADER
=============================================*/

header{
	position: fixed;
	z-index: 1000;
	top:0;
	left:0;
	width: 100%;
	height: 60px;
	background-color: #222F1E;
}

header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #222F1E;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: 0.3s;
}

header .grid-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 60px;
}

header .grid-item{
	height:10px;
}

header .grid-item img {
	width: 35px;
	height: 40px;
}

header .grid-item:nth-child(1) {
	grid-column: 1 / span 1; /* Logo */
}

header .grid-item:nth-child(2) {
	grid-column: 2 / span 10; /* Menú centrado */
}

header .grid-item:nth-child(3) {
	grid-column: 12 / span 1; /* campana */
}

header .grid-item:nth-child(4) {
	grid-column: 11 / span 1; /* idioma */
}

header .grid-item:nth-child(5) {
	grid-column: 11 / span 1; /* login o user */
}
  
  header .grid-item:nth-child(6) {
	grid-column: 12 / span 1; /* menú móvil */
  }
  

header .bloqueReservas{
	position: relative;
}

header .bloqueReservas .campana-y-reserva{
	cursor: pointer;
}

header .bloqueReservas .formReservas{
	position: absolute;
	width: 300px;
	background-color: rgba(34, 47, 30, 0.5); /* Falta el punto y coma aquí */
	height: auto;
	top:80px;
	right: 0px;
	display: none;
	z-index: 2;
}


header .idiomas ul{
	padding:0;
	margin:0;
	display: flex;
	justify-content: center;
}

header .idiomas ul li{
	margin:0 5px;
}

header .botonMenu{
	cursor: pointer;
}


/* Estilos para el menú integrado en el header */
header .nav.nav-fill {
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

header .nav.nav-fill .nav-item {
    text-align: center;
}

header .nav-fill .nav-link {
    color: white;
    font-weight: 500;
    transition: color 0.3s;
    padding: 0.5rem 1rem;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

header .nav-link{
	color:white;
}

header .nav-link:hover {
    color: #a7a6a6 !important;
}

/*=============================================
MENÚ
=============================================*/

.menu{
	position: fixed;
	z-index: 2;
	width: 100%;
	background: black;
	transition:0.5s;
	top:0;
}

.menu ul li{
	text-align: center;
}

.menu ul li a{
	display: block;
	padding: 20px;
	font-size: 20px;
	font-weight: 100;
}

.menu ul li a:hover{
	background: rgba(243, 25, 25, 0.1);
}

/*=============================================
BANNER
=============================================*/

.banner{
	position: relative;
	overflow: hidden;
	margin-top: 60px; /* Deja espacio para el header que tiene 60px de altura */
	padding-top: 0;
	z-index: 1;
}

.banner .fade-slider{
	position: relative;
	margin: auto;
	width: 100%;
	overflow: hidden;
}

.banner .fade-slider ul{
	padding:0;
	margin:0;
	width: 400%;
	position: relative;
	left:0;
	list-style: none;
}

.banner .fade-slider ul li{
	width: 25%;
	position: relative;
	float: left;
}

.banner .fade-slider ul li img{
	width: 100%;
}

.banner .fade-slider .controller{
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
}

.banner .fade-slider .controller a{
	display: inline-block;
	padding: 10px;
	font-size: 14px;
	color: white;
	cursor: pointer;
}

.banner .fade-slider .controller .indicate-area{
	display: inline-block;
}

.banner .fade-slider .controller .indicate-area a{
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: rgba(255,255,255,.3);
	font-size: 0;
}

.banner .fade-slider .controller .indicate-area a.active{
	background: white;
}

.banner .verMas{
	position: absolute;
	bottom: -120px;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	cursor: pointer;
	z-index: 1;
}

.banner .verMas i{
	position: relative;
	top:15px;
}

/*=============================================
FOOTER
=============================================*/

footer{
	background: black;
	padding: 20px 0;
}

footer .grid-container{
	grid-template-rows: 50px;
}

footer .grid-item{
	height:50px;
}

footer .grid-item:nth-child(1){
	grid-column: 1 / span 4;
}

footer .grid-item:nth-child(2){
	grid-column: 5 / span 4;
}

footer .grid-item:nth-child(3){
	grid-column: 9 / span 4;
}

footer p{
	color:white;
	margin:0;
	padding:0;
}

footer .redes ul li{
	display: inline-block;
	margin:0 5px;
	font-size: 20px;
}

/*=============================================
SCROLL UP
=============================================*/

#scrollUp{
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: url(../img/flecha.jpg);
}

/*=============================================
PRELOAD
=============================================*/

#preload{
	position: fixed;
	z-index: 10;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: white;
}

#porcentajeCarga{
	position: absolute;
	text-align: center;
	width: 100%;
	color: #333;
	top:52%;
	font-size: 20px;
	font-weight: 100;
}

#lineaCarga{
	position: absolute;
	width: 50%;
	height: 2px;
	margin-left: 25%;
	top:50%;
	background: #777;
}

#rellenoCarga{
	position: absolute;
	width: 0%;
	height: 2px;
	top:0;
	background: #333;
}

#estadoCarga{
	position: absolute;
	width: 100%;
	text-align: center;
	top:53%;
	font-size: 14px;
	font-weight: 100;
}

/*=============================================
FORMULARIOS
=============================================*/

body{
	padding-top: 0;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="password"],
.formulario textarea,
.formulario select{
	position: relative;
	width: 100%;
	height: 40px;
	margin-bottom: 20px;
	background: #F5F5F5;
	border-radius: 2px;
	color: #333;
	font-weight: 100;
}

.formulario textarea{
	height: 100px;
}

/*=============================================
TABLET HORIZONTAL (LG revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	header .grid-item:nth-child(1){
		grid-column: 1 / span 4;
	}

	header .grid-item:nth-child(2){
		grid-column: 5 / span 2;
	}

	header .grid-item:nth-child(3){
		grid-column: 7 / span 2;
	}

	header .grid-item:nth-child(4){
		grid-column: 9 / span 1;
	}

	header .grid-item:nth-child(5){
		grid-column: 10 / span 1;
	}

	header .grid-item:nth-child(6){
		grid-column: 11 / span 2;
	}

}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	header .grid-item:nth-child(1){
		grid-column: 1 / span 3;
	}

	header .grid-item:nth-child(2){
		display: none;
	}

	header .grid-item:nth-child(3){
		display: none;
	}

	header .grid-item:nth-child(4){
		display: none;
	}

	header .grid-item:nth-child(5){
		display: none;
	}

	header .grid-item:nth-child(6){
		grid-column: 4 / span 9;
	}

	footer .grid-item:nth-child(1){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(2){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(3){
		grid-column: 1 / span 12;
	}

}

/*=============================================
MÓVIL HORIZONTAL (SM revisamos en 576px)
=============================================*/

@media (max-width:767px) and (min-width:576px){

	header .grid-item:nth-child(1){
		grid-column: 1 / span 3;
	}

	header .grid-item:nth-child(2){
		display: none;
	}

	header .grid-item:nth-child(3){
		display: none;
	}

	header .grid-item:nth-child(4){
		display: none;
	}

	header .grid-item:nth-child(5){
		display: none;
	}

	header .grid-item:nth-child(6){
		grid-column: 4 / span 9;
	}

	footer .grid-item:nth-child(1){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(2){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(3){
		grid-column: 1 / span 12;
	}

}

/*=============================================
MÓVIL VERTICAL (revisamos en 320px)
=============================================*/

@media (max-width:575px){

	header .grid-item:nth-child(1){
		grid-column: 1 / span 3;
	}

	header .grid-item:nth-child(2){
		display: none;
	}

	header .grid-item:nth-child(3){
		display: none;
	}

	header .grid-item:nth-child(4){
		display: none;
	}

	header .grid-item:nth-child(5){
		display: none;
	}

	header .grid-item:nth-child(6){
		grid-column: 4 / span 9;
	}

	footer .grid-item:nth-child(1){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(2){
		grid-column: 1 / span 12;
	}

	footer .grid-item:nth-child(3){
		grid-column: 1 / span 12;
	}

}
