/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,400i,700,700i,900');

/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  --primary-bg-color: #0A1014;
  --primary-color: #0A1014;
  --secondary-bg-color: #64C2E3;
  --secondary-color: #64C2E3;
  --accent-color: #64C2E3;
  --accent-dark: #4196B0;
  --accent-light: #64C2E3;
  --pale-bg-color: #F5F5F5;
  --dark-bg-color: #323E48;
  --light-text: #FFFFFF;
  --silver-bg-color: #C3C7C9;
}

/* ============================================================
   Base
   ============================================================ */

body {
  font-family: 'Lato', sans-serif;
  color: #151515;
  padding-bottom: 0;
  background-color: #E5E5E5;
  padding-top: 160px;
}

h1 {font-size: clamp(1.5rem, 4vw, 2.0rem);}

.headerBlack { padding: 25px; background: var(--primary-bg-color);  border-radius: 20px;  border: 2px solid var(--secondary-color); font-weight: bold; color: #fff; margin-top:15px !important;  margin-right:0 !important;  margin-bottom:30px !important; margin-left:0 !important; }
.headerBlack span { color:var(--secondary-color) !important; }

h2 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 34px; color: #010000; }
h3, .h3 { font-family: 'Lato', sans-serif; font-weight: 500; font-size: clamp(0.96rem, 1.4423vw + 0.622rem, 1.92rem); color: #151515; }
h4 { font-family: 'Lato', sans-serif; font-weight: 700 !important; font-size: 15px; line-height: 100%; }
h5 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; }
p  { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1rem; color: #151515; line-height: 200%; }
a  { color: #0D1D48; }
a:hover { color: var(--accent-color); text-decoration: none; }

article { display: block; }

.small, small { font-size: 80%; }
.smallcopy { font-size: 60%; }
.strapline h1, .strapline h3 { display: inline-block; }
.strapline {margin: 1rem 0 0.6rem;}
.txt-reg  { font-weight: 300; }
.txt-semi { font-weight: 500; }
.txt-bold { font-weight: 700; }

/* ============================================================
   Colour Utilities
   ============================================================ */

.white      { color: #FFFFFF; }
.grey       { color: #B8BAB8; }
.accent     { color: var(--accent-color) }
.accent-light     { color: var(--accent-light) }

.bg-gold    { background-color: var(--accent-color); }
.bg-black    { background-color: #000; color:#fff; }
.bg-accent-dark { background-color: var(--accent-dark); color:#fff; }
.bg-accent { background-color: var(--accent-light); color: #fff; }

.bg-Green { background-color: #50C048; } 
.bg-Orange { background-color: #E6942B; } 

.table-col {background-color:var(--dark-bg-color) }
.table-col-alt { background-color: var(--primary-color) }


/* ============================================================
   Layout
   ============================================================ */

#mainContainer .container {
  width: 100%;
  max-width: 1280px;
}

.col-xxl { max-width: 1920px; background: #ffffff; }

.features { background-color: #F1F1F1; }

.contacts p { line-height: 140%; }

.logo-hero { margin-top: 45px !important; }

/* ============================================================
   Fixed Two-Row Header
   ============================================================ */

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Top bar */
.header-topbar {
  background-color: #0D1114;
  padding: 10px 20px;
  min-height: 100px;
}

.header-topbar .contact-info a {
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}
.header-topbar .contact-info a:hover { color: var(--accent-color); }
.header-topbar .contact-info i { color: #fff; margin-right: 5px; }

.header-topbar .contact-info a .fa-circle:before {
  border-radius: 50%;
  background-color: var(--accent-color);
  color: transparent;
}
.header-topbar .contact-info a:hover .fa-circle:before { background-color: #fff; }

.header-topbar .navbar-brand img {
  margin-top: 5px;
  max-height: 56px;
}

/* Social icons */
.social-icons { margin-bottom: 1rem !important; }
.social-icons a { color: #fff; font-size: 1rem; }
.social-icons a:hover { opacity: 1; color: var(--accent-color); text-decoration: none; }
.social-icons a .fa-circle:before { border-radius: 50%; background-color: #323E47; color: transparent; }
.social-icons a:hover .fa-circle:before { background-color: var(--accent-color); }
.social-icons span { line-height: 30px; }
.social-icons .small { margin-left: 8px; }

/* Nav bar */
.header-navbar {
  background-color: #fff;
  padding: 0;
  min-height: 57px;
  border-bottom: 1px solid #DADBDC;
}
.header-navbar .navbar-nav .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #000;
  padding: 18px 14px;
}
.header-navbar .navbar-nav .nav-item.active .nav-link,
.header-navbar .navbar-nav .nav-link:hover { color: var(--accent-color); }

.header-navbar .btn-contact {
  background-color: var(--accent-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0;
  padding: 20px 20px;
  margin-left: 10px;
  height: 59px;
}
.header-navbar .btn-contact:hover { background-color: #d4a000; color: #0D1114; }

.header-navbar .container-fluid { padding: 0; }

.navbar-light .navbar-toggler { color: #fff; border-color: #fff; }

/* ============================================================
   Video Hero / Background
   ============================================================ */

.video-hero {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
}

.video-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.video-hero__video.is-visible { opacity: 1; }

.video-background-container {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  min-width: 100vw;
  height: 640px;
  overflow: hidden;
  background: url('/images/video-bg.webp') center center / cover no-repeat;
  z-index: 0;
}

/* ============================================================
   Flex Pod Grid (homepage icons)
   ============================================================ */

.flex-container {
  display: grid;
  gap: 3% 1.5%;
  grid-template-columns: repeat(6, 1fr);
  padding-bottom: 40px;
}

/* 3 across */
@media (max-width: 900px) {
  .flex-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 across */
@media (max-width: 560px) {
  .flex-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.flex-item {
  box-sizing: border-box;
  padding: 16px;
  background: black;
  border-radius: 25px;
  border: 4px solid var(--secondary-bg-color);
  text-align: center;
}

.headerCopy { color: white; font-size: 12.5px; }
.headerIcon { width: 70px; }

/* ============================================================
  Address Styles
============================================================ */

  .address { background-color: var(--accent-color); }
  .address h2 { color: #fff; font-size: 24px; font-weight: bold; margin: 0;}

/* ============================================================
   Background Images
   ============================================================ */

.bgimage {
  width: 100%;
  min-height: 500px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.bgimage h5 { color: white; text-shadow: 2px 2px #333; }

.bgimage-accom {
  width: 100%;
  height: 500px;
  background: url('../images/bg-accom.jpg') center / cover no-repeat fixed;
}

/* ============================================================
   Spec / Download Pods
   ============================================================ */

.spec-pod { text-align: center; margin-top: 30px; }
.spec-pod h4 { font-family: 'Lato', sans-serif; font-weight: 700 !important; font-size: 13px; color: #FFF; line-height: 100%; }

.download-pod { text-align: center; background-color: #696D6F; padding-bottom: 2px; color: #FFF; margin: 10px 30px 20px; float: left; }
.download-pod h4 { padding: 10px; font-size: 14px; }

span.pods h4 {font-size:13px !important; text-transform: uppercase; line-height:16px}

/* ============================================================
   Gallery
   ============================================================ */

.gal, .gal2, .gal3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.gal img, .gal2 img, .gal3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

#gallery .row:nth-child(odd)  { background-color: #F1F1F1; }
#gallery .row:nth-child(even) { background-color: #ffffff; }

/* ============================================================
   News
   ============================================================ */

.news-section .articleItem:nth-child(odd),
.news-section .articleItem:nth-child(even) { background-color: #F1F1F1; }

.news-column { margin: 0 0 30px; }
.news-column h4 { color: #0D1D48; }
.news-column a h5 { color: #333; }
.news-column h4:after { content: ''; display: block; width: 60px; height: 1px; background: #151515; margin-top: 8px; }
.news-column small:after { content: ''; display: block; width: 40px; height: 1px; background: #FFFFFF; margin: 8px 0 12px; }

.articleItem { margin: 5px 0 5px; }
.articleItem h3 { margin-top: 0; font-size: 18px; font-weight:600 }
.articleItem h3 a { color: var(--primary-color); font-size: 18px; line-height: 18px !important; }
.articleDate .newsMonth { font-size: 1.4em; text-transform: uppercase; }
.articleDate .newsDay { font-size: 2em; display: block}
.articleDate .newsYear { font-size: 1.2em; display: block; color:#999;}
.articleCopy { border-left: 2px solid #fff; }
.btn-news { text-transform: uppercase; background-color: var(--secondary-bg-color); border-radius: 10px !important; font-weight: 700; color: #fff !important; line-height: 1; font-size: 0.8rem; }

/* ============================================================
   Carousel / Slider
   ============================================================ */

#fixed_1 .slider-size, #fixed_2 .slider-size { height: 500px; width: 100%; }
.carousel { margin-bottom: 0; }

/* ============================================================
   Buttons
   ============================================================ */

.btn { padding: 14px 24px; border: 0 none; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; }
.btn.sharp { border-radius: 0; }

.btn-accom { background: #760805; color: #ffffff; font-weight: 500; }
.btn-accom:hover, .btn-accom:focus, .btn-accom:active, .btn-accom.active { background: #4B0606; color: #ffffff; }

.btn-location { background: #E7472C; color: #ffffff; font-weight: 500; }
.btn-location:hover, .btn-location:focus, .btn-location:active, .btn-location.active { background: #4B0606; color: #ffffff; }

.button-wrapper { height: 44px; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; margin: 0 auto; font-size: 12px; }

.button:hover { cursor: pointer; }
.button {
  flex: 1 1 auto; margin: 0 10px; padding: 10px;
  border: 2px solid #F5B900; text-align: center; text-transform: uppercase;
  position: relative; overflow: hidden; transition: .3s; z-index: 2;
  border-radius: 30px; color: #F5B900; background: #010000;
}
.button:after { position: absolute; transition: .3s; content: ''; width: 0; bottom: 0; background: #F5B900; height: 120%; left: -10%; transform: skewX(15deg); z-index: -1; }
.button:hover { color: #0A1738; z-index: 0; }
.button:hover:after { left: -10%; width: 120%; }

/*
.button_zone {
  flex: 1 1 auto; margin: 0 10px; padding: 10px;
  border: 2px solid #000; text-align: center; text-transform: uppercase;
  position: relative; overflow: hidden; transition: .3s; z-index: 2;
  border-radius: 30px; color: #0D1D48; font-weight: bold;
}*/

.button_zone {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 10px;
  padding: 10px;
  border: 2px solid #4196B0;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  z-index: 2;
  border-radius: 30px;
  color: #CFE6DE;
  font-weight: bold; }


#submitIt.button5:hover { color: #FFF !important; z-index: 0; }

.form-button {
  color: #0A1738; background: #0D1D48; flex: 1 1 auto; margin: 10px; padding: 10px;
  border: 1px solid #F5B900; text-align: center; text-transform: uppercase;
  position: relative; overflow: hidden; transition: .3s; z-index: 2; border-radius: 30px;
}

/* ============================================================
   Tables
   ============================================================ */

table { background: none; color: #0D1D48; }
table td.glyph { padding: 2px 0 0 !important; }
table .glyphicons { font-size: 18px; }
.table > tbody > tr > td { border: 1px solid #fff !important; }

/* ============================================================
   Forms
   ============================================================ */

#contact-form { margin-top: 50px; }

#feedbackForm {
  display: hidden; width: 640px; position: fixed; top: 80px !important; right: -640px;
  border-right: 1px solid gold; padding: 30px; background-color: #DDD;
  height: 100%; z-index: 101; overflow-y: scroll; border-left: 3px solid #0D1D48;
}

.x { display: block; position: relative; right: 0; top: 0; width: 32px; height: 32px; transition: transform .25s ease-in-out; float: right; }
.x:hover { transform: rotate(180deg); }
.x:before, .x:after { content: ""; position: absolute; display: block; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 32px; height: 0; border-top: 1px solid rgba(0,0,0,0.5); transform-origin: center; }
.x:before { transform: rotate(45deg); }
.x:after  { transform: rotate(-45deg); }

.form-group input    { font-family: 'Lato', sans-serif; outline: 0; background: #f2f2f2; border: 0; margin: 0 0 20px; padding: 15px; box-sizing: border-box; font-size: 14px; box-shadow: inset 0 0 0 rgba(0,0,0,.0); }
.form-group textarea { font-family: 'Lato', sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 20px; padding: 15px; box-sizing: border-box; font-size: 14px; box-shadow: inset 0 0 0 rgba(0,0,0,.0); }
.form-group small { text-align: right; display: block; color: #ff3300; }

/* ============================================================
   Footer
   ============================================================ */

footer { background-color: #242424; }
footer p { color: #fff; }
footer h4 { text-align: left; }
footer a, footer a:visited { color: #F5B900; }
footer a:hover { color: var(--accent-color) !important; text-decoration: none !important; }
footer a.social-icon { color: #151515 !important; text-decoration: none !important; }
footer a.social-icon:hover { color: #fff !important; text-decoration: none !important; }

.footerlower { background-color: #010000; }
.footerlower p, .footerlower a, .footerlower a:visited { color: white; }

.seven-cols p { font-size: 12px; }

/* ============================================================
   Custom Spacing Scale (overrides Bootstrap 4 defaults)
   ============================================================ */

.m-1  { margin: 1rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mr-1 { margin-right: 1rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.ml-1 { margin-left: 1rem !important; }
.mx-1 { margin-right: 1rem !important; margin-left: 1rem !important; }
.my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.m-2  { margin: 1.5rem !important; }
.mt-2 { margin-top: 1.5rem !important; }
.mr-2 { margin-right: 1.5rem !important; }
.mb-2 { margin-bottom: 1.5rem !important; }
.ml-2 { margin-left: 1.5rem !important; }
.mx-2 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.my-2 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.m-3  { margin: 3rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mr-3 { margin-right: 3rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.ml-3 { margin-left: 3rem !important; }
.mx-3 { margin-right: 3rem !important; margin-left: 3rem !important; }
.my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.p-1  { padding: 1rem !important; }
.pt-1 { padding-top: 1rem !important; }
.pr-1 { padding-right: 1rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pl-1 { padding-left: 1rem !important; }
.px-1 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.p-2  { padding: 1.5rem !important; }
.pt-2 { padding-top: 1.5rem !important; }
.pr-2 { padding-right: 1.5rem !important; }
.pb-2 { padding-bottom: 1.5rem !important; }
.pl-2 { padding-left: 1.5rem !important; }
.px-2 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-2 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-3  { padding: 3rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pr-3 { padding-right: 3rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pl-3 { padding-left: 3rem !important; }
.px-3 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.p-4  { padding: 6rem !important; }
.pt-4 { padding-top: 6rem !important; }
.pr-4 { padding-right: 6rem !important; }
.pb-4 { padding-bottom: 6rem !important; }
.pl-4 { padding-left: 6rem !important; }
.px-4 { padding-right: 6rem !important; padding-left: 6rem !important; }
.py-4 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

/* Content padding helper */
.content-px-3 p   { padding-right: 3rem !important; padding-left: 3rem !important; }
.content-px-3 div { padding-right: 3rem !important; padding-left: 3rem !important; }
.content-px-3 ul  { margin-left: 30px; }

.container ul li { margin-bottom: 0.6rem; }

.carousel-control-prev .fas,
.carousel-control-next .fas {
    font-size: 2rem;
    opacity: 0.5;
}
.carousel-control-prev:hover .fas,
.carousel-control-next:hover .fas {
    opacity: 0.9;
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    background: none;
}

/* ============================================================
   Responsive — Large (>=1200px)
   ============================================================ */

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.2857%;
    *width: 14.2857%;
  }
  footer h4 { text-align: right; }
}

/* ============================================================
   Responsive — Tablet/Mobile collapse (<=991px)
   ============================================================ */

@media (max-width: 991px) {
  body { padding-top: 80px; }

  .header-navbar {
    background-color: #000;
    padding: 5px 15px;
  }
  .header-navbar .btn-contact { margin: 10px 0; }
  .header-navbar .navbar-nav .nav-link { color: #fff; }

  .navbar-brand img { max-height: 66px; padding: 10px 10px 0; }

  .navbar-nav {
    background-color: #050C1C;
    width: 100%;
    padding: 20px;
  }
  .navbar-nav > li > a,
  .navbar-nav .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
  .navbar .px-4 { padding-right: 0 !important; padding-left: 0 !important; }

  .social-icons { margin-top: 2rem !important; }

  .articleCopy { border-left: none; }

  .px-3, .px-4 { padding-right: 1rem !important; padding-left: 1rem !important; }

  .content-px-3 div { padding: 0; }

  .gal, .gal2, .gal3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}
.title-carousel { font-size: 1em !important; }
}

/* ============================================================
   Responsive — Mobile (<=766px)
   ============================================================ */

@media (max-width: 766px) {
  .follow-scroll { top: 0 !important; }
  #feedbackForm { width: 100% !important; padding: 8px 15px !important; }
  .gal, .gal2, .gal3 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

/* ============================================================
   Responsive — Small mobile flex grid (<=600px)
   ============================================================ */

@media (max-width: 600px) {
  .address span {display:none;}
}