body {
  background: #3f3830;
  font-size: 16px;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  font-family: Open Sans, sans-serif;
  min-width: 768px;
}
.curtain {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #3f3830;
  z-index: 30;
  opacity: 1;
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
.curtain__progress {
  height: 0.0625rem;
  width: 9.375rem;
  border-radius: 0.25rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.6875rem;
  margin-top: -0.0625rem;
  -webkit-transition: width 0.3s ease-out;
  transition: width 0.3s ease-out;
}
.curtain__progress-text,
.curtain__progress-text-gradient {
  position: absolute;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 100;
  letter-spacing: 0.0875rem;
  position: absolute;
  margin-left: -4.6875rem;
  margin-top: -1.25rem;
  top: 50%;
  left: 50%;
}
.curtain__progress-text-gradient {
  width: 14.0625rem;
  height: 1rem;
  z-index: 1;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  background: -webkit-linear-gradient(left, rgba(63,56,48,0) 20%, #3f3830 50%);
  background: linear-gradient(to right, rgba(63,56,48,0) 20%, #3f3830 50%);
}
.curtain.is-hide {
  opacity: 0;
  z-index: 0;
}
.badge {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  color: #fff;
}
.wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.particles {
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  overflow: visible;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  z-index: 1;
  tap-highlight-color: rgba(0,0,0,0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-size-adjust: none;
}
.particle {
  width: 9.375rem;
  height: 9.375rem;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  display: block;
  line-height: 9.375rem;
}
.particle.is-open {
  z-index: 20;
}
.particle.is-open .particle__inner {
  -webkit-transform: scale(15) translateZ(-1000px);
  -ms-transform: scale(15) translateZ(-1000px);
  transform: scale(15) translateZ(-1000px);
}
.particle.is-open .particle__content {
  display: block;
}
.particle__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.particle__over-mobile {
  display: none;
}
.desktop .particle__over-mobile {
  display: block;
}
.content {
  position: fixed;
  width: 33.75rem;
  height: 17.5rem;
  display: block;
  margin-left: -16.875rem;
  margin-top: -8.75rem;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-5000px);
  -ms-transform: translateX(-5000px);
  transform: translateX(-5000px);
}
.content__inner {
  position: absolute;
  width: 100%;
  height: 100%;
}
.content.is-show {
  display: block;
}
.project {
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
}
.project__text,
.project__img {
  position: absolute;
  width: 50%;
  height: 100%;
}
.project__text {
  left: 57%;
  margin-top: 1.875rem;
  width: 40%;
  text-align: left;
  line-height: 1.6;
}
.project h2 {
  text-transform: uppercase;
}
.project__shadow-wrap {
  -webkit-transform-origin: 100% center;
  -ms-transform-origin: 100% center;
  transform-origin: 100% center;
}
.project__shadow {
  position: absolute;
  width: 300px;
  height: 50px;
  opacity: 0;
  top: 204px;
  right: 8px;
  -webkit-transform: rotateX(80deg);
  -ms-transform: rotateX(80deg);
  transform: rotateX(80deg);
  border-radius: 26px;
  background: -webkit-linear-gradient(left, rgba(58,8,57,0) 0%, rgba(58,8,57,0.65) 100%);
  background: linear-gradient(to right, rgba(58,8,57,0) 0%, rgba(58,8,57,0.65) 100%);
  -webkit-transform-origin: 100% center;
  -ms-transform-origin: 100% center;
  transform-origin: 100% center;
}
.ie .project__shadow {
  display: none;
}
.by {
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.75rem;
  width: 6.875rem;
  z-index: 40;
  opacity: 0.75;
  border-top-left-radius: 0.75rem;
  display: none;
}
.by:hover {
  opacity: 1;
}
.by__text {
  color: #3f3830;
  font-size: 0.53125rem;
  letter-spacing: 0.0125rem;
  position: absolute;
  top: 0.5625rem;
}
.ios .by__text {
  top: 0.5rem;
}
.by__text--1 {
  left: 0.4375rem;
}
.by__text--2 {
  left: 4.375rem;
}
.by__logo {
  background: #f1f1f1;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: url("") no-repeat center center;
  background-size: 100% 100%;
  top: 0.4375rem;
}
.ios .by__logo {
  top: 0.375rem;
}
.by__logo--mojs {
  left: 3.0625rem;
  background-image: url("i/mojs.svg");
}
.by__logo--legomushroom {
  left: 5.3125rem;
  background-image: url("i/legomushroom.svg");
}
.sprite__frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  width: 100%;
  height: 100%;
}
.sprite__ellipse {
  fill: none;
  stroke: #fff;
}
.dust {
  position: absolute;
  width: 12.5rem;
  height: 12.5rem;
  height: 3.125rem;
}
.dust--1 {
  top: 16.875rem;
  left: 6.25rem;
}
.dust--2,
.dust--3 {
  top: 14.1875rem;
}
.dust--2 {
  left: -2.5rem;
  opacity: 0.9;
}
.dust--3 {
  left: -4.375rem;
  opacity: 0.7;
}
.blob-circle {
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  margin-left: -3.125rem;
  margin-top: -3.125rem;
  width: 6.25rem;
  height: 6.25rem;
}
.blob-circle-wrap {
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.close {
  position: fixed;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  top: 20%;
  left: -10%;
  z-index: -1;
  -webkit-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  display: none;
}
.close:hover {
  cursor: pointer;
}
.close.is-show {
  display: block;
  opacity: 1;
  left: 75%;
  z-index: 10;
}
.image-ie {
  width: 16rem;
  height: 12rem;
  background: url("i/mojs-logo.png") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 2.8125rem;
  left: 0.5rem;
  border-radius: 0.9375rem;
  display: none;
}
.ie .image-ie {
  display: block;
}
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 100%;
}
.ie .image {
  display: none;
}
.scene,
.shape,
.face,
.face-wrapper,
.cr {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.shape {
  opacity: 0;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
  -webkit-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.cub-1 .ft .photon-shader,
.cub-1 .bk .photon-shader,
.cub-1 .bm .photon-shader {
  background-color: #fff;
}
.cub-1 .ft .photon-shader,
.cub-1 .bk .photon-shader,
.cub-1 .rt .photon-shader,
.cub-1 .lt .photon-shader {
  background-color: #ccc;
}
.cub-1 .bm .photon-shader {
  background: url("i/mojs-logo.png") no-repeat center center;
  background-size: 100% 100%;
}
.cub-1 .cr .photon-shader {
  background-color: #ccc;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
}
.face,
.face-wrapper {
  overflow: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
/* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100% !important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%;
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.side {
  left: 50%;
}
.cr,
.cr .side {
  height: 100%;
}
[class*="cuboid"] .ft,
[class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  -webkit-transform: rotateY(-90deg) translateX(-50%);
  -ms-transform: rotateY(-90deg) translateX(-50%);
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  -webkit-transform: rotateY(90deg) translateX(-50%);
  -ms-transform: rotateY(90deg) translateX(-50%);
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  -webkit-transform: rotateX(90deg) translateY(-50%);
  -ms-transform: rotateX(90deg) translateY(-50%);
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  -webkit-transform: rotateX(-90deg) translateY(-50%);
  -ms-transform: rotateX(-90deg) translateY(-50%);
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
.cub-1 {
  -webkit-transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  width: 16em;
  height: 1em;
  margin: -0.5em 0 0 -8em;
}
.cub-1 .ft {
  -webkit-transform: translateZ(6em);
  -ms-transform: translateZ(6em);
  transform: translateZ(6em);
}
.cub-1 .bk {
  -webkit-transform: translateZ(-6em) rotateY(180deg);
  -ms-transform: translateZ(-6em) rotateY(180deg);
  transform: translateZ(-6em) rotateY(180deg);
}
.cub-1 .rt,
.cub-1 .lt {
  width: 12em;
  height: 1em;
}
.cub-1 .tp,
.cub-1 .bm {
  width: 16em;
  height: 12em;
}
.cub-1 .face {
  background-color: #fff;
}
.cub-1 .ft {
  width: 14em;
  margin-left: 1em;
}
.cub-1 .bk {
  width: 14em;
  margin-left: -1em;
}
.cub-1 .rt,
.cub-1 .lt {
  width: 10em;
}
.cub-1 .tp,
.cub-1 .bm,
.cub-1 .tp .photon-shader,
.cub-1 .bm .photon-shader {
  border-radius: 1em;
}
.cub-1 .cr {
  width: 1em;
  left: 0.5em;
}
.cub-1 .cr-0 {
  -webkit-transform: translate3D(14em, 0, 5em);
  -ms-transform: translate3D(14em, 0, 5em);
  transform: translate3D(14em, 0, 5em);
}
.cub-1 .cr-1 {
  -webkit-transform: translate3D(14em, 0, -5em);
  -ms-transform: translate3D(14em, 0, -5em);
  transform: translate3D(14em, 0, -5em);
}
.cub-1 .cr-2 {
  -webkit-transform: translate3D(0, 0, -5em);
  -ms-transform: translate3D(0, 0, -5em);
  transform: translate3D(0, 0, -5em);
}
.cub-1 .cr-3 {
  -webkit-transform: translate3D(0, 0, 5em);
  -ms-transform: translate3D(0, 0, 5em);
  transform: translate3D(0, 0, 5em);
}
.cub-1 .cr-0 .s0 {
  -webkit-transform: rotateY(15deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(15deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(15deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s1 {
  -webkit-transform: rotateY(45deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(45deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(45deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s2 {
  -webkit-transform: rotateY(75deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(75deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(75deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s0 {
  -webkit-transform: rotateY(105deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(105deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(105deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s1 {
  -webkit-transform: rotateY(135deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(135deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(135deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s2 {
  -webkit-transform: rotateY(165deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(165deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(165deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s0 {
  -webkit-transform: rotateY(195deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(195deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(195deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s1 {
  -webkit-transform: rotateY(225deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(225deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(225deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s2 {
  -webkit-transform: rotateY(255deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(255deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(255deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s0 {
  -webkit-transform: rotateY(285deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(285deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(285deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s1 {
  -webkit-transform: rotateY(315deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(315deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(315deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s2 {
  -webkit-transform: rotateY(345deg) translate3D(-50%, 0, 0.975em);
  -ms-transform: rotateY(345deg) translate3D(-50%, 0, 0.975em);
  transform: rotateY(345deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .side {
  width: 0.560898384862245em;
}