body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {scroll-behavior: smooth}


body {
  position: relative;
  margin: 0px;
  color: var(--body-font-color);
  background: #000000;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

/* Fixes accessibility focus outline on chrome */
:link:focus, :visited:focus {position: relative; z-index: 100;}


/* ##### UTILITY HELPERS ##### */

.thin {font-weight: 200}
.slim {font-weight: 300}
.normal {font-weight: 400}
.semibold {font-weight: 600}
.bold {font-weight: 700}
.xbold {font-weight: 800}
.left {float: left}
.right {float: right}
.nofloat {float: none}
.center {margin: auto}
.centertxt {text-align: center}
.middle {vertical-align: middle}
.hide {display: none}
.grow:hover {transform: scale(1.1); transition: all .2s ease-in-out;}
.grow2:hover {transform: scale(1.3); transition: all .2s ease-in-out}
.skew {transform: skew(-11deg);}
.blur {  filter: blur(5px); opacity:.5 ;transition: all .2s ease-in-out}
.white {background: white}
.clear {clear: both}
.flexbreak {flex-basis: 100%;  height: 0}
.flexit {display: flex; flex-wrap: wrap}
.shadow {box-shadow: 0px 15px 20px -9px rgba(0, 0, 0, 0.75)}
.boxshade {box-shadow: inset 0px -103px 100px -39px rgba(0, 0, 0, 0.3)}
.nomobile {display: block}
.mobileonly {display: none}
.bred {border: 1px solid red}
.bblue {border: 1px solid blue}
.bgreen {border: 1px solid green}
.byellow {border: 1px solid yellow}
.imgfit {width: 100%; height: auto}
.pointer {cursor:pointer}



.menu-container {
  clear: both;
  width: 100%;
  position: relative;
  z-index: 100;
}

.labelreq{display:none;}


.header {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9000;
  transition: all 0.5s ease;
}

.header li {float: left}
.header .menu-icon {display: none}

.header ul {
  margin: 0;
  padding: 0px 50px 0px 0px;
  list-style: none;
  display: block;
  float: right;
}

.header li a {
  display: block;
  padding: 0px 20px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}


.header li.current a {
  background: white;
  position: relative;
}

.header li.current a:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100%);
  height: calc(100%);
  border-bottom: solid 6px white;
}

.header li a:hover,
.header li.current a:hover,
.header .menu-btn:hover, .menuglow {

  transition: all .5s ease;
  text-shadow:  0 0 10px #ffffff,
                0 0 10px #ffffff,
                0 0 10px #ffffff;
}



.header .menu {
  max-width: 1320px;
  margin: auto;
}


.menu a {  transition: all .5s ease;}

.header .menu-icon {
  cursor: pointer;
  display: none;
  float: left;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: white;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 25px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: white;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {top: 8px;}
.header .menu-icon .navicon:after {top: -8px;}
.header .menu-btn {display: none;}
.header .menu-btn:checked~.menu {max-height: 100vh;}
.header .menu-btn:checked~.menu-icon .navicon {background: transparent;}
.header .menu-btn:checked~.menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked~.menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {top: 0;}


.menu-logo {
 float: left;
 padding: 20px 0px 0px 70px
}


.menu-logo img {width:120px; transition: all 0.5s ease;}


a:link {color: white;}
a:visited {color: white;}
a:hover {color: white; transition: all .2s ease-in-out;}
a:active {color: white;}
a.nounderline:link {text-decoration: none;}
a.nounderline:hover {text-decoration: underline;}



.fix_header {
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: all 0.5s ease;
}

.fix_header img {width: 50px !important;}
.fix_header .menu-logo {padding: 10px 0px 0px 70px}



video {
  width: 100%;
  height: 100vh;
  object-fit:cover;
}



.logo {display: none;position:absolute; top:200px; left: 70px; z-index:1000;}
.logo img {max-width: 120px;}


.footer {

  color:white;
  background-color: black;
  padding:  50px 0px 40px 0px;
  text-align: center;
  font-size: .7em;

}

/* ##################### MOBILE STYLES ##################### */


@media only screen and (max-width: 800px) {

  body {position: relative; overflow-x: hidden;}

  .nomobile {display: none;}
  .mobileonly {display: block;}
  .menu-container {box-shadow: none;  }
  .top-container {padding: 0px;}


  .logo {left: 20px;}
  .menu-logo {float: left; padding: 15px 0px 0px 10px}
  .menu-logo img {width:100px;}


  .fix_header .menu-logo {
      padding: 10px 0px 0px 20px;
  }

  .header ul {
    box-shadow: none;
    min-height: 0px;
    overflow: hidden;
  }


  .header li {float: none !important;}
  .header li a {padding: 0px 0px 0px 22px;}
  .header li:first-child {margin-top: 20px;}
  .header li:last-child {margin-bottom: 100vh;}

  .header li:hover,   .header li:focus,   .header li:active  {background: rgb(255 255 255 / 30%);}


  .header li.current a {border-bottom: 0px; position: relative;}
  .header li.current a:after {display: none;}

  .header .menu {
    clear: both;
    max-height: 0;
    float: none;
    padding-right: 0px;
  }

  .header .menu-icon {
    display: inline-block;
    padding: 25px 20px;
    float: right;
    color: white;
  }


  .footer {padding-bottom:20px}

}