body
{
  margin: 0;
  /* overflow: hidden!important; */
  overflow-x: hidden!important;
  /* height: 400vh; */
  cursor: url("textures/cursorPng.png"), auto;
}

#topRotate
{
  perspective: 100px;
  transform-style: preserve-3d;
  position: fixed;
  z-index: 201;
  padding: 50px;
  transition: transform 0.2s ease;
}

#topRotate:hover .heading
{
  -webkit-filter: drop-shadow(0px 0px 10px white);
  /* -webkit-filter: drop-shadow(0px 0px 10px rgba(255,255,255,1)); */
}

.subTitle
{
  transform: translateZ(30px);
  position: absolute;
  top:65px;
  left:80px;
  width: 50%;
}

#contactCta
{
  position: fixed;
  right: 0;
  z-index: 201;
  margin: 60px;
  perspective: 100px;
  transform-style: preserve-3d;
}

#contactCta:hover .contactheading
{
  -webkit-filter: drop-shadow(0px 0px 10px white);
  /* -webkit-filter: drop-shadow(0px 0px 10px rgba(255,255,255,1)); */
}

.contactheading
{
  width: 169px;
}

/* .heading:hover
{
  -webkit-filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));
} */

#threeheader canvas
{
  position: fixed;
  top:0;
  /* position:relative; */
  /* z-index: 101; */
}

div#darkener
{
  background: black;
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 202;
  transition: opacity 2s ease;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#loadScreenMid
{
  position:relative;
  max-width: 300px;
  width: 300px;
}

.loadCircle
{
  position: absolute;
  left: 50%;
  width: 41%;
  top: 47%;
  /* margin-left: auto; */
  /* margin-right: auto; */
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite;
}

@keyframes spin
{
    100%
    {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.noOpacity
{
  opacity: 0;
}

div#test
{
    width: 100vw;
    height: 154vh;
    /* padding-bottom: 300vh; */
    /* margin-bottom: 200vh; */
    margin-top: 54vh;
    /* background: rgba(255,255,255,0.8); */
    /* z-index: 102; */
    /* position: relative; */
    /* left: 10vw; */
    /* z-index: 102; */
    /* background: rgb(0,212,255); */
    /* background: linear-gradient(0deg, rgba(0,212,255,0) 0%, rgba(0,0,0,1) 21%, rgba(0,0,0,1) 73%, rgba(0,212,255,0) 90%); */
}

.bottomcalc
{
  height: 100vh;
  position: relative;
  background: rgba(0,212,255,0.5);
  z-index: -1;
}

h1, h2
{
  font-family: 'Orbitron', serif;
  color: white;
}

h1
{
  font-size: 100px;
}

h2
{
  font-size: 40px;
  text-transform: uppercase;
  width: 100vw;
  text-align: center;
  text-shadow: black 0px 0px 10px;
  z-index: 206;
}

#test
{
  z-index: 10;
  color: white;
  position: absolute;
}

h2#loadPercent {
    position: absolute;
    width: 100%;
    top: 56px;
}

.mainCenter
{
  margin-left: 100px;
}

#second
{
  width: 40vw;
  height: 40vh;
}

video
{
  position: fixed;
}

#left
{
  position: fixed;
  align-items: center;
  display: flex;
  width: 100vw;
  z-index:100;
  height: 100vh;
  /* opacity: 0.9; */
  background: rgba(0,0,0,0.63);
  /* background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 100%); */
/* background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,212,255,0) 100%); */
}

#mobiledemo
{
  width: 100%;
  height: auto;
  position:relative;
}

div#mobile {
    display: none;
    z-index: 205;
    position: absolute;
    background: black;
    height: 100vh;
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (max-width: 500px)
{
  div#mobile
  {
    flex-direction: column;
  }
  h2
  {
    position: relative!important;
    padding-top: 20px!important;
  }
    
  #topRotate
    {
        justify-content: center;
        display: flex;
        margin-top: 20px;
        padding: 0px;
        width: 100vw;
    }
    
    .subTitle
    {
     top: 20px;
     width: 169px;
     left: auto;
    }
    
    #contactCta
    {
      display: none;
    }
    
    a
    {
        color: white!important;
        text-decoration: none;
    }

@media only screen and (max-width: 1000px)
{
  div#mobile
  {
    display: flex;
  }
  .loadCircle
  {
    display:none;
  }
  #test
  {
    display: none;
  }
  canvas
  {
    display:none;
  }
  h2
  {
    position: absolute;
    padding-top: 30vh;
  }
}