html {
  font-size: 16px; }

body {
  font-family: 'Roboto', sans-serif;
  color: #333333; }

.section {
  padding: 2rem 0; }

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

a.anchor {
  display: block;
  position: relative;
  top: -78px;
  visibility: hidden; }
  @media (min-width: 768px) {
    a.anchor {
      display: block;
      position: relative;
      top: -100px;
      visibility: hidden; } }

h1 {
  border-left: 5px solid #003333;
  padding-left: 1rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: .08rem;
  margin-bottom: 2rem;
  margin-top: 0rem; }

h2 {
  font-size: 1.5rem;
  font-weight: 400; }

h3 {
  font-size: 1.125rem;
  color: #003333;
  padding: 0 0 1rem 0; }

.lead {
  font-size: 1.25rem;
  font-weight: 700; }

.btn {
  border-radius: 0;
  border: none;
  background-color: #333333;
  color: white;
  font-weight: 500;
  font-size: 1rem;
  padding: .5rem 1rem; }
  .btn:hover {
    background-color: #cccccc; }

header {
  background: linear-gradient(rgba(0, 51, 51, 0.5), rgba(0, 51, 51, 0.5)), url("../images/hero.jpg") no-repeat center center fixed;
  background-size: cover;
  height: calc(100vh); }
  header .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    text-shadow: .5px .5px #000; }
    header .title h1 {
      font-size: 10vh;
      border-left: none;
      line-height: 11vh; }
    header .title p {
      font-size: 3vh;
      max-width: 600px;
      font-weight: 500;
      margin: 0 auto; }

.amenities {
  background-color: #003333;
  color: white; }
  .amenities h1 {
    border-left: 5px solid #cccccc; }
  .amenities p {
    margin-block-end: 4em; }
    @media (min-width: 768px) {
      .amenities p {
        margin-block-end: 2rem; } }
  .amenities .icon-border {
    border-radius: 50%;
    border: 2px solid white;
    background-color: #333333; }
    .amenities .icon-border .image {
      padding: 2rem; }

.leisure {
  background-color: #003333; }
  .leisure h1 {
    color: white;
    border-left: 5px solid #cccccc; }
  .leisure .thumbnail {
    border: none;
    border-radius: 0; }
    .leisure .thumbnail .content {
      padding: 1rem; }
  .leisure .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .leisure .card {
    position: relative;
    background: white;
    width: 100%;
    margin-bottom: 2rem; }
    @media (min-width: 576px) {
      .leisure .card {
        width: 48%; } }
    @media (min-width: 992px) {
      .leisure .card {
        padding: 0;
        width: 23%;
        margin-bottom: 0; } }
  .leisure .btn {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 50%;
    text-align: center;
    margin: 0 25%; }

.top-menu {
  background-color: #003333;
  position: fixed;
  z-index: 5000;
  width: 100%;
  top: 0; }
  .top-menu .navbar-toggle {
    margin-top: 20px;
    border-color: white; }
    .top-menu .navbar-toggle .icon-bar {
      background-color: white; }
  .top-menu .navbar {
    margin: 0; }
  .top-menu ul li a {
    color: white;
    font-size: 1.125rem;
    text-transform: uppercase;
    margin-top: 1rem; }
    .top-menu ul li a:hover {
      color: #cccccc;
      background: transparent; }
  .top-menu .navbar-brand {
    padding: 5px; }
    .top-menu .navbar-brand img {
      width: 80px; }

@media (min-width: 768px) {
  .top-menu {
    height: 100px; }
    .top-menu .navbar {
      border: none;
      margin: 0;
      margin-right: -15px; }
      .top-menu .navbar .navbar-nav li a {
        color: white;
        font-size: 1.125rem;
        text-transform: uppercase;
        margin-top: 25px; }
        .top-menu .navbar .navbar-nav li a:hover {
          color: #cccccc;
          background: transparent; }
        .top-menu .navbar .navbar-nav li a:focus {
          background-color: transparent;
          outline: none; }
    .top-menu .navbar-brand {
      padding: 0;
      margin: 7px 0 0 0; }
      .top-menu .navbar-brand img {
        width: 100px; } }
.tz-gallery .lightbox img {
  width: 100%;
  margin-bottom: 30px;
  transition: 0.2s ease-in-out;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); }

.tz-gallery .lightbox img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); }

.tz-gallery img {
  border-radius: 4px; }

.baguetteBox-button {
  background-color: transparent !important; }

@media (max-width: 768px) {
  body {
    padding: 0; }

  .container.gallery-container {
    border-radius: 0; } }
.contact .container {
  background-image: url("../images/map.png");
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '' !important;
  margin: -2rem auto;
  transform: translateZ(0px); }
.contact .white {
  background-color: white;
  padding: 2rem 1rem 4rem 1rem; }
.contact p {
  font-size: 1.125rem;
  padding: .5rem 0; }
  @media (min-width: 768px) {
    .contact p {
      font-size: 1rem; } }
  @media (min-width: 1200px) {
    .contact p {
      font-size: 1.125rem; } }
  .contact p i {
    padding-right: 1rem; }

.footer {
  background-color: #003333;
  color: white;
  text-align: center; }
  .footer a {
    color: white; }
    .footer a i {
      font-size: 2rem;
      right: 0; }