.cd-intro {
  position: absolute;
  height: auto;
  display: table;
  overflow: auto;
  top: 60px;
  right: 50%;
  left: 50%;
  max-width: 600px !important;
  z-index: 10000000;
  margin: auto;
  width: 500px;
}

.cd-intro-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-intro-content h1 {
  font-size: 2.4rem;
  color: #ffffff;
}

.cd-intro-content p {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 1em 0;
  color: #6d7a97;
}

.cd-intro-content .action-wrapper {
  display: inline-block;
}

.cd-intro-content .action-wrapper::after {
  clear: both;
  content: "";
  display: table;
}

@media only screen and (min-width: 768px) {
  .cd-intro-content h1 {
    font-size: 5.2rem;
    font-weight: 300;
  }
  .cd-intro-content p {
    font-size: 1.6rem;
    margin: 1.5em 0 1.9em;
  }
}

.cd-btn {
  display: inline-block;
  padding: 1.2em 1.4em;
  font-size: 1.3rem;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: #202e4a;
  border-radius: .25em;
  margin-right: 1.5em;
}

.cd-btn:nth-of-type(2) {
  margin-right: 0;
}

.cd-btn.main-action {
  background-color: #fb5e58;
}

@media only screen and (min-width: 480px) {
  .cd-btn {
    padding: 1.2em 1.6em;
  }
}

@media only screen and (min-width: 768px) {
  .cd-btn {
    padding: 1.4em 1.8em;
  }
}

.cd-intro-content h1, .cd-intro-content h1 span, .cd-intro-content p, .cd-intro-content .cd-btn {
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.no-cssanimations .cd-intro-content h1, .no-cssanimations.cd-intro-content h1 span, .no-cssanimations.cd-intro-content p, .no-cssanimations.cd-intro-content .cd-btn {
  opacity: 1;
}

.bouncy.cd-intro-content h1 {
  -webkit-animation-name: cd-bounce-right;
  animation-name: cd-bounce-right;
}

.bouncy.cd-intro-content p {
  -webkit-animation-name: cd-bounce-left;
  animation-name: cd-bounce-left;
}

.bouncy.cd-intro-content h1, .bouncy.cd-intro-content p {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.bouncy.cd-intro-content .cd-btn {
  -webkit-animation-name: cd-bounce-rotate;
  animation-name: cd-bounce-rotate;
}

.bouncy.cd-intro-content .cd-btn {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.bouncy.cd-intro-content .cd-btn.main-action {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-webkit-keyframes cd-bounce-right {
  0% {
    opacity: .2;
    -webkit-transform: translateX(-200px);
  }
  60% {
    opacity: .7;
    -webkit-transform: translateX(15px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-bounce-right {
  0% {
    opacity: .2;
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  60% {
    opacity: .7;
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes cd-bounce-left {
  0% {
    opacity: .2;
    -webkit-transform: translateX(200px);
  }
  60% {
    opacity: .7;
    -webkit-transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-bounce-left {
  0% {
    opacity: .2;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  60% {
    opacity: .7;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes cd-bounce-rotate {
  0% {
    opacity: .2;
    -webkit-transform: perspective(800px) rotateX(-80deg);
  }
  20% {
    opacity: 1;
  }
  60% {
    -webkit-transform: perspective(800px) rotateX(20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: perspective(800px) rotateX(0);
  }
}

@keyframes cd-bounce-rotate {
  0% {
    opacity: .2;
    -webkit-transform: perspective(800px) rotateX(-80deg);
    transform: perspective(800px) rotateX(-80deg);
  }
  20% {
    opacity: 1;
  }
  60% {
    -webkit-transform: perspective(800px) rotateX(20deg);
    transform: perspective(800px) rotateX(20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: perspective(800px) rotateX(0);
    transform: perspective(800px) rotateX(0);
  }
}

.cut.cd-intro-content h1 {
  position: relative;
  opacity: 1;
  font-weight: 700;
  color: transparent;
}

.cut.cd-intro-content h1 span {
  display: block;
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  overflow: hidden;
  color: #ffffff;
}

.cut.cd-intro-content h1 span:first-of-type {
  top: 0;
}

.cut.cd-intro-content h1 span:last-of-type {
  bottom: 0;
}

.cut.cd-intro-content h1 span:first-of-type::before, .cut.cd-intro-content h1 span:last-of-type::after {
  content: attr(data-content);
  position: absolute;
  width: 100%;
  left: 0;
  color: #ffffff;
}

.cut.cd-intro-content h1 span:first-of-type::before {
  top: 0;
}

.cut.cd-intro-content h1 span:last-of-type::after {
  bottom: 0;
}

.cut.cd-intro-content .cd-btn {
  margin-right: 0;
  border-radius: 0;
}

.cut.cd-intro-content h1 span, .cut.cd-intro-content p, .cut.cd-intro-content .cd-btn {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.cut.cd-intro-content h1 span, .cut.cd-intro-content p {
  -webkit-animation-name: cd-slide-left;
  animation-name: cd-slide-left;
}

.cut.cd-intro-content h1 span:first-of-type {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.cut.cd-intro-content p {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.cut.cd-intro-content .cd-btn {
  -webkit-animation-name: cd-slide-left-btn;
  animation-name: cd-slide-left-btn;
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}

@-webkit-keyframes cd-slide-left {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100vw);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-slide-left {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes cd-slide-left-btn {
  0% {
    opacity: 1;
    -webkit-transform: translateX(150vw);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-slide-left-btn {
  0% {
    opacity: 1;
    -webkit-transform: translateX(150vw);
    transform: translateX(150vw);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.reveal.cd-intro-content h1 {
  position: relative;
  opacity: 1;
  font-weight: 700;
  color: transparent;
  overflow: hidden;
}

.reveal.cd-intro-content h1::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: #ffffff;
  opacity: 0;
  -webkit-animation-name: cd-reveal-up;
  animation-name: cd-reveal-up;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.no-cssanimations .reveal.cd-intro-content h1::after {
  opacity: 1;
}

@media only screen and (min-width: 768px) {
  .reveal.cd-intro-content h1 {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}

.reveal.cd-intro-content p {
  position: relative;
  margin: 0;
  padding: 1em;
  background-color: #202e4a;
  -webkit-animation-name: cd-reveal-down;
  animation-name: cd-reveal-down;
}

@media only screen and (min-width: 1170px) {
  .reveal.cd-intro-content p {
    padding: 1em 1.6em;
  }
}

.reveal.cd-intro-content h1::after, .reveal.cd-intro-content p {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.reveal.cd-intro-content .action-wrapper {
  position: relative;
  /*overflow: hidden;*/
}

/*
.reveal.cd-intro-content .action-wrapper::before { content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background-color: #202e4a; -webkit-animation: cd-loading 0.4s 0.3s backwards; -moz-animation: cd-loading 0.4s 0.3s backwards; animation: cd-loading 0.4s 0.3s backwards; }
*/
.reveal.cd-intro-content .action-wrapper .cd-btn {
  display: block;
  opacity: 1;
  margin: 1em auto 0;
}

@media only screen and (min-width: 768px) {
  .reveal.cd-intro-content .action-wrapper .cd-btn {
    display: inline-block;
    margin: 0 0 0 1em;
  }
}

@-webkit-keyframes cd-reveal-up {
  0% {
    opacity: 1;
    -webkit-transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes cd-reveal-up {
  0% {
    opacity: 1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes cd-reveal-down {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes cd-reveal-down {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes cd-loading {
  0% {
    -webkit-transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

@keyframes cd-loading {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.mask.cd-intro-content h1 {
  position: relative;
  padding-bottom: 10px;
  opacity: 1;
  font-weight: 700;
  color: transparent;
  overflow: hidden;
}

.mask.cd-intro-content h1::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: #ffffff;
  -webkit-animation-name: cd-reveal-up;
  animation-name: cd-reveal-up;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.mask.cd-intro-content h1 span {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.mask.cd-intro-content h1 span::before {
  content: '';
  position: absolute;
  top: calc(100% + 8px);
  left: -1em;
  height: 2px;
  width: calc(100% + 2em);
  background-color: #ffffff;
  -webkit-animation: cd-loading-mask 1s 0.3s both;
  animation: cd-loading-mask 1s 0.3s both;
}

@media only screen and (min-width: 768px) {
  .mask.cd-intro-content h1 {
    padding-bottom: 20px;
  }
  .mask.cd-intro-content h1 span::before {
    top: calc(100% + 18px);
  }
}

.mask.cd-intro-content p {
  position: relative;
  margin: 0;
  padding: 10px 0 0;
  -webkit-animation-name: cd-reveal-down;
  animation-name: cd-reveal-down;
}

@media only screen and (min-width: 768px) {
  .mask.cd-intro-content p {
    padding-top: 20px;
  }
}

.mask.cd-intro-content h1::after,
.mask.cd-intro-content p {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.mask.cd-intro-content .action-wrapper {
  overflow: hidden;
}

.mask.cd-intro-content .action-wrapper .cd-btn {
  opacity: 1;
  margin: 0 0 0 1.5em;
}

.mask.cd-intro-content .action-wrapper .cd-btn:first-of-type {
  margin-left: 0;
}

@-webkit-keyframes cd-loading-mask {
  0%, 100% {
    -webkit-transform: scaleX(0);
  }
  40%, 60% {
    -webkit-transform: scaleX(1);
  }
}

@keyframes cd-loading-mask {
  0%, 100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  40%, 60% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.mask-2.cd-intro-content * {
  opacity: 1;
}

.mask-2.cd-intro-content .content-wrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 2em 0;
  overflow: hidden;
}

.mask-2.cd-intro-content .content-wrapper::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: #ffffff;
  -webkit-animation: cd-pulse 1.3s 0.3s both;
  animation: cd-pulse 1.3s 0.3s both;
}

.no-cssanimations .mask-2.cd-intro-content .content-wrapper::before {
  opacity: 0;
}

.mask-2.cd-intro-content .content-wrapper > div {
  position: relative;
  z-index: 1;
}

.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.mask-2.cd-intro-content .content-wrapper {
  -webkit-animation-name: cd-mask-wrapper;
  animation-name: cd-mask-wrapper;
}

.mask-2.cd-intro-content .content-wrapper > div {
  -webkit-animation-name: cd-mask-content;
  animation-name: cd-mask-content;
}

@-webkit-keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}

@keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes cd-pulse {
  0%, 30.8% {
    opacity: 0;
  }
  15.4%, 46.2%, 61.5%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cd-pulse {
  0%, 30.8% {
    opacity: 0;
  }
  15.4%, 46.2%, 61.5%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.scale.cd-intro-content * {
  opacity: 1;
}

.scale.cd-intro-content {
  background-color: transparent;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: cd-scale-in 0.6s 0.3s both;
  animation: cd-scale-in 0.6s 0.3s both;
}

@-webkit-keyframes cd-scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes cd-scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.parallax.cd-intro-content * {
  opacity: 1;
}

.parallax.cd-intro-content h1 span,
.parallax.cd-intro-content p span {
  position: relative;
  display: inline-block;
  padding: .5em 1em;
  color: transparent;
}

.parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content p span::before,
.parallax.cd-intro-content p span::after {
  position: absolute;
  left: 0;
  width: 100%;
}

.parallax.cd-intro-content h1 span::before,
.parallax.cd-intro-content p span::before {
  content: '';
  height: 100%;
  top: 0;
  background-color: #202e4a;
}

.parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content p span::after {
  content: attr(data-content);
  top: .5em;
}

.parallax.cd-intro-content h1 {
  font-size: 2.2rem;
}

.parallax.cd-intro-content h1 span::after {
  color: #ffffff;
}

@media only screen and (min-width: 768px) {
  .parallax.cd-intro-content h1 {
    font-size: 5.4rem;
  }
}

.parallax.cd-intro-content p span::after {
  color: #6d7a97;
}

.parallax .cd-btn {
  color: #202e4a;
  background-color: #ffffff;
  margin-top: .6em;
  border-radius: 0;
  margin-right: 0;
}

.parallax .cd-btn.main-action {
  background-color: #fb5e58;
  color: #ffffff;
  padding: 1.8em 2.2em;
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .parallax .cd-btn.main-action {
    padding: 2em 3em;
  }
}

.parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content h1 span::before,
.parallax.cd-intro-content p span::after,
.parallax.cd-intro-content p span::before,
.parallax.cd-intro-content .cd-btn {
  -webkit-animation-name: cd-slide-up;
  animation-name: cd-slide-up;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.parallax.cd-intro-content h1 span::after {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.parallax.cd-intro-content h1 span::before {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.parallax.cd-intro-content p span::after {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.parallax.cd-intro-content p span::before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.parallax.cd-intro-content .cd-btn {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.parallax.cd-intro-content .cd-btn.main-action {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
    transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.cd-intro.video {
  display: block;
}

.video.cd-intro-content {
  display: block;
  height: 100%;
  position: relative;
}

.video.cd-intro-content * {
  opacity: 1;
}

.video.cd-intro-content .svg-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video.cd-intro-content svg {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
}

.video.cd-intro-content svg.svg-mask {
  display: none;
}

.video.cd-intro-content p, .video.cd-intro-content .action-wrapper {
  position: absolute;
  z-index: 3;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video.cd-intro-content p {
  bottom: calc(50% + 80px);
  margin: 0;
  color: #040404;
  min-width: 90%;
}

.video.cd-intro-content .action-wrapper {
  top: calc(50% + 120px);
  min-width: 295px;
}

.video.cd-intro-content .cd-btn {
  background-color: rgba(4, 4, 4, 0.4);
}

.video.cd-intro-content .cd-btn.main-action {
  background-color: #fb5e58;
}

@media only screen and (min-width: 768px) {
  .video.cd-intro-content svg.svg-mask-mobile {
    display: none;
  }
  .video.cd-intro-content svg.svg-mask {
    display: block;
  }
  .video.cd-intro-content p {
    bottom: calc(50% + 40px);
  }
  .video.cd-intro-content .action-wrapper {
    top: calc(50% + 80px);
  }
}

.cd-bg-video-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/bg-img.jpg) no-repeat center center;
  background-size: cover;
}

.cd-bg-video-wrapper video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
}

.cd-bg-video-wrapper::after {
  display: none;
  content: 'mobile';
}

@media only screen and (min-width: 768px) {
  .cd-bg-video-wrapper::after {
    content: 'desktop';
  }
}

.cd-intro-content p a {
  position: relative;
  top: 10px;
  text-transform: none;
  font-family: 'Exo 2';
  font-style: italic;
  font-size: 50px;
  width: 100%;
  max-width: initial;
  padding: 20px -0 30px;
  margin: 0;
}

.cd-intro-content p {
  background: #2d353e !important;
  padding: 25px 50px !important;
  margin: 22px 0 0 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cd-intro-content h1 {
  margin: 0 !important;
}

.cd-intro-content p {
  background: #2d353e !important;
  padding: 25px 50px !important;
  margin: 22px 0 0 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 26px !important;
}

.cd-intro-content h1 {
  font-weight: 600 !important;
}

/*.cd-btn.main-action,.reveal.cd-intro-content .action-wrapper .cd-btn {  max-width: 90%!important;width: 90%!important;  font-size: 36px; text-transform: none; font-style: italic; text-decoration: none; font-weight: 700; padding: 20px 0 26px; }*/
.cd-btn.main-action, .reveal.cd-intro-content .action-wrapper .cd-btn {
  width: 60% !important;
  font-size: 36px;
  text-transform: none;
  font-style: italic;
  text-decoration: none;
  font-weight: 700;
  padding: 20px 0 26px;
  left: 0;
  position: absolute;
  z-index: 1000000;
  top: -100px;
  left: 5%;
}

.bouncy.cd-intro-content .cd-btn.main-action {
  margin: 0 5% !important;
}

/*.cd-intro:before {content:''; display:inline-block; position:absolute; width:100%; height:52px; background:url('./img/arr_top.png') top center no-repeat; top:-60px; animation-name: cd-loading-mask; animation:cd-loading-mask; animation-duration: 0.4s; animation-fill-mode: backwards; }
/*.cd-intro-content h1::after,
.cd-intro-content p { -webkit-animation-duration: 0.4s!important; -moz-animation-duration: 0.4s!important; animation-duration: 0.4s!important; -webkit-animation-delay: 0.7s!important; -moz-animation-delay: 0.7s!important; animation-delay: 0.7s!important; }
.cd-intro-content .action-wrapper { position: relative!important; overflow: hidden!important; }
.cd-intro-content .action-wrapper::before { content: ''!important; position: absolute!important; top: 0; left: 0; height: 3px!important; width: 100%!important; background-color: #202e4a!important; -webkit-animation: cd-loading 0.4s 0.3s backwards!important; -moz-animation: cd-loading 0.4s 0.3s backwards!important; animation: cd-loading 0.4s 0.3s backwards!important; }
.cd-intro-content .action-wrapper .cd-btn { display: block!important; opacity: 1!important; margin: 1em auto 0!important; }
*/
.hex {
  background: url(./img/hex.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  visibility: hidden;
}

.hex:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
}

.hex:after {
  content: '';
  display: block;
  padding-top: 115.4734411%;
}

.hex > * {
  visibility: visible;
}

@media (max-width: 499px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex .buttona {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 500px) and (max-width: 719px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex .buttona {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 720px) and (max-width: 879px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex .buttona {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 880px) and (max-width: 1099px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex .buttona {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 1100px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex .buttona {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 1440px) {
  .hex {
    float: left;
    width: 11.11111%;
    margin-right: 0%;
  }
  .hex:nth-child(17n+1) {
    margin-left: 5.55556%;
  }
  .hex:nth-child(17n+8) {
    margin-right: 5.55556%;
  }
  .hex:nth-child(17n+17) {
    margin-right: 0;
  }
  .hex:nth-child(17n+9), .hex:nth-child(17n+10), .hex:nth-child(17n+11), .hex:nth-child(17n+12), .hex:nth-child(17n+13), .hex:nth-child(17n+14), .hex:nth-child(17n+15), .hex:nth-child(17n+16), .hex:nth-child(17n+17) {
    margin-top: -3.2075%;
    margin-bottom: -3.2075%;
  }
  .hex:last-child {
    margin-bottom: 0;
  }
  .hex aside {
    width: 214px;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: table;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 20px;
    overflow: hidden;
  }
  .hex .container {
    width: 70%;
    margin: auto;
    position: absolute;
    top: 214px;
    left: 210px;
    max-width: 1200px;
  }
}

.hex > span {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (min-width: 720px) {
  .container {
    width: 90%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.container::after {
  content: '';
  display: block;
  clear: both;
}

/* Box Sizing */
:root {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* Center */
html, body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.buttona {
  position: absolute;
  -webkit-transform: translate3d(0%, 0%, 0) rotate(30deg) scale(0.8);
  transform: translate3d(0%, 0%, 0) rotate(30deg) scale(0.8);
  cursor: pointer;
  width: 100%;
  height: 100%;
  float: left;
  left: -28px;
  top: -5px;
  z-index: 10000000000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.buttona:last-child {
  margin-right: 0;
}

.buttonahover .hexa:last-child {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.buttona:hover .hexa:first-child {
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.buttona:hover .hexa:first-child div:before, .buttona:hover .hexa:first-child div:after {
  height: 15px;
}

.hexa {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 105%;
  opacity: 0.5;
  margin: -17px 0 0 55px;
}

.hexa:first-child {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 0;
}

.hexa:last-child {
  -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.hexa div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.hexa div:before, .hexa div:after {
  content: " ";
  position: absolute;
  background: #01A5EB;
  width: 100%;
  height: 1px;
  -webkit-transition: height 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: height 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hexa div:before {
  top: 0;
}

.hexa div:after {
  bottom: 0;
}

.hexa div:nth-child(1) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.hexa div:nth-child(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.hexa div:nth-child(3) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.container .hex .hexagon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background: url(./img/hex.svg) top center no-repeat;
  background-size: 100%;
}

.container .hex {
  -webkit-animation-direction: normal;
          animation-direction: normal;
  opacity: 0;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: zoom-out;
          animation-name: zoom-out;
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.container .hex, .container .hex * {
  -webkit-transition: 0.35s all cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.35s all cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scale(1, 1) !important;
          transform: scale(1, 1) !important;
}

.container .hex:hover {
  -webkit-transform: scale(1.2, 1.2) !important;
          transform: scale(1.2, 1.2) !important;
  z-index: 100000000;
}

@-webkit-keyframes zoom-out {
  from {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes zoom-out {
  from {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@-webkit-keyframes horizontal-flip {
  to {
    -webkit-transform: rotate3d(0, 1, 0, 0.5turn);
    transform: rotate3d(0, 1, 0, 0.5turn);
    opacity: 1;
  }
}

@keyframes horizontal-flip {
  to {
    -webkit-transform: rotate3d(0, 1, 0, 0.5turn);
    transform: rotate3d(0, 1, 0, 0.5turn);
    opacity: 1;
  }
}

@-webkit-keyframes vertical-flip {
  to {
    -webkit-transform: rotate3d(1, 0, 0, 0.5turn);
    transform: rotate3d(1, 0, 0, 0.5turn);
    opacity: 1;
  }
}

@keyframes vertical-flip {
  to {
    -webkit-transform: rotate3d(1, 0, 0, 0.5turn);
    transform: rotate3d(1, 0, 0, 0.5turn);
    opacity: 1;
  }
}

@-webkit-keyframes spin {
  from, to {
    -webkit-transform: none;
    transform: none;
    opacity: 0;
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: 1;
  }
}

@keyframes spin {
  from, to {
    -webkit-transform: none;
    transform: none;
    opacity: 0;
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: 1;
  }
}

@-webkit-keyframes opacity {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes opacity {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes disco {
  20% {
    background-color: red;
  }
  40% {
    background-color: gold;
  }
  60% {
    background-color: #32cd32;
  }
  80% {
    background-color: #1e90ff;
  }
  from, to {
    background-color: purple;
    opacity: 1;
  }
}

@keyframes disco {
  20% {
    background-color: red;
  }
  40% {
    background-color: gold;
  }
  60% {
    background-color: #32cd32;
  }
  80% {
    background-color: #1e90ff;
  }
  from, to {
    background-color: purple;
    opacity: 1;
  }
}

.top {
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: zoom-out;
          animation-name: zoom-out;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.mid {
  -webkit-animation-delay: 1300ms;
          animation-delay: 1300ms;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: zoom-out;
          animation-name: zoom-out;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.bot {
  -webkit-animation-delay: 1800ms;
          animation-delay: 1800ms;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: zoom-out;
          animation-name: zoom-out;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/*.container .hex:nth-child(10) {animation-delay: 1800ms;    }
.container .hex:nth-child(11) {animation-delay: 2100ms; }
.container .hex:nth-child(12) {animation-delay: 2400ms;    }
.container .hex:nth-child(19) {animation-delay: 2700ms; }
.container .hex:nth-child(20) {animation-delay: 3000ms;     .icon {padding-top:43%!important;        span {    white-space: break-spaces;}   }}
.container .hex:nth-child(21) {animation-delay: 3300ms;}
.container .hex:nth-child(29) {animation-delay: 3600ms;     .icon {padding-top:43%!important;        span {    white-space: break-spaces;}    }}
.container .hex:nth-child(30) {animation-delay: 3900ms;     .icon {padding-top:50%!important;    span {    white-space: break-spaces;}} }
.container .hex:nth-child(31) {animation-delay: 4200ms;     .icon {padding-top:43%!important;    span {    white-space: break-spaces;}}  }
.container .hex:nth-child(38) {animation-delay: 4500ms;    .icon {padding-top:43%!important;    span {    white-space: break-spaces;}} }
.container .hex:nth-child(39) {animation-delay: 4800ms;   .icon {padding-top:50%!important;    span {    white-space: break-spaces;}} }
.container .hex:nth-child(40) {animation-delay: 5100ms;   .icon {padding-top:50%!important;  span {    white-space: break-spaces;}} }
.container .hex:nth-child(8) {animation-delay: 5400ms; .icon {padding-top:50%!important;  span {    white-space: break-spaces;}} }
.container .hex:nth-child(17) {animation-delay: 5700ms;   .icon {padding-top:50%!important;  span {    white-space: break-spaces;}} }


//.container .hex * {visibility: hidden!important;}
.container .hex:nth-child(8) *, 
.container .hex:nth-child(17) *, 
.container .hex:nth-child(10) *, 
.container .hex:nth-child(11) *, 
.container .hex:nth-child(12) *, 
.container .hex:nth-child(19) *, 
.container .hex:nth-child(20) *, 
.container .hex:nth-child(21) *, 
.container .hex:nth-child(29) *, 
.container .hex:nth-child(30) *,
.container .hex:nth-child(31) *, 
.container .hex:nth-child(38) *, 
.container .hex:nth-child(39) *, 
.container .hex:nth-child(40) *{
   visibility: visible!important; background-size:100%; background-repeat:no-repeat; 

}*/
.container .hex img {
  top: 50%;
  bottom: 50%;
  margin: auto;
}

.icon span {
  position: relative;
  z-index: 10000000;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 17px;
  text-align: center;
  font-weight: bold;
}

small {
  font-size: 12px;
  display: block;
  font-weight: 300;
}

.icon {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 50%;
  vertical-align: baseline !important;
  position: absolute;
  top: 0;
  display: table-cell;
}

/*
.container_small {right: 0px; left: unset; 

  .hex {
    &:nth-child(2) {       right: -70px; float: right;  }
    &:nth-child(1) { right: 13%;      float: right;      top: -126px;}
  }

}*/
/*
.container .hex:nth-child(10) { left: 0; position: absolute; width: 20vw; top: 0vw; margin: 0; }
.container .hex:nth-child(11) { left: 20vw; position: absolute; width: 20vw; top: 0vw; margin: 0; }
.container .hex:nth-child(12) { left: 40vw; position: absolute; width: 20vw; top: 0vw; margin: 0; }
.container .hex:nth-child(19) { left: 60vw; position: absolute; width: 20vw; top: 0vw; margin: 0; 
  .icon {padding-top:50%!important;}
}
.container .hex:nth-child(20) { left: 80vw; position: absolute; width: 20vw; top: 0vw; margin: 0; }
/*
.container .hex:nth-child(29) { left: 0; position: absolute; width: 33.33%; top: 102vw; margin: 0; }
.container .hex:nth-child(30) { left: 33.3%; position: absolute; width: 33.33%; top: 102vw; margin: 0; }
.container .hex:nth-child(31) { left: 66.66%; position: absolute; width: 33.33%; top: 102vw; margin: 0; }
*

.container .hex:nth-child(29) { left: 10vw; position: absolute; width: 20vw; top: 17vw; margin: 0; }
.container .hex:nth-child(30) { left: 30vw; position: absolute; width: 20vw; top: 17vw; margin: 0; 
  .icon {padding-top:36%!important;}

}
.container .hex:nth-child(31) { left: 50vw; position: absolute; width: 20vw; top: 17vw; margin: 0; }
.container .hex:nth-child(38) { left: 70vw; position: absolute; width: 20vw; top: 17vw; margin: 0; 
  .icon {padding-top:35%!important;}
}
.container .hex:nth-child(39) { left: 20vw; position: absolute; width: 20vw; top: 34vw; margin: 0;   
  .icon {padding-top:39%!important;}
}
.container .hex:nth-child(40) { left: 60vw; position: absolute; width: 20vw; top: 34vw; margin: 0; 
  .icon {padding-top:40%!important;}
}

.container .hex:nth-child(8) { position: absolute; width: 20vw; top: 52.66vw; left: 30vw; 
  .icon {padding-top:43%!important;}
}
.container .hex:nth-child(17) { position: absolute; width: 20vw; top: 55.8vw; left: 49.6vw; }*/
.container .hex .icon {
  padding-left: 0;
  padding-right: 0;
  padding-top: 41%;
  display: table;
  text-align: center;
  padding: 0;
  vertical-align: middle;
}

.container .hex .icon span {
  opacity: 1;
  position: relative;
  margin: auto;
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.container {
  width: 85% !important;
  position: relative !important;
  margin: 0 auto !important;
  padding: 0 !important;
  top: 0px !important;
  height: 100%;
}

.cd-intro {
  left: 0;
  width: 100%;
  position: absolute;
  top: 220px;
  z-index: 1000;
}

small {
  display: none !important;
}

.hex {
  visibility: hidden !important;
}

/*
.container .hex:nth-child(5n) { margin-left: 12.5%!important; margin-top: -8%!important; }



.container .hex:nth-child(6n) { margin-top: -8%!important; }*/
/*scene*/
html, body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden !important;
  font-family: 'Exo 2';
}

.hexa {
  width: 400px;
  height: auto;
}

.hexa .hex {
  fill: #FFD246;
  stroke: 7px solid #E4AE23;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: -6px 8px 14px rgba(0, 0, 0, 0.06), 0px 5px 15px rgba(0, 0, 0, 0.4);
          box-shadow: -6px 8px 14px rgba(0, 0, 0, 0.06), 0px 5px 15px rgba(0, 0, 0, 0.4);
}

.wrapper {
  position: absolute;
  z-index: 100000;
  width: 50vw;
  margin: 0 auto;
  height: 560px;
  display: table;
}

.background img {
  position: absolute;
  top: -10%;
  width: 120%;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  height: 120%;
  left: -10%;
}

.background {
  position: fixed;
  height: 108%;
  width: 104%;
  margin-top: -1%;
  margin-left: -1%;
  background-size: cover;
  z-index: -1;
}

#scene {
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1111;
  display: table;
  height: 100%;
}

.hero {
  height: 100%;
  width: 100%;
  padding: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#preloader h1 {
  font-size: 40px;
  text-align: center;
}

#preloader span {
  -webkit-animation: fade2 2.2s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  animation: fade2 2.2s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  position: relative;
  display: block;
  text-align: center;
  color: #d4d4d4;
  text-decoration: none;
  text-shadow: 0px 0px 5px #2BA0C7, 0px 0px 7px #2BA0C7;
  animation-direction: alternate-reverse;
  font-weight: 300;
  font-family: 'Poppins';
  font-size: 13px;
  -webkit-font-smoothing: subpixel-antialiased;
  letter-spacing: 2px;
  color: #2BA0C7;
}

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1c2329;
  z-index: 999999999999999999999999999;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

.circleOpacity .circleone, .circleOpacity .circletwo {
  width: 150px;
  height: 150px;
  opacity: 0;
  border: 7px solid #2BA0C7;
  border-radius: 999px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  position: absolute;
  left: -32px;
  top: -34px;
}

#preloader .circletwo {
  border-color: #16a085;
}

#preloader svg {
  position: absolute;
  -webkit-transform: scale(1.375);
  transform: scale(1.375);
  left: 5px;
  top: -7px;
  -webkit-animation: fade 2.2s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  animation: fade 2.2s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  text-shadow: 0px 0px 5px #2BA0C7, 0px 0px 7px #2BA0C7;
  animation-direction: alternate-reverse;
  mix-blend-mode: color-dodge;
}

#preloader h1 {
  font-size: 50px;
  text-align: center;
  position: relative;
  text-shadow: 0 -4px 2px #2BA0C7, 0 -15.36px 11.896px #161411;
  margin-top: 0px;
}

#preloader #status {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -10px 0 0 -36px;
  z-index: 999999999999999999999999999;
}

.hexagon {
  -webkit-animation: popout 2500ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  color: white;
  animation: popout 2500ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.progress_line {
  -webkit-transition: 0.36s all cubic-bezier(0.15, 0.75, 0.92, 0.28);
  transition: 0.36s all cubic-bezier(0.15, 0.75, 0.92, 0.28);
  width: 0;
  height: 3px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  background: #00e0ff7a;
  z-index: 100000000000000;
}

@-webkit-keyframes fade {
  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
}

@keyframes fade {
  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
}

@-webkit-keyframes fade2 {
  100% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade2 {
  100% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  10% {
    opacity: .8;
  }
  50% {
    opacity: .5;
  }
  90% {
    opacity: .2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  10% {
    opacity: .8;
  }
  50% {
    opacity: .5;
  }
  90% {
    opacity: .2;
  }
  100% {
    opacity: 0;
  }
}

#preloader img {
  position: relative;
  display: table;
  margin: 0 auto;
  -webkit-animation: fade 3s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  animation: fade 3s infinite cubic-bezier(0.72, 0.2, 0.4, 0.74);
  text-shadow: 0px 0px 5px #2ba0c7, 0px 0px 7px #2ba0c7;
  animation-direction: alternate-reverse;
  mix-blend-mode: hard-light;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  width: 90px;
  height: auto;
}

/*.hexagon { width: 190px; height: 340px; background-color: #64C7CC; margin: 0 auto; background: url(./img/hex.svg); background-size: 100%; background-repeat: no-repeat; position: fixed; left: 0; right: 0px; top: 10px;}
*/
.hexagon2 {
  -webkit-animation: popout 2500ms 750ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: popout 2500ms 750ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  width: 190px;
  height: 340px;
  background-color: #64C7CC;
  margin: 0 auto;
  background: url(hexa2.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: fixed;
  left: 0;
  right: 0px;
  top: 10px;
}

.hero__container {
  width: 100%;
  overflow: hidden;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
  border-radius: 20px;
  border: 6px #ffffff45 solid;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-collapse: collapse;
  -webkit-box-shadow: 0px 0px 23px #2f343e;
          box-shadow: 0px 0px 23px #2f343e;
}

aside {
  width: 220px;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 20px;
  overflow: hidden;
}

aside .top {
  width: 100%;
  height: 500px;
  background: url("./img/aside_top.png") top left no-repeat;
  background-size: 100% auto;
}

aside .mid {
  width: 100%;
  height: 225px;
  background: url("./img/aside_mid.png") top center no-repeat;
  position: absolute;
  top: 250px;
  background-size: 80% auto;
}

aside .bot {
  width: 100%;
  height: 363px;
  background: url("./img/aside_bot.png") top left no-repeat;
  position: absolute;
  top: 400px;
  background-size: 100% auto;
}

svg#items {
  width: 760px;
  position: absolute;
  left: 206px;
  top: 50px;
}

aside ~ img {
  width: 1010px;
  position: absolute;
  left: 220px;
  top: 300px;
}

.mouse {
  position: absolute;
  right: 100px;
  bottom: 20px;
}

* {
  -webkit-transition: .33s all linear;
  transition: .33s all linear;
}

.fadeout {
  opacity: 0;
  display: none;
  -webkit-transition: .2s all linear;
  transition: .2s all linear;
}

.fadein {
  opacity: 1;
  display: block;
}

img {
  opacity: 1;
  position: absolute;
  left: 30%;
  top: 25%;
  width: 40%;
  z-index: 10000;
}

.hero__itemImage {
  background: url("./img/bg3.jpg") top center no-repeat;
  background-size: cover;
  -webkit-transition: 1.15s all cubic-bezier(0.42, 0, 0.92, 0.49);
  transition: 1.15s all cubic-bezier(0.42, 0, 0.92, 0.49);
}

body {
  background: url("./img/bg3.jpg") top center no-repeat;
  background-size: cover;
}

.cd-intro-content h1 {
  font-size: 44px !important;
}

.cd-intro-content .action-wrapper p {
  font-size: 18px !important;
}

.cd-intro-content .action-wrapper a {
  font-size: 22px !important;
}

span hr {
  opacity: 0;
  margin: 0;
}

.icon {
  padding-left: 20px;
  padding-right: 20px;
}

.icon.toggled span hr {
  opacity: 1;
  border-width: 2px;
  border-color: #ff2f00;
  border-style: groove;
  border-radius: 100%;
  width: 70%;
  margin: 4px auto;
  -webkit-box-shadow: 0px 0px 9px 2px #ff0000d9;
          box-shadow: 0px 0px 9px 2px #ff0000d9;
}

.icon.toggled span {
  opacity: 1;
  font-size: 15px;
  line-height: 12px;
  letter-spacing: -.75px;
}

.icon.toggled span small {
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  white-space: normal;
  line-height: 13px;
}

/*
.container .hex:nth-child(18) .icon.toggled span {    font-size: 20px!important;}

.container .hex:nth-child(21) .icon span,.container .hex:nth-child(26) .icon span, .container .hex:nth-child(27) .icon span { font-size: 15px!important; }*/
.container .hex .icon.toggled {
  padding-top: 7% !important;
}

.container .hex:nth-child(3) .icon span {
  font-size: 13px !important;
}

.container .hex:nth-child(21) .icon span, .container .hex:nth-child(26) .icon span, .container .hex:nth-child(27) .icon span {
  font-size: 13px !important;
}

.hex:hover * {
  -webkit-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
}

.cd-intro {
  left: 0;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
}

.container .hex .icon span {
  font-size: 13px !important;
  letter-spacing: -.5px;
}
/*# sourceMappingURL=style_lg.css.map */