/**
* Responsive webshop
*
* Skrollr stylesheets
*
* https://github.com/Prinzhorn/skrollr-stylesheets
*
* @author          Rembrand Le Compte (rembrand@marlon.be)
* @copyright       Marlon BVBA <http://www.marlon.be>
*/
/*==========================================================

    imports for all mixins + global project variables

==========================================================*/
/* fonts
==========================================================*/
/* colors */
/* units
==========================================================*/
/* usefull snippets
==========================================================*/
/* typgraphy
==========================================================*/
/* animations
==========================================================*/
.ship-container {
  -skrollr-animation-name: ship; }

.ship-docked {
  -skrollr-animation-name: ship-docked; }

.container {
  -skrollr-animation-name: container; }

@-skrollr-keyframes ship {
  0p {
    transform[cubic]: translate3d(-7%, 0, 0); }

  200p {
    transform[cubic]: translate3d(0%, 0, 0); }

  778p {
    transform[cubic]: translate3d(0%, 0, 0); }

  880p {
    transform[cubic]: translate3d(-4%, 0, 0); } }

@-skrollr-keyframes ship-docked {
  900p {
    transform[cubic]: translate3d(0%, 0, 0); }

  975p {
    transform[cubic]: translate3d(2%, 0, 0); } }

@-skrollr-keyframes container {
  0p {
    background-color: transparent; } }

/* moving mountains, align with egg
==========================================================*/
@-skrollr-keyframes mountain-back {
  0p {
    transform[linear]: translate3d(0, 0%, 0); }

  200p {
    transform[linear]: translate3d(0, 0%, 0); }

  290p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes mountain-left {
  0p {
    transform[linear]: translate3d(20%, 26%, 0); }

  200p {
    transform[linear]: translate3d(0%, 0%, 0); }

  290p {
    transform[linear]: translate3d(-8%, -1.5%, 0); } }

@-skrollr-keyframes horizon-left {
  0p {
    transform[linear]: translate3d(20%, 0%, 0); }

  200p {
    transform[linear]: translate3d(0%, 0%, 0); }

  290p {
    transform[linear]: translate3d(-8%, 0%, 0); } }

@-skrollr-keyframes horizon-right {
  0p {
    transform[linear]: translate3d(-20%, 0%, 0); }

  200p {
    transform[linear]: translate3d(0%, 0%, 0); }

  290p {
    transform[linear]: translate3d(7%, 0%, 0); } }

@-skrollr-keyframes range {
  0p {
    transform[linear]: translate3d(-20%, 55%, 0); }

  200p {
    transform[linear]: translate3d(0%, 0%, 0); }

  290p {
    transform[linear]: translate3d(7%, -14.8%, 0); } }

.page-02 .horizon {
  -skrollr-animation-name: horizon; }
.page-02 .land-horizon.left {
  -skrollr-animation-name: horizon-left; }
.page-02 .mountain-left {
  -skrollr-animation-name: mountain-left; }
.page-02 .mountain-back {
  -skrollr-animation-name: mountain-back; }
.page-02 .land-horizon.right {
  -skrollr-animation-name: horizon-left; }
.page-02 .range {
  -skrollr-animation-name: range; }

/* move clouds vs the mountains
==========================================================*/
@-skrollr-keyframes cloud-01-vert {
  100p {
    margin-top[linear]: 0%; }

  200p {
    margin-top[linear]: 0%; } }

@-skrollr-keyframes cloud-02-vert {
  100p {
    margin-top[linear]: 0%; }

  200p {
    margin-top[linear]: 0%; } }

@-skrollr-keyframes cloud-03-vert {
  100p {
    margin-top[linear]: 0%; }

  200p {
    margin-top[linear]: 0%; } }

.page-01 .cloud-01 {
  -skrollr-animation-name: cloud-01-vert; }
.page-01 .cloud-02 {
  -skrollr-animation-name: cloud-02-vert; }
.page-01 .cloud-03 {
  -skrollr-animation-name: cloud-03-vert; }

/* move wheat fields
==========================================================*/
@-skrollr-keyframes wheat-layer-00-left {
  200p {
    transform[linear]: translate3d(-5%, 34%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes wheat-layer-00-right {
  200p {
    transform[linear]: translate3d(-5%, 34%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes wheat-layer-01-left {
  200p {
    transform[linear]: translate3d(-2%, 38%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(-3%, -5%, 0); } }

@-skrollr-keyframes wheat-layer-01-right {
  200p {
    transform[linear]: translate3d(-8%, 38%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(3%, -5%, 0); } }

@-skrollr-keyframes wheat-layer-02-left {
  200p {
    transform[linear]: translate3d(2%, 46%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(-7%, -10%, 0); } }

@-skrollr-keyframes wheat-layer-02-right {
  200p {
    transform[linear]: translate3d(-12%, 46%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(7%, -10%, 0); } }

@-skrollr-keyframes wheat-layer-03-left {
  200p {
    transform[linear]: translate3d(-15%, 63%, 0); }

  310p {
    transform[linear]: translate3d(0%, 0%, 0); }

  385p {
    transform[linear]: translate3d(-10%, -15%, 0); } }

@-skrollr-keyframes wheat-layer-03-right {
  200p {
    transform[linear]: translate3d(-15%, 63%, 0); }

  310p {
    transform[linear]: translate3d(1%, 0%, 0); }

  385p {
    transform[linear]: translate3d(10%, -15%, 0); } }

@-skrollr-keyframes wheat-special {
  200p {
    margin: 80% 0 0 -5%; }

  310p {
    margin: 0% 0 0 0%; }

  385p {
    margin: -15% 0 0 5%; } }

.wheat-left-bg {
  -skrollr-animation-name: wheat-layer-00-left; }

.wheat-right-bg {
  -skrollr-animation-name: wheat-layer-00-right; }

.wheat-01 {
  -skrollr-animation-name: wheat-layer-01-left; }

.wheat-03 {
  -skrollr-animation-name: wheat-layer-01-right; }

.wheat-02 {
  -skrollr-animation-name: wheat-layer-02-left; }

.wheat-04 {
  -skrollr-animation-name: wheat-layer-02-right; }

.wheat-05 {
  -skrollr-animation-name: wheat-layer-02-right; }

.cat-02 {
  -skrollr-animation-name: wheat-layer-02-right; }

.wheat-special {
  -skrollr-animation-name: wheat-special; }

.wheat-06 {
  -skrollr-animation-name: wheat-layer-03-right; }

.cat-01 {
  -skrollr-animation-name: wheat-layer-00-left; }

.cat-02 {
  -skrollr-animation-name: wheat-layer-01-right; }

.cat-03 {
  -skrollr-animation-name: wheat-layer-02-right; }

/* moving farm
==========================================================*/
@-skrollr-keyframes fence {
  310p {
    transform[linear]: translate3d(3%, 0%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(-3%, 0%, 0); } }

@-skrollr-keyframes windmill {
  310p {
    transform[linear]: translate3d(23%, 5%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(-17%, -3%, 0); } }

@-skrollr-keyframes barn {
  310p {
    transform[linear]: translate3d(-17%, 5%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(11%, -3%, 0); } }

@-skrollr-keyframes cows-right {
  310p {
    transform[linear]: translate3d(-27%, 10%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(13%, -5%, 0); } }

@-skrollr-keyframes cows-right-layer-02 {
  310p {
    transform[linear]: translate3d(-27%, 20%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(27%, -7.5%, 0); } }

@-skrollr-keyframes cows-left {
  310p {
    transform[linear]: translate3d(33%, 10%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(13%, -5%, 0); } }

@-skrollr-keyframes cows-left-layer-02 {
  310p {
    transform[linear]: translate3d(33%, 20%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(27%, -7.5%, 0); } }

@-skrollr-keyframes shore {
  310p {
    transform[linear]: translate3d(0%, 20%, 0); }

  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  495p {
    transform[linear]: translate3d(3%, -7.5%, 0); } }

.fence {
  -skrollr-animation-name: fence; }

.windmill {
  -skrollr-animation-name: windmill; }

.barn {
  -skrollr-animation-name: barn; }

.page-02 .cow-01 {
  -skrollr-animation-name: cows-left; }

.page-02 .cow-02 {
  -skrollr-animation-name: cows-left; }

.page-02 .cow-special {
  -skrollr-animation-name: cows-right; }

.page-03 .cow-03 {
  -skrollr-animation-name: cows-right; }

.page-03 .cow-04 {
  -skrollr-animation-name: cows-right; }

.page-03 .cow-01 {
  -skrollr-animation-name: cows-left-layer-02; }

.page-03 .cow-02 {
  -skrollr-animation-name: cows-right-layer-02; }

.shore {
  -skrollr-animation-name: shore; }

/* Sea & squid
==========================================================*/
@-skrollr-keyframes water-edge {
  415p {
    transform[linear]: translate3d(0%, 0%, 0); }

  535p {
    transform[linear]: translate3d(0%, -55%, 0); } }

@-skrollr-keyframes water-rock {
  415p {
    transform[linear]: translate3d(0%, -4%, 0); }

  495p {
    transform[linear]: translate3d(3%, -14%, 0); } }

@-skrollr-keyframes squid {
  0p {
    opacity[linear]: 0; }

  495p {
    opacity[linear]: 0; }

  535p {
    opacity[linear]: 1; }

  615p {
    opacity[linear]: 0; } }

@-skrollr-keyframes chocolate {
  495p {
    margin-right: -3%; }

  535p {
    margin-right: 0%; } }

.water-edge {
  -skrollr-animation-name: water-edge; }

.water-rock {
  -skrollr-animation-name: water-rock; }

.squid {
  -skrollr-animation-name: squid; }

.chocolate-special {
  -skrollr-animation-name: chocolate; }

/* Jungle
==========================================================*/
@-skrollr-keyframes jungle-left {
  0p {
    transform[linear]: translate3d(80%, 5%, 0); }

  615p {
    transform[linear]: translate3d(80%, 5%, 0); }

  778p {
    transform[linear]: translate3d(0%, 0%, 0); }

  858p {
    transform[linear]: translate3d(40%, 0%, 0); } }

@-skrollr-keyframes jungle-right {
  0p {
    transform[linear]: translate3d(-80%, 5%, 0); }

  615p {
    transform[linear]: translate3d(-80%, 5%, 0); }

  778p {
    transform[linear]: translate3d(0%, 0%, 0); }

  858p {
    transform[linear]: translate3d(-40%, 0%, 0); } }

@-skrollr-keyframes temple-back {
  0p {
    transform[linear]: translate3d(0%, 110%, 0); }

  615p {
    transform[linear]: translate3d(0%, 110%, 0); }

  778p {
    transform[linear]: translate3d(0%, 0%, 0); }

  858p {
    transform[linear]: translate3d(0%, -20%, 0); } }

@-skrollr-keyframes boss {
  0p {
    transform[linear]: translate3d(90%, 60%, 0);
    z-index: 0; }

  615p {
    transform[linear]: translate3d(90%, 60%, 0);
    z-index: 0; }

  778p {
    transform[linear]: translate3d(0%, 0%, 0);
    z-index: 1; }

  858p {
    transform[linear]: translate3d(-20%, 0%, 0);
    z-index: 0; } }

@-skrollr-keyframes drinks {
  0p {
    margin-top: 5%;
    margin-left: -20%; }

  615p {
    margin-top: 5%;
    margin-left: -20%; }

  778p {
    margin-top: 0%;
    margin-left: 0%; }

  858p {
    margin-top: -5%;
    margin-left: 10%; } }

@-skrollr-keyframes drink-special {
  0p {
    margin-top: 50%;
    margin-left: 70%;
    z-index: 0; }

  615p {
    margin-top: 50%;
    margin-left: 70%;
    z-index: 0; }

  778p {
    margin-top: 0%;
    margin-left: 0%;
    z-index: 1; }

  858p {
    margin-top: -5%;
    margin-left: -10%;
    z-index: 0; } }

.jungle-left {
  -skrollr-animation-name: jungle-left; }

.jungle-right {
  -skrollr-animation-name: jungle-right; }

.temple-back {
  -skrollr-animation-name: temple-back; }

.jungle-edge {
  -skrollr-animation-name: temple-back; }

.boss {
  -skrollr-animation-name: boss; }

.drink-special {
  -skrollr-animation-name: drink-special; }

.drinks {
  -skrollr-animation-name: drinks; }

/* Temple
==========================================================*/
@-skrollr-keyframes temple-left {
  0p {
    transform[linear]: translate3d(10%, 40%, 0); }

  778p {
    transform[linear]: translate3d(10%, 40%, 0); }

  880p {
    transform[linear]: translate3d(0%, 0%, 0); }

  900p {
    transform[linear]: translate3d(0%, 0%, 0); }

  975p {
    transform[linear]: translate3d(2%, 0%, 0); } }

@-skrollr-keyframes temple-right {
  0p {
    transform[linear]: translate3d(-10%, 40%, 0); }

  778p {
    transform[linear]: translate3d(-10%, 40%, 0); }

  880p {
    transform[linear]: translate3d(0%, 0%, 0); }

  900p {
    transform[linear]: translate3d(0%, 0%, 0); }

  975p {
    transform[linear]: translate3d(-2%, 0%, 0); } }

.temple-left {
  -skrollr-animation-name: temple-left; }

.temple-right {
  -skrollr-animation-name: temple-right; }

/* Kitchen
==========================================================*/
@-skrollr-keyframes walking {
  0p {
    transform[linear]: translate3d(10%, 40%, 0); }

  900p {
    transform[linear]: translate3d(10%, 40%, 0); }

  975p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes equipment-left {
  0p {
    transform[linear]: translate3d(10%, 40%, 0); }

  900p {
    transform[linear]: translate3d(10%, 40%, 0); }

  975p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes equipment-right {
  0p {
    transform[linear]: translate3d(-10%, 40%, 0); }

  900p {
    transform[linear]: translate3d(-10%, 40%, 0); }

  975p {
    transform[linear]: translate3d(0%, 0%, 0); } }

@-skrollr-keyframes oven {
  0p {
    transform[linear]: translate3d(0%, 60%, 0); }

  900p {
    transform[linear]: translate3d(0%, 60%, 0); }

  975p {
    transform[linear]: translate3d(0%, 0%, 0); } }

.kitchen-back-panel {
  -skrollr-animation-name: equipment-left; }

.kitchen-back-left {
  -skrollr-animation-name: equipment-left; }

.kitchen-table {
  -skrollr-animation-name: equipment-left; }

.kitchen-back-right {
  -skrollr-animation-name: equipment-right; }

.oven {
  -skrollr-animation-name: oven; }