div#preload {
  display: none;
}

#CanvasOverlay {
  display: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#btn_overlay_arrow {
  width: 28px;
  height: 45px;
  background-size: contain;
  background-image: url('menu/arrow.png');
  background-repeat: no-repeat;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  background-position: center;
}

@media only screen and (orientation: landscape) {
  #btn_overlay_fullscreen {
    right: 5px;
    top: 5px;
    width: 3vw;
    height: 6vh;
    min-width: 30px;
    min-height: 30px;
    max-width: 200px;
    max-height: 200px;
    background-size: contain;
    position: absolute;
    background-position: center;
  }
  #divOverlay {
    display: flex;
    position: absolute;
    flex-direction: row;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    right: 0%;
    transform-origin: right center;
  }
  input[type=button] {
    pointer-events: all;
    border: none;
    outline: none;
    background-color: transparent;
  }
  .expand-bg {
    background-image: url('menu/menu_base.png');
  }
  .expand {
    animation: expand-anim 0.3s ease-in-out;
  }
  .shrink {
    animation: shrink-anim 0.3s ease-in-out;
  }
  .flip {
    transform: scaleX(-1);
  }
}

@media (orientation: landscape) and (min-height: 500px) {
  #divOverlay {
    top: 47%;
    transform: scale(2);
  }
  @keyframes expand-anim {
    0% {
      transform: scale(0, 2);
    }
    100% {
      transform: scale(2, 2);
    }
  }
  @keyframes shrink-anim {
    0% {
      transform: scale(2, 2);
    }
    100% {
      transform: scale(0, 2);
    }
  }
}

@media (orientation: landscape) and (max-height: 499px) {
  #divOverlay {
    top: 42%;
    transform: scale(1.2);
  }
  @keyframes expand-anim {
    0% {
      transform: scale(0, 1.2);
    }
    100% {
      transform: scale(1.2, 1.2);
    }
  }
  @keyframes shrink-anim {
    0% {
      transform: scale(1.2, 1.2);
    }
    100% {
      transform: scale(0, 1.2);
    }
  }
}

@media only screen and (orientation: portrait) {
  #btn_overlay_fullscreen {
    bottom: 5px;
    right: 5px;
    width: 6vh;
    height: 3vw;
    min-width: 30px;
    min-height: 30px;
    max-width: 200px;
    max-height: 200px;
    background-size: contain;
    position: absolute;
    background-position: center;
  }
  #divOverlay {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: right 100%;
    bottom: -5px;
    right: 50%;
  }
  #btn_overlay_arrow {
    width: 45px;
    height: 45px;
  }
  input[type=button] {
    pointer-events: all;
    border: none;
    outline: none;
    background-color: transparent;
    transform-origin: 55% center;
    transform: rotate(90deg);
  }
  .expand-bg {
    background-image: url('menu/menu_base_vertical.png');
  }
  #divOverlay.expand {
    animation: expand-anim 0.3s ease-in-out;
  }
  #divOverlay.shrink {
    animation: shrink-anim 0.3s ease-in-out;
  }
  #btn_overlay_arrow.flip {
    transform: scaleY(-1) rotate(90deg);
  }
}

@media (orientation: portrait) and (min-width: 600px) {
  #divOverlay {
    transform: scale(2) translateX(50%);
  }
  @keyframes expand-anim {
    0% {
      transform: scale(2, 0) translateX(50%);
    }
    100% {
      transform: scale(2, 2) translateX(50%);
    }
  }
  @keyframes shrink-anim {
    0% {
      transform: scale(2, 2) translateX(50%);
    }
    100% {
      transform: scale(2, 0) translateX(50%);
    }
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  #divOverlay {
    transform: scale(1.1) translateX(50%);
  }
  @keyframes expand-anim {
    0% {
      transform: scale(1.1, 0) translateX(50%);
    }
    100% {
      transform: scale(1.1, 1.1) translateX(50%);
    }
  }
  @keyframes shrink-anim {
    0% {
      transform: scale(1.1, 1.1) translateX(50%);
    }
    100% {
      transform: scale(1.1, 0) translateX(50%);
    }
  }
}

.fullscreen {
  background: transparent url('menu/fullscreen/FullScreen.png') no-repeat;
}

.fullscreen:active {
  background: transparent url('menu/fullscreen/FullScreen_press.png') no-repeat;
}

.fullscreen_close {
  background: transparent url('menu/fullscreen/shrink.png') no-repeat;
}

.fullscreen_close:active {
  background: transparent url('menu/fullscreen/shrink_press.png') no-repeat;
}

#btn_overlay_arrow:active {
  background-image: url('menu/arrow_press.png');
}

#btn_overlay_back {
  display: none;
  width: 45px;
  height: 45px;
  background-size: contain;
  background-image: url('menu/back.png');
  background-color: transparent;
  background-repeat: no-repeat;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  transition: opacity 0.3s ease-in-out;
  background-position: center;
}

#btn_overlay_back:active {
  background-image: url('menu/back_press.png');
}

.sound_on {
  background-image: url('menu/soundon.png');
}

.sound_on:active {
  background-image: url('menu/soundon_press.png');
}

.sound_off {
  background-image: url('menu/soundoff.png');
}

.sound_off:active {
  background-image: url('menu/soundoff_press.png');
}

#btn_overlay_sound {
  display: none;
  width: 45px;
  height: 45px;
  background-size: contain;
  /* background-image: url('menu/soundoff.png'); */
  background-color: transparent;
  background-repeat: no-repeat;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  background-position: center;
  transition: opacity 0.3s ease-in-out;
}


/* #btn_overlay_sound:active {
  background-image: url('menu/soundoff_press.png');
} */

.fadein {
  opacity: 1;
}