*{margin: 0;padding: 0;box-sizing: border-box;}
html,
body{height: 100vh;font-family: 'Hepta Slab', serif;overflow: hidden;}
body{background:#fff}

.background{opacity:0;width:100%;height: 100vh;transition:opacity 3s ease-in-out;position: absolute;top:0;left:0;display: block;z-index: 777;  background-blend-mode: multiply;
}
.background.active{opacity:1}
#body-color-0{background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(227,202,171,1) 10%, rgba(130,54,31,1) 80%);} /*teriaky*/
#body-color-1{background: radial-gradient(circle,rgba(255,255,255,1) 0%,  rgba(227,202,171,1) 10%, rgba(75,48,143,1) 80%);} /*bacon*/
#body-color-2{background: radial-gradient(circle,rgba(255,255,255,1) 0%,  rgba(227,202,171,1) 10%, rgba(192,37,139,1) 80%);} /*taco*/
#body-color-3{background: radial-gradient(circle,rgba(255,255,255,1) 0%,  rgba(255,255,255,1) 10%,rgba(96,16,51,1) 80%);} /*BBQ*/
#body-color-4{background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(227,202,171,1) 10%, rgba(233,72,30,1) 80%);} /*buffalo*/
#body-color-5{background: radial-gradient(circle,rgba(255,255,255,1) 0%,  rgba(227,202,171,1) 10%, rgba(27,159,208,1) 80%);} /*ranch*/


.webgl{position: fixed;z-index: 888;top: 0;left: 0;outline: none;}
nav{width:100%;position: absolute;left:0;top:0;z-index: 999;background-color:rgba(0,0,0,.7);}
nav ul{float: left;width:100%;display: flex;margin-top:20px;align-items: center;justify-content: center;}
nav ul li{list-style: none;display: block;height:60px;width:auto;margin:0 16px}
nav ul li a{flex-direction:column-reverse;display: flex;align-items:center;align-content: flex-start;background-color:rgba(0,0,0,.01); color:#eee;text-decoration: none;font-size:30px;transition: all .25s ease-in-out;transform: translate3d(0,0,0);}
nav ul li a span{opacity:.5;transition: all .1s ease-in-out;pointer-events: none;} /* prenvent child of button from being clicked so that href attribute is avaolable on click else error*/
nav ul li a.current span,
nav ul li a:hover span{opacity:1}

#descriptions .description{width:600px;position: absolute;left:50px;top:calc(100vh - 50% - 80px);z-index: 999;background:rgba(0,0,0,.8);padding:30px;transition:all 1s ease-in-out;transition-delay: 2s;transform: translate3d(-150%,0,0);opacity:0}
#descriptions .description h2{font-size: 50px;line-height:54px;color:#fff;letter-spacing: .07em;}
#descriptions .description p {font-size: 24px;line-height:28px;color:#ddd;padding-left: 2em;margin-top: 20px;font-family: 'Baloo Tammudu 2', cursive;}
#descriptions .description.active{transform: translate3d(0,0,0);opacity: 1;}

#loader{background:#000;width:100%;height: 100vh;position: fixed;top:0;left: 0;display: flex;align-content: center;align-items: center;z-index: 9991;flex-direction: column;position: relative ;}  
#loader.hide{animation: loader-hide 3s ease-out forwards;} 
#loader span{display: block;margin:auto}
#loader svg{width:100%;margin-top:25%}
#loader .bar-wrap{width:50%;display: block;height: 100%;}
#loader .bar{width:100%;display: block;animation:bar 2s ease-in-out infinite;position: absolute;top:50%;right:0;color:#e9481e;font-size: 18px;font-family: 'Hepta Slab', serif;text-align: center;}
#loader.hide .bar{display: none;}
#loader .bar span{display: inline-block;}


@keyframes loader-hide  
    {    
    0%      {display: block;transform: translate3d(0,0,0);}
    99%    {display: block;transform: translate3d(-120%,0,0);}
    100%    {display: none;transform: translate3d(-120%,0,0);}
    }
@keyframes bar 
    {
    0%      {opacity:0}
    50%     {opacity:1}
    100%    {opacity:0}
    }







  @media only screen and (max-width: 1024px) 
  {
    #descriptions .description{width:calc(100% - 20px);left: 10px;bottom: 10px;height: auto;top: auto;padding:10px}
    #descriptions .description h2{font-size: 25px;line-height:30px}
    #descriptions .description p {font-size: 16px;line-height:18px;padding:16px 0 0 0;margin: 0;}


    nav{width:auto;position: absolute;left:0;top:0;padding:10px;transition:all .5s ease-in-out;}
    nav ul{display: block;float: left;padding:0;margin:0}
    nav ul li{margin:16px;height: auto;}
    nav ul li a{display: block;font-size: 18px;}
    nav ul li a.current{color:#fff}
    nav ul li a:before {display: block;width: 0px;height: 0px;content: "";position: absolute;left: 13px;border-radius: 100%;top: 7px;transition: all .5s ease-in-out;}
    nav ul li a.current:before {width: 10px;height: 10px;left: -16px;}
    nav ul li a span{opacity:1;} /* prenvent child of button from being clicked so that href attribute is avaolable on click else error*/
    
    nav li:nth-child(1) a {color: #bd401b;} /*teriaky*/
    nav li:nth-child(2) a {color: #692dff;} /*bacon*/
    nav li:nth-child(3) a {color: #c0258b;} /*taco*/
    nav li:nth-child(4) a {color: #c13f77;} /*BBQ*/
    nav li:nth-child(5) a {color: #e9481e;} /*buffalo*/
    nav li:nth-child(6) a {color: #14afe7;} /*ranch*/
    
    nav li:nth-child(1) a:before  {background: #bd401b;} /*teriaky*/
    nav li:nth-child(2) a:before  {background: #692dff;} /*bacon*/
    nav li:nth-child(3) a:before  {background: #c0258b;} /*taco*/
    nav li:nth-child(4) a:before  {background: #c13f77;} /*BBQ*/
    nav li:nth-child(5) a:before  {background: #e9481e;} /*buffalo*/
    nav li:nth-child(6) a:before  {background: #14afe7;} /*ranch*/
 

    nav #mobileNavBtn
      {display: flex;width: 60px;height: 60px;background: rgba(0,0,0,.7);position: absolute;bottom: -60px;left:82px;transition: left .5s ease-in-out;margin:0;padding:0;	flex-direction: column;justify-content: space-around;padding: 10px 10px 10px 17px;transition-delay: .5s;}
    nav #mobileNavBtn span
      {width: 100%;height: 3px;background-color: #fff;transition: transform 0.1s ease-out;display: block;padding-left: 15px;}

    nav #mobileNavBtn span:nth-child(1)
       {transform:scale(0.9) rotateZ(-45deg) translate(-12px, 3px)}
    nav #mobileNavBtn span:nth-child(2)
      {display: none;opacity: 0;}
    nav #mobileNavBtn span:nth-child(3)
      {transform:scale(0.9) rotateZ(45deg) translate(-12px, -4px)}


    nav.closed
      {top:-267px}
    nav.closed #mobileNavBtn
      {left:0;padding:10px 10px 10px 10px}
    nav.closed #mobileNavBtn span:nth-child(1)
       {transform:scale(1) rotateZ(0deg) translate(0, 0)}
    nav.closed #mobileNavBtn span:nth-child(2)
      {transform:scale(1) rotateZ(0deg) translate(0, 0); display: block;opacity: 1;}
    nav.closed #mobileNavBtn span:nth-child(3)
      {transform:scale(1) rotateZ(0deg) translate(0, 0)}







 


  }









.video_contain {
position: fixed;
height: 100vh;
width: 100vw;
z-index: 666;
overflow: hidden;
}

video {
  background-blend-mode: multiply;

  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
top:50%;
left: 50%;
transform: translate(-50%, -50% );
}











/*# sourceMappingURL=main.css.map*/