@media (min-width: 1px) {
  body::before {
    content: '{"phone":{"value": "1px", "active": true}, "tablet":{"value": "600px", "active": false}, "tablet-landscape":{"value": "900px", "active": false}, "desktop":{"value": "1200px", "active": false}, "widescreen":{"value": "1800px", "active": false}}';
    display: block;
    height: 0;
    overflow: hidden;
    width: 0; } }

@media (min-width: 600px) {
  body::before {
    content: '{"phone":{"value": "1px", "active": true}, "tablet":{"value": "600px", "active": true}, "tablet-landscape":{"value": "900px", "active": false}, "desktop":{"value": "1200px", "active": false}, "widescreen":{"value": "1800px", "active": false}}';
    display: block;
    height: 0;
    overflow: hidden;
    width: 0; } }

@media (min-width: 900px) {
  body::before {
    content: '{"phone":{"value": "1px", "active": true}, "tablet":{"value": "600px", "active": true}, "tablet-landscape":{"value": "900px", "active": true}, "desktop":{"value": "1200px", "active": false}, "widescreen":{"value": "1800px", "active": false}}';
    display: block;
    height: 0;
    overflow: hidden;
    width: 0; } }

@media (min-width: 1200px) {
  body::before {
    content: '{"phone":{"value": "1px", "active": true}, "tablet":{"value": "600px", "active": true}, "tablet-landscape":{"value": "900px", "active": true}, "desktop":{"value": "1200px", "active": true}, "widescreen":{"value": "1800px", "active": false}}';
    display: block;
    height: 0;
    overflow: hidden;
    width: 0; } }

@media (min-width: 1800px) {
  body::before {
    content: '{"phone":{"value": "1px", "active": true}, "tablet":{"value": "600px", "active": true}, "tablet-landscape":{"value": "900px", "active": true}, "desktop":{"value": "1200px", "active": true}, "widescreen":{"value": "1800px", "active": true}}';
    display: block;
    height: 0;
    overflow: hidden;
    width: 0; } }

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

.u-accessibility {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }

.u-line-break:after {
  content: '\A';
  white-space: pre; }

.u-clearfix:after {
  content: "";
  display: table;
  clear: both; }

.u-vh, .crayons, html, body {
  position: absolute;
  width: 100vw;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100); }

/*
// iPad with portrait orientation
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .foo {
        height: 1024px;
    }
}

// iPad with landscape orientation
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    .foo {
        height: 768px;
    }
}
*/
.progress__perc span:nth-child(2) {
  font-family: 'Avenir Next Condensed'; }

html {
  font-family: 'Avenir Next Condensed Demi';
  font-weight: 600; }

.error__heading, .instructions__heading, .loading__heading, .progress__perc span:nth-child(1), .welcome__heading {
  font-family: 'Spacecard'; }

.btn, .camera__trigger, .camera__retry, .camera__use-photo, .camera__take-photo {
  font-family: 'Balbeer Rustic'; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-BoldItalic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-Bold.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-Heavy.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-Regular.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-MediumItalic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-Italic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-Medium.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Avenir Next Condensed';
  src: url("../fonts/AvenirNextCondensed-HeavyItalic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-HeavyItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed Demi';
  src: url("../fonts/AvenirNextCondensed-DemiBold.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-DemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Avenir Next Condensed Demi';
  src: url("../fonts/AvenirNextCondensed-DemiBoldItalic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-DemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed Ultra';
  src: url("../fonts/AvenirNextCondensed-UltraLightItalic.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-UltraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: 'Avenir Next Condensed Ultra';
  src: url("../fonts/AvenirNextCondensed-UltraLight.woff2") format("woff2"), url("../fonts/AvenirNextCondensed-UltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: 'Balbeer Rustic';
  src: url("../fonts/Balbeer-Rustic.woff2") format("woff2"), url("../fonts/Balbeer-Rustic.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Spacecard';
  src: url("../fonts/Spacecard.woff2") format("woff2"), url("../fonts/Spacecard.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

.l-container {
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 1219px) {
    .l-container {
      width: 100%; } }
  @media (min-width: 1220px) {
    .l-container {
      max-width: 1180px; } }

.l-gutters {
  padding: 0 10px; }
  @media (min-width: 600px) {
    .l-gutters {
      padding: 0 20px; } }

@-webkit-keyframes anim-shake-frames {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
            transform: translate(2px, 1px) rotate(0deg); }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
            transform: translate(0px, 2px) rotate(0deg); }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg); }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
            transform: translate(2px, 1px) rotate(-1deg); }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
            transform: translate(2px, 2px) rotate(0deg); }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg); } }

@keyframes anim-shake-frames {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
            transform: translate(2px, 1px) rotate(0deg); }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
            transform: translate(0px, 2px) rotate(0deg); }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg); }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
            transform: translate(2px, 1px) rotate(-1deg); }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
            transform: translate(2px, 2px) rotate(0deg); }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg); } }

@-webkit-keyframes radial-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5); }
  100% {
    -webkit-box-shadow: 0 0 0 30px transparent;
            box-shadow: 0 0 0 30px transparent; } }

@keyframes radial-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5); }
  100% {
    -webkit-box-shadow: 0 0 0 30px transparent;
            box-shadow: 0 0 0 30px transparent; } }

form.form-invalid .is-invalid {
  -webkit-animation-name: anim-shake-frames;
          animation-name: anim-shake-frames;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?r02yuu");
  src: url("../fonts/icomoon.eot?r02yuu#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?r02yuu") format("truetype"), url("../fonts/icomoon.woff?r02yuu") format("woff"), url("../fonts/icomoon.svg?r02yuu#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-info:before {
  content: "\e902"; }

.icon-location:before {
  content: "\e904"; }

.icon-search:before {
  content: "\e600"; }

.icon-hamburger:before {
  content: "\e601"; }

.icon-chook:before {
  content: "\e604"; }

.icon-social-facebook:before {
  content: "\e90a"; }

.icon-social-facebook2:before {
  content: "\e609"; }

.icon-social-email:before {
  content: "\e60b"; }

.icon-social-googleplus-alt:before {
  content: "\ea8b"; }

.icon-social-googleplus:before {
  content: "\e80a"; }

.icon-social-twitter:before {
  content: "\e80d"; }

.icon-social-whatsapp:before {
  content: "\e900"; }

.icon-social-pinterest:before {
  content: "\e901"; }

.icon-social-instagram:before {
  content: "\ea92"; }

.icon-close-light:before {
  content: "\e903"; }

.icon-close:before {
  content: "\e602"; }

.icon-arrow-right-light:before {
  content: "\e905"; }

.icon-arrow-left-light:before {
  content: "\e906"; }

.icon-arrow-down-light:before {
  content: "\e907"; }

.icon-arrow-up-light:before {
  content: "\e908"; }

.icon-arrow-left:before {
  content: "\e605"; }

.icon-arrow-right:before {
  content: "\e606"; }

.icon-arrow-down:before {
  content: "\e607"; }

.icon-arrow-up:before {
  content: "\e608"; }

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  -webkit-font-feature-settings: "kern", "liga", "tnum";
          font-feature-settings: "kern", "liga", "tnum";
  table-layout: fixed;
  width: 100%; }

th {
  font-weight: 600;
  text-align: left; }

tr,
td,
th {
  vertical-align: middle; }

html {
  color: #000;
  line-height: 1.4; }

::-moz-selection {
  background: rgba(0, 0, 0, 0.8);
  color: #fff; }

::selection {
  background: rgba(0, 0, 0, 0.8);
  color: #fff; }

hr {
  border-bottom: 1px solid #f16649;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 30px 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0; }

p {
  margin: 0; }

.p {
  line-height: 1.4em;
  font-size: 24px;
  margin-bottom: 24px; }

/* Container used for styling the custom select, the buttom class below adds the
 * bg gradient, corners, etc. */
.custom-select, .form__select {
  position: relative;
  display: block; }

/* This is the native select, we're making everything but the text invisible so
 * we can see the button styles in the wrapper */
.custom-select select, .form__select select {
  width: 100%;
  margin: 0;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* Font size must be 16px to prevent iOS page zoom on focus */
  font-size: 16px; }

/* Custom arrow sits on top of the select - could be an image, SVG, icon font,
 * etc. or the arrow could just baked into the bg image on the select. */
.custom-select::after, .form__select::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 1em;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events: none;
  display: none; }

/* Firefox <= 34 has a false positive on @supports( -moz-appearance: none )
 * @supports ( mask-type: alpha ) is Firefox 35+
 */
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) or ((-moz-appearance: none) and (mask-type: alpha)) { {
    /* Show custom arrow */
    /* Remove select styling */ }
  .custom-select::after, .form__select::after {
    display: block; }
  .custom-select select, .form__select select {
    padding-right: 2.3em;
    /* Match-01 */
    /* inside @supports so that iOS <= 8 display the native arrow */
    background: none;
    /* Match-04 */
    /* inside @supports so that Android <= 4.3 display the native arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; } }

/* Adds Firefox < 35 support */
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
  /* Warning: this kills the focus outline style */
  /* Make the native select extra wide so the arrow is clipped. 1.5em seems to be enough to safely clip it */
  /* Firefox 35+ that supports hiding the native select can have a proper 100% width, no need for the overflow clip trick */
  .custom-select, .form__select {
    overflow: hidden; }
  .custom-select::after, .form__select::after {
    display: block; }
  .custom-select select, .form__select select {
    overflow: -moz-hidden-unscrollable;
    padding-right: .4em;
    background: none;
    /* Match-04 */
    border: 1px solid transparent;
    /* Match-05 */
    /* Firefox < 4 */
    min-width: 6em;
    width: 130%;
    /* Firefox 4-15 */
    min-width: -moz-calc(0em);
    width: -moz-calc(100% + 2.4em);
    /* Firefox 16+ */
    min-width: calc(0em);
    width: calc(100% + 2.4em); }
  @supports (mask-type: alpha) {
    .custom-select, .form__select {
      overflow: visible; }
    .custom-select select, .form__select select {
      -moz-appearance: none;
      width: 100%;
      padding-right: 2em;
      /* Match-01 padding-right */ } } }

/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring, .form__select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000; }

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance. Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .custom-select select::-ms-expand, .form__select select::-ms-expand {
    display: none; }
  .custom-select select:focus, .form__select select:focus {
    border-color: #aaa;
    /* Match-03 */ }
  .custom-select select:focus::-ms-value, .form__select select:focus::-ms-value {
    background: transparent;
    color: #222;
    /* Match-02*/ }
  .custom-select select, .form__select select {
    padding-right: 2em;
    /* Match-01 */
    background: none;
    /* Match-04 */
    border: 1px solid transparent;
    /* Match-05 */ }
  .custom-select::after, .form__select::after {
    display: block; } }

textarea:focus, input:focus {
  outline: 0; }

input,
select,
textarea {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

input[type=checkbox] {
  -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
          appearance: checkbox; }

textarea {
  resize: vertical; }

input, select {
  border-radius: 0; }

input:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:hover, select:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill:active {
  -webkit-transition: color 9999s ease-out, background-color 999s ease-out;
  -webkit-transition-delay: 9999s; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
  -moz-appearance: textfield; }

.iphone select, .iphone textarea, .iphone input[type="text"], .iphone input[type="password"], .iphone input[type="datetime"], .iphone input[type="datetime-local"], .iphone input[type="date"], .iphone input[type="month"], .iphone input[type="time"], .iphone input[type="week"], .iphone input[type="number"], .iphone input[type="email"], .iphone input[type="url"], .iphone input[type="search"], .iphone input[type="tel"], .iphone input[type="color"] {
  font-size: 16px; }

input[type=text],
input[type=number],
input[type=email] select,
textarea {
  display: block;
  width: 100%; }

.form__field input, .form__select select, .form__text-area textarea {
  font-size: 16px;
  padding-bottom: 4px; }

.form__field,
.form__select,
.form__checkbox,
.form__radio,
.form__text-area {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;
  border-bottom: 1px solid #f16649;
  margin-bottom: 15px; }
  .form__field.is-invalid,
  .form__select.is-invalid,
  .form__checkbox.is-invalid,
  .form__radio.is-invalid,
  .form__text-area.is-invalid {
    margin-bottom: 30px; }

.form__checkbox + .form__checkbox,
.form__radio + .form__radio {
  margin-top: -15px; }

/*
%form--btm-border-animated {
	&:before {
		transition: $formTransition;
		content: '';
		position: absolute;
		z-index: 1;
		bottom: 0;
		width: 0%;
		height: 1px;
		background-color: $focus-col;
	}

	&.is-invalid:before {
		background-color: $invalid-col;
		width: 100%;
	}
	
	&.has-focus:before {
		width: 100%;
		background-color: $focus-col;
	}
}
*/
.form__select {
  padding-left: 10px; }
  .form__select.has-value label {
    visibility: hidden; }
    .form__select.has-value label + select {
      color: inherit; }
  .form__select.has-focus {
    border-bottom: 1px solid #000; }
    .form__select.has-focus label {
      color: #000; }
  .form__select label {
    color: grey;
    padding-left: inherit; }
    .form__select label + select {
      color: white; }
  .form__select:after {
    pointer-events: none;
    content: '';
    background-image: url(../img/select-arrow.svg);
    background-repeat: no-repeat;
    background-position: 100% 30%;
    background-size: 16px;
    right: 16px;
    top: -2px;
    width: 16px;
    height: 100%;
    -webkit-transition: 0.15s opacity linear;
    transition: 0.15s opacity linear; }
  .form__select.is-loading:after {
    opacity: 0; }
  .form__select .spinner, .form__select .btn__spinner {
    width: 20px;
    height: 20px;
    right: 14px;
    top: -3px;
    opacity: 0;
    -webkit-transition: 0.15s opacity linear;
    transition: 0.15s opacity linear; }
    .form__select .spinner:after, .form__select .btn__spinner:after {
      border: 2px rgba(241, 102, 73, 0.25) solid;
      border-top: 2px rgba(241, 102, 73, 0.8) solid; }
  .form__select.is-loading .spinner, .form__select.is-loading .btn__spinner {
    opacity: 1; }

.form__field-label {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  top: 0;
  left: 0;
  line-height: normal;
  font-size: 16px; }

.form__text-area-label {
  line-height: normal;
  font-size: 16px;
  display: block; }

.form__ctrl-label {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 35px;
  font-size: 16px; }

.form__checkbox,
.form__radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  cursor: pointer; }
  .form__checkbox::-moz-selection,
  .form__radio::-moz-selection {
    background: transparent; }
  .form__checkbox::selection,
  .form__radio::selection {
    background: transparent; }
  .form__checkbox input + .form__ctrl-ui,
  .form__radio input + .form__ctrl-ui {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    background: white;
    content: '';
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    border: 1px solid #aeaeae;
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.15);
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.15); }
    .form__checkbox input + .form__ctrl-ui::after,
    .form__radio input + .form__ctrl-ui::after {
      content: "";
      display: block;
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transition: all 0.2s;
      transition: all 0.2s; }
  .form__checkbox input:checked + .form__ctrl-ui::after,
  .form__radio input:checked + .form__ctrl-ui::after {
    -webkit-transform: scale(1);
            transform: scale(1); }
  .form__checkbox input,
  .form__radio input {
    position: absolute;
    cursor: pointer;
    opacity: 0; }

.form__checkbox input + .form__ctrl-ui {
  border-radius: 2px; }
  .form__checkbox input + .form__ctrl-ui::after {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
    background-size: contain;
    width: 1.5em;
    height: 1.5em; }

.form__radio input + .form__ctrl-ui {
  border-radius: 100%; }
  .form__radio input + .form__ctrl-ui::after {
    border-radius: 100%;
    margin: .45em;
    width: .6em;
    height: .6em; }

.form__radio input:checked + .form__ctrl-ui::after {
  background: #333333; }

.form__birth-date:before {
  content: '';
  display: table; }

.form__birth-date:after {
  content: '';
  display: table;
  clear: both; }
  .form__birth-date > .form__select {
    width: calc(99.9% * 1/3 - (15px - 15px * 1/3)); }
  .form__birth-date > .form__select:nth-child(1n) {
    float: left;
    margin-right: 15px;
    clear: none; }
  .form__birth-date > .form__select:last-child {
    margin-right: 0; }
  .form__birth-date > .form__select:nth-child(3n) {
    margin-right: 0;
    float: right; }
  .form__birth-date > .form__select:nth-child(3n + 1) {
    clear: both; }

.form__field-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 12px;
  pointer-events: none; }
  .is-invalid .form__field-count {
    color: crimson; }

.form__error {
  color: crimson;
  margin: 20px 0; }

.form__field-error {
  position: absolute;
  bottom: -16px;
  left: 0;
  font-size: 11px;
  color: crimson; }
  .form__radio .form__field-error,
  .form__checkbox .form__field-error {
    bottom: -22px; }

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  padding: 0; }

.btn, .camera__trigger, .camera__retry, .camera__use-photo, .camera__take-photo {
  font-size: 20px;
  border: 3px solid black;
  position: relative;
  z-index: 1;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-transition: all 0.14s linear;
  transition: all 0.14s linear;
  color: #FFF;
  background-color: white;
  padding: 9px 0px 7px;
  border-radius: 10px;
  /*
    &[disabled],
    &.is-disabled {
        cursor: not-allowed;
        color: $button-text-disabled;
        background-color: $button-bg-disabled !important;
        opacity: 0.8;
        pointer-events: none;

        // turn off loading
        &:after {
            display: none;
        }
    }

    &.is-selected,
    &:hover,
    &:focus {
        color: $button-text-on;
        background-color: $button-bg-on;

        &:after {
            background-color: inherit;
        }
    }


    &.is-loading {
        pointer-events: none;
        &:after {
            padding-right: 40px;    
        }
    }

    &:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: inherit;
        transition: padding-right 0.2s ease(out-sine), background-color 0s;
    }
    */ }
  .btn--red, .camera__retry, .welcome__btns .btn:nth-child(1), .welcome__btns .camera__trigger:nth-child(1), .welcome__btns .camera__retry:nth-child(1), .welcome__btns .camera__use-photo:nth-child(1), .welcome__btns .camera__take-photo:nth-child(1) {
    background-image: url(../img/btn-bg-red@2x.png);
    background-position: 50% 50%;
    background-size: 146px 46px; }
  .btn--green, .camera__use-photo, .camera__take-photo {
    background-image: url(../img/btn-bg-green@2x.png);
    background-position: 50% 50%;
    background-size: 146px 46px; }

.btn__label {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
  display: inline-block;
  letter-spacing: 0.05em; }
  .btn--red .btn__label, .camera__retry .btn__label, .welcome__btns .btn:nth-child(1) .btn__label, .welcome__btns .camera__trigger:nth-child(1) .btn__label, .welcome__btns .camera__retry:nth-child(1) .btn__label, .welcome__btns .camera__use-photo:nth-child(1) .btn__label, .welcome__btns .camera__take-photo:nth-child(1) .btn__label {
    -webkit-filter: drop-shadow(2px 2px 3px #FE3033);
            filter: drop-shadow(2px 2px 3px #FE3033);
    text-shadow: 3px 3px 0 #FE3033, -1px -1px 0 #FE3033, 1px -1px 0 #FE3033, -1px 1px 0 #FE3033, 1px 1px 0 #FE3033; }
  .btn--green .btn__label, .camera__use-photo .btn__label, .camera__take-photo .btn__label {
    -webkit-filter: drop-shadow(2px 2px 3px #58C93A);
            filter: drop-shadow(2px 2px 3px #58C93A);
    text-shadow: 3px 3px 0 #58C93A, -1px -1px 0 #58C93A, 1px -1px 0 #58C93A, -1px 1px 0 #58C93A, 1px 1px 0 #58C93A; }

.btn__spinner {
  position: absolute;
  top: 50%;
  left: 110%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  position: absolute;
  width: 25px !important;
  height: 25px !important;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
          transform: translateX(-50%) translateY(-50%) scale(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }
  .is-loading .btn__spinner {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
    -webkit-transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.btn__spinner-gif {
  position: absolute;
  top: 50%;
  left: 115%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  position: absolute;
  width: 46px !important;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
          transform: translateX(-50%) translateY(-50%) scale(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }
  .is-loading .btn__spinner-gif {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
    -webkit-transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

img,
picture {
  display: block;
  margin: 0;
  max-width: 100%; }

img.b-lazy {
  opacity: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }
  img.b-lazy.b-loaded {
    opacity: 1; }

.astronaut {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; }
  .is-astronaut .astronaut {
    display: block; }

.astronaut__ufo {
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translateX(0%);
          transform: translateX(0%); }
  @media (max-width: 320px) {
    .astronaut__ufo {
      bottom: 80px; } }
  @media (orientation: landscape) {
    .astronaut__ufo {
      left: 80%;
      bottom: 30px; } }

.astronaut__saturn {
  position: absolute;
  bottom: 160px;
  left: 50%;
  -webkit-transform: translateX(70px) rotate(25deg);
          transform: translateX(70px) rotate(25deg); }
  @media (orientation: landscape) {
    .astronaut__saturn {
      left: 70%;
      bottom: 150px; } }

.astronaut__earth {
  position: absolute;
  bottom: 150px;
  left: 30%; }
  .astronaut__earth img {
    display: none; }
  .astronaut__earth canvas {
    display: block; }
    .astronaut__earth canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }
  @media (max-width: 320px) {
    .astronaut__earth {
      bottom: 100px;
      -webkit-transform: scale(0.7);
              transform: scale(0.7);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%; } }
  @media (orientation: landscape) {
    .astronaut__earth {
      -webkit-transform: translateX(-275px);
              transform: translateX(-275px);
      left: 50%;
      bottom: 50px; } }

.astronaut__spaceman {
  position: absolute;
  top: 50px;
  left: 10%; }
  .astronaut__spaceman img {
    display: none; }
  .astronaut__spaceman canvas {
    display: block; }
    .astronaut__spaceman canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }
  @media (orientation: landscape) {
    .astronaut__spaceman {
      left: 5%;
      top: 10px; } }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .astronaut__spaceman {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%; } }

@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .astronaut__spaceman {
    top: 5px;
    left: 2%; } }

.astronaut__tether {
  position: absolute;
  top: 30px;
  left: -65px;
  overflow: visible;
  z-index: -1; }

.astronaut__tether-wave {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: black; }

.astronaut__shooting-star-top {
  position: absolute;
  top: 40px;
  left: 50%;
  -webkit-transform: translateX(-20px) scale(0.6) scaleX(-1) rotate(5deg);
          transform: translateX(-20px) scale(0.6) scaleX(-1) rotate(5deg); }
  @media (orientation: landscape) {
    .astronaut__shooting-star-top {
      top: 0;
      left: 75%; } }

.astronaut__shooting-star-btm {
  position: absolute;
  bottom: 40px;
  left: 50%;
  -webkit-transform: translateX(-130px) scale(0.7) rotate(-10deg);
          transform: translateX(-130px) scale(0.7) rotate(-10deg); }
  @media (orientation: landscape) {
    .astronaut__shooting-star-btm {
      display: none; } }

.astronaut__star-1 {
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(120px) scale(0.7) rotate(10deg);
          transform: translateX(120px) scale(0.7) rotate(10deg); }
  @media (orientation: landscape) {
    .astronaut__star-1 {
      top: initial;
      left: 0;
      bottom: 20px; } }

.astronaut__star-2 {
  position: absolute;
  top: 75px;
  left: 50%;
  -webkit-transform: translateX(100px) scale(0.5) rotate(40deg);
          transform: translateX(100px) scale(0.5) rotate(40deg); }
  @media (orientation: landscape) {
    .astronaut__star-2 {
      top: initial;
      left: 0;
      bottom: 10px; } }

.astronaut__star-3 {
  position: absolute;
  bottom: 130px;
  left: 50%;
  -webkit-transform: translateX(-130px) scale(0.5) rotate(-10deg);
          transform: translateX(-130px) scale(0.5) rotate(-10deg); }
  @media (orientation: landscape) {
    .astronaut__star-3 {
      display: none; } }

.astronaut__star-4 {
  position: absolute;
  bottom: 145px;
  left: 50%;
  -webkit-transform: translateX(-150px) scale(0.5) rotate(-40deg);
          transform: translateX(-150px) scale(0.5) rotate(-40deg); }
  @media (orientation: landscape) {
    .astronaut__star-4 {
      display: none; } }

.astronaut__star-5 {
  position: absolute;
  bottom: 120px;
  left: 50%;
  -webkit-transform: translateX(130px) scale(0.6) rotate(10deg);
          transform: translateX(130px) scale(0.6) rotate(10deg); }
  @media (orientation: landscape) {
    .astronaut__star-5 {
      display: none; } }

.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  z-index: 100;
  background-color: white;
  border-radius: 50%;
  display: none; }
  .is-scene .back-btn {
    display: block; }
  @media (max-width: 320px) {
    .back-btn {
      top: 10px;
      left: 10px; } }

.camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden; }
  .is-showing-instructions .camera,
  .is-taking-photo .camera,
  .is-assessing-photo .camera {
    visibility: visible; }
  .is-loading.is-debug .camera,
  .is-scene.is-debug .camera {
    visibility: visible; }

.camera__mask-composite,
.camera__masks,
.camera__canvas,
.camera__stream,
.camera__output {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%); }

.camera__masks,
.camera__stream,
.camera__output,
.camera__canvas {
  min-width: 100%;
  min-height: 100%; }

.camera__output {
  max-width: initial; }
  .is-taking-photo .camera__output {
    display: none; }

.camera__trigger {
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 30px;
  left: calc(50% - 100px);
  z-index: 10;
  display: none; }
  .is-taking-photo .camera__trigger {
    display: block; }

.camera__btns {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  max-width: 310px;
  margin-bottom: 20px;
  width: 100%;
  z-index: 10;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: none; }
  .is-taking-photo .camera__btns,
  .is-assessing-photo .camera__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .camera__btns > * {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0; }

.camera__retry {
  display: none; }
  .is-assessing-photo .camera__retry {
    display: block; }

.camera__use-photo {
  margin-left: 10px;
  display: none; }
  .is-assessing-photo .camera__use-photo {
    display: block; }

.camera__take-photo {
  max-width: 150px;
  display: none; }
  .is-taking-photo .camera__take-photo {
    display: block; }

@-webkit-keyframes crayon-waves {
  0% {
    background-position: 0 50%; }
  33% {
    background-position: 33% 50%; }
  66% {
    background-position: 66% 50%; }
  100% {
    background-position: 100% 50%; } }

@keyframes crayon-waves {
  0% {
    background-position: 0 50%; }
  33% {
    background-position: 33% 50%; }
  66% {
    background-position: 66% 50%; }
  100% {
    background-position: 100% 50%; } }

.crayons {
  overflow: hidden;
  visibility: hidden; }
  .crayons.is-visible {
    visibility: visible; }

.crayons__pos {
  position: absolute;
  bottom: 0;
  z-index: 100; }

.crayons__crayon {
  position: absolute;
  width: 68px;
  -webkit-transform: scale(0.45) rotate(-50deg);
          transform: scale(0.45) rotate(-50deg);
  -webkit-transform-origin: 50% 20%;
          transform-origin: 50% 20%; }
  .crayons__crayon--alt {
    -webkit-filter: hue-rotate(-190deg);
            filter: hue-rotate(-190deg);
    left: 100px; }
  .crayons__crayon:before, .crayons__crayon:after {
    position: absolute;
    content: '';
    width: 65px;
    left: 2px;
    height: 45px;
    background-image: url(../img/crayon-pattern.png);
    background-size: 200% 45px;
    background-position: 0 50%;
    animation: crayon-waves 0.9s infinite linear reverse; }
  .crayons__crayon:before {
    top: 20%; }
  .crayons__crayon:after {
    bottom: 10%; }

.crayons__crayon-pattern {
  position: absolute;
  width: 100%; }
  .crayons__crayon-pattern--top {
    top: 50px; }
  .crayons__crayon-pattern--btm {
    bottom: 50px; }

.error {
  display: none; }
  .is-error .error {
    display: block !important; }
  .error .btn__label {
    padding: 0 10px; }

.error__heading {
  text-transform: uppercase; }

.error__desc {
  line-height: 1.2; }
  .error__desc b {
    font-family: 'Avenir Next Condensed';
    font-weight: bold; }
  .error__desc--dark {
    text-transform: lowercase; }
  .error__desc--ios {
    display: none; }
    .ios .error__desc--ios {
      display: inline; }
  .error__desc--not-ios {
    display: inline; }
    .ios .error__desc--not-ios {
      display: none; }

.error__or {
  font-size: 18px;
  text-transform: uppercase;
  margin: 14px 0; }

.error__browser-icon {
  -webkit-transform: translateY(3.5px);
          transform: translateY(3.5px);
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  background-image: url(../img/chrome@2x.png); }
  .ios .error__browser-icon {
    background-image: url(../img/safari@2x.png); }

.kelloggs-logo {
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  bottom: 20px;
  max-width: 140px;
  z-index: 1; }
  @media (max-width: 320px) {
    .kelloggs-logo {
      max-width: 110px;
      bottom: 15px; } }
  .is-loading .kelloggs-logo {
    display: none; }
  .is-showing-instructions .kelloggs-logo,
  .is-taking-photo .kelloggs-logo,
  .is-assessing-photo .kelloggs-logo,
  .is-scene .kelloggs-logo {
    right: 20px;
    bottom: initial;
    top: 22px;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    max-width: 90px; }
    @media (max-width: 320px) {
      .is-showing-instructions .kelloggs-logo,
      .is-taking-photo .kelloggs-logo,
      .is-assessing-photo .kelloggs-logo,
      .is-scene .kelloggs-logo {
        top: 14px;
        right: 10px; } }
  @media (orientation: landscape) {
    .kelloggs-logo {
      max-width: 80px;
      bottom: 20px; } }

@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .kelloggs-logo {
    display: none; } }

.guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.guide__img {
  position: absolute; }
  @media (orientation: landscape) {
    .guide__img {
      height: 100%; } }
  .is-portrait .guide__img {
    width: 100%;
    top: 50%; }
  .is-landscape .guide__img {
    left: 50%; }

.guide__top,
.guide__right,
.guide__bottom,
.guide__left {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%; }

.guide__left {
  top: 0;
  left: 0; }

.guide__right {
  top: 0;
  right: 0; }

.guide__top {
  top: 0;
  left: 0; }

.guide__bottom {
  bottom: 0;
  left: 0; }

.instructions {
  position: absolute;
  top: 48%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 10;
  text-align: center;
  width: 100%;
  min-width: 320px;
  max-width: 360px;
  display: none; }
  .is-showing-instructions .instructions {
    display: block; }
  .instructions .btn, .instructions .camera__trigger, .instructions .camera__retry, .instructions .camera__use-photo, .instructions .camera__take-photo {
    margin-top: 20px; }
    .instructions .btn .btn__label, .instructions .camera__trigger .btn__label, .instructions .camera__retry .btn__label, .instructions .camera__use-photo .btn__label, .instructions .camera__take-photo .btn__label {
      margin: 0 20px; }

.instructions__modal {
  background-color: white;
  border-radius: 10px;
  border: 2px solid black;
  padding: 30px 20px; }

.instructions__heading {
  text-transform: uppercase;
  font-size: 28px; }

.instructions__desc {
  margin: 10px auto 0;
  max-width: 240px; }

.kangaroo {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none; }
  .is-kangaroo .kangaroo {
    display: block; }

.kangaroo__koala {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: translateX(-15px) scale(0.9);
          transform: translateX(-15px) scale(0.9); }
  @media (orientation: landscape) {
    .kangaroo__koala {
      -webkit-transform: translateX(0px) scale(1);
              transform: translateX(0px) scale(1); } }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .kangaroo__koala {
      -webkit-transform: scale(0.65);
              transform: scale(0.65);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%; } }

.kangaroo__croc {
  position: absolute;
  bottom: 15px;
  right: 0; }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .kangaroo__croc {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
      bottom: 0; } }
  .kangaroo__croc img {
    display: none; }
  .kangaroo__croc canvas {
    display: block; }
    .kangaroo__croc canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.kangaroo__mnts {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 120px;
  z-index: -1; }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .kangaroo__mnts {
      bottom: 75px; } }
  @media (orientation: landscape) {
    .kangaroo__mnts {
      display: none; } }

.kangaroo__cloud-1 {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 20px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%); }
  @media (orientation: landscape) {
    .kangaroo__cloud-1 {
      -webkit-transform: translateX(-270px) translateY(5px);
              transform: translateX(-270px) translateY(5px); } }
  .kangaroo__cloud-1 img {
    display: none; }
  .kangaroo__cloud-1 canvas {
    display: block; }
    .kangaroo__cloud-1 canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.kangaroo__cloud-2 {
  position: absolute;
  left: 50%;
  top: 45px;
  -webkit-transform: translateX(-140px) scale(0.85) scaleY(0.75) rotate(-5deg);
          transform: translateX(-140px) scale(0.85) scaleY(0.75) rotate(-5deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-filter: hue-rotate(255deg);
          filter: hue-rotate(255deg); }
  @media (orientation: landscape) {
    .kangaroo__cloud-2 {
      -webkit-transform: translateX(-330px) scale(0.85) scaleY(0.75) rotate(-5deg);
              transform: translateX(-330px) scale(0.85) scaleY(0.75) rotate(-5deg); } }
  .kangaroo__cloud-2 img {
    display: none; }
  .kangaroo__cloud-2 canvas {
    display: block; }
    .kangaroo__cloud-2 canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.kangaroo__birds {
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  z-index: 1; }
  @media (orientation: landscape) {
    .kangaroo__birds {
      -webkit-transform: translateX(150px);
              transform: translateX(150px); } }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .kangaroo__birds {
      -webkit-transform: translateX(160px) scale(0.75);
              transform: translateX(160px) scale(0.75); } }

.kangaroo__cloud-3 {
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(110%);
          transform: translateX(110%); }
  @media (orientation: landscape) {
    .kangaroo__cloud-3 {
      -webkit-transform: translateX(200px) scale(0.75);
              transform: translateX(200px) scale(0.75);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      top: 60px; } }

.loading {
  position: absolute;
  top: 48%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  text-align: center;
  display: none; }
  .is-loading .loading {
    display: block; }
  .is-showing-output.is-loading .loading {
    display: none; }

.loading__heading {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin-top: 20px; }

.loading__desc {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 280px;
  font-style: italic; }

.loading__mask {
  position: relative; }

.loading__mask-wrap {
  width: 64px;
  background-color: black;
  margin: 0 auto;
  padding: 16px 0; }

.loading__mask-img {
  margin: 0 auto; }

.loading__result-wrap {
  width: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }

.loading__result-img {
  -webkit-transform: scale(0.5) translateY(50px);
          transform: scale(0.5) translateY(50px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  opacity: 0; }

.mandala {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none; }
  .is-mandala .mandala {
    display: block; }

.mandala__top {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-40%);
          transform: translateX(-50%) translateY(-40%); }
  @media (max-width: 320px) {
    .mandala__top {
      -webkit-transform: translateX(-50%) translateY(-44%) scale(0.75);
              transform: translateX(-50%) translateY(-44%) scale(0.75);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%; } }
  @media (orientation: landscape) {
    .mandala__top {
      display: none; } }
  .mandala__top img {
    display: none; }
  .mandala__top canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0; }
    .mandala__top canvas:last-child {
      position: relative; }

.mandala__right {
  position: absolute;
  bottom: 45px;
  right: 0;
  -webkit-transform: translateX(50%);
          transform: translateX(50%); }
  @media (max-width: 320px) {
    .mandala__right {
      -webkit-transform: translateX(50%) scale(0.75);
              transform: translateX(50%) scale(0.75);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%; } }
  .mandala__right img {
    display: none; }
  .mandala__right canvas {
    display: block; }
    .mandala__right canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.mandala__left {
  position: absolute;
  bottom: 45px;
  left: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: hue-rotate(260deg) saturate(6);
          filter: hue-rotate(260deg) saturate(6); }
  @media (max-width: 320px) {
    .mandala__left {
      -webkit-transform: translateX(-50%) scale(0.75);
              transform: translateX(-50%) scale(0.75);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%; } }

.masks {
  position: absolute;
  top: 0;
  left: 20%;
  width: 50%;
  height: 50%;
  display: none; }
  .is-debug .masks {
    z-index: 999;
    display: block; }
  .masks img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%); }

.progress {
  position: relative; }
  .progress img {
    display: none; }
  .progress canvas {
    display: block; }
    .progress canvas:last-child {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%); }

.progress__perc {
  position: absolute;
  top: 0px;
  right: 50px;
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center; }
  .progress__perc span:nth-child(2) {
    font-weight: 800; }

.results {
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  display: none; }
  .is-debug .results {
    display: block; }

.results__box {
  display: block;
  width: 16px;
  height: 16px;
  text-indent: 22px;
  line-height: 16px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  white-space: nowrap; }
  .results__box.is-error {
    background-color: red;
    color: red; }

.shark {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none; }
  .is-shark .shark {
    display: block; }

.shark__dolphin {
  position: absolute;
  top: 40px;
  left: 20%; }
  @media (orientation: landscape) {
    .shark__dolphin {
      -webkit-transform: translateX(-260px) scale(0.85);
              transform: translateX(-260px) scale(0.85);
      left: 50%;
      top: 30px; } }
  .shark__dolphin img {
    display: none; }
  .shark__dolphin canvas {
    display: block; }
    .shark__dolphin canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.shark__turtle {
  position: absolute;
  bottom: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translateY(150px) translateX(50px) scale(0.85);
          transform: translateY(150px) translateX(50px) scale(0.85);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }
  @media (orientation: landscape) {
    .shark__turtle {
      -webkit-transform: translateX(180px) translateY(40px) scale(0.7);
              transform: translateX(180px) translateY(40px) scale(0.7); } }
  .shark__turtle img {
    display: none; }
  .shark__turtle canvas {
    display: block; }
    .shark__turtle canvas:last-child {
      position: absolute;
      top: 0;
      left: 0; }

.shark__starfish-1 {
  position: absolute;
  top: 80px;
  left: 50%;
  -webkit-transform: translateX(85px) rotate(28deg);
          transform: translateX(85px) rotate(28deg); }
  @media (max-width: 320px) {
    .shark__starfish-1 {
      top: 60px; } }
  @media (orientation: landscape) {
    .shark__starfish-1 {
      display: none; } }

.shark__starfish-2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(130px);
          transform: translateX(130px);
  z-index: 1; }
  @media (orientation: landscape) {
    .shark__starfish-2 {
      -webkit-transform: translateX(130px) rotate(20deg) scale(0.8);
              transform: translateX(130px) rotate(20deg) scale(0.8);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      bottom: 8px; } }

.shark__sea-floor {
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%; }
  @media (max-width: 320px) {
    .shark__sea-floor {
      bottom: 75px; } }
  @media (orientation: landscape) {
    .shark__sea-floor {
      left: 0;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      bottom: 20px; } }

.shark__seaweed {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }
  .shark__seaweed svg {
    overflow: visible;
    width: 8px;
    padding-left: 3px;
    position: absolute;
    bottom: 10px;
    left: 50%; }
    @media (orientation: landscape) {
      .shark__seaweed svg {
        left: 50px; } }
    .shark__seaweed svg:nth-child(1) {
      -webkit-transform: translateX(33.25px);
              transform: translateX(33.25px); }
    .shark__seaweed svg:nth-child(2) {
      -webkit-transform: translateX(-26.75px);
              transform: translateX(-26.75px); }
    .shark__seaweed svg:nth-child(3) {
      -webkit-transform: translateX(36.5px);
              transform: translateX(36.5px); }
    .shark__seaweed svg:nth-child(4) {
      -webkit-transform: translateX(-23.5px);
              transform: translateX(-23.5px); }
    .shark__seaweed svg:nth-child(5) {
      -webkit-transform: translateX(39.75px);
              transform: translateX(39.75px); }
    .shark__seaweed svg:nth-child(6) {
      -webkit-transform: translateX(-20.25px);
              transform: translateX(-20.25px); }
    .shark__seaweed svg:nth-child(7) {
      -webkit-transform: translateX(43px);
              transform: translateX(43px); }
    .shark__seaweed svg:nth-child(8) {
      -webkit-transform: translateX(-17px);
              transform: translateX(-17px); }
    .shark__seaweed svg:nth-child(9) {
      -webkit-transform: translateX(46.25px);
              transform: translateX(46.25px); }
    .shark__seaweed svg:nth-child(10) {
      -webkit-transform: translateX(-13.75px);
              transform: translateX(-13.75px); }
    .shark__seaweed svg:nth-child(11) {
      -webkit-transform: translateX(49.5px);
              transform: translateX(49.5px); }
    .shark__seaweed svg:nth-child(12) {
      -webkit-transform: translateX(-10.5px);
              transform: translateX(-10.5px); }
    .shark__seaweed svg:nth-child(13) {
      -webkit-transform: translateX(52.75px);
              transform: translateX(52.75px); }
    .shark__seaweed svg:nth-child(14) {
      -webkit-transform: translateX(-7.25px);
              transform: translateX(-7.25px); }
    .shark__seaweed svg:nth-child(15) {
      -webkit-transform: translateX(56px);
              transform: translateX(56px); }
    .shark__seaweed svg:nth-child(16) {
      -webkit-transform: translateX(-4px);
              transform: translateX(-4px); }
    .shark__seaweed svg:nth-child(17) {
      -webkit-transform: translateX(59.25px);
              transform: translateX(59.25px); }
    .shark__seaweed svg:nth-child(18) {
      -webkit-transform: translateX(-0.75px);
              transform: translateX(-0.75px); }
    .shark__seaweed svg:nth-child(19) {
      -webkit-transform: translateX(62.5px);
              transform: translateX(62.5px); }
    .shark__seaweed svg:nth-child(20) {
      -webkit-transform: translateX(2.5px);
              transform: translateX(2.5px); }
    .shark__seaweed svg:nth-child(21) {
      -webkit-transform: translateX(65.75px);
              transform: translateX(65.75px); }
    .shark__seaweed svg:nth-child(22) {
      -webkit-transform: translateX(5.75px);
              transform: translateX(5.75px); }
    .shark__seaweed svg:nth-child(23) {
      -webkit-transform: translateX(69px);
              transform: translateX(69px); }
    .shark__seaweed svg:nth-child(24) {
      -webkit-transform: translateX(9px);
              transform: translateX(9px); }
    .shark__seaweed svg:nth-child(25) {
      -webkit-transform: translateX(72.25px);
              transform: translateX(72.25px); }
    .shark__seaweed svg:nth-child(26) {
      -webkit-transform: translateX(12.25px);
              transform: translateX(12.25px); }
    .shark__seaweed svg:nth-child(27) {
      -webkit-transform: translateX(75.5px);
              transform: translateX(75.5px); }
    .shark__seaweed svg:nth-child(28) {
      -webkit-transform: translateX(15.5px);
              transform: translateX(15.5px); }
    .shark__seaweed svg:nth-child(29) {
      -webkit-transform: translateX(78.75px);
              transform: translateX(78.75px); }
    .shark__seaweed svg:nth-child(30) {
      -webkit-transform: translateX(18.75px);
              transform: translateX(18.75px); }
    .shark__seaweed svg:nth-child(31) {
      -webkit-transform: translateX(82px);
              transform: translateX(82px); }
    .shark__seaweed svg:nth-child(32) {
      -webkit-transform: translateX(22px);
              transform: translateX(22px); }
    .shark__seaweed svg:nth-child(33) {
      -webkit-transform: translateX(85.25px);
              transform: translateX(85.25px); }
    .shark__seaweed svg:nth-child(34) {
      -webkit-transform: translateX(25.25px);
              transform: translateX(25.25px); }
    .shark__seaweed svg:nth-child(35) {
      -webkit-transform: translateX(88.5px);
              transform: translateX(88.5px); }
    .shark__seaweed svg:nth-child(36) {
      -webkit-transform: translateX(28.5px);
              transform: translateX(28.5px); }
    .shark__seaweed svg:nth-child(37) {
      -webkit-transform: translateX(91.75px);
              transform: translateX(91.75px); }
    .shark__seaweed svg:nth-child(38) {
      -webkit-transform: translateX(31.75px);
              transform: translateX(31.75px); }
    .shark__seaweed svg:nth-child(39) {
      -webkit-transform: translateX(95px);
              transform: translateX(95px); }
    .shark__seaweed svg:nth-child(40) {
      -webkit-transform: translateX(35px);
              transform: translateX(35px); }
    .shark__seaweed svg:nth-child(41) {
      -webkit-transform: translateX(98.25px);
              transform: translateX(98.25px); }
    .shark__seaweed svg:nth-child(42) {
      -webkit-transform: translateX(38.25px);
              transform: translateX(38.25px); }
    .shark__seaweed svg:nth-child(43) {
      -webkit-transform: translateX(101.5px);
              transform: translateX(101.5px); }
    .shark__seaweed svg:nth-child(44) {
      -webkit-transform: translateX(41.5px);
              transform: translateX(41.5px); }
    .shark__seaweed svg:nth-child(45) {
      -webkit-transform: translateX(104.75px);
              transform: translateX(104.75px); }
    .shark__seaweed svg:nth-child(46) {
      -webkit-transform: translateX(44.75px);
              transform: translateX(44.75px); }
    .shark__seaweed svg:nth-child(47) {
      -webkit-transform: translateX(108px);
              transform: translateX(108px); }
    .shark__seaweed svg:nth-child(48) {
      -webkit-transform: translateX(48px);
              transform: translateX(48px); }
    .shark__seaweed svg:nth-child(49) {
      -webkit-transform: translateX(111.25px);
              transform: translateX(111.25px); }
    .shark__seaweed svg:nth-child(50) {
      -webkit-transform: translateX(51.25px);
              transform: translateX(51.25px); }
    .shark__seaweed svg:nth-child(51) {
      -webkit-transform: translateX(114.5px);
              transform: translateX(114.5px); }
    .shark__seaweed svg:nth-child(52) {
      -webkit-transform: translateX(54.5px);
              transform: translateX(54.5px); }
    .shark__seaweed svg:nth-child(53) {
      -webkit-transform: translateX(117.75px);
              transform: translateX(117.75px); }
    .shark__seaweed svg:nth-child(54) {
      -webkit-transform: translateX(57.75px);
              transform: translateX(57.75px); }
    .shark__seaweed svg:nth-child(55) {
      -webkit-transform: translateX(121px);
              transform: translateX(121px); }
    .shark__seaweed svg:nth-child(56) {
      -webkit-transform: translateX(61px);
              transform: translateX(61px); }
    .shark__seaweed svg:nth-child(57) {
      -webkit-transform: translateX(124.25px);
              transform: translateX(124.25px); }
    .shark__seaweed svg:nth-child(58) {
      -webkit-transform: translateX(64.25px);
              transform: translateX(64.25px); }
    .shark__seaweed svg:nth-child(59) {
      -webkit-transform: translateX(127.5px);
              transform: translateX(127.5px); }
    .shark__seaweed svg:nth-child(60) {
      -webkit-transform: translateX(67.5px);
              transform: translateX(67.5px); }

.shark__seaweed-wave {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: black; }
  svg:nth-child(3n + 7) .shark__seaweed-wave {
    stroke-width: 1; }
  svg:nth-child(3n + 2) .shark__seaweed-wave {
    stroke-width: 1.5; }

.shark__ocean {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 0;
  width: 2000px;
  top: -8px; }

.shark__ocean-wave {
  fill: black;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: black; }

.shutter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  background-color: black;
  display: none;
  opacity: 0; }

/*
    @usage - extend then position
    @extend .spinner;
    @extend .spinner--vert-cent;
*/
.spinner, .btn__spinner {
  pointer-events: none;
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px; }
  .spinner--vert-cent {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
  .spinner:after, .btn__spinner:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 3px rgba(0, 0, 0, 0.25) solid;
    border-top: 3px rgba(0, 0, 0, 0.8) solid;
    border-radius: 50%;
    -webkit-animation: spin .4s infinite linear;
            animation: spin .4s infinite linear; }

@-webkit-keyframes spin {
  from {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spin {
  from {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.three {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 50;
  display: none; }
  .is-scene .three {
    display: block; }

.welcome {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: none; }
  .is-requesting-camera .welcome,
  .is-error .welcome {
    display: block; }

.welcome__content, .error {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 100%;
  z-index: 2; }
  .is-error .welcome__content, .is-error .error {
    display: none; }

.welcome__heading {
  text-transform: uppercase;
  font-size: 20px; }

.welcome__desc, .error__desc {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 280px;
  font-style: italic; }

.welcome__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 303px;
  margin: 20px auto 0; }
  .welcome__btns .btn, .welcome__btns .camera__trigger, .welcome__btns .camera__retry, .welcome__btns .camera__use-photo, .welcome__btns .camera__take-photo {
    width: 50%; }
    .welcome__btns .btn:nth-child(2), .welcome__btns .camera__trigger:nth-child(2), .welcome__btns .camera__retry:nth-child(2), .welcome__btns .camera__use-photo:nth-child(2), .welcome__btns .camera__take-photo:nth-child(2) {
      margin-left: 10px; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  width: 100vw;
  position: relative;
  background-color: white;
  /*&:after {
		@extend .u-vh;
		content: '';
		top: 0;
		left: 0;

		//background-image: url(../img/line-bg.gif);
		//background-repeat: repeat;
		
		background-image: url(../img/page-bg-3.jpg);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		opacity: 0.15;
		z-index: -1;
	}*/ }

iframe {
  border: none; }

body > video {
  visibility: hidden; }

body.is-scene > video {
  visibility: visible; }