@import url("font-awesome.min.css");
@import url("//fonts.googleapis.com/css?family=Lato:300,400,900");
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Franklin');

/* Globals
=====================================================================*/
html, body {
  margin:0;
  padding:0;
  height: 100%;
  box-sizing: border-box;
}
body {
  background: #fff;
  color: #857870;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.8em;
  text-transform: none;
  line-height: 1.75em;
  position: relative;
}

/* Utilities
=====================================================================*/
.red {background:red;}
.blue {background:blue;}
.yellow {background:yellow;}
.green {background:green;}
.purple {background:purple;}
.pink {background:pink;}

.alert, .alert-success, .alert-danger {
  color:#fff;
  padding: 2em;
  margin: 0 0 2em 0;
  font-weight: bold;
}
.alert-danger {
  background: #f6242a;
}
.alert-success {
  background: #0d91ca;
}
.alert h3, .alert-success h3 {
  color:#fff;
}

/* Typography
=====================================================================*/

/* HEADLINES */
h1, h2, h3, h4, h5 {
  font-family: itc-fenice, serif;
  font-weight: 400;
  font-style: normal;
  color:#fff;
}
h1 {
  color:#fff;
  font-size: 3em;
  line-height: .75em;
}
h2 {
  color: #61b1bb;
  font-size: 2.5em;
  padding-bottom: .75em;
}
h3 {
  font-style: italic;
  font-size: 2.25em;
}
h4 {
  color: #61b1bb;
  font-size: 2em;
  padding: 1em 0;
}

/* PARAGRAPHS AND LINKS */
p {
  /* padding: 0 0 1.5em 0; */
}
a, a:hover {
  color:#61b1bb;
}

button {
  background: #61b1bb;
  color:#fff;
  font-family: itc-fenice, serif;
  font-size: 1.25em;
  font-weight: bold;
  padding: 1em 2em;
  margin: 1em 0;
  cursor: pointer !important;
}
.menu-button {
  text-align:right;
  margin-top: 20px;
  cursor: pointer !important;
}
.menu-button button {
  font-size: 1.75em;
  margin-top: 20px;
  cursor: pointer !important;
}

/* Navigation
=====================================================================*/
header {
  padding: 3em 0 0 0;
}
.menu {
  font-family: itc-fenice, serif;
  font-weight: 400;
  font-style: normal;
  padding: 2em 0;
}
.menu li a {
  color: #857870;
  padding: 0 1.5em;
  font-size: 15px;
}
.menu li a:hover, .menu li a.active {
  color: #61b1bb;
}

/* Sections
=====================================================================*/
section {
  padding: 3em 0 0 0;
}
.partners{
  padding: 3em 0;
}
footer {
  background-color: #857870;
  padding: 5em 0;
}
.tennis {padding-bottom: 1.5em;}
.massage {padding-bottom: 10em !important;}
.amenities-image {padding-top: 1em;}
/* Video
=====================================================================*/
.homeContainer {
  display: none;
}
#video-container {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top:-100px;
  right:0;
  left:0;
  bottom:0;
  z-index: 9999;
  background: #fff;
}
video {
  border: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-appearance: none
}
/* Banners
=====================================================================*/
.banner {
  width:100%;
  position: relative;
  height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}
.banner-home {
  background: url('/img/banners/home.jpg') center center no-repeat;
  background-size: cover;
}
.banner-amenities {
  background: url('/img/banners/amenities.jpg') left 70% no-repeat;
  background-size: cover;
}
.banner-cooking-services {
  background: url('/img/banners/cooking-services.jpg') left 70% no-repeat;
  background-size: cover;
}
.banner-bedrooms {
  background: url('/img/banners/bedrooms.jpg') center 20% no-repeat;
  background-size: cover;
}
.banner-activites {
  background: url('/img/banners/activities.jpg') center 90% no-repeat;
  background-size: cover;
}
.banner-getting-here {
  background: url('/img/banners/getting-here.jpg') center 20% no-repeat;
  background-size: cover;
}
.banner-gallery {
  background: url('/img/banners/gallery.jpg') center 20% no-repeat;
  background-size: cover;
}
.banner-book-now {
  background: url('/img/banners/book-now.jpg') center 20% no-repeat;
  background-size: cover;
}
.banner-content-home {
  position: absolute;
  left:18%;
  top:20%;
  color: #fff;
}
.banner-content {
  padding:4em 0;
}
/* Orbit Galleries
=====================================================================*/
.main-gallery{
  padding-bottom: 5em;
}
.gallery-slide p {
  padding: 20px 0;
}

.bedroom-gallery-container {
  padding: 0 0 100px 0;
}

/* Mobile - Portrait & Landscape ----------- */
@media only screen and (max-width: 40.063em) {
  #mobile-menu {text-align: center;}
  body ul {text-align: left;}
  .banner { margin-top:100px; height:40vh;}
  .banner-home  {height:60vh;}
  .banner-content-home {
    left: 0;
    right: 0
    top:40%;
    color: #fff;
  }
  .menu-button {
    text-align:center !important;
    margin-top: 0px;
    cursor: pointer !important;
  }
  h1, h2, h3, h4, h5 {
  }
  h1 {
    font-size: 3.25em;
    line-height: 1em;
  }
  h2 {
    font-size: 2.5em;
    line-height: 1em;
  }
  h3 {
    font-size: 1.5em;
    line-height: .75em;
    padding-top: 10px;
  }
  h4 {
    font-size: 2em;
    line-height: 1em;
    padding: 1em 0;
  }
  .bedroom-gallery-container {
    padding: 0 20px 100px 20px;
  }
  .banner-content {
    padding:2.5em 0 4em 0;
  }
  .banner-content h1 {
    font-size: 2em;
  }
  /* Arrows */
  .slick-prev,
  .slick-next {
    display: none !important;
  }
  .slick-dots li, .slick-dots li button {
    width: 20px;
    height: 20px;
  }
  .slick-dots li button:before {
    font-size: 10px;
  }
  .banner-content-home {
    left:2%;
    text-align: left;
  }
  .banner-amenities {
    background: url('/img/banners/amenities.jpg') left bottom no-repeat;
    background-size: cover;
  }
  .banner-cooking-services {
    background: url('/img/banners/cooking-services.jpg') left bottom no-repeat;
    background-size: cover;
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .menu-button {
    text-align:center !important;
    cursor: pointer !important;
  }
  .banner-amenities {
    background: url('/img/banners/amenities.jpg') left 70% no-repeat;
    background-size: cover;
  }
  .banner-cooking-services {
    background: url('/img/banners/cooking-services.jpg') left 70% no-repeat;
    background-size: cover;
  }

}

@media screen and (orientation:landscape) {}
  video {
    margin-top: -60px;
  }
}