html, body {
  padding: 0px;
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#logo {
  position: absolute;
  right: 0px;
  bottom: 0px;
}


#badge {
  width:60px;
  height:70px;
  position: absolute;
  left:10px;
  bottom:10px;
}

CANVAS {
  background: transparent !important;
  opacity: 1 !important;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
h1 {
  color: rgb(76,83,105);
  font-family: 'Orbitron', sans-serif;
  font-size: 140px;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
  background:  -webkit-linear-gradient(top, rgba(209, 101, 0,1) 0%, rgba(209, 101, 0,1) 25%, rgba(209, 101, 0,1) 39%, rgba(209, 101, 0,1) 44%, rgba(209, 101, 0,1) 51%, rgba(209, 101, 0,1) 55%, rgba(209, 101, 0,1) 60%, rgba(209, 101, 0,1) 74%, rgba(209, 101, 0,1) 81%, rgba(209, 101, 0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #D6E4EC;
  user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


.trans {
  /*Hero transition*/
  transform: perspective(250px) rotateX(25deg);
  transform-style: preserve-3d;
  transition: transform 1s;

}

.trans1 {
  /*Hero transition*/
  transform: perspective(250px) rotateX(-25deg);
  transform-style: preserve-3d;
  transition: transform 1s;

}

.transOut {
  transform: perspective(250px) rotateX(0deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.scrollCanvas {
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  bottom: 0%;
  left: 0%;
  top:0px;
  margin: 0px;
  z-index: -1;
  transform-origin: 50% 100%;
  position: absolute;
}

.scrollCanvas1 {
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  bottom: 0%;
  left: 0%;
  top:0px;
  margin: 0px;
  z-index: -1;
  transform-origin: 50% 0%;
  position: absolute;
}

.txt {
  color: rgb(174, 174, 174);
  font-family: 'Orbitron', sans-serif;
  font-size: 140px;

  margin: 0;

  position: absolute;
  text-align: left;
  text-transform: uppercase;

  /*width: 730px;*/
  z-index: 1;

  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(174, 174, 174);
  -webkit-text-stroke-width: 2px;
  text-shadow:
    1px 1px 4px #d15b00,
    2px 2px 0 #d15b00,
    3px 3px 0 #d15b00,
    4px 4px 0 #d15b00,
    5px 5px 0 #d15b00,
    6px 6px 0 #d15b00, /* end of 4 level deep dark shadow */
    7px 7px 0 #d15b00,
    8px 8px 0 #d15b00,
    9px 9px 0 #d15b00,
    10px 10px 0 #d15b00,
    11px 11px 0 #d15b00,
    12px 12px 0 #d15b00,
    13px 13px 0 #d15b00,
    14px 14px 0 #ffffff,
    15px 15px 0 #ffffff,
    16px 16px 1px #ffffff;
  
  
    0 0 1px  #d1650,
  0 -3px 3px rgba(255, 255, 255, 0.8), 0 3px 3px rgba(0, 0, 0, 0.5), 0 0 15px #d16500, 0 0 45px rgba(209, 101, 0, 0.8);
  user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
  
}

#version, #comingsoon {
  color: #d16500;
  display: block;

  
  font-family: 'Permanent Marker', cursive;
  font-size: 180px;
  /*position: absolute;*/
  text-shadow: 0 0 1px  #d16500, 0 -3px 3px rgba(255, 255, 255, 2), 0 3px 3px rgba(0, 0, 0, 0.5), 0 0 15px #d16500, 0 0 45px rgba(209, 101, 0, 0.8);
  text-transform: none;
  user-select: none;
  text-align: right;
  -webkit-background-clip: text;
  margin: 0px;
  padding:0px;
  z-index: 2;
  -webkit-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
}

#container {
  opacity: 0;
  position:absolute;
   
}