/* CUBE
 * -------------------------------------------- */
/* Colors
 * -------------------------------------------- */
/* WEBFONTS -------------------------------------------- */
/* heebo-regular - latin */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  src: url("../WebFonts/Heebo-Regular.eot");
  src: url("../WebFonts/Heebo-Regular.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Regular.woff2") format("woff2"), url("../WebFonts/Heebo-Regular.woff") format("woff"), url("../WebFonts/Heebo-Regular.ttf") format("truetype"), url("../WebFonts/Heebo-Regular.svg#Heebo") format("svg"); }
/* heebo-thin - latin */
@font-face {
  font-family: "Heebo-Thin";
  font-style: normal;
  font-weight: 400;
  src: url("../WebFonts/Heebo-Thin.eot");
  src: url("../WebFonts/Heebo-Thin.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Thin.woff2") format("woff2"), url("../WebFonts/Heebo-Thin.woff") format("woff"), url("../WebFonts/Heebo-Thin.ttf") format("truetype"), url("../WebFonts/Heebo-Thin.svg#Heebo") format("svg"); }
/* heebo-light - latin */
@font-face {
  font-family: "Heebo-ExtraLight";
  font-style: normal;
  font-weight: 400;
  src: url("../WebFonts/Heebo-ExtraLight.eot");
  src: url("../WebFonts/Heebo-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-ExtraLight.woff2") format("woff2"), url("../WebFonts/Heebo-ExtraLight.woff") format("woff"), url("../WebFonts/Heebo-ExtraLight.ttf") format("truetype"), url("../WebFonts/Heebo-ExtraLight.svg#Heebo") format("svg"); }
@font-face {
  font-family: "Heebo-Light";
  font-style: normal;
  font-weight: 400;
  src: url("../WebFonts/Heebo-Light.eot");
  src: url("../WebFonts/Heebo-Light.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Light.woff2") format("woff2"), url("../WebFonts/Heebo-Light.woff") format("woff"), url("../WebFonts/Heebo-Light.ttf") format("truetype"), url("../WebFonts/Heebo-Light.svg#Heebo") format("svg"); }
@font-face {
  font-family: "Heebo-Medium";
  font-style: normal;
  font-weight: 700;
  src: url("../WebFonts/Heebo-Medium.eot");
  src: url("../WebFonts/Heebo-Medium.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Medium.woff2") format("woff2"), url("../WebFonts/Heebo-Medium.ttf") format("truetype"), url("../WebFonts/Heebo-Medium.svg#Heebo") format("svg"); }
@font-face {
  font-family: "Heebo-SemiBold";
  font-style: normal;
  font-weight: 700;
  src: url("../WebFonts/Heebo-SemiBold.eot");
  src: url("../WebFonts/Heebo-SemiBold.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-SemiBold.woff2") format("woff2"), url("../WebFonts/Heebo-SemiBold.ttf") format("truetype"), url("../WebFonts/Heebo-SemiBold.svg#Heebo") format("svg"); }
/* heebo-700 - latin */
@font-face {
  font-family: "Heebo-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../WebFonts/Heebo-Bold.eot");
  src: url("../WebFonts/Heebo-Bold.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Bold.woff2") format("woff2"), url("../WebFonts/Heebo-Bold.ttf") format("truetype"), url("../WebFonts/Heebo-Bold.svg#Heebo") format("svg"); }
@font-face {
  font-family: "Heebo-ExtraBold";
  font-style: normal;
  font-weight: 700;
  src: url("../WebFonts/Heebo-ExtraBold.eot");
  src: url("../WebFonts/Heebo-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-ExtraBold.woff2") format("woff2"), url("../WebFonts/Heebo-ExtraBold.ttf") format("truetype"), url("../WebFonts/Heebo-ExtraBold.svg#Heebo") format("svg"); }
@font-face {
  font-family: "Heebo-Black";
  font-style: normal;
  font-weight: 700;
  src: url("../WebFonts/Heebo-Black.eot");
  src: url("../WebFonts/Heebo-Black.eot?#iefix") format("embedded-opentype"), url("../WebFonts/Heebo-Black.woff2") format("woff2"), url("../WebFonts/Heebo-Black.ttf") format("truetype"), url("../WebFonts/Heebo-Black.svg#Heebo") format("svg"); }
@font-face {
  font-family: "EBGaramond-Bold";
  font-style: normal;
  font-weight: 400;
  src: url("../WebFonts/EBGaramond-Bold.eot");
  src: url("../WebFonts/EBGaramond-Bold.eot?#iefix") format("embedded-opentype"), url("../WebFonts/EBGaramond-Bold.woff2") format("woff2"), url("../WebFonts/EBGaramond-Bold.woff") format("woff"), url("../WebFonts/EBGaramond-Bold.ttf") format("truetype"), url("../WebFonts/EBGaramond-Bold.svg#Heebo") format("svg"); }
.content-container.cube {
  margin-top: 50px;
  min-width: 320px; }
  .content-container.cube .inner {
    max-width: 700px;
    padding: 700px 20px 0; }
    .content-container.cube .inner .container {
      position: absolute;
      width: 300px;
      height: 300px;
      perspective: 600px;
      left: 50%;
      top: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0); }
      .content-container.cube .inner .container #cube {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: transform .6s ease-in-out;
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
        transform: translate3d(0, 0, 0); }
        .content-container.cube .inner .container #cube.initial {
          opacity: 0; }
          .content-container.cube .inner .container #cube.initial + #cube_text > div > div {
            opacity: 0; }
        .content-container.cube .inner .container #cube.reset {
          transform: none !important;
          transition: unset; }
        .content-container.cube .inner .container #cube.stage-0 {
          transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) !important;
          transition: all .7s ease-in-out; }
        .content-container.cube .inner .container #cube.stage-1 {
          transform: rotateX(40deg) rotateY(0deg) rotateZ(45deg) !important; }
          .content-container.cube .inner .container #cube.stage-1 + #cube_text > div.stage-1-text {
            opacity: 1;
            width: 80%; }
        .content-container.cube .inner .container #cube.stage-2 {
          transform: rotateX(130deg) rotateY(-25deg) rotateZ(75deg) !important; }
          .content-container.cube .inner .container #cube.stage-2 + #cube_text > div.stage-2-text {
            opacity: 1;
            width: 80%; }
        .content-container.cube .inner .container #cube.stage-3 {
          transform: rotateX(230deg) rotateY(0deg) rotateZ(50deg) !important; }
          .content-container.cube .inner .container #cube.stage-3 + #cube_text > div.stage-3-text {
            opacity: 1;
            width: 95%; }
        .content-container.cube .inner .container #cube.stage-4 {
          transform: rotateX(-40deg) rotateY(25deg) rotateZ(0deg) !important; }
          .content-container.cube .inner .container #cube.stage-4 + #cube_text > div.stage-4-text {
            opacity: 1;
            width: 80%; }
        .content-container.cube .inner .container #cube.stage-5 {
          transform: rotateX(-40deg) rotateY(25deg) rotateZ(0deg) !important; }
          .content-container.cube .inner .container #cube.stage-5 + #cube_text > div.stage-5-text {
            opacity: 1;
            width: 80%; }
        .content-container.cube .inner .container #cube.stage-6 {
          transform: rotateX(-40deg) rotateY(25deg) rotateZ(0deg) !important; }
          .content-container.cube .inner .container #cube.stage-6 + #cube_text > div.stage-6-text {
            opacity: 1;
            width: 80%; }
        .content-container.cube .inner .container #cube .face {
          position: absolute;
          width: 100%;
          height: 100%;
          background-size: cover;
          -webkit-user-select: none;
          /* Safari */
          -ms-user-select: none;
          /* IE 10 and IE 11 */
          user-select: none;
          /* Standard syntax */
          /*
          &:after {
            display: none;
            content: attr(data-face);
            color: greenyellow;
            position: absolute;
            bottom: 8px;
            right: 8px;
            font-weight: bold;
            text-align: center;
            width: 20px;
            height: 20px;
            background-color: red;
          }
           */ }
          .content-container.cube .inner .container #cube .face:nth-child(1) {
            transform: translate3d(0px, 0px, 150px); }
          .content-container.cube .inner .container #cube .face:nth-child(2) {
            transform: translate3d(150px, 0, 0) rotateY(90deg) rotate(-90deg); }
          .content-container.cube .inner .container #cube .face:nth-child(3) {
            transform: translate3d(0px, 0px, -150px) rotateY(180deg) rotate(-90deg); }
          .content-container.cube .inner .container #cube .face:nth-child(4) {
            transform: translate3d(-150px, 0, 0) rotateY(270deg) rotate(-90deg); }
          .content-container.cube .inner .container #cube .face:nth-child(5) {
            transform: translate3d(0px, -150px, 0) rotateX(90deg); }
          .content-container.cube .inner .container #cube .face:nth-child(6) {
            transform: translate3d(0px, 150px, 0) rotateX(-90deg); }
      .content-container.cube .inner .container #cube_text {
        position: absolute;
        top: 58%;
        left: -100%;
        z-index: 1000;
        width: 300%;
        min-width: 720px;
        max-width: 100vw;
        height: 300px;
        overflow: hidden;
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
        transform: translate3d(0, -50%, 0) translateZ(270px) scale(0.55); }
        .content-container.cube .inner .container #cube_text > div {
          position: absolute;
          width: 150%;
          height: 80%;
          transition: all .6s ease-in-out;
          opacity: 0;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          -webkit-user-select: none;
          /* Safari */
          -ms-user-select: none;
          /* IE 10 and IE 11 */
          user-select: none;
          /* Standard syntax */ }
          .content-container.cube .inner .container #cube_text > div > div {
            position: relative;
            height: 100%; }
            .content-container.cube .inner .container #cube_text > div > div > span {
              position: absolute;
              font-family: "Heebo-SemiBold", Arial, sans-serif;
              font-size: 6rem;
              line-height: 1;
              user-select: none;
              width: 350px; }
              .content-container.cube .inner .container #cube_text > div > div > span > span {
                display: block; }
              .content-container.cube .inner .container #cube_text > div > div > span:first-child {
                top: 0;
                left: 0;
                text-align: left; }
                .content-container.cube .inner .container #cube_text > div > div > span:first-child > span {
                  text-align: right; }
                  .content-container.cube .inner .container #cube_text > div > div > span:first-child > span:first-child {
                    text-align: left; }
              .content-container.cube .inner .container #cube_text > div > div > span:last-child {
                bottom: 2px;
                right: 0;
                text-align: right; }
                .content-container.cube .inner .container #cube_text > div > div > span:last-child > span {
                  text-align: left; }
                  .content-container.cube .inner .container #cube_text > div > div > span:last-child > span:first-child {
                    text-align: right; }
          .content-container.cube .inner .container #cube_text > div.stage-2-text {
            height: 100%; }
            .content-container.cube .inner .container #cube_text > div.stage-2-text > div {
              height: 85%;
              border-top: solid 10px transparent; }
              .content-container.cube .inner .container #cube_text > div.stage-2-text > div > span:last-child > span {
                text-align: right; }
                .content-container.cube .inner .container #cube_text > div.stage-2-text > div > span:last-child > span:first-child {
                  padding-right: 50px; }
          .content-container.cube .inner .container #cube_text > div.stage-3-text {
            height: 100%; }
            .content-container.cube .inner .container #cube_text > div.stage-3-text > div {
              height: 80%;
              border-top: solid 60px transparent; }
              .content-container.cube .inner .container #cube_text > div.stage-3-text > div > span:last-child > span {
                text-align: left; }
                .content-container.cube .inner .container #cube_text > div.stage-3-text > div > span:last-child > span:first-child {
                  padding-left: 50px; }
        .content-container.cube .inner .container #cube_text:before, .content-container.cube .inner .container #cube_text:after {
          position: absolute;
          content: '';
          height: 100%;
          width: 20px;
          background: linear-gradient(to right, white, rgba(255, 255, 255, 0.001)); }
        .content-container.cube .inner .container #cube_text:after {
          right: 0;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.001), white); }
        .content-container.cube .inner .container #cube_text.with-drop-shadow > div > div > span {
          filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.5)); }

@media (max-width: 920px) {
  .content-container.cube .inner .container #cube_text {
    left: 50%;
    z-index: 1000;
    width: 150vw;
    transform: translate3d(-50%, -50%, 0) translateZ(250px) scale(0.55); }
    .content-container.cube .inner .container #cube_text span {
      text-align: center; } }
@media (max-width: 700px) {
  .content-container.cube .inner {
    padding: 100% 20px 0;
    overflow-x: hidden; }
    .content-container.cube .inner .container {
      width: 200px;
      height: 200px;
      perspective: 400px; }
      .content-container.cube .inner .container #cube_text {
        transform: translate3d(-50%, -45%, 0) translateZ(180px) scale(0.4);
        width: 134vw;
        max-width: unset; }
      .content-container.cube .inner .container #cube .face:nth-child(1) {
        transform: translate3d(0px, 0px, 100px) !important; }
      .content-container.cube .inner .container #cube .face:nth-child(2) {
        transform: translate3d(100px, 0, 0) rotateY(90deg) !important; }
      .content-container.cube .inner .container #cube .face:nth-child(3) {
        transform: translate3d(0px, 0px, -100px) rotateY(180deg) !important; }
      .content-container.cube .inner .container #cube .face:nth-child(4) {
        transform: translate3d(-100px, 0, 0) rotateY(270deg) !important; }
      .content-container.cube .inner .container #cube .face:nth-child(5) {
        transform: translate3d(0px, -100px, 0) rotateX(90deg) !important; }
      .content-container.cube .inner .container #cube .face:nth-child(6) {
        transform: translate3d(0px, 100px, 0) rotateX(-90deg) !important; } }
@media (max-width: 600px) {
  .content-container.cube .inner .container #cube_text {
    width: 153vw;
    transform: translate3d(-50%, -50%, 0) translateZ(180px) scale(0.35); } }
@media (max-width: 500px) {
  .content-container.cube .inner .container #cube_text {
    width: 177vw;
    transform: translate3d(-50%, -50%, 0) translateZ(180px) scale(0.3); } }
@media (max-width: 420px) {
  .content-container.cube .inner .container {
    width: 150px;
    height: 150px;
    perspective: 300px; }
    .content-container.cube .inner .container #cube_text {
      width: 225vw;
      transform: translate3d(-50%, -50%, 0) translateZ(125px) scale(0.25); }
    .content-container.cube .inner .container #cube .face:nth-child(1) {
      transform: translate3d(0px, 0px, 75px) !important; }
    .content-container.cube .inner .container #cube .face:nth-child(2) {
      transform: translate3d(75px, 0, 0) rotateY(90deg) !important; }
    .content-container.cube .inner .container #cube .face:nth-child(3) {
      transform: translate3d(0px, 0px, -75px) rotateY(180deg) !important; }
    .content-container.cube .inner .container #cube .face:nth-child(4) {
      transform: translate3d(-75px, 0, 0) rotateY(270deg) !important; }
    .content-container.cube .inner .container #cube .face:nth-child(5) {
      transform: translate3d(0px, -75px, 0) rotateX(90deg) !important; }
    .content-container.cube .inner .container #cube .face:nth-child(6) {
      transform: translate3d(0px, 75px, 0) rotateX(-90deg) !important; } }

/*# sourceMappingURL=cube.css.map */