html, body { width:100%; height:100%;  background-color: black;   margin:0; padding:0; overflow: hidden;}
html,body,ul,span{margin:0;padding:0;  font-size:13px; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 300;}
body,p,h1, h2,h3,h4,h5,h6,a{font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 300;}

h1 { font-size:48px; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 7px; visibility:hidden;text-transform: uppercase; padding-bottom:0px; margin-bottom: 0px;}
h2 {font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 12px; text-transform: uppercase; visibility:hidden;}


a { font-size:13px; outline: 0; text-decoration: none;}

#videoBacker {  background-size: cover; object-fit: cover; z-index: 9; opacity:0; position: absolute; top:0px; left:0px; width:100vw; height: 100vh; transition: 1s opacity ease-in-out;
}

.obscure { width:100%; height: 100%; background-color: black;z-index:2; position: absolute;top:0; left:0;  transition: 3s all ease-out;}

#blocker {

    position: absolute;

    width: 100%;
    height: 100%;

    /*background-color: rgba(0,0,0,1.0);*/
    opacity: 1.0;
    transition: 3s all ease-out;
    cursor: pointer;
    z-index: 10;

}

#blocker.fade,.obscure.fade { opacity: 0; }

.instructions {
    position: absolute;
    width: 100%;
    color: #ffffff;
    text-align: center;
    top:50%;
    cursor: pointer;
    transform: translate(0,-50%);
    pointer-events: none;

}

.instructionText{ visibility: hidden; cursor: pointer;  pointer-events: none;}


.beginButton { visibility: hidden; cursor: pointer; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; font-size:10px; margin-top:80px; }


.headphones { text-align:center; opacity:0; pointer-events: none; visibility: hidden; cursor: pointer; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; font-size:10px; margin-top:100px; position: absolute; bottom:50px; left:50%; transform: translate(-50%,0); }

.headphones img { width:40px; margin-top:20px;}



#endCard{ pointer-events: none;  text-align: center; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 100; width: 50%; }

#endCard .text{ font-size:32px; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 7px; visibility:hidden;text-transform: uppercase; padding-bottom:0px; margin-bottom: 0px; }



canvas { cursor: pointer; position: absolute; z-index: 1;}

#moveInstruction, #lookAroundInstruction { position: absolute; bottom:50px; width:100%; text-align:center; z-index: 2; pointer-events: none; }

#replayButton { position: absolute; bottom:15px; width:100%; text-align:center; z-index: 2; cursor: pointer; display: none;}


#moveInstruction .text, #lookAroundInstruction .text, #replayButton .text { opacity: 0; visibility: hidden;  font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 2px; text-transform: uppercase;}
#moveInstruction img { margin-left:10px; width:70px; height: auto; vertical-align: bottom; opacity: 0;}
#lookAroundInstruction img { margin-left:10px;  height:30px; vertical-align: bottom; opacity: 0;}
#replayButton img { margin-left:10px;  height:20px; vertical-align: bottom; opacity: 0; }

.sound { position: absolute; bottom:10px; right:15px; cursor: pointer; z-index: 1000; width:20px; height: 20px; }

.info { position: absolute; bottom:12px; left:15px; cursor: pointer; z-index: 1000; width:20px; height: 20px; font-weight: 400; font-family: delve-hand, sans-serif;  font-size: 15px; transition: .5s all ease-in-out; transform-origin: middle middle; text-align: center; padding:0px; margin:0px; letter-spacing: 0px;}
.info.active {  transform: rotate(90deg);  }

.fullscreen { position: absolute; bottom:12px; right:45px; cursor: pointer; z-index: 1000; width:20px; height: 20px; font-weight: 400; font-family: delve-hand, sans-serif;  font-size: 15px; transition: .5s all ease-in-out; transform-origin: middle middle; text-align: center; padding:0px; margin:0px; letter-spacing: 0px;}
.fullscreen.active {  transform: rotate(90deg);  }

.info-panel { width:100%; height: 140px; text-align: center; background-color: rgba(0,0,0,.8); position: absolute; bottom:-200px; transition: .5s all ease-in-out; z-index: 999;}
.info-panel.active { bottom:0px; }
.info-panel .credits{ margin-top:20px; }
.credit { text-transform: uppercase; font-size:9px; }
.credit.largest { font-size:15px; }
.credit.large { font-size:13px; }
.credit img { width:20px; height: auto; vertical-align: bottom;}

.mobile { width:100vw; height: 100vh; position: absolute; z-index: 2000; background-color: black; text-align: center; display: none;}
.mobile.active { display: block; }
.mobile img { object-fit: cover;  background-repeat: no-repeat; background-position: center center;  position: relative; top:0px; left:0px; z-index:0; }
.mobile .message { position: absolute; top:50%; left:50%; text-align: center; transform: translate(-50%, -50%);}

.mobile .message h1 { font-size:48px; font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 7px; text-transform: uppercase; padding-bottom:0px; margin-bottom: 0px; visibility: visible; }

.mobile .message h2 { font-family: futura-pt, sans-serif; color:white; font-style: normal; font-weight: 400; letter-spacing: 7px; text-transform: uppercase; visibility: visible; }


.mobile .message .text { font-size:20px;  }


/* sound icon animation */

.bar {
  height: 1px;
  width: 2px;
  float:left;
  background-color: #ffffff;
  opacity:.8;
  bottom: 5px;
  position: absolute;
  -webkit-animation-duration: 500ms;
  -webkit-animation-play-state: running;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;

  animation-duration: 500ms;
  animation-play-state: running;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bar.noAnim {
   -webkit-animation: none !important;

 -moz-animation: none !important;

 -o-animation: none !important;

 -ms-animation: none !important;

 animation: none !important;

}
.bar#bar-1 {
  left: 0;
  -webkit-animation-name: danceHeight1;
  -webkit-animation-delay: 0ms;

  animation-name: danceHeight1;
  animation-delay: 0ms;

}
.bar#bar-2 {
  left: 4px;
  -webkit-animation-name: danceHeight2;
  -webkit-animation-delay: 300ms;

  animation-name: danceHeight2;
  animation-delay: 300ms;
}
.bar#bar-3 {
  left: 8px;
  -webkit-animation-name: danceHeight3;
  -webkit-animation-delay: 600ms;

  animation-name: danceHeight3;
  animation-delay: 600ms;

}
.bar#bar-4 {
  left: 12px;
  -webkit-animation-name: danceHeight4;
  -webkit-animation-delay: 900ms;
  animation-name: danceHeight4;
  animation-delay: 900ms;
}

@-webkit-keyframes danceHeight1 {
  from {
    height: 1px;
  }
  to {
    height: 10px;
  }
}
@-webkit-keyframes danceHeight2 {
  from {
    height: 1px;
  }
  to {
    height: 12px;
  }
}
@-webkit-keyframes danceHeight3 {
  from {
    height: 1px;
  }
  to {
    height: 14px;
  }
}
@-webkit-keyframes danceHeight4 {
  from {
    height: 1px;
  }
  to {
    height: 8px;
  }
}


@keyframes danceHeight1 {
  from {
    height: 1px;
  }
  to {
    height: 10px;
  }
}
@keyframes danceHeight2 {
  from {
    height: 1px;
  }
  to {
    height: 12px;
  }
}
@keyframes danceHeight3 {
  from {
    height: 1px;
  }
  to {
    height: 14px;
  }
}
@keyframes danceHeight4 {
  from {
    height: 1px;
  }
  to {
    height: 8px;
  }
}
/* end sound anmation */ 



#svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s linear;
  stroke: #666;
  stroke-width: .3em;
}
#svg #bar {
  stroke: #66bbff;
  stroke-dashoffset: 565.48;
}
#cont {
  display: block;
  height: 200px;
  width: 200px;
  margin: 2em auto;
  box-shadow: 0 0 1em black;
  border-radius: 100%;
  position: absolute;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  z-index: 200;

}
#cont:after {
  position: absolute;
  text-align: center;
  display: block;
  height: 160px;
  width: 160px;
  left: 50%;
  top: 50%;
  box-shadow: inset 0 0 1em black;
  content: attr(data-pct);
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 100%;
  line-height: 160px;
  font-size: 2em;
  text-shadow: 0 0 0.5em black;
}