body
{
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
  color: white;
}

main
{
  display: block;
}

button
{
  padding: 0;
  border-style: none;
  background-color: transparent;
  color: transparent;
}

.replace
{
  cursor: default;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

button.replace,
.replace.link
{
  cursor: pointer;
}

.top-frame
{
  height: 10vw;
  max-height: 3em;
  background-color: #3f86cd;
}

.top-frame > .elem
{
  height: 100%;
  width: 33%;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
}

.top-frame .platform
{
  height: 10vw;
  max-height: 3em;
  margin-left: .5em;
  background-image: url(img/ps4.png);
  background-size: auto 70%;
  background-position: center left;
}

.top-frame .title
{
  margin: 0;
  margin-left: -.5em;
  background-size: auto 70%;
  background-position: center;
}

.top-frame .title
{
  background-image: url(img/logo-ja.png);
}

.bottom-frame
{
  width: 100%;
  margin-bottom: 2em;
  position: fixed;
  bottom: 0;
  line-height: 3em;
  text-align: center;
}

.controls
{
  padding: .5em 1em;
  display: inline-block;
  background-color: rgba(41, 96, 190, .8);
  border-radius: 5px;
}

@media (min-width: 700px) and (min-height: 700px) {
  .controls
  {
    opacity: .4;
    transition-property: opacity;
    transition-duration: .15s;
  }

  .controls:hover
  {
    opacity: 1;
  }
}

.controls .control,
.controls .thumb
{
  background-image: url(img/icons.png);
}

.controls .control,
.controls .page
{
  width: 50px;
  height: 50px;
  margin: 0 .5em;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid rgb(153, 208, 246);
  border-radius: 4px;
  outline: 0;
  vertical-align: middle;
  background-color: rgba(41, 96, 190, .8);
  background-repeat: no-repeat;
  transition-property: background-color;
  transition-duration: .15s;
}

.controls .control[hidden],
.controls .track[hidden]
{
  display: none;
}

.controls .control:hover
{
  background-color: rgb(153, 208, 246);
}

.controls .reset
{
  background-position: center -350px;
}

.controls .fullscreen
{
  background-position: center -101px;
}

.controls .track
{
  width: 10em;
  height: 10px;
  margin: 0 .5em;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  background-color: #444;
  border-radius: 4px;
  transition-property: background-color;
  transition-duration: .15s;
}

.controls .track:hover
{
  background-color: rgb(153, 208, 246);
}

.controls .track:before
{
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
}

.controls .track:after
{
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
}

.controls .thumb
{
  width: 2em;
  height: 30px;
  position: relative;
  top: -6px;
  background-repeat: no-repeat;
  background-position: center -159px;
  cursor: pointer;
}

.controls .first
{
  background-position: center -51px;
}

.controls .previous
{
  background-position: center -299px;
}

.controls .page
{
  line-height: 50px;
  color: white;
  border: none;
  background-color: transparent;
}

.controls .next
{
  background-position: center -249px;
}

.controls .last
{
  background-position: center -200px;
}

.controls .link:not([href])
{
  opacity: .5;
  pointer-events: none;
  background-color: rgba(0, 0, 0, .8);
  cursor: default;
}

.controls .more
{
  font-size: smaller;
  color: #676767;
}

.port
{
  height: calc(100% - 3em);
  overflow: scroll;
  background-color: rgb(153, 208, 246);
  text-align: center;
}

.js-enabled .port
{
  overflow: hidden;
}

.port.loading
{
  background-image: url(img/loading.gif);
  background-position: center;
  background-repeat: no-repeat;
}

.js-enabled .port .manual
{
  max-width: 100%;
  max-height: 100%;
  cursor: move;
  transition-property: opacity;
  transition-duration: .3s;
}

.port .manual.animate
{
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  transition-duration: .2s;
}

.port.loading .manual
{
  opacity: 0;
}

:-webkit-full-screen .port
{
  height: 100%;
}

:-moz-full-screen .port
{
  height: 100%;
}

:-ms-fullscreen .port
{
  height: 100%;
}

:-webkit-full-screen .top-frame,
:-webkit-full-screen .menu
{
  display: none;
}

:-moz-full-screen .top-frame,
:-moz-full-screen .menu
{
  display: none;
}

:-ms-fullscreen .top-frame,
:-ms-fullscreen .menu
{
  display: none;
}

:-webkit-full-screen .controls .fullscreen
{
  background-position: center 0;
}

:-moz-full-screen .controls .fullscreen
{
  background-position: center 0;
}

:-ms-fullscreen .controls .fullscreen
{
  background-position: center 0;
}

@media (orientation: landscape) {
  .bottom-frame
  {
    width: auto;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 1em;
  }

  .controls
  {
    padding: 1em .5em; 
    position: absolute;
    top: 50%;
    left: 1em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .controls .control,
  .controls .page
  {
    margin: .5em 0;
    display: block;
  }

  .controls .track
  {
    width: 10px;
    height: 10em;
    margin: 1em auto;
    display: block;
  }

  .controls .track:before
  {
    left: -20px;
  }

  .controls .track:after
  {
    top: auto;
    right: auto;
    bottom: 0;
    left: -20px;
  }

  .controls .thumb
  {
    width: 30px;
    height: 2em;
    top: 0;
    left: -6px;
  }
}


@media (max-width: 700px), (max-height: 700px) {
  .controls .reset,
  .controls .first,
  .controls .last,
  .touch-enabled .track
  {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 700px) {
  .top-frame
  {
    display: none;
  }

  .port
  {
    height: 100%;
  }
}