/* Nav
--------------------------------------- */
.topnav {
    background-color: rgba(0, 0, 0, 0.267);
    overflow: hidden;
    position: fixed; 
    width: 100%;
    margin-right: 20px;
    top: 0; 
    z-index: 9;
    backdrop-filter: blur(1.5rem);
  }
.topnav a {
    float: right;
    color: #fff;
    text-align: center;
    padding: 24px 0px;
    text-decoration: none;
    font-size: 17px;
  }
.topnav a:hover {
    color: #fff;
    text-decoration: underline;
  }
.topnav a.active {
    color: white;
    border-color: #fff;
    font-weight: 700;
  }
.topnav .logo {
    float: left;
}
/* Small phones (<399) */
@media (max-width: 399px) {
  .topnav a {
    font-size: 14px;}
  }

/* Body
--------------------------------------- */
  body {
    overflow: overlay;
  }
  main {
    position: absolute;
    top: 50px;
    bottom: 0;
    overflow-y: scroll;
  }

/* Scrollbar
--------------------------------------- */
/* width */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #535353;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Hero
--------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
}
.hero-copy {
  margin-top: 50vh;
  width: 100%;
  position: absolute;
  color: #fff;
  transform: translateY(-50%);
}

.hero-grid {
  display: grid;
  place-items: center;
}

.hero video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
.hero h3 a {
  text-decoration: none;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Sections
--------------------------------------- */
.section {
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  width: 100%;
  height: 32vh;
  text-align: center;
}
.section-copy {
  margin-top: 16vh;
  z-index: 1;
  position: absolute;
  color: #fff;
  transform: translateY(-50%);
}
.section h2 {
  font-size: 4rem;
  margin-bottom: 0rem;
}
.section a:hover {
  color: #fff;
  text-decoration: underline;
}
.section video {
  width: 100%;
  height: 32vh;
  object-fit: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

/* Horizontal Scroll
--------------------------------------- */
div.scroll {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
div.scroll img {
  margin-bottom: 0px;
  height: 600px
}
.caption {
  padding-top: 15px;
  font-size: 1.5rem;
  color: #535353;
  font-weight: 600;
}
.caption a {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Labels
--------------------------------------- */
.label {
    background-color: #b0e7f8;
    color: #455668;
    border-radius: 6px;
    padding: 9px 12px;
    margin-right: 3px;
    margin-bottom: 10px;
}
.label2 {
  background-color: #B0F7B2;
  color: #45694C;
  border-radius: 6px;
  padding: 9px 12px;
  margin-right: 3px;
  margin-bottom: 10px;
}
.label3 {
  background-color: #FFF3D6;
  color: #B84000;
  border-radius: 6px;
  padding: 9px 12px;
  margin-right: 3px;
  margin-bottom: 10px;
}
/* Images
--------------------------------------- */
img {
  border-radius: 10%;
}
.unround {
  border-radius: 0%;
  margin-bottom: 3%;
}
.responsive-iframe {
  width: 300px;
  margin: auto;
  border-style: none;
  height: 700px;
  display: block;
}

img.center {
  display: block;
  margin: 0 auto;
}

/* Hidden
--------------------------------------- */
.hidden {
  display: none;
}

/* Gap
--------------------------------------- */
.gap {
  margin-bottom: 20px;
}

/* Footer
--------------------------------------- */
.footer {
    overflow: hidden;
    width: 100%;
    bottom: 0; 
    z-index: 9;
    padding-top: 76px;
    padding-bottom: 56px;
    background-color: black;
    color: #FFF;
    margin-top: 0%; /* used to be 5% before adding the test */
}
.footer a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
  }
.footer a:hover {
  color: #fff;
  text-decoration: underline;
  font-size: 14px;
}
.footer p {
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 0px;
}

/* Phablets & smaller (<550) */
@media (max-width: 550px) {
  .footer .footsies {
    margin-bottom: 0px;
  }
}

/* Colours
--------------------------------------- */
.blue {
  background-color: #b0e7f8;
  color:#455668;
  width: 100%;
  position: relative;

  padding: 46px 0px;
}
.blue p {
  margin-bottom: 0rem;
}

.blue h2 {
  margin-bottom: 0rem;
}

.tan {
  background-color: #FFF3D6;
  color: #B84000; 
  width: 100%;
  position: relative;

  padding: 46px 0px;
}
.tan p {
  margin-bottom: 0rem;
}

.tan h2 {
  margin-bottom: 0rem;
}

.tan a {
  color: #B84000;
}

.tan a:hover {
  color: #893000;
}

.green {
  background-color: #B0F7B2;
  color: #45694C; 
  width: 100%;
  position: relative;

  padding: 46px 0px;
}
.green p {
  margin-bottom: 0rem;
}
.green h2 {
  margin-bottom: 0rem;
}

/* Mobile vs Desktop
--------------------------------------- */

@media all and (min-width: 400px) {
  .desktop {
  display: block;
  }
  .mobile {
  display: none;
  }
 }
 @media all and (max-width: 399px) {
  .desktop {
  display: none;
  }
  .mobile {
  display: block;
  }
 }