html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.w-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}

.background {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: #000;
}

.scene-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 15%;
  padding-left: 15%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-perspective: 900px;
  perspective: 900px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.rotating-wrap {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 400px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: rotateX(0deg) rotateY(0.01deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(0.01deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.rotating-wrap._1 {
  z-index: 50;
  -webkit-transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.rotating-wrap._2 {
  z-index: 49;
}

.rotating-wrap._3 {
  z-index: 48;
}

.rotating-wrap._4 {
  z-index: 47;
}

.rotating-wrap._5 {
  z-index: 46;
}

.rotating-wrap._6 {
  z-index: 45;
}

.axis {
  position: absolute;
  left: 0px;
  top: 50%;
  right: 0px;
  z-index: 100;
  display: none;
  width: 1px;
  height: 800px;
  margin-right: auto;
  margin-left: auto;
  background-color: #129c28;
  -webkit-transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);
}

.button {
  position: absolute;
  z-index: 1000;
  margin-top: 15px;
  border-radius: 2px;
  background-color: rgba(255, 0, 102, .78);
}

.button:hover {
  background-color: #0ab2c0;
}

.cube-3d {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-3d.yellow {
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.85, 0.85, 0.85);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.85, 0.85, 0.85);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-3d.lime {
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.7, 0.7, 0.7);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.7, 0.7, 0.7);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-3d.teal {
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.55, 0.55, 0.55);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.55, 0.55, 0.55);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-3d.blue {
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.4, 0.4, 0.4);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.4, 0.4, 0.4);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-3d.purple {
  -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.25, 0.25, 0.25);
  transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.25, 0.25, 0.25);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-top {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #ff0047;
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 150px);
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-top.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-top.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-top.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-top.blue {
  border-width: 12px;
  border-color: #1124ff;
}

.cube-side-top.purple {
  border-width: 15px;
  border-color: #90f;
}

.cube-side-bottom {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #f06;
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -150px);
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-bottom.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-bottom.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-bottom.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-bottom.blue {
  border-width: 10px;
  border-color: #1124ff;
}

.cube-side-bottom.purple {
  border-width: 15px;
  border-color: #90f;
}

.cube-side-left {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #f06;
  -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, -150px);
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, -150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-left.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-left.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-left.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-left.blue {
  border-width: 10px;
  border-color: #1124ff;
}

.cube-side-left.purple {
  border-width: 15px;
  border-color: #90f;
}

.cube-side-right {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #f06;
  -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, 150px);
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, 150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-right.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-right.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-right.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-right.blue {
  border-width: 10px;
  border-color: #1124ff;
}

.cube-side-right.purple {
  border-width: 15px;
  border-color: #90f;
}

.cube-side-front {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #f06;
  -webkit-transform: translate3d(0px, 0px, 150px);
  transform: translate3d(0px, 0px, 150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-front.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-front.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-front.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-front.blue {
  border-width: 10px;
  border-color: #1124ff;
}

.cube-side-front.purple {
  border-width: 15px;
  border-color: #90f;
}

.cube-side-back {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 5px solid #f06;
  -webkit-transform: translate3d(0px, 0px, -150px);
  transform: translate3d(0px, 0px, -150px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube-side-back.yellow {
  border-width: 6px;
  border-color: #ffd600;
}

.cube-side-back.lime {
  border-width: 7px;
  border-color: #00ff29;
}

.cube-side-back.teal {
  border-width: 8px;
  border-color: #0ab2c0;
}

.cube-side-back.blue {
  border-width: 10px;
  border-color: #1124ff;
}

.cube-side-back.purple {
  border-width: 15px;
  border-color: #90f;
}

.w-webflow-badge,
.w-webflow-badge * {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: block;
  visibility: visible;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  border: 0 none transparent;
  border-radius: 0;
  background: none;
  background-image: none;
  background-position: 0% 0%;
  background-size: auto auto;
  background-repeat: repeat;
  background-origin: padding-box;
  background-clip: border-box;
  background-attachment: scroll;
  background-color: transparent;
  box-shadow: none;
  opacity: 1.0;
  transform: none;
  transition: none;
  direction: ltr;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-style: inherit;
  font-variant: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-indent: 0;
  text-transform: inherit;
  list-style-type: disc;
  text-shadow: none;
  font-smoothing: auto;
  vertical-align: baseline;
  cursor: inherit;
  white-space: inherit;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}
.w-webflow-badge {
  position: fixed !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  color: #AAADB0 !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  padding: 6px 8px 6px 6px !important;
  font-size: 12px !important;
  opacity: 1.0 !important;
  line-height: 14px !important;
  text-decoration: none !important;
  transform: none !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.w-webflow-badge > img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

@media (max-width: 767px) {
  .background {
    min-height: 400px;
  }
  .scene-container {
    padding-right: 15%;
    padding-left: 15%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 50px;
    -ms-flex: 0 50px;
    flex: 0 50px;
  }

  .rotating-wrap {
    width: 120px;
    height: 25px;
  }
  .cube-3d {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.6, 0.6, 0.6);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.6, 0.6, 0.6);
  }
  .cube-3d.yellow {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.53, 0.53, 0.53);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.53, 0.53, 0.53);
  }
  .cube-3d.lime {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.46, 0.46, 0.46);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.46, 0.46, 0.46);
  }
  .cube-3d.teal {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.39, 0.39, 0.39);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.39, 0.39, 0.39);
  }
  .cube-3d.blue {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.32, 0.32, 0.32);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.32, 0.32, 0.32);
  }
  .cube-3d.purple {
    -webkit-transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.25, 0.25, 0.25);
    transform: rotateX(-55deg) rotateY(-45deg) rotateZ(0deg) scale3d(0.25, 0.25, 0.25);
  }
}