@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }

#home::before, #home::after {
  content: "";
  width: 100%;
  background-size: cover;
  display: block;
  background-position: center; }

#home #intro {
  background: #090012;
  background: -webkit-gradient(linear, left top, left bottom, from(#090012), to(#0d0130));
  background: linear-gradient(180deg, #090012 0%, #0d0130 100%);
  background-repeat: no-repeat;
  background-position: top center;
  text-align: center;
  padding-top: 120px;
  background-size: 900px;
  overflow: hidden; }
  @media screen and (min-width: 992px) {
    #home #intro {
      padding-top: 90px; } }
  #home #intro::after {
    content: "";
    width: 100%;
    height: 150px;
    background: url("../../images/home/movements_top.svg") center no-repeat;
    background-size: cover;
    display: block;
    background-position: bottom;
    position: relative;
    z-index: 2; }
    @media screen and (min-width: 992px) {
      #home #intro::after {
        height: 250px; } }
    @media screen and (min-width: 1200px) {
      #home #intro::after {
        height: 320px; } }
  @media screen and (min-width: 992px) {
    #home #intro {
      padding-top: 130px;
      background-size: 1100px; } }
  @media screen and (min-width: 1200px) {
    #home #intro {
      padding-top: 230px;
      background-size: auto; } }
  #home #intro #planet_intro {
    position: absolute;
    top: -100px;
    right: -50px; }
  #home #intro #satellite {
    position: absolute;
    top: -80px;
    left: -20px; }
    @media screen and (min-width: 1200px) {
      #home #intro #satellite {
        left: -50px; } }
  #home #intro h1 {
    color: #ffffff;
    text-shadow: 0px 0px 12px #FFFFFF80;
    margin-bottom: 36px; }
  #home #intro p {
    color: #ffffff;
    font-size: 20px; }
  #home #intro .planet {
    width: 140px;
    margin-top: 36px;
    margin-bottom: 36px; }
    @media screen and (min-width: 1200px) {
      #home #intro .planet {
        width: 302px; } }
  #home #intro .video-container {
    margin-top: 160px; }
    @media screen and (min-width: 992px) {
      #home #intro .video-container {
        margin-top: 200px; } }
    #home #intro .video-container .btn-play {
      width: 100px;
      z-index: 2;
      position: relative;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      cursor: pointer; }
      @media screen and (min-width: 992px) {
        #home #intro .video-container .btn-play {
          width: 150px; } }
      #home #intro .video-container .btn-play:hover {
        opacity: 0.8;
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }
    #home #intro .video-container .anim_circle {
      position: absolute;
      right: 0px;
      bottom: -150px;
      width: 100%;
      -webkit-animation: float 6s ease-in-out infinite;
              animation: float 6s ease-in-out infinite;
      z-index: 1; }
      @media screen and (min-width: 768px) {
        #home #intro .video-container .anim_circle {
          max-width: 350px;
          right: 100px; } }
      @media screen and (min-width: 1200px) {
        #home #intro .video-container .anim_circle {
          padding-top: 90px;
          bottom: -275px;
          right: 100px;
          max-width: 570px; } }

#home #movements {
  text-align: center; }
  #home #movements .wrap {
    padding-bottom: 80px; }
    #home #movements .wrap h2 {
      color: #ED125F;
      margin-bottom: 20px; }
    #home #movements .wrap .owl-carousel {
      margin-top: 70px; }
      #home #movements .wrap .owl-carousel .owl-dots {
        margin-top: 20px;
        text-align: center; }
        @media screen and (min-width: 992px) {
          #home #movements .wrap .owl-carousel .owl-dots {
            margin-left: calc(50% + 8px);
            text-align: left; } }
        #home #movements .wrap .owl-carousel .owl-dots .owl-dot {
          width: 18px;
          height: 18px;
          border: 2px solid #1C3E58;
          border-radius: 18px;
          margin-right: 8px; }
          #home #movements .wrap .owl-carousel .owl-dots .owl-dot.active {
            border: 2px solid #ED125F;
            background-color: #ED125F; }
      #home #movements .wrap .owl-carousel .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: left;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
        #home #movements .wrap .owl-carousel .item .icon img {
          display: block;
          width: 80%;
          margin: 0 auto 32px auto; }
          @media screen and (min-width: 992px) {
            #home #movements .wrap .owl-carousel .item .icon img {
              margin-bottom: 0px; } }
        #home #movements .wrap .owl-carousel .item .contents p {
          font-size: 25px;
          margin-bottom: 20px; }
        #home #movements .wrap .owl-carousel .item .contents ul li {
          margin-top: 6px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: relative;
          padding-left: 20px;
          line-height: 24px; }
          #home #movements .wrap .owl-carousel .item .contents ul li::before {
            content: "";
            width: 6px;
            height: 6px;
            display: block;
            background-color: red;
            border-radius: 6px;
            float: left;
            top: 8px;
            left: 0;
            position: absolute; }

#home #features {
  overflow: hidden; }
  #home #features::before {
    content: "";
    width: 100%;
    height: 50px;
    background: url("../../images/home/features_top.svg") center no-repeat;
    background-size: cover;
    display: block;
    background-position: bottom; }
    @media screen and (min-width: 992px) {
      #home #features::before {
        height: 70px; } }
    @media screen and (min-width: 1200px) {
      #home #features::before {
        height: 102px; } }
  #home #features .wrap {
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: center;
    position: relative; }
    #home #features .wrap h3 {
      color: #ffffff;
      margin-bottom: 46px; }
    #home #features .wrap p {
      color: #ffffff; }
    #home #features .wrap .logos {
      margin-top: 130px;
      margin-bottom: 30px; }
      @media screen and (min-width: 992px) {
        #home #features .wrap .logos {
          margin-bottom: 60px; } }
      #home #features .wrap .logos img {
        width: 100%;
        max-width: 280px;
        margin-bottom: 32px; }
        @media screen and (min-width: 992px) {
          #home #features .wrap .logos img {
            margin-bottom: 0px; } }
    #home #features .wrap .planet {
      position: absolute; }
    #home #features .wrap #planet_green {
      top: 400px;
      left: 50px; }
      @media screen and (min-width: 1200px) {
        #home #features .wrap #planet_green {
          left: 0px; } }
    #home #features .wrap #planet_blue {
      top: 1000px;
      right: 30px; }
      @media screen and (min-width: 1200px) {
        #home #features .wrap #planet_blue {
          right: -80px; } }
    #home #features .wrap #planet_red {
      top: 0px;
      right: -100px; }
  #home #features #black-hole-carousel {
    width: 100%; }
    #home #features #black-hole-carousel ul {
      height: 880px;
      background: url("../../images/home/black_hole3.svg") center no-repeat;
      background-size: 200%; }
      @media screen and (min-width: 500px) {
        #home #features #black-hole-carousel ul {
          height: 930px;
          background-size: 130%; } }
      @media screen and (min-width: 768px) {
        #home #features #black-hole-carousel ul {
          background-size: 110%; } }
      #home #features #black-hole-carousel ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        height: 880px; }
        @media screen and (min-width: 500px) {
          #home #features #black-hole-carousel ul li {
            height: 930px; } }
        #home #features #black-hole-carousel ul li .black-hole-carousel-contents {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
          @media screen and (min-width: 768px) {
            #home #features #black-hole-carousel ul li .black-hole-carousel-contents {
              width: 280px; } }
          #home #features #black-hole-carousel ul li .black-hole-carousel-contents .icon img {
            width: 40px;
            margin-bottom: 12px;
            -webkit-filter: brightness(0) invert(1);
                    filter: brightness(0) invert(1); }
          #home #features #black-hole-carousel ul li .black-hole-carousel-contents p {
            padding: 0 80px; }
            @media screen and (min-width: 500px) {
              #home #features #black-hole-carousel ul li .black-hole-carousel-contents p {
                padding: 0 220px; } }
            @media screen and (min-width: 992px) {
              #home #features #black-hole-carousel ul li .black-hole-carousel-contents p {
                padding: 0 70px; } }
    #home #features #black-hole-carousel .owl-dots {
      margin-top: -100px;
      text-align: center; }
      @media screen and (min-width: 1200px) {
        #home #features #black-hole-carousel .owl-dots {
          margin-left: calc(50% + 8px);
          text-align: left; } }
      #home #features #black-hole-carousel .owl-dots .owl-dot {
        width: 18px;
        height: 18px;
        border-radius: 18px;
        margin-right: 8px;
        background-color: rgba(255, 255, 255, 0.3); }
        #home #features #black-hole-carousel .owl-dots .owl-dot.active {
          background-color: #ffffff; }
  #home #features #black-hole {
    position: relative; }
    #home #features #black-hole.paused .orbit .orbit-container {
      -webkit-animation-play-state: paused;
              animation-play-state: paused; }
      #home #features #black-hole.paused .orbit .orbit-container .black-hole-icon {
        -webkit-animation-play-state: paused;
                animation-play-state: paused; }
    #home #features #black-hole > img {
      -webkit-animation: spin-right 200s linear infinite;
      animation: spin-right 100s linear infinite; }
    #home #features #black-hole p {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%) scale(0);
              transform: translate(-50%, -50%) scale(0);
      width: 200px;
      text-align: center;
      -webkit-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out;
      opacity: 0;
      font-size: 26px;
      line-height: 38px; }
      #home #features #black-hole p.active {
        -webkit-transform: translate(-50%, -50%) scale(1);
                transform: translate(-50%, -50%) scale(1);
        opacity: 1; }
      #home #features #black-hole p.exit {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0); }
    #home #features #black-hole .orbit {
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      width: 450px;
      height: 450px;
      position: absolute;
      top: 170px;
      left: 170px;
      pointer-events: none; }
      #home #features #black-hole .orbit:nth-child(7) {
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg); }
        #home #features #black-hole .orbit:nth-child(7) img {
          -webkit-transform: rotate(-72deg);
          transform: rotate(-72deg); }
      #home #features #black-hole .orbit:nth-child(3) {
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg); }
        #home #features #black-hole .orbit:nth-child(3) img {
          -webkit-transform: rotate(-144deg);
          transform: rotate(-144deg); }
      #home #features #black-hole .orbit:nth-child(4) {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg); }
        #home #features #black-hole .orbit:nth-child(4) img {
          -webkit-transform: rotate(-216deg);
          transform: rotate(-216deg); }
      #home #features #black-hole .orbit:nth-child(5) {
        -webkit-transform: rotate(288deg);
        transform: rotate(288deg); }
        #home #features #black-hole .orbit:nth-child(5) img {
          -webkit-transform: rotate(-288deg);
          transform: rotate(-288deg); }
      #home #features #black-hole .orbit:nth-child(6) {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg); }
        #home #features #black-hole .orbit:nth-child(6) img {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg); }
      #home #features #black-hole .orbit .orbit-container {
        position: absolute;
        width: 450px;
        height: 450px;
        -webkit-animation: spin-right 40s linear infinite;
        animation: spin-right 40s linear infinite;
        pointer-events: none; }
        #home #features #black-hole .orbit .orbit-container .black-hole-icon {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 75px;
          height: 75px;
          border-radius: 75px;
          background-color: #ffffff;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-animation: spin-left 40s linear infinite;
          animation: spin-left 40s linear infinite;
          z-index: 9999;
          pointer-events: auto;
          -webkit-box-shadow: 0px 3px 5px #00000040;
                  box-shadow: 0px 3px 5px #00000040;
          cursor: pointer;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; }
          #home #features #black-hole .orbit .orbit-container .black-hole-icon:hover {
            background: #4f2655;
            background: radial-gradient(circle, #4f2655 0%, #190339 100%); }
            #home #features #black-hole .orbit .orbit-container .black-hole-icon:hover img {
              -webkit-filter: brightness(0) invert(1);
                      filter: brightness(0) invert(1); }
