@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Luckiest+Guy&display=swap');

@font-face {
  font-family: 'title';
  src: url('title.otf');
}

body {
  background-color: black;
  min-height: 300vh;
}
.top-bar {
  width: 100%;
  height: 30px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
}
.custom-navbar {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 20;
  background-color: rgba(0,0,0,0.6);
}
.custom-navbar.scrolled {
}
.custom-navbar .logo {
  width: 200px;
  margin-top: 27px;
  margin-left: 35px;
  float: left;
}
.custom-navbar .menu-items {
  float: right;
  margin-right: 15px;
  height: 60px;
  margin-top: 20px;
  width: fit-content;
  min-width: 100px;
}
.custom-navbar .menu-items a.menu-item {
  padding-left: 15px;
  padding-right: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: uppercase;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  font-size: 13px;
  text-decoration: none;
  color: white;
  display: block;
  float: left;
}
.custom-navbar .menu-items a.cta-border {
  width: fit-content;
  padding-left: 20px;
  padding-right: 20px;
  height: 46px;
  text-transform: uppercase;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  text-decoration: none;
  display: block;
  float: left;
  border: 2px solid white;
  margin-top: -2px;
  margin-left: 15px;
  line-height: 42px;
  font-size: 13px;
  color: white;
}
.custom-navbar .menu-items a.cta {
  width: fit-content;
  padding-left: 25px;
  padding-right: 25px;
  height: 45px;
  background-color: #fff600;
  text-transform: uppercase;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  display: block;
  font-size: 20px;
  float: left;
  margin-top: -2px;
  margin-left: 15px;
  line-height: 53px;
  color: black;
}
.firstpage-hero {
  width: 100%;
  aspect-ratio: 1920/1324;
  overflow: hidden;
  margin-top: 30px;
  max-height: 110vh;
  position: relative;
  display: flex;
  align-items: center;
}
.firstpage-hero .partners {
  display: block;
  float: left;
  width: 210px;
  margin-bottom: 10px;
}
.firstpage-hero h1 {
  display: block;
  width: 100%;
  float: left;
  color: white;
  font-family: 'title';
  letter-spacing: 2px;
  font-weight: 300;
  text-shadow: 0px 5px 20px rgba(0,0,0,0.2);
  line-height: 60px;
  font-size: 60px;
  margin-bottom: 20px;
}
.firstpage-hero .cta {
  display: block;
  float: left;
  height: 60px;
  background-color: #fff600;
  width: fit-content;
  text-decoration: none;
  color: black;
  font-size: 30px;
  letter-spacing: 0px;
  font-family: 'Luckiest Guy', cursive;
  padding-left: 40px;
  padding-right: 40px;
  line-height: 71px;
  text-transform: uppercase;
  margin-top: 30px;
}
.firstpage-hero p {
  font-family: 'Barlow', sans-serif;
  color: #c4c4c4;
  font-size: 15px;
  line-height: 36px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 1;
  max-width: 600px;
  text-shadow: 0px 2px 3px rgba(0,0,0,0.4);
  margin-top: 30px;
}
.firstpage-hero .container {
  position: relative;
  margin-top: -140px;
  z-index: 9;
}
.firstpage-hero .divider {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.heroImg {
  width: 100vw;
  left: 0;
  bottom:-1px;
  position: absolute;
}
.banner-section {
  position: relative;
  z-index: 10;
}
.banner {
  width: 100%;
  height: 300px;
  background-color: red;
  box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.3);
  border-radius: 12px;
  margin-top: -160px;
  background-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5)), url('../img/banner1.png');
  background-size: cover;
  background-position: center;
  padding: 30px;
}
.vbuck {
  width: 35px;
  margin-top: -4px;
}
.banner h2 {
  color: white;
  text-align: right;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0px 0px 13px rgba(0,0,0,0.2);
  line-height: 45px;
  font-size: 35px;
  margin-bottom: 20px;
}
.banner .banner-button {
  width: fit-content;
  background-color: white;
  display: block;
  float: right;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  padding-left: 20px;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  color: black;
  font-size: 12px;
  padding-right: 20px;
  margin-top: 80px;
}
.heroImg.base {
  top: -17vh;
}
.layer1 {
  z-index: 1;
}
.layer2 {
  z-index: 2;
}
.layer3 {
  z-index: 3;
}
.heroImg.layer4 {
  z-index: 4;
  top: -17vh;
}
.layer5 {
  z-index: 5;
  margin-top: 1px;
}



.hero-gradient {
    opacity: 0.03;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(229deg, #834541, #ff950c, #ff190c, #ffba0c);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 26s ease infinite;
    -moz-animation: AnimationName 26s ease infinite;
    animation: AnimationName 26s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 40s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 40s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 40s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 40s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 40s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 40s linear infinite;
}
/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }