@font-face {
  font-family: "SuisseEcalIntl";
  src: url("SuisseEcalIntl-Regular.otf") format("opentype");
}

html,
      body {
        background: black;
        width: 100%;
        height: 100%;
        overflow: visible;
        padding: 0;
        margin: 0;
        font-family: SuisseEcalIntl;
      }

      div#gameContainer {
        background: transparent !important;
        position: absolute;
      }

      div#gameContainer canvas {
        position: absolute;
      }



#credit { 
  position: absolute; 
  bottom: 0%; 
  right: 1%; 
  z-index: 3;
  color: #fcfcfcfc;
}

#logo { 
  position: absolute; 
  left: 50%; 
  top: 45%; 
  transform: translate(-50%, -45%); 
  height: 60px;
  z-index: 3;

  -webkit-transition: height 3s ease-in-out;
  -moz-transition: height 3s ease-in-out;
  -ms-transition: height 3s ease-in-out;
  -o-transition: height 3s ease-in-out;
  transition: height 3s ease-in-out;
}

#gif { 
  position: absolute; 
  left: 35%; 
  top: 50%; 
  transform: translate(-0%, -0%); 
  height: 300px;
  z-index: 2;
   opacity: 1;

  -webkit-transition: height 3s ease-in-out;
  -moz-transition: height 3s ease-in-out;
  -ms-transition: height 3s ease-in-out;
  -o-transition: height 3s ease-in-out;
  transition: height 3s ease-in-out;
}

#clickcanvas { 
  display: block;
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: -1;
  cursor: pointer;
}
#clicktoplay {
  position: absolute; 
  left: 50%; 
  top: 45%; 
  transform: translate(-50%, -45%); 
  margin-top: 75px; 
  font-size: 24px;
  color:  #fcfcfcfc;
}

#unity-loading-bar { 
	position: absolute; 
	left: 50%; 
	top: 45%; 
	transform: translate(-50%, -45%); 
	display: none;
  z-index: 2;
}
#unity-progress-bar-empty {

	width: 141px; 
	height: 18px; 
	margin-top: 150px; 
	background: url('progress-bar-full-dark.png') no-repeat center 
}
#unity-progress-bar-full { 
	width: 0%; 
	height: 18px; 
	margin-top: 150px; 
	background: url('progress-bar-empty-dark.png') no-repeat center 
}
#nomobile {
  display: none; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 2;
  font-size: 30px;
  text-align: center;
}


 @media screen and (orientation:portrait) {
    #nomobile {
      display: block;
    }
    #unity-progress-bar-empty, #unity-progress-bar-full, #clicktoplay, #logo,#credit {
      display: none;
    }
 }