body{
  background:#333;
  font-family: "myriad-pro-condensed",sans-serif; 
}
#shade{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    transition: opacity 500ms;
    z-index: 2;
}
.fade{
    transition: opacity 500ms;
}
.fadeOut{
    opacity: 0;
}
.fadeIn{
    opacity: 1;
}
#play{
    position:relative;
    left:calc(50% - 75px);
    top:calc(50% - 75px);
    width:150px;
    height:150px;
    /*background:#fff;*/
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius:500px;
    cursor: pointer;
}
#navigation{
  position:absolute;
  width:0;
  height:100%;
  top:0;
  right:0;
  padding-top:10px;
  padding-bottom:15px;
  color:#fff;
  text-align: left;
  background:rgba(0,0,0,0.8);
  z-index: 1;
  transition: width 500ms;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  /* background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */
  /* background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
  /* background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#navigation.open{
  width:350px;
}
#menu-btn{
	display:none;
	position:absolute;
	top:10px;
	right:10px;
	width:40px;
	height:40px;
  cursor: pointer;
  z-index: 2;
}
#menu{
  position:absolute;
  top:15px;
  width:100%;
  left:350px;
  transition: left 500ms;
}
#navigation.open #menu{
  left:0;
}
#menu_logo{
  width:185px;
  height:95px;
  margin-bottom:40px;
  margin:20px 0 30px 40px;
}
#menu .product-name{
  margin-top:20px;
  margin-bottom:40px;
  margin-left:40px;
  font-size:25px;
}
#menu .icon{
  left:0;
  margin-top:10px;
  margin-bottom:10px;
  font-size:22px;
  background-position: 40px center;
  background-size:32px;
  background-repeat: no-repeat;;
  padding-left:110px;
  cursor: pointer;
  height:50px;
  text-align: left;
  display: flex !important;
  align-items: center;
  width:100%;
  transition: background-color 300ms;
}
#menu .icon:hover{
  background-color:#424242;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before{
  color:#fff;
  background:#fff;
}
#copyright{
  position:absolute;
  font-size:12px;
  left: 0;
  height: 100vh;
  color: #fff;
  width: 350px;
  text-align: left;
  display: flex;
  align-content: end;
  top: 0;
  flex: 0 1 auto;  
  z-index: -1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.7em;
}
#copyright .text{
  align-self: flex-end;
  padding:10px 0 10px 25px;
}

.v3d-simple-preloader-container{
  width:280px;
  margin-left:-140px;
  filter: drop-shadow(0px 0px 4px #00953b);
}
.v3d-simple-preloader-logo{
  background-position: center;
  background-repeat: no-repeat;;
  
  width:280px;
  height:148px;
  background-size: contain;
}
.v3d-simple-preloader-bar{
  background:linear-gradient(90deg, #00953b, #007e24);
  border-color:#009036;
}
.v3d-simple-preloader-background{
  z-index: 2;
}
#instructions{
  top:75%;
  left:50%;
  position:absolute;
  z-index: 3;
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  color:#fff;
  text-align: center;;
  width:280px;
  height:80px;
  filter:none;
  margin-left:-140px;
}
#instructions > div{
  position:absolute;
  width:280px;
  height:80px;
  margin-top:0.7em;
  animation-delay:2s;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}
#instruct_1{
  animation-name: fadeOutAnim;
}
#instruct_2{
  opacity: 0;
  animation-name: fadeInAnim;
}
@keyframes fadeInAnim {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeOutAnim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
.v3d-annotation{
  /*background-color: rgba(210,38,48,1);*/
  cursor: pointer;
  padding:5px;
  color: rgb(210,38,48);
  border: 1px;
  border-color: rgb(210,38,48);
  font-size: 1px;
  background-size: 21px;
  background-repeat: no-repeat;
  padding: 7px 13px;
  background-position: center;
  background-color: transparent;
}
.v3d-annotation-transparent{
    display:none;
}
.v3d-annotation.active{
    /*background-color: rgba(210,38,48,1);*/
    border: 1px;
    border-color: #fff;
}
.v3d-annotation:not(.v3d-annotation-transparent):hover{
    /*background-color: rgba(255,255,255,1);*/
    background-color:transparent;
    color: rgba(210,38,48,1);
}
.fullscreen-button {
  top:auto;
  right:auto;
  height:auto;
  position: relative;
  background-color:rgba(0,0,0,0);
  z-index: 2;
}
#menu div.mute{
  background-size:27px;
}
@media (max-height:500px){
  #menu_logo{
    display:none;
  }
}