@import url('https://fonts.googleapis.com/css?family=Roboto:300');

/*--- Reset ---*/

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  min-height: 1000px;
  transition: background-color 0.5s ease-out;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
  display: block;
}

/*--- Layout ---*/

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.splash,
.teaser-main {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 1.75s cubic-bezier(0.26, -0.14, 0.23, 1.08);
}
.splash {
  color: #ff50a0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 0;
  opacity: 0;
  transition: all 1.5s ease-out;
}
.splash .logo {
  width: 300px;
  height: 140px;
  background-image: url("../teaser/izone-logo.png");
  background-size: contain;
  position: relative;
}
.splash .logo .logo-loop {
  display: block;
  position: absolute;
  width: 140px;
  height: 140px;
  background-image: url("../teaser/izone-logo-loop.png");
  background-size: contain;
  left: 50%;
  margin-left: -80px;
  animation: logo-loop 35s ease-out;
}

@keyframes logo-loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.teaser-main {
  top: 0;
  transform: translateY(100%);
}
body.is-preparing .splash {
  opacity: 1;
}
body.is-ready .splash {
  transform: translateY(-100%);
}
body.is-ready .teaser-main {
  transform: translateY(0);
}

/*--- Spheres ---*/

.sphere-container {
  position: absolute;
  top: 50%;
  width: 100%;
}
.sphere-container .first-row,
.sphere-container .second-row {
  position: absolute;
  top: 50%;
  margin-top: -340px;
  width: 100%;
  height: 50px;
}
.sphere-container .second-row {
  margin-top: -260px;
}
.sphere {
  background-color: transparent;
  border: 3px dashed rgba(0, 0, 0, 0.055);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 999;
  transition: transform 0.1s ease-out, opacity 0.075s ease-out;
}
.sphere.is-draggable {
  border: 4px solid #2c2c2c;
  box-shadow: inset -9px -9px 1px rgba(0, 0, 0, 0.05);
}
.sphere.plop {
  opacity: 0;
  transform: scale(0);
}
.sphere.one-six {
  left: calc(50% - 200px);
}
.sphere.two-six {
  left: calc(50% - 130px);
}
.sphere.three-six {
  left: calc(50% - 60px);
}
.sphere.four-six {
  left: calc(50% + 10px);
}
.sphere.five-six {
  left: calc(50% + 80px);
}
.sphere.six-six {
  left: calc(50% + 150px);
}
.sphere[data-color="pjx2t9"] {
	background-color: #d9598c;
}
.sphere[data-color="m2m22k"] {
	background-color: #f1d2e7;
}
.sphere[data-color="w8bqf8"] {
	background-color: #f3aa51;
}
.sphere[data-color="n8bx98"] {
	background-color: #fcf695;
}
.sphere[data-color="v3lx3c"] {
	background-color: #567ace;
}
.sphere[data-color="e2et33"] {
	background-color: #b7d3e9;
}
.sphere[data-color="d923th"] {
	background-color: #bbb0dc;
}
.sphere[data-color="g998hy"] {
	background-color: #db706c;
}
.sphere[data-color="a4v47v"] {
	background-color: #f1c3aa;
}
.sphere[data-color="cpr6hw"] {
  background-color: #cee5d5;
}
.sphere[data-color="h4a4op"] {
  background-color: #fff;
}
.sphere[data-color="x8pryn"] {
  background-color: #a7e0e1;
}

/*--- Coloring Book ---*/

.coloring-book {
  background-image: url("../teaser/teaser-background.jpg");
  background-size: 1800px 1200px;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 1800px;
  max-height: 1200px;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  border: 6px solid #2c2c2c;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  overflow: hidden;
}

.coloring-book .washer {
  width: 340px;
  height: 485px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -12%);
  overflow: hidden;
  z-index: 999;
}
.coloring-book .washer .washer-body {
  background-color: #fff;
  position: absolute;
  top: 10px;
  right: 12px;
  bottom: 10px;
  left: 9px;
  overflow: hidden;
}
.coloring-book .washer .washer-body .bokeh {
  background-image: url('../teaser/teaser-bokeh-sprite.png');
  background-size: 1000px 750px;
  width: 250px;
  height: 250px;
  opacity: 0;
  position: absolute;
  transition: opacity 1s ease-out;
}
.coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"] {
  background-position: 0 0;
  z-index: 12;
}
.coloring-book .washer .washer-body .bokeh[data-color="m2m22k"] {
  background-position: -250px 0;
  z-index: 11;
}
.coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"] {
  background-position: -500px 0;
  z-index: 10;
}
.coloring-book .washer .washer-body .bokeh[data-color="n8bx98"] {
  background-position: -750px 0;
  z-index: 9;
}
.coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"] {
  background-position: 0 -250px;
  z-index: 8;
}
.coloring-book .washer .washer-body .bokeh[data-color="e2et33"] {
  background-position: -250px -250px;
  z-index: 7;
}
.coloring-book .washer .washer-body .bokeh[data-color="d923th"] {
  background-position: -500px -250px;
  z-index: 6;
}
.coloring-book .washer .washer-body .bokeh[data-color="g998hy"] {
  background-position: -750px -250px;
  z-index: 5;
}
.coloring-book .washer .washer-body .bokeh[data-color="a4v47v"] {
  background-position: 0 -500px;
  z-index: 4;
}
.coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"] {
  background-position: -250px -500px;
  z-index: 3;
}
.coloring-book .washer .washer-body .bokeh[data-color="h4a4op"] {
  background-position: -500px -500px;
  z-index: 2;
}
.coloring-book .washer .washer-body .bokeh[data-color="x8pryn"] {
  background-position: -750px -500px;
  z-index: 1;
}

.coloring-book .washer .washer-body .bokeh.is-active {
  opacity: .5;
}
.coloring-book .washer .washer-body .bokeh.is-fixed {
  opacity: 1;
  transform: scale(1.35);
  transition: all 1.5s ease-out;
}
.coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"].is-fixed {
  top: 60px;
  left: 0;
}
.coloring-book .washer .washer-body .bokeh[data-color="m2m22k"].is-fixed {
  top: -70px;
  left: 50px;
}
.coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"].is-fixed {
  top: -100px;
  left: 160px;
}
.coloring-book .washer .washer-body .bokeh[data-color="n8bx98"].is-fixed {
  top: 150px;
  left: -100px;
}
.coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"].is-fixed {
  top: 50px;
  left: -120px;
}
.coloring-book .washer .washer-body .bokeh[data-color="e2et33"].is-fixed {
  top: -100px;
  left: -100px;
}
.coloring-book .washer .washer-body .bokeh[data-color="d923th"].is-fixed {
  top: 120px;
  left: 80px;
}
.coloring-book .washer .washer-body .bokeh[data-color="g998hy"].is-fixed {
  top: 100px;
  left: 200px;
}
.coloring-book .washer .washer-body .bokeh[data-color="a4v47v"].is-fixed {
  top: 290px;
  left: -90px;
}
.coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"].is-fixed {
  top: 300px;
  left: 40px;
}
.coloring-book .washer .washer-body .bokeh[data-color="h4a4op"].is-fixed {
  top: 150px;
  left: 170px;
}
.coloring-book .washer .washer-body .bokeh[data-color="x8pryn"].is-fixed {
  top: 270px;
  left: 160px;
}

.coloring-book .washer .washer-body .bokeh-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.coloring-book .washer .washer-body .bokeh-container.mix-up {
  transition: transform 15s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 500ms;
  transform: rotate(320deg);
}
.coloring-book .washer .washer-body .bokeh-container.mix-up .bokeh {
  transform: scale(2);
  transition: transform 10s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.coloring-book .washer .washer-outline {
  background-image: url("../teaser/teaser-washer-outline-wmask.png");
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.coloring-book .other-objects {
  width: 1800px;
  height: 1200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../teaser/teaser-background-objects.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.coloring-book .copyright {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 9px;
  color: #2c2c2c;
  width: 100%;
  text-align: right;
  z-index: 999;
}

/*--- Remodal ---*/

html.remodal-is-locked {
  overflow: hidden;
  touch-action: none;
}
.remodal-overlay {
  background-color: rgba(255, 255, 255, 0.92);
  display: none;
  position: fixed;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  z-index: 9999;
}
.remodal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  padding: 15px 15px 0;
  z-index: 10000;
}
.remodal-wrapper:after {
  content: "";
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
}
.remodal-overlay,
.remodal-wrapper {
  backface-visibility: hidden;
}
.remodal {
  background-color: #fff;
  border: 4px solid #c2272d;
  display: none;
  margin-bottom: 15px;
  outline: none;
  position: relative;
  text-size-adjust: 100%;
  transform: translate3d(0, 0, 0);
  width: 100%;
  max-width: 900px;
}
.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}
.remodal-is-initialized {
  display: inline-block;
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
  animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
  animation-name: remodal-overlay-closing-keyframes;
}
.remodal.remodal-is-opening {
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}
.remodal.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
  animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
  animation-name: remodal-closing-keyframes;
}
.remodal-close {
  background-color: #fff;
  background-image: url("../teaser/close-button-icon.png");
  background-size: 30px 30px;
  background-position: center center;
  border: 2.5px solid #c2272d;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  top: -14px;
  right: -14px;
  margin: 0;
  padding: 0;
  outline: 0;
  width: 30px;
  height: 30px;
}

@keyframes remodal-opening-keyframes {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes remodal-closing-keyframes {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
    filter: blur(0);
  }
}
@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*--- Responsive Support ---*/

@media (max-width: 1300px) {
  body {
    min-height: 700px;
  }
  .sphere-container .first-row {
    margin-top: -260px;
  }
  .sphere-container .second-row {
    margin-top: -200px;
  }
  .sphere {
    border-width: 3px;
    width: 44px;
    height: 44px;
  }
  .sphere.is-draggable {
    border-width: 3px;
  }
  .sphere.one-six {
    left: calc(50% - 170px);
  }
  .sphere.two-six {
    left: calc(50% - 110px);
  }
  .sphere.three-six {
    left: calc(50% - 50px);
  }
  .sphere.four-six {
    left: calc(50% + 10px);
  }
  .sphere.five-six {
    left: calc(50% + 70px);
  }
  .sphere.six-six {
    left: calc(50% + 130px);
  }
  .coloring-book {
    border-width: 4px;
    background-size: 1350px 900px;
    max-width: 1350px;
    max-height: 900px;
  }
  .coloring-book .other-objects {
    width: 1350px;
    height: 900px;
  }
  .coloring-book .washer {
    width: 260px;
    height: 370px;
  }
  .coloring-book .washer .washer-body {
    top: 8px;
    right: 9px;
    bottom: 8px;
    left: 6px;
  }
  .coloring-book .washer .washer-body .bokeh {
    background-size: 720px 540px;
    width: 180px;
    height: 180px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"] {
    background-position: 0 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="m2m22k"] {
    background-position: -180px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"] {
    background-position: -360px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="n8bx98"] {
    background-position: -540px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"] {
    background-position: 0 -180px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="e2et33"] {
    background-position: -180px -180px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="d923th"] {
    background-position: -360px -180px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="g998hy"] {
    background-position: -540px -180px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="a4v47v"] {
    background-position: 0 -360px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"] {
    background-position: -180px -360px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="h4a4op"] {
    background-position: -360px -360px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="x8pryn"] {
    background-position: -540px -360px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"].is-fixed {
    top: 30px;
    left: 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="m2m22k"].is-fixed {
    top: -70px;
    left: 30px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"].is-fixed {
    top: -50px;
    left: 120px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="n8bx98"].is-fixed {
    top: 120px;
    left: -70px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"].is-fixed {
    top: 30px;
    left: -80px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="e2et33"].is-fixed {
    top: -100px;
    left: -30px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="d923th"].is-fixed {
    top: 110px;
    left: 60px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="g998hy"].is-fixed {
    top: 100px;
    left: 150px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="a4v47v"].is-fixed {
    top: 220px;
    left: -50px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"].is-fixed {
    top: 250px;
    left: 40px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="h4a4op"].is-fixed {
    top: 150px;
    left: 130px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="x8pryn"].is-fixed {
    top: 240px;
    left: 160px;
  }
  .remodal {
    border-width: 3px;
  }
}

@media (max-width: 700px) {
  body {
    min-height: 480px;
  }
  .splash .logo {
    width: 210px;
    height: 98px;
  }
  .splash .logo .logo-loop {
    width: 98px;
    height: 98px;
    margin-left: -56px;
  }
  .sphere-container .first-row {
    margin-top: -210px;
  }
  .sphere-container .second-row {
    margin-top: -155px;
  }
  .sphere {
    border-width: 2.5px;
    width: 40px;
    height: 40px;
  }
  .sphere.is-draggable {
    border-width: 2.5px;
  }
  .sphere.one-six {
    left: calc(50% - 148px);
  }
  .sphere.two-six {
    left: calc(50% - 97px);
  }
  .sphere.three-six {
    left: calc(50% - 45px);
  }
  .sphere.four-six {
    left: calc(50% + 7px);
  }
  .sphere.five-six {
    left: calc(50% + 58px);
  }
  .sphere.six-six {
    left: calc(50% + 108px);
  }
  .coloring-book {
    border-width: 3px;
    background-size: 960px 640px;
    max-width: 960px;
    max-height: 720px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
  }
  .coloring-book .other-objects {
    width: 960px;
    height: 640px;
  }
  .coloring-book .washer {
    width: 200px;
    height: 285px;
  }
  .coloring-book .washer .washer-body {
    top: 5px;
    right: 7px;
    bottom: 6px;
    left: 4px;
  }
  .coloring-book .washer .washer-body .bokeh {
    background-size: 560px 420px;
    width: 140px;
    height: 140px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"] {
    background-position: 0 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="m2m22k"] {
    background-position: -140px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"] {
    background-position: -280px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="n8bx98"] {
    background-position: -420px 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"] {
    background-position: 0 -140px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="e2et33"] {
    background-position: -140px -140px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="d923th"] {
    background-position: -280px -140px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="g998hy"] {
    background-position: -420px -140px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="a4v47v"] {
    background-position: 0 -280px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"] {
    background-position: -140px -280px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="h4a4op"] {
    background-position: -280px -280px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="x8pryn"] {
    background-position: -420px -280px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="pjx2t9"].is-fixed {
    top: 20px;
    left: 0;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="m2m22k"].is-fixed {
    top: -30px;
    left: 20px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="w8bqf8"].is-fixed {
    top: -40px;
    left: 100px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="n8bx98"].is-fixed {
    top: 100px;
    left: -70px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="v3lx3c"].is-fixed {
    top: 25px;
    left: -55px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="e2et33"].is-fixed {
    top: -70px;
    left: -30px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="d923th"].is-fixed {
    top: 80px;
    left: 40px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="g998hy"].is-fixed {
    top: 70px;
    left: 120px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="a4v47v"].is-fixed {
    top: 180px;
    left: -40px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="cpr6hw"].is-fixed {
    top: 180px;
    left: 20px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="h4a4op"].is-fixed {
    top: 120px;
    left: 100px;
  }
  .coloring-book .washer .washer-body .bokeh[data-color="x8pryn"].is-fixed {
    top: 180px;
    left: 120px;
  }
  .coloring-book .copyright {
    position: absolute;
    bottom: 10px;
    right: 0;
    font-size: 8px;
    text-align: center;
  }
  .remodal {
    border-width: 2.5px;
  }
}

@media (max-width: 350px) {
  .sphere-container .first-row {
    margin-top: -200px;
  }
  .sphere-container .second-row {
    margin-top: -145px;
  }
}