@font-face {
font-family: "SIFONN BASIC";
src: url("../fonts/SIFONN_BASIC.otf");
}

body, html{
  background-color: black;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  position: fixed;
}

button{
  cursor: pointer;
  outline: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#three{
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  overflow: auto;
  width: 100%;
  height: 100%;
}
/*-------------------*/
#enter-overlay{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff30;
}

#enter-button{
  border: 0;
  font-family: SIFONN BASIC, sans-serif;
  font-size: 15pt;
  border-radius: 30px;
  width: 232px;
  height: 65px;
  text-transform: uppercase;
  /* font-weight: bold; */
  cursor: pointer;
  opacity: 0;
  color: #FBE20D;
  background-color: rgb(0 0 0 / 50%);
  padding-top: 4px;
  text-shadow: 1px 1px 1px #000000b5;
  pointer-events: none;

}

#enter-button.show{
  opacity: 1;
  pointer-events: all;
  z-index:100;
}

#home-share-nav{
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 30px;
  background-color: rgb(0 0 0 / 15%);
  width: 110px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 1;
}

#home-share-nav button{
  width: 30px;
  height: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  border:0;
  background-color: transparent;
  cursor: pointer;
}

#home{
  background-image: url('../images/home_white-01.svg');
}

#share{
  background-image: url('../images/share_whitesvg-01.svg');
}
/*-------------------*/
#info {
  position: absolute;
  bottom: 30px;
  color: white;
  font-size: 20px;
  /* width: 100%; */
  text-align: left;
  z-index: 100;
  display: none;
  padding: 0px;
  margin: 0px;
  border: 0px;
  /* max-width: 500px; */
  max-width: calc(100vw - 300px);

  right: 30px;
  background-color: rgba(0,0,0,.15);
  border-radius: 15px;
  padding: 18px;
  font-family: sans-serif;

  color: #FBE20D;
  letter-spacing: .02em;
  line-height: 1.25em;
  text-transform: uppercase;
}

#info.show{
  display: flex;
}

#volume{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-image: url('../images/volume_up_white-01.svg');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  border: 0;
}

#volume.mute{
  background-image: url('../images/volume_off_white-01.svg');

}

#overlay {
	position: absolute;
	bottom: 18px;
  left: 30px;
	/* width: 128px; */

	text-align: center;
	z-index: 100;
	display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#ggwheel{
  width: 180px;
  height: 180px;
  /* background-image: url('../images/ggwheel-01.svg'); */
  background-repeat: no-repeat;

}

#ggtitle{
  background-image: url('../images/ggtitle-01.svg');
  height: 50px;
  width: 180px;
  background-repeat: no-repeat;
  background-position: center center;
}

#ggicon{
  width: 120px;
  height: 120px;
  /* background-image: url('../assets/goal1.png'); */
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 15px;
  transition: opacity .25s, transform .25s;
  opacity: 0;
  transform: translateY(5px);
  transition-delay: .1s;
  pointer-events: none;

}

#ggicon.show{
  opacity: 1;
  transform: translateY(0);
}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17{
  /* filter:brightness(.25); */
  /* fill-opacity: 0.5;
  filter:grayscale(100%) brightness(100); */
  fill:white;
  fill-opacity: 0.75;
}

.cls-1:hover,
.cls-2:hover,
.cls-3:hover,
.cls-4:hover,
.cls-5:hover,
.cls-6:hover,
.cls-7:hover,
.cls-8:hover,
.cls-9:hover,
.cls-10:hover,
.cls-11:hover,
.cls-12:hover,
.cls-13:hover,
.cls-14:hover,
.cls-15:hover,
.cls-16:hover,
.cls-17:hover{
  /* filter:brightness(1); */
  cursor: : pointer;
}

#overlay.minimize{
  bottom: 10px;
  left: 20px;
}

.minimize #ggicon{
  /* display: none; */
  width: 120px;
  height: 120px;
}

.minimize #ggwheel{
  width: 150px;
  height: 150px;
}

.minimize #ggtitle{
  width: 150px;
  height: 50px;
}

#loading{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  background-color: black;
  font-family:SIFONN BASIC, sans-serif;
  color: #FBE20D;
}

#loading.hide{
  display: none;
}

/* #home {
	position: absolute;
	top: 10px;
  left: 10px;
	width: 48px;
	text-align: center;
	z-index: 100;
	display:block;
}

#share {
	position: absolute;
	top: 10px;
  right: 10px;
	width: 48px;
	text-align: center;
	z-index: 100;
	display:block;
} */

#inventory {
	position: absolute;
	top: 10px;
  left: 10px;
	width: 128px;
	text-align: center;
	z-index: 100;
	display:block;
}

.icon-bar {
  display: none;
  position: absolute;
  width:100%;
  height: 32px;
  align: center;
  text-align: center;
  padding: 3px 3px;
}
.icon-bar img {
  /*float: center;*/
  height: 100%;
  /*text-align: center;*/
  padding: 10px 2px;

}

.icon-bar a {
  /*float: left;*/
  width: 20%;
  /*text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
  */

}

.icon-bar a:hover {
  background-color: #000;
}

.active {
  background-color: #04AA6D;
}


#skipintro-button{
  position: absolute;
  bottom: 30px;
  left: calc(50% - 55px);
  width: 110px;
  height: 40px;
  color: white;
  font-family: SIFONN BASIC, sans-serif;
  background-color: transparent;
  border: 0;
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: .025em;
}

#skipintro-button.hide{
  display: none;
}


.blinking {
   -webkit-animation: .75s blink ease 5;
   -moz-animation: .75s blink ease 5;
   -ms-animation: .75s blink ease 5;
   -o-animation: .75s blink ease 5;
   animation: .75s blink ease 5;
 }

 @keyframes "blink" {
   from,to {opacity: 0;}
   50% {opacity: 1;}
 }

 @-moz-keyframes blink {
   from,to {opacity: 0;}
   50% {opacity: 1;}
 }

 @-webkit-keyframes "blink" {
   from,to {opacity: 0;}
   50% {opacity: 1;}
 }

 @-ms-keyframes "blink" {
   from,to {opacity: 0;}
   50% {opacity: 1;}
 }

 @-o-keyframes "blink" {
   from,to {opacity: 0;}
   50% {opacity: 1;}
 }


@media only screen and (orientation:landscape) and (max-device-width:850px) {
	/* CSS rules here */
  .minimize #ggwheel{
    width: 120px;
    height: 120px;
  }

  .minimize #ggtitle{
    width: 120px;
    height: 30px;
  }

  #overlay{
    bottom: 5px;
    left: 15px;
  }

  #home-share-nav{
    top: 10px;
    right: 10px;
    width: 100px;
    height: 45px;
  }

  #home-share-nav button{
    width: 27px;
    height: 27px;
  }
}


@media only screen and (orientation:portrait) and (max-device-width:40em) {
  .minimize #ggwheel{
    width: 120px;
    height: 120px;
  }

  .minimize #ggtitle{
    width: 120px;
    height: 30px;
  }

  #overlay{
    bottom: 10px;
    left: calc(50vw - 60px);
  }

  #enter-button{
    font-size: 13pt;
    width: 200px;
    height: 50px;
  }

  #home-share-nav{
    top: 10px;
    right: 10px;
    width: 100px;
    height: 45px;
  }

  #home-share-nav button{
    width: 27px;
    height: 27px;
  }
}