/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
  background: #ffe;
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.no-js body {
  background: #eee url(/img/comingsoon-bg.jpg) center center;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
}

a {
  color: #111;
  font-weight: bold;
  font-size: 16pt;
  text-decoration: none;
  transition: 0.3s color ease-in-out;
}

a:hover {
    color: #062344;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.center img {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
  max-height: 85vh;
}

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

html.no-js a.center {
  display: flex;
}

a.center {
  display: none;
}

#floating-panel {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Open Sans", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  margin-left: -100px;
}


.widget-scene {
  pointer-events: none;
}

.gmnoprint {
    z-index: 9001 !important;
}

#map[data-pano-name="corner"] .machine,
#map[data-pano-name="around-corner"] .machine,
#map[data-pano-name='vending-machine'] .gmnoprint,
body.bad-end-text .gmnoprint {
    display: none;
}

.gmnoprint path:nth-child(4), .gmnoprint path:nth-child(5), .gmnoprint path:nth-child(6) {
  display: none;
}


.machine:before,
.machine .tomatochan {
  z-index: 10000;
  opacity: 0;
  content: '';
  background: url(/img/tomatochan-trans.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
}

.machine:before {
  transition: transform 1s ease-in-out;
}

.machine .tomatochan {
  transition: transform 10s cubic-bezier(1,.2,.96,.66);
}

body.bad-end .machine {
  overflow: visible !important;
}

body.bad-end .machine:before {
  display: none;
}

body.bad-end .machine .tomatochan {
  opacity: 1;
  display: block;
}

.machine .tomatochan:before {
  opacity: 0;
  transition: opacity 10s cubic-bezier(1,.2,.96,.66);
  z-index: 10001;
  content: '';
  background: url(/img/tomatochan-red.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
}

body.bad-end .machine .tomatochan:before {
  opacity: 0.8;
}

body.bad-end .machine .tomatochan {
  transform: scale(5) translate3D(15%, 10%, 0) !important;
}

body:before {
    content: '';
    background: red;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 5s ease-in-out;
}

body.bad-end:before {
    z-index: 10001;
    opacity: 1;
    transition: opacity 3s ease-out;
    transition-delay: 8s;
}

body.bad-end #textbox {
    opacity: 0;
    transition: opacity 5s ease-out;
}

#map.animating[data-pano-name='vending-machine'] .machine:before {
  opacity: 0;
  transform: translate3d(-100%, 10%, 0);
}

#map[data-pano-name='vending-machine'] .machine:before,
.machine.yahoo:before {
  opacity: 1;
  transform: translate3D(0,0,0);
}
#map[data-pano-name='vending-machine'] .machine:hover:before {
  transform: scale(1.03);
}

div.machine img {
    transform: translateY(5vh);
}

#map[data-pano-name='vending-machine'] div.machine img {
  transform: none;
}

#map div.transparent {
  display: none;
}

#textbox-wrapper {
  position: absolute;
  bottom: 3vh;
  width: 100%;
 
  display: flex;
  align-content: center;
  pointer-events: none;
}

#textbox {
  display: flex;
  flex-direction: column;

  position: relative;
  width: 50%;
  min-height: 16vh;
  min-width: 600px;
  z-index: 100001;
  background: rgba(0,0,0,0.3);
  border: 5px ridge #eef;
  margin: 0 auto;
  /*bottom: 3vh;*/
  /*margin-left: 25%;*/
  padding: 15px;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
  font-family: Roboto, sans-serif;
  font-size: 20pt;
  font-style: normal;
  font-weight: 400;
  transition: height 0.3s ease-out, opacity 1s ease-out;
  opacity: 1;
}

#textbox.self, #textbox.thinking {
  font-style: italic;
  font-weight: 500;
}

#textbox:before {
    transition: transform 0.2s ease-out;
    transform: scale(0);
}

#textbox[data-name]:before {
    content: attr(data-name);
    background: #000;
    position: absolute;
    top: -20px;
    left: -50px;
    padding: 0 10px;
    border: 2px ridge #eef;
    font-size: 16pt;
    font-weight: 500;
    font-style: italic;
    transform: scale(1);
}

#textbox .buttons {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-content: center;
  align-items: flex-end;
}

#textbox .buttons button {
  display: none;
  opacity: 0;
  font-size: 16pt;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px groove #ddf;
  padding: 3px 10px;
  font-weight: 500;
  font-style: italic;
  transition: all 0.1s ease-in-out;
  pointer-events: all;
}

#textbox .buttons button:hover {
  cursor: pointer;
  transform: scale(1.1);
  background: rgba(0,0,0,0.7);
}

#textbox[data-pano="vending-machine"] .buttons button {
  display: block;
}

#textbox[data-pano="vending-machine"].text-done .buttons button {
  opacity: 1;
}

body.bad-end #textbox[data-pano="vending-machine"].text-done .buttons button {
  visibility: hidden;
  pointer-events: none;
}

/* iPod */
#ipod {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  z-index: 100001;
  right: 2vw;
  bottom: 20vh;

  height: 520px;
  width: 310px;
  background-image: linear-gradient(to right, #e8e8e8, #c8c8c8);
  border: 1px solid;
  border-radius: 25px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 1em #555;
    transform: scale(0);
    transition: transform 0.3s ease-out;
}

body.listen #ipod {
    transform: scale(1);
}

body.listen #textbox .buttons {
  display: none;
}

#ipod .screen-outer {
  margin: auto;
  margin-top: 25px;
  padding: 3px 4px;
  width: 268px;
  height: 206px;
  background-color: #000000;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}
/*#ipod .screen-inner {
  width: 259px;
  height: 199px;
  background-color: #ffffff;
  border-radius: 5px;
}*/
#ipod .screen-inner-left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 3px 0px 0px 3px;
  position: relative;
  z-index: 1000;
}
#ipod .screen-inner-right {
  float: right;
  width: 50%;
  height: 100%;
  background-image: linear-gradient(to bottom, #aab7e4, #7a8790);
  border-radius: 0px 3px 3px 0px;
  position: relative;
  z-index: 999;
}
#ipod .shadow-right {
  box-shadow: 8px 0 20px -10px black;
}
#ipod .leftheader {
  background-image: linear-gradient(to bottom, #f0eff0, #9ba09a);
  height: 10%;
  width: 97%;
  border-style: solid;
   border-radius: 3px 0px 0px 0px;
  border-width: 0px 0px 1px 0px;
  border-color: #70747a;
  font-weight: bold;
  font-size: 13px;
  color: #000000;
  padding-left: 5px;
  margin: auto;
}

#ipod .header {
  background-image: linear-gradient(to bottom, #f0eff0, #9ba09a);
  height: 20px;
  width: 100%;
  padding: 0 7px 0 5px;
  border-bottom: 1px solid #70747a;
  font-weight: bold;
  font-size: 13px;
  color: #000000;
  margin: auto;
}

#ipod #ipod-header-title {
  width: 50%;
  float: left;
}

#ipod .header-icons {
    float: right;
    width: 40px;
    padding-top: 4px;
}

#ipod .header-icons .pause {
  display: none;
  width: 12px;
}

#ipod .header-icons .pause:before, #ipod .header-icons .pause:after {
  content: '';
  display: block;
  float: left;
  height: 9px;
  width: 3px;
  margin-left: 1px;
  background: linear-gradient(0deg, #1b3c61 0%, #4ecef6 39%, #4ecef6 62%, #1b3c61 100%);
  border-style: solid;
  border-width: 1px;
  border-color: #737179;
  box-sizing: content-box;
}

#ipod .header-icons .play {
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #737179;
    position: absolute;
    margin-left: 3px;
}
#ipod .header-icons .play:after{
    content:'';
    width: 0; 
    height: 0; 
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 9px solid #4ecef6;  
    position:absolute;
    top:-4px;
    right:0px;
}

#ipod.paused .header-icons .pause {
  display: block;
}

#ipod.paused .header-icons .play {
  display: none;
}

#ipod .battery {
  float: right;
  width: 19px;
  height: 9px;
  background-image: linear-gradient(to bottom, #7d7e92, #9da3c7);
  border-style: solid;
  border-width: 1px;
  border-color: #737179;
  position: relative;
  box-sizing: content-box;
}

#ipod .battery:before {
  content: '';
  display: block;
  float: left;
  width: 80%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ffffff, #3aa837);
}

#ipod .battery:after {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  position: absolute;
  top: 1px;
  right: -3px;
  margin: 0;

  background-image: linear-gradient(to bottom, #c7e1a5, #9da3c7);
  border-style: solid;
  border-width: 1px;
  border-color: #737179;
}
#ipod .battery-inner {
  float: left;
  width: 80%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ffffff, #3aa837);
}
#ipod .battery-right {
  margin-top: 5%;
  margin-right: 2%;
  float: right;
  width: 5px;
  height: 4px;
  background-image: linear-gradient(to bottom, #c7e1a5, #9da3c7);
  border-style: solid;
  border-width: 1px;
  border-color: #737179;
}
#ipod .menu-entry {
  width: 100%;
  height: 10%;
  font-weight: bold;
  font-size: 13px;
  color: #000000;
  padding-left: 5px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
#ipod .menu-entry:hover {
  background-image: linear-gradient(to bottom, #049bf4, #1c6dd6);
  color: #fff;
}
#ipod #wheel {
  margin: auto;
  margin-top: 50px;
  width: 190px;
  height: 190px;
  border-radius: 95px;
  background-color: #ffffff;
  position: relative;
  border-style: solid;
  border-color: #cacaca;
  border-width: 1px;
}
#ipod #wheel-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin-left: 62.5px;
  margin-top: 62.5px;
  background-image: linear-gradient(to right, #e8e8e8, #d8d8d8);
  width: 65px;
  height: 65px;
  border-radius: 32.5px;
  -webkit-box-shadow: inset 7px 9px 26px -13px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: inset 7px 9px 26px -13px rgba(0, 0, 0, 0.22);
  box-shadow: inset 7px 9px 26px -13px rgba(0, 0, 0, 0.22);
}
#ipod .wheel-text {
  width: 100%;
  height: 100%;
}
#ipod .table-inner {
  width: 190px/3;
  height: 190px/3;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#ipod svg {
  width: 20px;
  height: 20px;
}

#ipod .menu {
  text-align: center;
  vertical-align: top;
}
#ipod .left {
  text-align: left;
  vertical-align: middle;
}
#ipod .right {
  text-align: right;
  vertical-align: middle;
}
#ipod .bottom {
  text-align: center;
  vertical-align: bottom;
}
#ipod .color-button {
  fill: #bbbbbb;
  color: #bbbbbb;
}

#wheel .button {
  cursor: pointer;
}

#wheel .button:hover .color-button {
  fill: #000;
  color: #000;
}
#ipod .screen, #wheel, #textbox {
    cursor: default;
}

#progressbg {
  cursor: pointer;
}

/* iPod screen */


#ipod .screen {
  width: 260px;
  height: 200px;
  /*border: 1px solid #000;*/
  background: #fff;
  position: relative;
  overflow: hidden;
}

#track-info {
  position: absolute;
  left: 130px;
  top: 50px;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
}

#track {
  font-size: 15px;
}

#tracknum {
  margin-top: 10px;
  font-weight: normal;
}

#cover {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 10px;
  top: 30px;
  perspective: 500px;
}

#cover .art {
  width: 100%;
  height: 100%;
  background: url(/img/scene550.jpg);
  background-size: cover;
  transform: rotateY(15deg);
  -webkit-box-reflect: below 0 -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.1)));
}

/* Top Info */
#title {
  position: absolute;
  width: 100%;
  top: 170px;
  left: 0;
  font-size: 12px;
  line-height: 12px;
  color: #000;
 }

#timer {
  position: absolute;
  top: 0;
  width: 40px;
  text-align: center;
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);*/
}
#duration {
  position: absolute;
  top: 0;
  left: 220px;
  width: 40px;
  text-align: center;
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);*/
}

#progressbg {
  position: absolute;
  top: 170px;
  left: 40px;
  width: 180px;
  background-image: linear-gradient(rgb(255, 255, 255) 22%,
                                    rgb(251, 251, 251) 27.5%,
                                    rgb(249, 249, 249) 33%,
                                    rgb(245, 245, 245) 38.5%,
                                    rgb(242, 242, 242) 44%,
                                    rgb(240, 240, 240) 50%,
                                    rgb(231, 231, 231) 55.5%,
                                    rgb(231, 231, 231) 72%,
                                    rgb(232, 232, 232) 77.5%,
                                    rgb(232, 232, 232) 89%,
                                    rgb(235, 235, 235) 95%,
                                    rgb(239, 239, 239) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#progress {
  width: 0%;
  height: 12px;
  background-image: linear-gradient(rgb(199, 217, 251) 0%,
                                    rgb(181, 205, 239) 5.5%,
                                    rgb(171 ,197, 236) 11%,
                                    rgb(163, 193, 236) 16.5%,
                                    rgb(158, 189, 237) 22%,
                                    rgb(155, 188, 240) 27.5%,
                                    rgb(148, 185, 242) 33%,
                                    rgb(142, 182, 242) 38.5%,
                                    rgb(135, 178, 242) 44%,
                                    rgb(128, 177, 243) 50%,
                                    rgb(110, 164, 234) 55.5%,
                                    rgb(111, 167, 237) 61%,
                                    rgb(120, 175, 243) 66.5%,
                                    rgb(130, 182, 246) 72%,
                                    rgb(139, 188, 245) 77.5%,
                                    rgb(149, 196, 244) 83%,
                                    rgb(156, 202, 243) 89%,
                                    rgb(170, 210, 243) 95%,
                                    rgb(187, 214, 239) 100%);
}

#ipod.moving {
  cursor: grabbing;
  transform: scale(1.0) scaleZ(1.0) rotateX(15deg) translateZ(20px);
  transform-origin: 0% 0%;
  perspective: 1050;
  perspective-origin: 50% 50%;

  transition: transform 0.2s ease;
}

#corner-links {
  position: absolute;
  z-index: 1000;
  bottom: 25px;
}

#corner-links.left {
  left: 5px;
}

#corner-links.right {
  right: 5px;
}

#corner-links.right .sns {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

#corner-links.right .sns a:hover {
  opacity: 0.7;
}

#corner-links .atm-logo {
  opacity: 0.7;
}

#corner-links .atm-logo img {
  max-width: 66px;
}

#corner-links a, a.atm-logo {
  display: block;
  transition: all 0.2s ease-in-out;
}

#corner-links a:hover {
  opacity: 1;
}

#wheel-inner a.atm-logo {
  opacity: 0.2;
}

#wheel-inner a.atm-logo:hover {
  opacity: 0.5;
}
#wheel-inner .atm-logo img {
  max-width: 65px;
}

#nowplaying, #ipodmenu, #coverflow {
  transition: transform 0.2s linear;
}

#nowplaying, #coverflow, #credits {
  position: absolute;
  width: 100%;
  transform: translateX(0);
}

#stevejobs {
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

#ipodmenu {
  height: 100%;
  transform: translateX(-100%);
}

#ipod.show-menu #nowplaying {
  transform: translateX(100%);
}

#ipod.show-menu #ipodmenu {
  transform: translateX(0);
}

#ipod #credits {
  transform: translateX(100%);
}

#ipod.show-credits #credits {
  transform: translateX(0);
}

#ipod.show-credits #nowplaying {
  transform: translateX(100%);
}

#ipod #coverflow {
  transform: translateX(100%);
}

#ipod.show-coverflow #coverflow {
  transform: translateX(0);
}

#ipod.show-coverflow #nowplaying {
  transform: translateX(100%);
}

#ipod #nowplaying {
  transform: translateX(0);
}


#ipod-wallpaper {
  width: 130px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

#cover-bounce {
  width: 390px;
  height: 390px;
}

#cover-bounce .x {
  width: 100%;
  height: 100%;
  animation: xbounce 30s linear infinite alternate;
}

#cover-bounce .y {
  width: 100%;
  height: 100%;
  background: url(/img/scene550.jpg);
  background-size: cover;
  animation: ybounce 30s linear infinite alternate;
}

@keyframes xbounce {
  0% {
    transform: translateX( -245px );
  }
  100% {
    transform: translateX( 0  );
  }
}

@keyframes ybounce {
  0% {
    transform: translateY( 0 );
  }
  100% {
    transform: translateY( -190px );
  }
}

#ipodmenu .menu-entry, #credits .menu-entry {
  cursor: pointer;
  transition: none;
}

#ipod.set-volume #ipod-wallpaper {
  opacity: 0;
  pointer-events: none;
}

.coverflow {
  margin: 10px 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.coverflow:focus {
  outline: none;
}

.coverflow .cover {
  cursor: pointer;
  max-width: 100px;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, .5)));
  -webkit-backface-visibility: hidden;
}

#coverflow-info {
  display: block;
  transition: none;
  color: #000;
    position:   absolute;
    text-align:   center;
    width: 100%;
    height: 100%;
    padding-top: 120px;
    z-index:    1000;
    /*text-shadow:  0 0 8px white;*/
    font-size: 10pt;
    font-weight: bold;
  pointer-events: none;
}
#coverflow-info div {
  pointer-events: auto;
}

#credits .menu-entry {
  padding: 3px;
}

#credits .menu-entry div:last-child {
  font-weight: normal;
}

html.no-js #textbox-wrapper,
html.no-js #map,
html.no-js #ipod {
  display: none;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 1500px) {
  #ipod {
    right: 10vw;
  }
}

@media only screen and (max-width: 1070px) {
  #corner-links.right {
    position: initial;
  }
  #corner-links.right .scene {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1000;
  }
  #corner-links.right .sns {
    position: absolute;
    flex-direction: column-reverse;
    left: 5px;
    bottom: 50px;
    z-index: 1000;
  }

  #corner-links.right .sns img,
  #corner-links .atm-logo img {
    max-width: 32px;
  }
  #corner-links a {
    margin-top: 5px;
  }
}

@media only screen and (max-width: 700px) {
  #textbox {
    min-width: 70vw;
    font-size: 4vw;
  }

  #textbox .buttons button {
    font-size: 3.5vw;
    max-width: 25vw;
  }

  #corner-links.left {
    display: none;
  }

  #corner-links.right .sns {
    bottom: 0;
  }
}

@media only screen and (max-height: 600px) {
  body.listen #ipod {
    transform: scale(1);
    transform-origin: center right;
    bottom: auto;
    top: -20px;
    right: 0;
  }
}

@media only screen and (max-height: 450px) {
  body.listen #ipod {
    transform: scale(0.8) ;
    bottom: auto;
    top: -60px;
  }
}

/* Landscape */
@media screen 
and (max-width: 800px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
  body.listen #ipod {
    transform: scale(0.6);
    transform-origin: bottom right;
    top: auto;
    bottom: 0px;
  }

  #textbox {
    font-size: 2.5vw;
    min-width: auto;
    width: 60%;
    margin-right: 25vw;
  }

  #textbox[data-name]:before {
    font-size: 2vw;
  }
  div.machine img {
      transform: translateY(15vh);
  }
}

/* Portrait */
@media screen 
and (max-width: 800px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  body.listen #ipod {
    transform: scale(0.7);
    transform-origin: bottom right;
  }

  div.machine img {
      transform: translateY(15vh);
  }
}