body {
    font-family: 'Montserrat', sans-serif;
	/*font-family: 'Josefin Sans', sans-serif;*/
}

a,button,input,select {
	outline: none;
}

header {
	position: relative;
	height: 90vh;
}

header nav {
	z-index: 2;
	text-transform: uppercase;
}

header .navbar {

}

header nav .navbar-nav li a {
	font-weight: 600;
	font-size: 0.9rem;
}

header .container-logo {
	position: absolute;
	top: 0;
	left: 0;
	height: 90vh;
	text-align: center;
}

header .container-img {
	position: absolute;
	top: 0;
	height: 90vh;
	background: url(../img/header-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

header .navbar-toggler {
	border-radius: 0;
	font-size: 1rem;
}

@media (min-width: 992px) {
	header .container-logo {
		width: 30%;
	}

	header .container-img {
		left: 30%;
		width: 70%;
	}	
	header .container-img::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 150px;
		left: 0;
		top: 0;
		background: rgb(0,0,0);
		background: -moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	}
	header .navbar-brand {
		display: none;
	}
	header nav {
		margin-right: 2rem;
		z-index: 2;
	}		
	header nav #navbarHeader {
		margin-top: 1.5rem;
	}	
	header nav.bg-white {
		background-color: transparent !important;
	}
	header nav .navbar-nav li a {
		color: white;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	header nav .navbar-nav li a.active,
	header nav .navbar-nav li a:focus,
	header nav .navbar-nav li a:hover {
		color: #bbbbbb !important;
	}
	header nav .navbar-nav li a:focus {
		color: white !important;
	}
	header .nav-social {
		display: none;
	}
	.navFixed .container-fluid {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.header-social {
		position: absolute;
		bottom: 9rem;
		right: 1.5rem;
		text-align: center;
	}
	.container-booking {
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
	}
	.eventos .eventos-info {
		width: 380px;
		margin-left: auto;
		margin-right: 2rem;
	}
	.eventos {
		padding-top: 2rem;
	}
	.contacto-container {
		padding: 5rem 5rem;
	}
	.contacto-iso {
		position: absolute;
		top: 3rem;
		right: 5rem;
	}	
	.habitaciones .habitacion-img {
		height: 350px;
	}			
}

@media (max-width: 991px) {
	header .container-logo {
		display: none;
	}
	header .container-img {
		left: 0;
		width: 100%;
	}
	header .container-fluid {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	header nav #navbarHeader {
		margin-top: 0;
	}
	.container-booking {
		width: 100%;
		margin-left: 0;
	}
	.container-booking .form-inputs{
		padding-left: 3rem;
		padding-right: 3rem;
		padding-bottom: 4rem;
	}
	.eventos {
		padding-top: 30rem;
	}
	.contacto-container {
		padding: 4rem 3rem;
	}
	.contacto-iso {
		display: none;
	}
	.habitaciones .habitacion-img {
		height: 250px;
	}	
	.octopus-row {
		display: inline;
	}	
}

.navFixed {
	margin-top: 0;
	position: fixed;
	width: 100%;
	transform: translateY(-65px);
	background-color: white !important;  
	/*replace this pixel amount with the height of your nav bar*/
}

.navFixed.bg-white {
	background-color: white !important;  
}

.navFixed .navbar-nav li a {
	color: rgba(0, 0, 0, 0.55);
}

.navFixed #navbarHeader {
	margin-top: 0;
}

.navFixed .navbar-brand {
	display: block;
}

.navFixed .navbar-nav li a:hover,
.navFixed .navbar-nav li a.active {
	color: #1d2537 !important;
}

.navTransition, a, button {
	transition: all 0.5s;	
}

.scrollDown {
	transform: translateY(0px);  
}

footer {
	font-family: 'Josefin Sans', sans-serif;	
	background-color: #1d2537;
	padding: 2rem 2rem 3rem;
	position: relative;
}

footer a,
footer a:hover,
footer a:focus {
	text-decoration: none;
	color: white;
}

.footer-decoration, .footer-decoration-2 {
	position: absolute;
	bottom: 0;
}

.footer-decoration {
	left: 0;
}

.footer-decoration-2 {
	right: 0;
	transform: scaleX(-1);
}

.container-booking {
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.octopusWidget {
	padding: 0 !important;
}
.octopusWidget fieldset {
	width: 100%;
}

.form-inputs {
	background-color: #1d2537;
	color: white;
	padding: 2rem;
}

.form-inputs label {
	font-size: 0.8rem;
	font-weight: 600;
}

.octopusWidget select,
.octopusWidget input {
	border-radius: 0 !important;
	border: none;
	background-color: transparent;
}

.octopusWidget input::placeholder{
	color: white;
}

.octopusWidget .form-control,
.octopusWidget .form-control:focus {
	color: white;
	padding: 0;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid white;
	background-color: transparent;
}

.form-btn {
	background: white;
	position: relative;
}

.form-btn .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 0;
}

.form-btn .btn,
.form-btn .btn:focus,
.form-btn .btn:hover {
	color: #1d2537;
	background-color: white;
	border: none;
	font-weight: 600;
	font-size: 1rem;
}

.texture {
	position: absolute;
	width: 100%;
	background: url('../img/texture.svg');
	background-repeat: no-repeat;
	background-size: cover;
}

.espacios {
	background-color: #ffecdd;
	padding-top: 5rem;
	padding-bottom: 10rem;
	position: relative;
}

.espacios .texture {
	bottom: 1rem;
	height: 8rem;
}

.espacios h3,
.servicios h3,
.eventos h3,
.habitaciones h3,
.contacto h3 {
	color: #1d2537;
	font-weight: 600;
	line-height: 1;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 2rem;
}

.espacios h3 span,
.servicios h3 span,
.eventos h3 span,
.habitaciones h3 span {
	color: #a58a6b;
	font-size: 1.25rem;	
}

.espacios p {
	color: #000000;
}

.espacios small {
	font-size: 0.75rem;
	font-weight: 600;
}

.espacios .lead {
	line-height: 1.2;
	font-size: 1.25rem;
}

.espacios p {
	font-size: 0.9rem;
}

.carousel {
	margin-top: -4rem;
	padding-bottom: 2rem;
}

.carousel .owl-nav {
	margin-top: 1rem;
}

.carousel .texture {
	bottom: 1rem;
	height: 8rem;
	opacity: 0.5;
}

.servicios {
	padding-top: 4rem;
	padding-bottom: 3rem;
	position: relative;
}

.servicio {
	display: inline-table;
	padding: 2rem;
}

.servicio p {
	font-weight: 600;
	line-height: 1.1;
	margin-top: 1rem;
}

.eventos {
	background: url('../img/eventos-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.eventos h3 {
	color: white;
}

.eventos p {
	color: white;
	font-size: 0.85rem;
}

.eventos a {
	font-size: 0.75rem;
	color: white;
	text-decoration: none;
}

.eventos .eventos-info {
	background-color: #1d2537;
	padding: 2rem;
}

.habitaciones {
	padding-top: 4rem;
}

.habitaciones p {
	font-size: 0.85rem;
	line-height: 1.1;
	font-weight: 600;
}

.habitaciones small {
	font-size: 0.65rem;
	background-color: #ffecdd;
	width: 100%;
	display: block;
	padding: 0.4rem 0;
}

.habitaciones .habitacion-img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.contacto {
	margin-top: 4rem;
	color: #000000;
}

.contacto-container {
	background-color: #ffecdd;
	position: relative;
}

.contacto a {
	color: #1d2537;
	text-decoration: none;
}

.contacto iframe {
	border-radius: 1rem;
	border: 2px solid white;
}

.contacto .form-control {
	border-radius: 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	color: #000000;
}

.contacto input,
.contacto textarea {
	border: none;
}

.contacto input::placeholder,
.contacto textarea::placeholder {
	color: #000000;
}

.contacto .btn-primary {
	background-color: #1d2537;
	border: none;
	border-radius: 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;	
}

.contacto .btn-primary:hover,
.contacto .btn-primary:focus {
	background-color: #000000 !important;
}

.whatsapp-btn {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 1rem;
  right: 1rem;
  z-index: 20;
}