@font-face {
  font-family: "Bebas Neue";
  src: url(font/BebasNeue-Regular.eot);
  src: url(font/BebasNeue-Regular.eot?#iefix) format("embedded-opentype"),
    url(font/BebasNeue-Regular.woff) format("woff"),
    url(font/BebasNeue-Regular.ttf) format("truetype");

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url(font/BebasNeue-Regular.eot);
  src: url(font/RobotoCondensed-Regular.ttf) format("truetype");

  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3d3d3d;
}

#index {
  overflow: hidden;
}

.mainBlock {
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.bg {
  width: 100%;
  pointer-events: none;
  touch-action: none;
}

.target {
  position: absolute;
  width: 10%;
  visibility: hidden;
}

#target_agent {
  width: 15%;
}

.effect {
  position: absolute;
  visibility: hidden;
  width: 10%;
  z-index: 2000;
  pointer-events: none;
  touch-action: none;
}

#effect_special {
  position: absolute;
  width: 30%;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
  bottom: 39%;
  z-index: 999;
  left: -30%;
}

.layer {
  touch-action: none;
  pointer-events: none;
  visibility: visible;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#shadow {
  transform: translate(-50%, -23%);
}

#sun {
  transform: translate(0, 0);
  left: 0%;
}

.spinning {
  animation-name: spinning;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.floating1 {
  animation-name: floating1;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating1 {
  0% {
    left: 50%;
  }

  25% {
    left: 60%;
  }

  50% {
    left: 50%;
  }

  75% {
    left: 40%;
  }

  100% {
    left: 50%;
  }
}

@keyframes jumpin {
  0% {
    max-height: 0%;
  }

  100% {
    max-height: 100%;
  }
}
@keyframes jumpout {
  0% {
  }

  100% {
    bottom: 30%;
  }
}
/* @keyframes jumpout {
  0% {
    max-height: 100%;
  }

  100% {
    max-height: 0%;
    visibility: 'hidden';
    animation: none;
  }
} */

#layer-2.floating2 {
  animation-name: floating2;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating2 {
  0% {
    left: 50%;
  }

  25% {
    left: 55%;
  }

  50% {
    left: 50%;
  }

  75% {
    left: 45%;
  }

  100% {
    left: 50%;
  }
}

#layer-3.floating3 {
  animation-name: floating3;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating3 {
  0% {
    left: 50%;
  }

  25% {
    left: 53%;
  }

  50% {
    left: 50%;
  }

  75% {
    left: 47%;
  }

  100% {
    left: 50%;
  }
}

#layer-4.floating4 {
  animation-name: floating4;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating4 {
  0% {
    left: 50%;
  }

  25% {
    left: 52%;
  }

  75% {
    left: 48%;
  }

  100% {
    left: 50%;
  }
}

#layer-5.floating5 {
  animation-name: floating5;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating5 {
  0% {
    left: 50%;
  }

  25% {
    left: 51%;
  }

  50% {
    left: 50%;
  }

  75% {
    left: 49%;
  }

  100% {
    left: 50%;
  }
}

#layer-1 {
  width: 100%;
  transform: translate(-50%, 10%);
  visibility: visible;
  z-index: 1000;
}

#layer-2 {
  width: 95%;
  transform: translate(-50%, -34%);
  visibility: visible;
  z-index: 700;
}

#layer-3 {
  width: 73%;
  transform: translate(-50%, -48%);
  visibility: visible;
  z-index: 500;
}

#layer-4 {
  width: 62%;
  transform: translate(-50%, -67%);
  visibility: visible;
  z-index: 300;
}

#layer-5 {
  width: 46%;
  transform: translate(-72%, -77%);
  visibility: visible;
  z-index: 100;
}

#lines {
  width: 60%;
}

#mraky1 {
  width: 300%;
  top: 37%;
  left: 300%;
  visibility: visible;
}

#mraky2 {
  width: 300%;
  top: 37%;
  left: 0%;
  visibility: visible;
}

#mraky1.floating-sky1 {
  animation-name: floating-sky1;
  animation-duration: 140s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes floating-sky1 {
  0% {
    left: 300%;
  }

  100% {
    left: 0%;
  }
}

#mraky2.floating-sky2 {
  animation-name: floating-sky2;
  animation-duration: 140s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes floating-sky2 {
  0% {
    left: 0%;
  }

  100% {
    left: -300%;
  }
}

.controls {
  position: absolute;
  left: 0%;
  bottom: 10%;
  width: 100%;
  text-align: center;
  opacity: 1;
  visibility: hidden;
  word-spacing: 300%;
}

div.button_container {
  vertical-align: top;
  display: inline-block;
  max-width: 4cm;
  width: 8%;
  min-width: 1cm;
  position: relative;
  visibility: hidden;
  z-index: 100;
}

.button{
  width: 100%;
}

.caption {
  text-align: center;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0%);
  font-size: 2vmin;
  color: black;
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
}

.note {
  width:100%;
  opacity: 0.0;
  pointer-events: none;
  touch-action: none;
}

#note_general{
  width: 12%;
  top: 23%;
  position: absolute;
  left: 42%;
  z-index: 99999;
}

#note_agent{
  width: 10%;
  top: 63%;
  position: absolute;
  left: 42%;
  z-index: 99999;
}

#pirati {
  opacity: 0.5;
}

#button_bg {
  position: absolute;
  max-width: 4.4cm;
  width: 10%;
  min-width: 1.1cm;
  z-index: 99;
  visibility: hidden;
  transform: translate(0%,67%);
}

.settings {
  position: absolute;
  top: 1%;
  right: 6cm;
}

.sound_button {
  position: absolute;
  top: 1%;
  left: 4cm;
  width: 2cm;
  visibility: hidden;
  opacity: 0.7;
}

.fullscreen_button {
  position: absolute;
  top: 1%;
  left: 2cm;
  width: 2cm;
  visibility: hidden;
  opacity: 0.7;
}

#restart_button {
  position: absolute;
  top: 1%;
  left: 0cm;
  width: 2cm;
  visibility: hidden;
  opacity: 0.7;
}

#frame {
  width: 399%;
  pointer-events: none;
  touch-action: none;
  z-index: 19999;
}

#end {
  width: 10%;
  visibility: hidden;
  z-index: 19999;
}

.score_time {
  position: absolute;
  top: 1%;
  left: 0.5cm;
  height: 4cm;
  visibility: hidden;
}

.time {
  position: absolute;
  top: 1.5cm;
  left: 2.5cm;
  width: 3.5cm;
  z-index: 500;
}

#time_back {
  width: 100%;
  opacity: 1;
}

.score {
  position: absolute;
  top: 0;
  left: 2.5cm;
  width: 3.5cm;
  z-index: 500;
}

#score_text {
  position: absolute;
  margin-top: 19%;
  width: 3cm;
  text-align: center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  font-size: 16pt;
  font-family: "Bebas Neue", sans-serif;
  font-style: bold;
  color: whitesmoke;
  text-shadow: 0 0px 0;
}

#score_back {
  width: 100%;
  opacity: 1;
}

#loading {
  z-index: 999999;
  width: 20%;
}

#ifacevisual {
  position: absolute;
  width: 100%;
  top: 30%;
}

.iface {
  vertical-align: middle;
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  visibility: hidden;
}

.iface p {
  text-align: center;
  position: absolute;
  margin-top: 5%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  font-size: 18pt;
  color: black;
  font-family: "Bebas Neue", sans-serif;
  background-color: #00ffff;
  text-transform: uppercase;
}

#ok_iface {
  position: absolute;
  margin-top: 11%;
  right: 3.5%;
  width: 2cm;
}

/* #ok_middle {
  position: absolute;
  margin-top: 16%;
  width: 2cm;
  text-align: center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
} */

.vote {
  visibility: hidden;
  z-index: 19999;
  width: 60%;
}

#vote_img {
  width: 100%;
}
#vote_ok_off {
  width: 20%;
  transform: translate(-50%,386%);
}

#vote_ok_on {
  width: 20%;
  transform: translate(-50%,386%);
}

#vote_bubble {
  width: 35%;
  transform: translate(-142%, -78%);
}

#cross {
  opacity: 0;
  width:24%;
  transform: translate(-50%, -59%);
}

#check {
  opacity: 0;
  width:24%;
  transform: translate(-50%, -59%);
}

.win {
  visibility: hidden;
  z-index: 19999;
  width: 60%;
}

#win_img {
  width: 100%;
}

#win_program {
  width: 35%;
  transform: translate(-66%,273%);
}

#win_restart {
  width: 9%;
  transform: translate(155%,64%);
}

#win_fb {
  width: 9%;
  transform: translate(-249%, 61%);
}

#win_tw {
  width: 9%;
  transform: translate(-123%, 63%);
}

#win_close {
  width: 7%;
  transform: translate(226%, 257%);
}

#win_score {
  position: absolute;
  margin-top: -12%;
  text-align: center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  font-size: 9vmin;
  font-family: "Bebas Neue", sans-serif;
  font-style: bold;
  color: black;
  text-shadow: 0 0px 0;
}

#game_time {
  visibility: hidden;

  position: absolute;
  margin-top: 18%;
  width: 3cm;
  text-align: center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

#time_text {
  position: absolute;
  margin-top: 19%;
  width: 3cm;
  text-align: center;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  font-size: 16pt;
  font-family: "Bebas Neue", sans-serif;
  font-style: bold;
  color: black;
  text-shadow: 0 0px 0;
}

#time_back {
  width: 100%;
  opacity: 1;
}

#start {
  visibility: hidden;
  margin-top: -1.8%;
  opacity: 0.5;
  transform: translate(0%, -50%);
  width: 50%;
  left: 50%;
  z-index: 19999;
}

#start:hover {
  opacity: 1;
}

#tutorial {
  visibility: hidden;
  margin-top: -1.8%;
  opacity: 0.5;
  transform: translate(-100%, -50%);
  width: 50%;
  z-index: 19999;
}

#tutorial:hover {
  opacity: 1;
}

#filter {
  z-index: 1001;
}

#win {
  visibility: hidden;
  margin-top: -1.8%;
  width: 60%;
  z-index: 1000;
}

#win {
  visibility: hidden;
  margin-top: -2.1%;
  margin-right: -41%;
  width: 76%;
  z-index: 19999;
}

*/ *.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}