/**
* Responsive webshop
*
* Main styling
*
* @author          Rembrand Le Compte (rembrand@marlon.be)
* @copyright       Marlon BVBA <http://www.marlon.be>
*/
@media screen {
  /*==========================================================
  
      imports for all mixins + global project variables
  
  ==========================================================*/
  /* fonts
  ==========================================================*/
  /* colors */
  /* units
  ==========================================================*/
  /* usefull snippets
  ==========================================================*/
  /* typgraphy
  ==========================================================*/
  /* animations
  ==========================================================*/
  /*==========================================================
  
      svg manipulation
  
  ==========================================================*/
  .map svg .style0 {
    fill: #ADDADB; }
  .map svg .style1 {
    fill: #DDD4BF; }
  .map svg .style1-0 {
    fill: #93278F; }
  .map svg .style2 {
    fill: #FFFFFF; }
  .map svg .style3 {
    fill: #6D462B; }
  .map svg .style4 {
    fill: #ED1E79; }
  .map svg .style5 {
    fill: #B20976; }
  .map svg .style6 {
    fill: #C1E9EA; }
  .map svg .style7 {
    fill: none; }
  .map svg .style8 {
    fill: #CEC2AA; }
  .map svg .style9 {
    fill: #C1B293; }

  .ship svg .style0 {
    fill: #FFFFFF; }
  .ship svg .style1 {
    fill: #DDD4BF; }
  .ship svg .style2 {
    fill: #6D462B; }

  .toaster .style0 {
    fill: #FFFFFF; }
  .toaster .style1 {
    fill: #DDD5C0; }
  .toaster .style2 {
    fill: #6E472C; }

  .scroll svg .style0 {
    fill: #ED237A; }
  .scroll svg .style1 {
    fill: #FFFFFF; }
  .scroll svg .style2 {
    fill: #DDD5C0; }
  .scroll svg .style3 {
    fill: #B21F78; }
  .scroll svg .style4 {
    fill: #6E472C; }

  .cloud-type-01 .style0,
  .cloud-type-02 .style0,
  .cloud-type-03 .style0,
  .cloud-type-04 .style0 {
    fill: #FFFFFF; }
  .cloud-type-01 .style1,
  .cloud-type-02 .style1,
  .cloud-type-03 .style1,
  .cloud-type-04 .style1 {
    fill: #DDD5C0; }
  .cloud-type-01 .style2,
  .cloud-type-02 .style2,
  .cloud-type-03 .style2,
  .cloud-type-04 .style2 {
    fill: #6E472C; }

  .bird-type-01 .style0,
  .bird-type-02 .style0,
  .bird-type-03 .style0,
  .bird-type-04 .style0 {
    fill: #FFFFFF; }
  .bird-type-01 .style1,
  .bird-type-02 .style1,
  .bird-type-03 .style1,
  .bird-type-04 .style1 {
    fill: #DDD5C0; }
  .bird-type-01 .style2,
  .bird-type-02 .style2,
  .bird-type-03 .style2,
  .bird-type-04 .style2 {
    fill: #6E472C; }

  .land-horizon .style0 {
    fill: #6E472C; }

  .mountain-left .style0 {
    fill: #FFFFFF; }
  .mountain-left .style1 {
    fill: #DDD5C0; }
  .mountain-left .style2 {
    fill: #6E472C; }

  .mountain-back .style0 {
    fill: #DDD5C0; }
  .mountain-back .style1 {
    fill: #6E472C; }

  .mountain-right .style0 {
    fill: #FFFFFF; }
  .mountain-right .style1 {
    fill: #DDD5C0; }
  .mountain-right .style2 {
    fill: #6E472C; }

  .nest .style0 {
    fill: #DDD5C0; }
  .nest .style1 {
    fill: #FFFFFF; }
  .nest .style2 {
    fill: #6E472C; }

  .egg .style0 {
    fill: #ED237A; }
  .egg .style1 {
    fill: #B21F78; }
  .egg .style2 {
    fill: #6E472C; }

  .cat .style0 {
    fill: #FFFFFF; }
  .cat .style1 {
    fill: #DDD5C0; }
  .cat .style2 {
    fill: #6E472C; }

  .wheat-left-bg .style0,
  .wheat-right-bg .style0 {
    fill: #FFFFFF; }
  .wheat-left-bg .style1,
  .wheat-right-bg .style1 {
    fill: #6E472C; }

  .wheat-left .style0 {
    fill: #6E472C; }
  .wheat-left .style1 {
    fill: #DDD5C0; }

  .wheat-right .style0 {
    fill: #FFFFFF; }
  .wheat-right .style1 {
    fill: #DDD5C0; }
  .wheat-right .style2 {
    fill: #6E472C; }

  .wheat-special .style0 {
    fill: #ED237A; }
  .wheat-special .style1 {
    fill: #DDD5C0; }
  .wheat-special .style2 {
    fill: #B21F78; }
  .wheat-special .style3 {
    fill: #6E472C; }

  .wheat-left-type-02 .style0 {
    fill: #6E472C; }
  .wheat-left-type-02 .style1 {
    fill: #DDD5C0; }

  .windmill .style0 {
    fill: #FFFFFF; }
  .windmill .style1 {
    fill: #DDD5C0; }
  .windmill .style2 {
    fill: #6E472C; }

  .barn .style0 {
    fill: #FFFFFF; }
  .barn .style1 {
    fill: #DDD5C0; }
  .barn .style2 {
    fill: #6E472C; }

  .fence .style0 {
    fill: #DDD5C0; }
  .fence .style1 {
    fill: #FFFFFF; }
  .fence .style2 {
    fill: #6E472C; }

  .cow-type-01 .style0,
  .cow-type-02 .style0 {
    fill: #FFFFFF; }
  .cow-type-01 .style1,
  .cow-type-02 .style1 {
    fill: #DDD5C0; }
  .cow-type-01 .style2,
  .cow-type-02 .style2 {
    fill: #6E472C; }

  .cow-special .style0 {
    fill: #FFFFFF; }
  .cow-special .style1 {
    fill: #ED237A; }
  .cow-special .style2 {
    fill: #B21F78; }
  .cow-special .style3 {
    fill: #DDD5C0; }
  .cow-special .style4 {
    fill: #6E472C; }

  .shore .style0 {
    fill: #DDD5C0; }
  .shore .style1 {
    fill: #FFFFFF; }
  .shore .style2 {
    fill: #6E472C; }

  .squid .style0 {
    fill: #FFFFFF; }
  .squid .style1 {
    fill: #DDD5C0; }
  .squid .style2 {
    fill: #6E472C; }

  .water-rock .style0 {
    fill: #FFFFFF; }
  .water-rock .style1 {
    fill: #C2E6E8; }
  .water-rock .style2 {
    fill: #DDD5C0; }
  .water-rock .style3 {
    fill: #6E472C; }

  .jungle-back .style0 {
    fill: #DDD5C0; }
  .jungle-back .style1 {
    fill: #6E472C; }

  .jungle-left .style0,
  .jungle-right .style0 {
    fill: #6E472C; }
  .jungle-left .style1,
  .jungle-right .style1 {
    fill: #FFFFFF; }
  .jungle-left .style2,
  .jungle-right .style2 {
    fill: #DDD5C0; }

  .temple-back .style0 {
    fill: #6E472C; }

  .temple-left .style0 {
    fill: #FFFFFF; }
  .temple-left .style1 {
    fill: #DDD5C0; }
  .temple-left .style2 {
    fill: #6E472C; }

  .temple-right .style0 {
    fill: #FFFFFF; }
  .temple-right .style1 {
    fill: #DDD5C0; }
  .temple-right .style2 {
    fill: none; }
  .temple-right .style3 {
    fill: #6E472C; }

  .kitchen-back-panel .style0,
  .kitchen-back-left .style0,
  .kitchen-back-right .style0 {
    fill: #FFFFFF; }
  .kitchen-back-panel .style1,
  .kitchen-back-left .style1,
  .kitchen-back-right .style1 {
    fill: #DDD4BF; }
  .kitchen-back-panel .style2,
  .kitchen-back-left .style2,
  .kitchen-back-right .style2 {
    fill: #6D462B; }

  .chocolate-special .style0 {
    fill: #ED237A; }
  .chocolate-special .style1 {
    fill: #B21F78; }
  .chocolate-special .style2 {
    fill: #DDD5C0; }
  .chocolate-special .style3 {
    fill: #6E472C; }

  .gorilla .style0 {
    fill: #FFFFFF; }
  .gorilla .style1 {
    fill: #6E472C; }

  .junk .style0,
  .tree .style0 {
    fill: #FFFFFF; }
  .junk .style1,
  .tree .style1 {
    fill: #DDD5C0; }
  .junk .style2,
  .tree .style2 {
    fill: #6E472C; }

  .oven .style0 {
    fill: #FFFFFF; }
  .oven .style1 {
    fill: #DDD5C0; }
  .oven .style2 {
    fill: #6E472C; }
  .oven .style3 {
    fill: #CEC2AA; }

  .drink-special .style0 {
    fill: #ED237A; }
  .drink-special .style1 {
    fill: #FFFFFF; }
  .drink-special .style2 {
    fill: #B21F78; }
  .drink-special .style3 {
    fill: #6E472C; }

  .drinks .style0 {
    fill: #FFFFFF; }
  .drinks .style1 {
    fill: #ED237A; }
  .drinks .style2 {
    fill: #DDD5C0; }
  .drinks .style3 {
    fill: #6E472C; }

  .captain-standalone .style0 {
    fill: #FFFFFF; }
  .captain-standalone .style1 {
    fill: #DDD5C0; }
  .captain-standalone .style2 {
    fill: #6E472C; }

  .cook .style0 {
    fill: #FFFFFF; }
  .cook .style1 {
    fill: #DDD5C0; }
  .cook .style2 {
    fill: #6E472C; }

  /*==========================================================
  
    Basic reset of html-elements & and styling typography
  
  ==========================================================*/
  /*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */
  /* HTML5 display definitions
  ========================================================== */
  /*
   * Corrects block display not defined in IE6/7/8/9 & FF3
   */
  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block; }

  /*
   * Corrects inline-block display not defined in IE6/7/8/9 & FF3
   */
  audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1; }

  /*
   * Prevents modern browsers from displaying 'audio' without controls
   */
  audio:not([controls]) {
    display: none; }

  /*
   * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
   * Known issue: no IE6 support
   */
  [hidden] {
    display: none; }

  /* Base
  ========================================================== */
  html {
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: 0.75rem;
    /* Base 16 font sizing*/
    line-height: 1.6;
    color: black;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased; }

  body {
    margin: 0;
    padding: 0; }

  button,
  input,
  select,
  textarea {
    font-family: Helvetica, Arial, sans-serif; }

  /* Sprites & background images
  ========================================================== */
  /* Common
  ========================================================== */
  .hide {
    position: absolute;
    display: block;
    padding: 0 !important;
    left: -9999px !important;
    height: 0px !important;
    line-height: 0px !important;
    background: none !important; }

  .hidden {
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    overflow: hidden; }

  /* Browser fixes
  ========================================================== */
  /* Clearfix updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
  .group:before,
  .group:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden; }

  .group:after {
    clear: both; }

  .group {
    zoom: 1; }

  /* IE < 8 */
  .clear {
    clear: both; }

  /* Links
  ========================================================== */
  a, a:visited {
    color: blue; }

  a:focus,
  .button input:focus {
    overflow: hidden;
    /* outline only the clickable part */
    outline: thin dotted; }

  a:hover, a:active {
    color: purple;
    outline: 0;
    -moz-outline-style: none; }

  a img {
    border: none; }

  /* Typography
  ========================================================== */
  hr {
    display: none; }

  /*lists
  ========================================================== */
  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none; }

  dd {
    margin: 0; }

  /* embedded content
  ========================================================== */
  img {
    display: block;
    border: 0;
    -ms-interpolation-mode: bicubic; }

  svg {
    display: block; }

  /*
   * Corrects overflow displayed oddly in IE9 
   */
  svg:not(:root) {
    overflow: hidden; }

  /* Figures
  ========================================================== */
  /*
   * Addresses margin not present in IE6/7/8/9, S5, O11
   */
  figure {
    margin: 0; }

  img {
    display: block; }

  /* Forms
  ========================================================== */
  form {
    margin: 0; }

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

  button, select, input, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle; }

  button, input {
    line-height: normal; }

  button {
    width: auto;
    /* or replace with a fixed width */ }

  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible; }

  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px; }

  input[type="search"] {
    -webkit-appearance: none; }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none; }

  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0; }

  input[type="radio"] {
    vertical-align: text-bottom; }

  input[type="checkbox"] {
    vertical-align: bottom; }

  .ie7 input[type="checkbox"] {
    vertical-align: baseline; }

  .ie6 input {
    vertical-align: text-bottom; }

  input:active {
    outline: none;
    -moz-outline-style: none; }

  input.idle,
  textarea.idle {
    color: #ccc; }

  textarea {
    overflow: auto;
    vertical-align: top; }

  /* buttons
  ========================================================== */
  .button {
    position: relative;
    display: inline-block;
    padding: 0 46px 0 17px;
    height: 36px;
    font-size: 11px;
    font-size: 0.6875rem;
    /* Base 16 font sizing*/
    font-weight: bold;
    line-height: 37px;
    text-align: center;
    text-decoration: none;
    color: #757575;
    background-color: #fff;
    border: 0 none;
    white-space: nowrap;
    overflow: visible; }

  /* actions
  ---------------------------------------------------------- */
  /*==========================================================
  
      Layout of the world's elements
  
  ========================================================== */
  /* Warnings
  ========================================================== */
  .warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding: 40px;
    color: #6d462b;
    font-size: 24px;
    font-size: 1.5rem;
    /* Base 16 font sizing*/
    background-color: #addadb;
    background-color: rgba(173, 218, 219, 0.95);
    z-index: 999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }
    .warning p {
      position: relative;
      text-align: center;
      top: 50%;
      padding: 40px;
      background-color: white; }

  /* Preloader
  ========================================================== */
  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding: 40px;
    color: #6d462b;
    font-size: 24px;
    font-size: 1.5rem;
    /* Base 16 font sizing*/
    background-color: #addadb;
    z-index: 999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }
    .preloader p {
      position: relative;
      text-align: center;
      top: 50%;
      padding: 40px;
      background-color: white; }

  /* World orientation
  ========================================================== */
  /* scale scene proportionally:
     if smaller than 4/3: container width matches viewport width
  */
  html {
    width: 100%;
    height: 100%;
    /*overflow-x: hidden;
    overflow-y: visible;*/ }

  body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: visible; }

  .world {
    position: relative;
    z-index: 0;
    min-height: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }

  footer {
    background-color: #ddd4bf;
    overflow: hidden;
    /*&:after {
        content: "";
        display: block;
        height: 50%;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: $color-spot4;
    }*/ }

  /* general elements
  ========================================================== */
  .wrapper,
  .graphic {
    position: absolute;
    height: 100%;
    -webkit-backface-visibility: hidden; }

  /* Ship
  ---------------------------------------------------------- */
  .ship {
    top: -77%;
    left: 16%;
    width: 26.17188%; }

  .is-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99; }
    .is-fixed.docked {
      position: absolute;
      top: 874%; }

  .ship-container {
    position: relative;
    margin: 0 auto; }
    .ship-container .ship {
      left: 33%;
      margin-top: 16%;
      margin-left: -13.08594%;
      width: 26.17188%;
      height: auto; }

  /* Pages
  ========================================================== */
  .page {
    clear: both;
    position: relative;
    width: 100%; }

  .container {
    position: relative;
    margin: 0 auto;
    width: 100vw;
    -webkit-backface-visibility: hidden; }

  /* Page 00: intro
  ---------------------------------------------------------- */
  .page-00 {
    background-color: #addadb;
    z-index: 20;
    /* swarm of toasters */
    /*.toaster {
        background-color: yellow;
    }

    .toaster-01 {
        top: (12.5% / 2);
        right: -11.5%;
        @include width(71.4);
    }

    .toaster-02 {
        top: (26% / 2);
        right: -22%;
        @include width(55.4);
    }

    .toaster-03 {
        top: (2% / 2);
        right: -18%;
        @include width(45.4);
    }*/
    /* clouds */ }
    .page-00 .container {
      height: 150vw; }
    .page-00 .scroll {
      top: 2.215%;
      left: 30.86%;
      width: 49.02344%; }
    .page-00 .toasters {
      top: -20%;
      right: -120%;
      width: 18.55469%;
      height: 18.22917%;
      /*.toaster {
          right: auto;
      }*/ }
      .page-00 .toasters .toaster-01 {
        top: 34%;
        left: 3%;
        width: 37.57895%; }
      .page-00 .toasters .toaster-02 {
        top: 71%;
        left: 69%;
        width: 29.15789%; }
      .page-00 .toasters .toaster-03 {
        top: 6%;
        left: 52%;
        width: 23.89474%; }
    .page-00 .cloud-01 {
      top: 22.25%;
      left: 97.5%; }
    .page-00 .cloud-02 {
      top: 27.25%;
      left: 83.5%; }
    .page-00 .cloud-03 {
      top: 30.25%;
      left: 103.5%; }
    .page-00 .cloud-04 {
      top: 33.25%;
      left: 13.5%; }
    .page-00 .cloud-05 {
      top: 7.25%;
      left: 17.5%; }
    .page-00 .cloud-06 {
      top: 12.25%;
      left: 3.5%; }
    .page-00 .cloud-07 {
      top: 15.25%;
      left: 33.5%; }
    .page-00 .cloud-08 {
      top: 2.25%;
      left: -23.5%; }
    .page-00 .cloud-09 {
      top: 4.25%;
      left: -37.5%; }
    .page-00 .cloud-10 {
      top: 2.25%;
      left: 135.5%; }
    .page-00 .cloud-11 {
      top: 4.25%;
      left: 123.5%; }
    .page-00 .cloud-12 {
      top: 62.25%;
      left: 67.5%; }
    .page-00 .cloud-13 {
      top: 67.25%;
      left: 43.5%; }
    .page-00 .cloud-14 {
      top: 70.25%;
      left: 73.5%; }
    .page-00 .cloud-15 {
      top: 73.25%;
      left: 7.5%; }

  .cloud-type-01 {
    top: 22.25%;
    right: 3.5%;
    width: 17.36328%; }

  .cloud-type-02 {
    width: 15.64453%; }

  .cloud-type-03 {
    width: 10.48828%; }

  .cloud-type-04 {
    width: 8.75%; }

  /* Page 01: sky
  ---------------------------------------------------------- */
  .page-01 {
    background-color: #addadb;
    z-index: 10; }
    .page-01 .container {
      height: 66.50391vw; }
    .page-01 .cloud-01 {
      top: 30%;
      right: 5.5%; }
    .page-01 .cloud-02 {
      top: 38.5%;
      left: 9%; }
    .page-01 .cloud-03 {
      top: 46%;
      right: -0.5%; }
    .page-01 .flock {
      width: 44.14063%;
      height: 29.36858%;
      right: -100%;
      top: 17%; }
      .page-01 .flock .bird-type-01 {
        top: 28%;
        left: 10%;
        width: 22.5885%; }
      .page-01 .flock .bird-type-02 {
        top: 0;
        left: 43%;
        width: 18.65044%; }
      .page-01 .flock .bird-type-03 {
        top: 59%;
        left: 42%;
        width: 17.98673%; }
      .page-01 .flock .bird-type-04 {
        top: 10%;
        left: 86%;
        width: 23.71681%; }

  /* Page 02: land
  ---------------------------------------------------------- */
  .page-02 {
    background-color: white;
    z-index: 20; }
    .page-02 .container {
      height: 173.14453vw; }
    .page-02 .land-horizon {
      top: -0.33%;
      left: -54.9%;
      width: 56.64063%; }
      .page-02 .land-horizon.right {
        top: 0;
        left: auto;
        right: -72%; }
    .page-02 .mountain-left {
      top: -7.67%;
      left: -19.8%;
      width: 56.83594%; }
    .page-02 .mountain-back {
      top: -11.33%;
      left: 25%;
      width: 24.21875%; }
    .page-02 .range {
      top: -16.67%;
      left: 46%;
      width: 75.97656%;
      height: 21.2634%; }
      .page-02 .range .egg {
        top: 0;
        left: 14.01028%;
        width: 8.09769%; }
      .page-02 .range .nest {
        top: 13%;
        left: 10.53985%;
        width: 18.8946%; }
      .page-02 .range .mountain-right {
        top: 6%;
        left: 0;
        width: 100%; }
    .page-02 .cat {
      width: 14.64844%; }
    .page-02 .cat-01 {
      top: 17.5%;
      left: 3.7%;
      width: 13.18359%; }
    .page-02 .cat-02 {
      top: 26%;
      right: -17.5%; }
    .page-02 .cat-03 {
      top: 32.33%;
      right: 21%; }
    .page-02 .wheat-left-bg,
    .page-02 .wheat-left,
    .page-02 .wheat-left-type-02 {
      width: 42.86133%; }
    .page-02 .wheat-right {
      width: 58.00781%; }
    .page-02 .wheat-left-bg {
      width: 42.86133%;
      top: 22.33%;
      left: -20%; }
    .page-02 .wheat-01 {
      top: 22.33%;
      left: -20%; }
    .page-02 .wheat-02 {
      width: 58.00781%;
      top: 30.7%;
      left: -37%; }
    .page-02 .wheat-right-bg {
      width: 89.35547%;
      top: 21%;
      left: 49.6%; }
    .page-02 .wheat-03 {
      top: 21%;
      left: 49.7%; }
    .page-02 .wheat-04 {
      top: 26.67%;
      right: -8.8%; }
    .page-02 .wheat-05 {
      top: 26.67%;
      left: 30%; }
    .page-02 .wheat-06 {
      top: 35.07%;
      left: 49.7%; }
    .page-02 .wheat-special {
      width: 19.62891%;
      top: 37.47%;
      left: 59.7%; }
    .page-02 .windmill {
      width: 23.33984%;
      top: 73.67%;
      left: -10.3%; }
    .page-02 .fence {
      width: 184.08203%;
      top: 84.33%;
      left: -37.0%; }
    .page-02 .barn {
      width: 39.66797%;
      top: 70.33%;
      right: -11.3%; }
    .page-02 .cow-01 {
      width: 13.30078%;
      top: 87.67%;
      left: -22.3%; }
    .page-02 .cow-02 {
      width: 14.69727%;
      top: 86.33%;
      left: 13.2%; }
    .page-02 .cow-special {
      width: 14.76562%;
      top: 86.33%;
      left: 53%; }

  /* Page 03: zee
  ---------------------------------------------------------- */
  .page-03 {
    background-color: #addadb;
    z-index: 30; }
    .page-03 .container {
      height: 203.125vw; }
    .page-03 .cow-01 {
      width: 14.69727%;
      top: -4.2%;
      left: 1.4%; }
    .page-03 .cow-02 {
      width: 13.51563%;
      top: -3%;
      right: 18.8%; }
    .page-03 .cow-03 {
      width: 13.51563%;
      top: -9.39%;
      right: -3.1%; }
    .page-03 .cow-04 {
      width: 13.53516%;
      top: -8.43%;
      right: -26%; }
    .page-03 .water-edge {
      width: 300%;
      height: 20%;
      position: absolute;
      top: 0;
      left: -100%;
      background-color: #addadb; }
    .page-03 .shore {
      width: 206.30859%;
      top: -0.3%;
      left: -59.7%; }
    .page-03 .water-rock-01 {
      top: 14%;
      left: 28%; }
    .page-03 .water-rock-02 {
      top: 13%;
      left: 90.8%; }
    .page-03 .squid {
      top: 20.5%;
      right: 1.5%;
      width: 51.21094%; }
    .page-03 .chocolate-special {
      top: 35%;
      right: 26.5%;
      width: 8.22266%; }

  .water-rock {
    width: 6.13281%; }

  /* Page 04: jungle
  ---------------------------------------------------------- */
  .page-04 {
    background-color: #ddd4bf;
    z-index: 40; }
    .page-04 .jungle-edge {
      left: -100%;
      bottom: 0;
      width: 300%;
      height: 50%;
      background-color: #6d462b; }
    .page-04 .container {
      height: 140.33203vw; }
    .page-04 .boss {
      width: 51.46484%;
      height: 39.38761%;
      left: 46%;
      top: -6%; }
      .page-04 .boss .gorilla {
        top: 0%;
        left: 0%;
        width: 100%; }
      .page-04 .boss .junk {
        top: 0%;
        left: 0%;
        width: 100%; }
      .page-04 .boss .tree {
        top: 0%;
        left: 0%;
        width: 100%; }
    .page-04 .drinks {
      left: 19.5%;
      top: 26%;
      width: 13.47656%; }
    .page-04 .drink-special {
      left: 69.7%;
      top: 29.5%;
      width: 4.76563%; }
    .page-04 .jungle-back {
      top: -4.67%;
      left: -5.5%;
      width: 110.35156%; }
    .page-04 .jungle-left {
      top: -7.47%;
      right: 86%;
      width: 83.50586%; }
    .page-04 .jungle-right {
      top: -5.53%;
      left: 81%;
      width: 86.38672%; }
    .page-04 .temple-back {
      top: 29.33%;
      left: -69.3%;
      width: 236.62109%; }

  /* Page 05: temple
  ---------------------------------------------------------- */
  .page-05 {
    background-color: #ddd4bf;
    z-index: 50; }
    .page-05 .container {
      height: 75vw; }
    .page-05 #dock {
      display: block;
      position: absolute;
      top: -97.8%;
      right: 20%;
      width: 50px;
      height: 50px; }
    .page-05 .kitchen-back-panel,
    .page-05 .kitchen-back-left {
      top: 26%;
      left: -58.2%;
      width: 211.60156%; }
    .page-05 .kitchen-table {
      top: 73.2%;
      left: -58.2%;
      width: 211.60156%;
      background-color: #ddd4bf; }
    .page-05 .kitchen-back-right {
      top: 26%;
      left: 100.5%;
      width: 53.54785%; }
    .page-05 .captain-standalone {
      width: 9.28711%;
      top: -43.3%;
      left: 34%;
      -webkit-transform: scale(0.59, 0.59);
      -moz-transform: scale(0.59, 0.59);
      -ms-transform: scale(0.59, 0.59);
      -o-transform: scale(0.59, 0.59);
      transform: scale(0.59, 0.59); }
    .page-05 .oven {
      top: 29.4%;
      left: 48%;
      width: 57.97852%; }
    .page-05 .temple-left {
      top: -48.2%;
      left: -51%;
      width: 140.05859%; }
    .page-05 .temple-right {
      top: -56.2%;
      right: -51.2%;
      width: 107.31445%; }
    .page-05 .kitchen-bottom {
      top: 91%;
      left: -64.3%;
      width: 236.62109%; }
    .page-05 .cook {
      top: 34.1%;
      left: 16.5%;
      width: 24.00391%; }

  /*==========================================================
      Media queries
  ========================================================== */
  /* Scaling
  ========================================================== */
  /* scale scene proportionally
     if screen 4/3 and wider: container width is 3/4 viewport height
  */
  /*==========================================================
  
      Keyframe animations a.o.
  
  ==========================================================*/
  /* Things we need to prepare for animation
  ==========================================================*/
  .frame {
    position: relative;
    display: none; }

  .frame-01 {
    display: block; }

  /* Slide clouds across the sky
  ==========================================================*/
  @-webkit-keyframes cloud-01 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2393.16239%, 0%, 0);
      -moz-transform: translate3d(-2393.16239%, 0%, 0);
      -ms-transform: translate3d(-2393.16239%, 0%, 0);
      -o-transform: translate3d(-2393.16239%, 0%, 0);
      transform: translate3d(-2393.16239%, 0%, 0); } }

  @-moz-keyframes cloud-01 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2393.16239%, 0%, 0);
      -moz-transform: translate3d(-2393.16239%, 0%, 0);
      -ms-transform: translate3d(-2393.16239%, 0%, 0);
      -o-transform: translate3d(-2393.16239%, 0%, 0);
      transform: translate3d(-2393.16239%, 0%, 0); } }

  @-ms-keyframes cloud-01 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2393.16239%, 0%, 0);
      -moz-transform: translate3d(-2393.16239%, 0%, 0);
      -ms-transform: translate3d(-2393.16239%, 0%, 0);
      -o-transform: translate3d(-2393.16239%, 0%, 0);
      transform: translate3d(-2393.16239%, 0%, 0); } }

  @keyframes cloud-01 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2393.16239%, 0%, 0);
      -moz-transform: translate3d(-2393.16239%, 0%, 0);
      -ms-transform: translate3d(-2393.16239%, 0%, 0);
      -o-transform: translate3d(-2393.16239%, 0%, 0);
      transform: translate3d(-2393.16239%, 0%, 0); } }

  @-webkit-keyframes cloud-02 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1590.90909%, 0%, 0);
      -moz-transform: translate3d(-1590.90909%, 0%, 0);
      -ms-transform: translate3d(-1590.90909%, 0%, 0);
      -o-transform: translate3d(-1590.90909%, 0%, 0);
      transform: translate3d(-1590.90909%, 0%, 0); } }

  @-moz-keyframes cloud-02 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1590.90909%, 0%, 0);
      -moz-transform: translate3d(-1590.90909%, 0%, 0);
      -ms-transform: translate3d(-1590.90909%, 0%, 0);
      -o-transform: translate3d(-1590.90909%, 0%, 0);
      transform: translate3d(-1590.90909%, 0%, 0); } }

  @-ms-keyframes cloud-02 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1590.90909%, 0%, 0);
      -moz-transform: translate3d(-1590.90909%, 0%, 0);
      -ms-transform: translate3d(-1590.90909%, 0%, 0);
      -o-transform: translate3d(-1590.90909%, 0%, 0);
      transform: translate3d(-1590.90909%, 0%, 0); } }

  @keyframes cloud-02 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1590.90909%, 0%, 0);
      -moz-transform: translate3d(-1590.90909%, 0%, 0);
      -ms-transform: translate3d(-1590.90909%, 0%, 0);
      -o-transform: translate3d(-1590.90909%, 0%, 0);
      transform: translate3d(-1590.90909%, 0%, 0); } }

  @-webkit-keyframes cloud-03 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1443.29897%, 0%, 0);
      -moz-transform: translate3d(-1443.29897%, 0%, 0);
      -ms-transform: translate3d(-1443.29897%, 0%, 0);
      -o-transform: translate3d(-1443.29897%, 0%, 0);
      transform: translate3d(-1443.29897%, 0%, 0); } }

  @-moz-keyframes cloud-03 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1443.29897%, 0%, 0);
      -moz-transform: translate3d(-1443.29897%, 0%, 0);
      -ms-transform: translate3d(-1443.29897%, 0%, 0);
      -o-transform: translate3d(-1443.29897%, 0%, 0);
      transform: translate3d(-1443.29897%, 0%, 0); } }

  @-ms-keyframes cloud-03 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1443.29897%, 0%, 0);
      -moz-transform: translate3d(-1443.29897%, 0%, 0);
      -ms-transform: translate3d(-1443.29897%, 0%, 0);
      -o-transform: translate3d(-1443.29897%, 0%, 0);
      transform: translate3d(-1443.29897%, 0%, 0); } }

  @keyframes cloud-03 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-1443.29897%, 0%, 0);
      -moz-transform: translate3d(-1443.29897%, 0%, 0);
      -ms-transform: translate3d(-1443.29897%, 0%, 0);
      -o-transform: translate3d(-1443.29897%, 0%, 0);
      transform: translate3d(-1443.29897%, 0%, 0); } }

  @-webkit-keyframes cloud-04 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2857.14286%, 0%, 0);
      -moz-transform: translate3d(-2857.14286%, 0%, 0);
      -ms-transform: translate3d(-2857.14286%, 0%, 0);
      -o-transform: translate3d(-2857.14286%, 0%, 0);
      transform: translate3d(-2857.14286%, 0%, 0); } }

  @-moz-keyframes cloud-04 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2857.14286%, 0%, 0);
      -moz-transform: translate3d(-2857.14286%, 0%, 0);
      -ms-transform: translate3d(-2857.14286%, 0%, 0);
      -o-transform: translate3d(-2857.14286%, 0%, 0);
      transform: translate3d(-2857.14286%, 0%, 0); } }

  @-ms-keyframes cloud-04 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2857.14286%, 0%, 0);
      -moz-transform: translate3d(-2857.14286%, 0%, 0);
      -ms-transform: translate3d(-2857.14286%, 0%, 0);
      -o-transform: translate3d(-2857.14286%, 0%, 0);
      transform: translate3d(-2857.14286%, 0%, 0); } }

  @keyframes cloud-04 {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2857.14286%, 0%, 0);
      -moz-transform: translate3d(-2857.14286%, 0%, 0);
      -ms-transform: translate3d(-2857.14286%, 0%, 0);
      -o-transform: translate3d(-2857.14286%, 0%, 0);
      transform: translate3d(-2857.14286%, 0%, 0); } }

  .cloud-01,
  .cloud-05,
  .cloud-08,
  .cloud-10,
  .cloud-12 {
    -webkit-animation: cloud-01 700s infinite linear;
    -moz-animation: cloud-01 700s infinite linear;
    -ms-animation: cloud-01 700s infinite linear;
    -o-animation: cloud-01 700s infinite linear;
    animation: cloud-01 700s infinite linear; }

  .cloud-02,
  .cloud-06,
  .cloud-09,
  .cloud-11,
  .cloud-13 {
    -webkit-animation: cloud-02 500s infinite linear;
    -moz-animation: cloud-02 500s infinite linear;
    -ms-animation: cloud-02 500s infinite linear;
    -o-animation: cloud-02 500s infinite linear;
    animation: cloud-02 500s infinite linear; }

  .cloud-03,
  .cloud-07,
  .cloud-14 {
    -webkit-animation: cloud-03 360s infinite linear;
    -moz-animation: cloud-03 360s infinite linear;
    -ms-animation: cloud-03 360s infinite linear;
    -o-animation: cloud-03 360s infinite linear;
    animation: cloud-03 360s infinite linear; }

  .cloud-04,
  .cloud-15 {
    -webkit-animation: cloud-04 500s infinite linear;
    -moz-animation: cloud-04 500s infinite linear;
    -ms-animation: cloud-04 500s infinite linear;
    -o-animation: cloud-04 500s infinite linear;
    animation: cloud-04 500s infinite linear; }

  /* flying toasters
  ==========================================================*/
  /*
  @include keyframes(toaster-01) {
  	$width: 1400/53*100%;
  	$height: 70%;
      0% {
          @include vendorize(transform,translate3d(0%,0%,0));
      }
  
      100% {
          @include vendorize(transform,translate3d(-$width*4, $height*2, 0));
      }
  }
  @include keyframes(toaster-02) {
  	$width: 1400/40*100%;
  	$height: 70%;
      0% {
          @include vendorize(transform,translate3d(0%,0%,0));
      }
  
      100% {
          @include vendorize(transform,translate3d(-$width*4, $height*2, 0));
      }
  }
  @include keyframes(toaster-03) {
  	$width: 1400/33*100%;
  	$height: 70%;
      0% {
          @include vendorize(transform,translate3d(0%,0%,0));
      }
  
      100% {
          @include vendorize(transform,translate3d(-$width*4, $height*2, 0));
      }
  }*/
  @-webkit-keyframes toasters {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2947.36842%, 800%, 0);
      -moz-transform: translate3d(-2947.36842%, 800%, 0);
      -ms-transform: translate3d(-2947.36842%, 800%, 0);
      -o-transform: translate3d(-2947.36842%, 800%, 0);
      transform: translate3d(-2947.36842%, 800%, 0); } }

  @-moz-keyframes toasters {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2947.36842%, 800%, 0);
      -moz-transform: translate3d(-2947.36842%, 800%, 0);
      -ms-transform: translate3d(-2947.36842%, 800%, 0);
      -o-transform: translate3d(-2947.36842%, 800%, 0);
      transform: translate3d(-2947.36842%, 800%, 0); } }

  @-ms-keyframes toasters {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2947.36842%, 800%, 0);
      -moz-transform: translate3d(-2947.36842%, 800%, 0);
      -ms-transform: translate3d(-2947.36842%, 800%, 0);
      -o-transform: translate3d(-2947.36842%, 800%, 0);
      transform: translate3d(-2947.36842%, 800%, 0); } }

  @keyframes toasters {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(-2947.36842%, 800%, 0);
      -moz-transform: translate3d(-2947.36842%, 800%, 0);
      -ms-transform: translate3d(-2947.36842%, 800%, 0);
      -o-transform: translate3d(-2947.36842%, 800%, 0);
      transform: translate3d(-2947.36842%, 800%, 0); } }

  /*
  .toaster-01 {
  	@include vendorize(animation, toaster-01 15s infinite linear); 
  }
  .toaster-02 {
  	@include vendorize(animation, toaster-02 15s infinite linear); 
  }
  .toaster-03 {
  	@include vendorize(animation, toaster-03 15s infinite linear); 
  }*/
  .toasters-active {
    -webkit-animation: toasters 15s infinite linear;
    -moz-animation: toasters 15s infinite linear;
    -ms-animation: toasters 15s infinite linear;
    -o-animation: toasters 15s infinite linear;
    animation: toasters 15s infinite linear; }

  /* Temple/Kitchen
  ==========================================================*/
  @-webkit-keyframes leave {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(0%, 50%, 0) scale(0.5);
      -moz-transform: translate3d(0%, 50%, 0) scale(0.5);
      -ms-transform: translate3d(0%, 50%, 0) scale(0.5);
      -o-transform: translate3d(0%, 50%, 0) scale(0.5);
      transform: translate3d(0%, 50%, 0) scale(0.5); } }

  @-moz-keyframes leave {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(0%, 50%, 0) scale(0.5);
      -moz-transform: translate3d(0%, 50%, 0) scale(0.5);
      -ms-transform: translate3d(0%, 50%, 0) scale(0.5);
      -o-transform: translate3d(0%, 50%, 0) scale(0.5);
      transform: translate3d(0%, 50%, 0) scale(0.5); } }

  @-ms-keyframes leave {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(0%, 50%, 0) scale(0.5);
      -moz-transform: translate3d(0%, 50%, 0) scale(0.5);
      -ms-transform: translate3d(0%, 50%, 0) scale(0.5);
      -o-transform: translate3d(0%, 50%, 0) scale(0.5);
      transform: translate3d(0%, 50%, 0) scale(0.5); } }

  @keyframes leave {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0);
      -moz-transform: translate3d(0%, 0%, 0);
      -ms-transform: translate3d(0%, 0%, 0);
      -o-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0); }

    100% {
      -webkit-transform: translate3d(0%, 50%, 0) scale(0.5);
      -moz-transform: translate3d(0%, 50%, 0) scale(0.5);
      -ms-transform: translate3d(0%, 50%, 0) scale(0.5);
      -o-transform: translate3d(0%, 50%, 0) scale(0.5);
      transform: translate3d(0%, 50%, 0) scale(0.5); } }

  @-webkit-keyframes go-right {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -moz-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -ms-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -o-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      transform: translate3d(0%, 0%, 0) scale(0.59, 0.59); }

    100% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(1, 1); } }

  @-moz-keyframes go-right {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -moz-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -ms-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -o-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      transform: translate3d(0%, 0%, 0) scale(0.59, 0.59); }

    100% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(1, 1); } }

  @-ms-keyframes go-right {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -moz-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -ms-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -o-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      transform: translate3d(0%, 0%, 0) scale(0.59, 0.59); }

    100% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(1, 1); } }

  @keyframes go-right {
    0% {
      -webkit-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -moz-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -ms-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      -o-transform: translate3d(0%, 0%, 0) scale(0.59, 0.59);
      transform: translate3d(0%, 0%, 0) scale(0.59, 0.59); }

    100% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(1, 1); } }

  @-webkit-keyframes go-left {
    0% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(-1, 1); }

    100% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); } }

  @-moz-keyframes go-left {
    0% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(-1, 1); }

    100% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); } }

  @-ms-keyframes go-left {
    0% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(-1, 1); }

    100% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); } }

  @keyframes go-left {
    0% {
      -webkit-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -moz-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -ms-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      -o-transform: translate3d(150%, 25.9%, 0) scale(-1, 1);
      transform: translate3d(150%, 25.9%, 0) scale(-1, 1); }

    100% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); } }

  @-webkit-keyframes jump {
    0% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); } }

  @-moz-keyframes jump {
    0% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); } }

  @-ms-keyframes jump {
    0% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); } }

  @keyframes jump {
    0% {
      -webkit-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -moz-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -ms-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      -o-transform: translate3d(-150%, 78%, 0) scale(-2, 2);
      transform: translate3d(-150%, 78%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); } }

  @-webkit-keyframes fall {
    0% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -moz-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -ms-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -o-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      transform: translate3d(-300%, 200%, 0) scale(-1, 1); } }

  @-moz-keyframes fall {
    0% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -moz-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -ms-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -o-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      transform: translate3d(-300%, 200%, 0) scale(-1, 1); } }

  @-ms-keyframes fall {
    0% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -moz-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -ms-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -o-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      transform: translate3d(-300%, 200%, 0) scale(-1, 1); } }

  @keyframes fall {
    0% {
      -webkit-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -moz-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -ms-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      -o-transform: translate3d(-200%, 50%, 0) scale(-2, 2);
      transform: translate3d(-200%, 50%, 0) scale(-2, 2); }

    100% {
      -webkit-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -moz-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -ms-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      -o-transform: translate3d(-300%, 200%, 0) scale(-1, 1);
      transform: translate3d(-300%, 200%, 0) scale(-1, 1); } }

  @-webkit-keyframes pop {
    0% {
      -webkit-transform: translate3d(0, 250%, 0);
      -moz-transform: translate3d(0, 250%, 0);
      -ms-transform: translate3d(0, 250%, 0);
      -o-transform: translate3d(0, 250%, 0);
      transform: translate3d(0, 250%, 0);
      z-index: 0; }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      z-index: 1; } }

  @-moz-keyframes pop {
    0% {
      -webkit-transform: translate3d(0, 250%, 0);
      -moz-transform: translate3d(0, 250%, 0);
      -ms-transform: translate3d(0, 250%, 0);
      -o-transform: translate3d(0, 250%, 0);
      transform: translate3d(0, 250%, 0);
      z-index: 0; }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      z-index: 1; } }

  @-ms-keyframes pop {
    0% {
      -webkit-transform: translate3d(0, 250%, 0);
      -moz-transform: translate3d(0, 250%, 0);
      -ms-transform: translate3d(0, 250%, 0);
      -o-transform: translate3d(0, 250%, 0);
      transform: translate3d(0, 250%, 0);
      z-index: 0; }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      z-index: 1; } }

  @keyframes pop {
    0% {
      -webkit-transform: translate3d(0, 250%, 0);
      -moz-transform: translate3d(0, 250%, 0);
      -ms-transform: translate3d(0, 250%, 0);
      -o-transform: translate3d(0, 250%, 0);
      transform: translate3d(0, 250%, 0);
      z-index: 0; }

    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      z-index: 1; } }

  .leave #captain {
    -webkit-animation: leave 1s forwards linear;
    -moz-animation: leave 1s forwards linear;
    -ms-animation: leave 1s forwards linear;
    -o-animation: leave 1s forwards linear;
    animation: leave 1s forwards linear;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%; }
  .leave .hand {
    display: none; }

  .pop {
    -webkit-animation: pop 0.2s forwards ease-in;
    -moz-animation: pop 0.2s forwards ease-in;
    -ms-animation: pop 0.2s forwards ease-in;
    -o-animation: pop 0.2s forwards ease-in;
    animation: pop 0.2s forwards ease-in; }

  .walking {
    -webkit-animation: go-right 1s 1 forwards linear, go-left 1.5s 1 forwards linear, jump 0.2s 1 forwards ease-in, fall 0.5s 1 forwards ease-in;
    -moz-animation: go-right 1s 1 forwards linear, go-left 1.5s 1 forwards linear, jump 0.2s 1 forwards ease-in, fall 0.5s 1 forwards ease-in;
    -ms-animation: go-right 1s 1 forwards linear, go-left 1.5s 1 forwards linear, jump 0.2s 1 forwards ease-in, fall 0.5s 1 forwards ease-in;
    -o-animation: go-right 1s 1 forwards linear, go-left 1.5s 1 forwards linear, jump 0.2s 1 forwards ease-in, fall 0.5s 1 forwards ease-in;
    animation: go-right 1s 1 forwards linear, go-left 1.5s 1 forwards linear, jump 0.2s 1 forwards ease-in, fall 0.5s 1 forwards ease-in;
    -webkit-animation-delay: 0s, 1s, 2.5s, 2.7s;
    -moz-animation-delay: 0s, 1s, 2.5s, 2.7s;
    -ms-animation-delay: 0s, 1s, 2.5s, 2.7s;
    -o-animation-delay: 0s, 1s, 2.5s, 2.7s;
    animation-delay: 0s, 1s, 2.5s, 2.7s; }

  #oven-open {
    display: none; } }
@media screen and (min-aspect-ratio: 4 / 3) {
  .warning {
    display: none; }

  .map {
    height: 572.00521vh; }

  .map-wrapper {
    margin: 0 auto;
    width: 133.33333vh; }

  .container {
    width: 133.33333vh; }

  /* Ship
  ---------------------------------------------------------- */
  .ship-container {
    width: 133.33333vh; }

  /* Pages
  ========================================================== */
  /* Page 00: intro
  ---------------------------------------------------------- */
  .page-00 .container {
    height: 200.0vh; }

  /* Page 01: sky
  ---------------------------------------------------------- */
  .page-01 .container {
    height: 88.67187vh; }

  /* Page 02: 
  ---------------------------------------------------------- */
  .page-02 .container {
    height: 230.85937vh; }

  /* Page 03: 
  ---------------------------------------------------------- */
  .page-03 .container {
    height: 270.83333vh; }

  /* Page 04: 
  ---------------------------------------------------------- */
  .page-04 .container {
    height: 187.10937vh; }

  /* Page 05: 
  ---------------------------------------------------------- */
  .page-05 .container {
    height: 100.0vh; }
  .page-05 .kitchen-bottom {
    display: none; }

  footer {
    display: none; } }
/* end screen */