/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Fluid letter spacing - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 10, but if you do -- maybe just use a custom class  :)  */
@media (min-width: 1025px) {
  #banner {
    min-height: 100vh; } }

#banner .line-container {
  position: relative; }
  #banner .line-container .vert-line {
    position: absolute;
    right: 8px;
    width: 5px;
    height: 100%;
    background: transparent linear-gradient(180deg, #a67c3e 0%, #f3e59f 26%, #916028 52%, #efe098 79%, #9e7134 100%) 0% 0% no-repeat padding-box; }
    @media (min-width: 1141px) {
      #banner .line-container .vert-line {
        top: 161px;
        right: 20px; } }

#banner .hero-container {
  padding: 200px 2rem 80px 1rem;
  max-width: 1384px;
  margin: 0 auto;
  color: #eeece2; }
  @media (min-width: 1025px) {
    #banner .hero-container {
      padding: 300px 0 257px 0; } }
  #banner .hero-container h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 1.5rem;
    margin-bottom: 60px; }
    #banner .hero-container h1 span {
      text-transform: uppercase;
      opacity: 0.5;
      line-height: 1;
      padding-bottom: 16px; }
    #banner .hero-container h1::after {
      opacity: 1;
      opacity: 1;
      content: "";
      background: linear-gradient(270deg, #93622a -0.19%, #d5bf76 50.05%, #93622a 100.29%) 0% 0% no-repeat padding-box;
      height: 5px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 14px;
      margin: 0 auto; }
  #banner .hero-container .h5 {
    max-width: 948px; }

#gallery {
  background-color: #f9f9f5;
  padding: 80px 0 80px 0; }
  #gallery .top {
    color: #565f50; }
    #gallery .top h3 {
      margin-bottom: 26px;
      text-transform: uppercase;
      line-height: 1;
      color: #565f50;
      position: relative;
      padding-bottom: 32px; }
      #gallery .top h3::after {
        content: "";
        background: linear-gradient(270deg, #93622a -0.19%, #d5bf76 50.05%, #93622a 100.29%) 0% 0% no-repeat padding-box;
        height: 1px;
        width: 120px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto; }
        @media (min-width: 1025px) {
          #gallery .top h3::after {
            width: 200px; } }
  #gallery .gallery-row .img-col {
    padding-right: 8px !important;
    padding-left: 8px; }
    #gallery .gallery-row .img-col.hide {
      display: none; }
    #gallery .gallery-row .img-col .img-box {
      margin-bottom: 16px;
      display: block;
      height: 400px;
      overflow: hidden;
      position: relative; }
      #gallery .gallery-row .img-col .img-box img,
      #gallery .gallery-row .img-col .img-box picture {
        object-fit: cover;
        object-position: center;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important; }
  #gallery .gallery-row #load-more {
    width: 100%; }
    #gallery .gallery-row #load-more span {
      max-width: 245px;
      margin: 0 auto;
      display: block; }

#message {
  background-color: #565f50;
  padding: 80px 0 80px 0; }
  @media (min-width: 1025px) {
    #message {
      padding: 80px 0 140px 0; } }
  #message .top {
    color: #eeece2; }
    #message .top h3 {
      margin-bottom: 26px;
      text-transform: uppercase;
      line-height: 1;
      color: #eeece2;
      position: relative;
      padding-bottom: 32px; }
      #message .top h3::after {
        content: "";
        background: linear-gradient(270deg, #93622a -0.19%, #d5bf76 50.05%, #93622a 100.29%) 0% 0% no-repeat padding-box;
        height: 1px;
        width: 120px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto; }
        @media (min-width: 1025px) {
          #message .top h3::after {
            width: 200px; } }
  #message .vid-box {
    aspect-ratio: 14 / 7;
    cursor: pointer; }
    #message .vid-box iframe {
      display: block;
      width: 100%;
      height: 100%; }