@font-face {
  font-family: 'Gilroy-Black-Italic';
  src: url("../webfonts/gilroy-blackitalic-webfont.woff2") format("woff2"), url("../webfonts/gilroy-blackitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Gilroy-Bold';
  src: url("../webfonts/gilroy-bold-webfont.woff2") format("woff2"), url("../webfonts/gilroy-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Gilroy-Medium';
  src: url("../webfonts/gilroy-medium-webfont.woff2") format("woff2"), url("../webfonts/gilroy-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

h1, h2, h3, h4, h5, h6, p, span {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body, html, div, p, span {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }

#warped {
  position: absolute;
  display: block;
  margin: -68px 0 0 -72px; }

#warped > span[class^=w]:nth-of-type(n+0) {
  display: block;
  position: absolute;
  -moz-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%; }

#warped span {
  font-family: "Gilroy-Medium";
  font-size: 10px;
  line-height: 0;
  white-space: pre;
  overflow: visible;
  padding: 0px; }

#warped .w0 {
  -moz-transform: rotate(-0.91rad);
  -webkit-transform: rotate(-0.91rad);
  -o-transform: rotate(-0.91rad);
  -ms-transform: rotate(-0.91rad);
  transform: rotate(-0.91rad);
  width: 5px;
  height: 0px;
  left: 88.01px;
  top: 94.33px; }

#warped .w1 {
  -moz-transform: rotate(-0.69rad);
  -webkit-transform: rotate(-0.69rad);
  -o-transform: rotate(-0.69rad);
  -ms-transform: rotate(-0.69rad);
  transform: rotate(-0.69rad);
  width: 3px;
  height: 0px;
  left: 95.31px;
  top: 87.92px; }

#warped .w2 {
  -moz-transform: rotate(-0.49rad);
  -webkit-transform: rotate(-0.49rad);
  -o-transform: rotate(-0.49rad);
  -ms-transform: rotate(-0.49rad);
  transform: rotate(-0.49rad);
  width: 3px;
  height: 0px;
  left: 101.98px;
  top: 83.54px; }

#warped .w3 {
  -moz-transform: rotate(-0.26rad);
  -webkit-transform: rotate(-0.26rad);
  -o-transform: rotate(-0.26rad);
  -ms-transform: rotate(-0.26rad);
  transform: rotate(-0.26rad);
  width: 5px;
  height: 0px;
  left: 109.36px;
  top: 80.3px; }

#warped .w4 {
  -moz-transform: rotate(-0.01rad);
  -webkit-transform: rotate(-0.01rad);
  -o-transform: rotate(-0.01rad);
  -ms-transform: rotate(-0.01rad);
  transform: rotate(-0.01rad);
  width: 5px;
  height: 0px;
  left: 119.25px;
  top: 79px; }

#warped .w5 {
  -moz-transform: rotate(0.21rad);
  -webkit-transform: rotate(0.21rad);
  -o-transform: rotate(0.21rad);
  -ms-transform: rotate(0.21rad);
  transform: rotate(0.21rad);
  width: 3px;
  height: 0px;
  left: 129.18px;
  top: 79.95px; }

#warped .w6 {
  -moz-transform: rotate(0.49rad);
  -webkit-transform: rotate(0.49rad);
  -o-transform: rotate(0.49rad);
  -ms-transform: rotate(0.49rad);
  transform: rotate(0.49rad);
  width: 9px;
  height: 0px;
  left: 136.45px;
  top: 83.77px; }

#warped .w7 {
  -moz-transform: rotate(0.79rad);
  -webkit-transform: rotate(0.79rad);
  -o-transform: rotate(0.79rad);
  -ms-transform: rotate(0.79rad);
  transform: rotate(0.79rad);
  width: 5px;
  height: 0px;
  left: 148.02px;
  top: 90.95px; }

#warped .w8 {
  -moz-transform: rotate(1.01rad);
  -webkit-transform: rotate(1.01rad);
  -o-transform: rotate(1.01rad);
  -ms-transform: rotate(1.01rad);
  transform: rotate(1.01rad);
  width: 3px;
  height: 0px;
  left: 154.55px;
  top: 98.02px; }

#warped .w9 {
  -moz-transform: rotate(1.21rad);
  -webkit-transform: rotate(1.21rad);
  -o-transform: rotate(1.21rad);
  -ms-transform: rotate(1.21rad);
  transform: rotate(1.21rad);
  width: 3px;
  height: 0px;
  left: 158.04px;
  top: 105.2px; }

#warped .w10 {
  -moz-transform: rotate(1.41rad);
  -webkit-transform: rotate(1.41rad);
  -o-transform: rotate(1.41rad);
  -ms-transform: rotate(1.41rad);
  transform: rotate(1.41rad);
  width: 3px;
  height: 0px;
  left: 160.03px;
  top: 112.94px; }

#warped .w11 {
  -moz-transform: rotate(1.61rad);
  -webkit-transform: rotate(1.61rad);
  -o-transform: rotate(1.61rad);
  -ms-transform: rotate(1.61rad);
  transform: rotate(1.61rad);
  width: 3px;
  height: 0px;
  left: 160.45px;
  top: 120.91px; }

#warped .w12 {
  -moz-transform: rotate(1.85rad);
  -webkit-transform: rotate(1.85rad);
  -o-transform: rotate(1.85rad);
  -ms-transform: rotate(1.85rad);
  transform: rotate(1.85rad);
  width: 6px;
  height: 0px;
  left: 157.38px;
  top: 130.26px; }

#warped .w13 {
  -moz-transform: rotate(2.1rad);
  -webkit-transform: rotate(2.1rad);
  -o-transform: rotate(2.1rad);
  -ms-transform: rotate(2.1rad);
  transform: rotate(2.1rad);
  width: 4px;
  height: 0px;
  left: 154.4px;
  top: 139.41px; }

#warped .w14 {
  -moz-transform: rotate(2.31rad);
  -webkit-transform: rotate(2.31rad);
  -o-transform: rotate(2.31rad);
  -ms-transform: rotate(2.31rad);
  transform: rotate(2.31rad);
  width: 3px;
  height: 0px;
  left: 149.82px;
  top: 146.2px; }

#warped .w15 {
  -moz-transform: rotate(2.55rad);
  -webkit-transform: rotate(2.55rad);
  -o-transform: rotate(2.55rad);
  -ms-transform: rotate(2.55rad);
  transform: rotate(2.55rad);
  width: 6px;
  height: 0px;
  left: 141.09px;
  top: 152.34px; }

#warped .w16 {
  -moz-transform: rotate(2.81rad);
  -webkit-transform: rotate(2.81rad);
  -o-transform: rotate(2.81rad);
  -ms-transform: rotate(2.81rad);
  transform: rotate(2.81rad);
  width: 5px;
  height: 0px;
  left: 132.18px;
  top: 156.93px; }

#warped .w17 {
  -moz-transform: rotate(3.06rad);
  -webkit-transform: rotate(3.06rad);
  -o-transform: rotate(3.06rad);
  -ms-transform: rotate(3.06rad);
  transform: rotate(3.06rad);
  width: 5px;
  height: 0px;
  left: 122.4px;
  top: 158.89px; }

#warped .w18 {
  -moz-transform: rotate(3.3rad);
  -webkit-transform: rotate(3.3rad);
  -o-transform: rotate(3.3rad);
  -ms-transform: rotate(3.3rad);
  transform: rotate(3.3rad);
  width: 4px;
  height: 0px;
  left: 113.44px;
  top: 158.45px; }

#warped .w19 {
  -moz-transform: rotate(3.51rad);
  -webkit-transform: rotate(3.51rad);
  -o-transform: rotate(3.51rad);
  -ms-transform: rotate(3.51rad);
  transform: rotate(3.51rad);
  width: 3px;
  height: 0px;
  left: 105.76px;
  top: 156.18px; }

#warped .w20 {
  -moz-transform: rotate(3.74rad);
  -webkit-transform: rotate(3.74rad);
  -o-transform: rotate(3.74rad);
  -ms-transform: rotate(3.74rad);
  transform: rotate(3.74rad);
  width: 5px;
  height: 0px;
  left: 96.84px;
  top: 151.96px; }

#warped .w21 {
  -moz-transform: rotate(4rad);
  -webkit-transform: rotate(4rad);
  -o-transform: rotate(4rad);
  -ms-transform: rotate(4rad);
  transform: rotate(4rad);
  width: 6px;
  height: 0px;
  left: 88.56px;
  top: 144.95px; }

#warped .w22 {
  -moz-transform: rotate(4.26rad);
  -webkit-transform: rotate(4.26rad);
  -o-transform: rotate(4.26rad);
  -ms-transform: rotate(4.26rad);
  transform: rotate(4.26rad);
  width: 5px;
  height: 0px;
  left: 83.37px;
  top: 136.16px; }

#warped .w23 {
  -moz-transform: rotate(4.51rad);
  -webkit-transform: rotate(4.51rad);
  -o-transform: rotate(4.51rad);
  -ms-transform: rotate(4.51rad);
  transform: rotate(4.51rad);
  width: 5px;
  height: 0px;
  left: 80.24px;
  top: 126.69px; }

#warped .w24 {
  -moz-transform: rotate(9.59rad);
  -webkit-transform: rotate(9.59rad);
  -o-transform: rotate(9.59rad);
  -ms-transform: rotate(9.59rad);
  transform: rotate(9.59rad);
  width: 5px;
  height: 0px;
  left: 112.61px;
  top: 158.4px; }

#warped .w25 {
  -moz-transform: rotate(9.84rad);
  -webkit-transform: rotate(9.84rad);
  -o-transform: rotate(9.84rad);
  -ms-transform: rotate(9.84rad);
  transform: rotate(9.84rad);
  width: 5px;
  height: 0px;
  left: 103.07px;
  top: 155.47px; }

#warped .w26 {
  -moz-transform: rotate(4.67rad);
  -webkit-transform: rotate(4.67rad);
  -o-transform: rotate(4.67rad);
  -ms-transform: rotate(4.67rad);
  transform: rotate(4.67rad);
  width: 3px;
  height: 0px;
  left: 80.53px;
  top: 120.66px; }

#warped .w27 {
  -moz-transform: rotate(4.9rad);
  -webkit-transform: rotate(4.9rad);
  -o-transform: rotate(4.9rad);
  -ms-transform: rotate(4.9rad);
  transform: rotate(4.9rad);
  width: 6px;
  height: 0px;
  left: 79.76px;
  top: 111.21px; }

#warped .w28 {
  -moz-transform: rotate(5.17rad);
  -webkit-transform: rotate(5.17rad);
  -o-transform: rotate(5.17rad);
  -ms-transform: rotate(5.17rad);
  transform: rotate(5.17rad);
  width: 5px;
  height: 0px;
  left: 83.62px;
  top: 101.29px; }

#warped .w29 {
  -moz-transform: rotate(5.42rad);
  -webkit-transform: rotate(5.42rad);
  -o-transform: rotate(5.42rad);
  -ms-transform: rotate(5.42rad);
  transform: rotate(5.42rad);
  width: 5px;
  height: 0px;
  left: 89.12px;
  top: 92.97px; }

#warped .w30 {
  -moz-transform: rotate(5.65rad);
  -webkit-transform: rotate(5.65rad);
  -o-transform: rotate(5.65rad);
  -ms-transform: rotate(5.65rad);
  transform: rotate(5.65rad);
  width: 4px;
  height: 0px;
  left: 96.59px;
  top: 86.55px; }

#warped .w31 {
  -moz-transform: rotate(5.87rad);
  -webkit-transform: rotate(5.87rad);
  -o-transform: rotate(5.87rad);
  -ms-transform: rotate(5.87rad);
  transform: rotate(5.87rad);
  width: 3px;
  height: 0px;
  left: 104.46px;
  top: 82.35px; }

#warped .w32 {
  -moz-transform: rotate(6.09rad);
  -webkit-transform: rotate(6.09rad);
  -o-transform: rotate(6.09rad);
  -ms-transform: rotate(6.09rad);
  transform: rotate(6.09rad);
  width: 5px;
  height: 0px;
  left: 112.04px;
  top: 79.7px; }

#warped .w33 {
  -moz-transform: rotate(6.35rad);
  -webkit-transform: rotate(6.35rad);
  -o-transform: rotate(6.35rad);
  -ms-transform: rotate(6.35rad);
  transform: rotate(6.35rad);
  width: 6px;
  height: 0px;
  left: 122px;
  top: 79.11px; }

#warped .w34 {
  -moz-transform: rotate(6.62rad);
  -webkit-transform: rotate(6.62rad);
  -o-transform: rotate(6.62rad);
  -ms-transform: rotate(6.62rad);
  transform: rotate(6.62rad);
  width: 5px;
  height: 0px;
  left: 132.74px;
  top: 81.25px; }

#warped .w35 {
  -moz-transform: rotate(6.87rad);
  -webkit-transform: rotate(6.87rad);
  -o-transform: rotate(6.87rad);
  -ms-transform: rotate(6.87rad);
  transform: rotate(6.87rad);
  width: 5px;
  height: 0px;
  left: 141.67px;
  top: 85.7px; }

#warped .w36 {
  -moz-transform: rotate(8.96rad);
  -webkit-transform: rotate(8.96rad);
  -o-transform: rotate(8.96rad);
  -ms-transform: rotate(8.96rad);
  transform: rotate(8.96rad);
  width: 11px;
  height: 24px;
  left: 354.73px;
  top: 330.58px; }

#warped .w37 {
  -moz-transform: rotate(9.07rad);
  -webkit-transform: rotate(9.07rad);
  -o-transform: rotate(9.07rad);
  -ms-transform: rotate(9.07rad);
  transform: rotate(9.07rad);
  width: 10px;
  height: 24px;
  left: 340.99px;
  top: 336.69px; }

#warped .w38 {
  -moz-transform: rotate(9.18rad);
  -webkit-transform: rotate(9.18rad);
  -o-transform: rotate(9.18rad);
  -ms-transform: rotate(9.18rad);
  transform: rotate(9.18rad);
  width: 15px;
  height: 24px;
  left: 321.76px;
  top: 341.79px; }

#warped .w39 {
  -moz-transform: rotate(9.31rad);
  -webkit-transform: rotate(9.31rad);
  -o-transform: rotate(9.31rad);
  -ms-transform: rotate(9.31rad);
  transform: rotate(9.31rad);
  width: 12px;
  height: 24px;
  left: 305.06px;
  top: 345.02px; }

#warped .w40 {
  -moz-transform: rotate(9.42rad);
  -webkit-transform: rotate(9.42rad);
  -o-transform: rotate(9.42rad);
  -ms-transform: rotate(9.42rad);
  transform: rotate(9.42rad);
  width: 11px;
  height: 24px;
  left: 289.09px;
  top: 345.99px; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Gilroy-Bold";
  color: #F8E71C;
  background: #9D4DE4;
  text-align: left;
  overflow: hidden;
  -webkit-font-smoothing: antialiased; }

a {
  font-family: "Gilroy-Bold";
  color: #F8E71C;
  text-decoration: none; }

#next {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  border: 1px solid #F8E71C;
  z-index: 1000; }

header {
  position: fixed;
  top: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px; }
  @media screen and (max-width: 640px) {
    header {
      top: 20px; } }

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.content {
  max-width: 70%; }
  @media screen and (max-width: 640px) {
    .content {
      max-width: 80%; } }
  @media screen and (max-width: 640px) {
    .content .qs {
      width: 34px; } }
  .content h1 {
    font-weight: normal;
    font-family: "Gilroy-Black-Italic";
    font-size: 90px;
    line-height: 90px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
    margin: 30px 0 60px 0;
    padding: 0; }
    @media screen and (max-width: 640px) {
      .content h1 {
        font-size: 50px;
        line-height: 50px;
        margin: 10px 0 30px 0; } }
  .content .transl {
    display: flex;
    flex-direction: row;
    margin: 0 0 0 8px; }
  .content .line {
    display: inline-block;
    width: 60px;
    height: 1px;
    border: 0;
    border-top: 2px solid #F8E71C;
    margin: 12px 24px 0 0;
    padding: 0;
    vertical-align: bottom; }
    @media screen and (max-width: 640px) {
      .content .line {
        width: 30px;
        margin: 8px 18px 0 0; } }
  .content .txt .it-desc {
    font-size: 22px;
    padding-bottom: 9px; }
    @media screen and (max-width: 640px) {
      .content .txt .it-desc {
        font-size: 18px;
        line-height: 20px;
        padding-bottom: 5px; } }
  .content .txt .en-desc {
    font-family: "Gilroy-Medium";
    font-size: 16px; }
    @media screen and (max-width: 640px) {
      .content .txt .en-desc {
        line-height: 18px; } }

footer {
  position: fixed;
  bottom: 40px;
  font-family: "Gilroy-Medium";
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 1001; }
  footer .tw {
    background-color: #9D4DE4;
    padding: 5px; }
  @media screen and (max-width: 640px) {
    footer {
      bottom: 20px; } }

#loader {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #F8E71C;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }
  #loader span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9D4DE4;
    animation: pulse .7s ease-out infinite alternate; }

@keyframes pulse {
  0% {
    opacity: 0;
    filter: alpha(opacity=0); }
  100% {
    opacity: 1;
    filter: alpha(opacity=100); } }