/*=============================================
GLOBAL
=============================================*/
*{
	font-family: 'Ubuntu', sans-serif;
}

h1, h2, h3, h4, h5, h6, input, textarea, select, button{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
}

ul, ol{
	list-style: none;
}

a:visited, a:link, a:focus, a:hover, a:active{
	list-style: none;
	text-decoration: none;
}

/*=============================================
HEADER
=============================================*/

header{
	position:fixed;
	z-index:2;
}

header .grid-container{
	display:grid;
	grid-template-columns: 2fr 6fr 1fr 1fr 1fr 1fr;
}

header .grid-item{
	background-color: silver;
	border:2px solid white;
	text-align:center;
	height: 70px;
}


/*=============================================
BANNER
=============================================*/

.banner{
	background-color: silver;
	border:2px solid white;
	height:650px;
}

/*=============================================
PLANES
=============================================*/
.planes .grid-container{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.planes .grid-item{
	background-color: silver;
	border:2px solid white;
	text-align:center;
	height: 300px;
}

.planes .grid-item:nth-child(1){
	grid-column: 1 / span 3;
}

.planes .grid-item:nth-child(2){
	grid-column: 4 / span 3;
}

.planes .grid-item:nth-child(3){
	grid-column: 1 / span 2;
}

.planes .grid-item:nth-child(4){
	grid-column: 3 / span 2;
}

.planes .grid-item:nth-child(5){
	grid-column: 5 / span 2;
}

/*=============================================
HABITACIONES
=============================================*/

.habitaciones .row div[class*="col"] main{
	background-color: silver;
	border:2px solid white;
	height:400px;
}

/*=============================================
RECORRIDO PUEBLO
=============================================*/

.recorridoPueblo .grid-container{
	display:grid;
	grid-template-columns: 1fr 2fr;
}

.recorridoPueblo .grid-item{
	background-color: silver;
	border:2px solid white;
	text-align:center;
}


.recorridoPueblo .grid-item:nth-child(1){
	grid-row: 1 / span 1;
	height: 220px;
}

.recorridoPueblo .grid-item:nth-child(2){
	grid-row: 2 / span 1;
	height: 220px;
}

.recorridoPueblo .grid-item:nth-child(3){
	grid-row: 1 / span 2;
	height: 440px;
}

/*=============================================
RESTAURANTE
=============================================*/

.fondoRestaurante{
	position:fixed;
	z-index:-1;
	top:0;
	left:0;
	height:500px;
}

.restaurante .grid-container{
	display:grid;
	grid-template-columns: 2fr 1fr;
}

.restaurante .grid-item{
	background-color: silver;
	border:2px solid white;
	text-align:center;
}

.restaurante .grid-item:nth-child(1){
	height:500px;

}

.restaurante .grid-item:nth-child(2){
	position:relative; 
	z-index:1;
	top:-40px; 
	height:580px;
}

.restaurante .carta div[class*="col"]{
	background-color: silver;
	border:2px solid white;
	text-align:center;
	height:200px;
}

/*=============================================
MAPA
=============================================*/

.mapa{
	position:relative;
}

.mapa .info{
	position:absolute;
	width:400px;
	right:10%; 
	top:10%; 
	background-color: silver;
	height:370px;
}

/*=============================================
FOOTER
=============================================*/

footer .grid-container{
	display:grid;
	grid-template-columns: 2fr 4fr 2fr;
}

footer .grid-item{
	background-color: silver;
	border:2px solid white;
	text-align:center;
	height: 70px;
}



/*=============================================
TABLET VERTICAL (MD revisamos en 768px hacia abajo)
=============================================*/

@media (max-width:768px){

	header .grid-container{
		grid-template-columns:4fr 1fr;
	}

	.banner{
		height:400px;
	}

	.planes .grid-container{	
		grid-template-columns: auto;
	}

	.planesMovil .grid-container{	
		grid-template-columns: auto;
	}

	.planesMovil .grid-item{	
		background-color: silver;
		border:2px solid white;
		text-align:center;
		height: 450px;
	}

	.recorridoPueblo .grid-container{
		grid-template-columns: 1fr;
	}

	.restaurante .grid-container{
		grid-template-columns: 1fr;
	}

	.contactenos input{
		width:100% !important;
		margin:10px 0px !important;
	}

	footer .grid-container{
		grid-template-columns: 1fr;
	}

}