.preloader {
    top: 0;
    background: black;
    height: 100%;
    width: 100%;
    z-index: 1001;
    position: fixed;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .preloader .preloaderWrap {
    width: 200px;
  }
  .preloader .preloaderWrap .panel-container {
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    /* TWEENER - IE 10 */
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .preloader .preloaderWrap .panel-container .panel {
    width: 120px;
    height: 82px;
    margin: 100px auto;
    position: relative;
    -webkit-perspective: 1000;
  }
  .preloader .preloaderWrap .panel-container .panel .cards {
    -webkit-animation: CardFlip 5s infinite;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1s linear;
  }
  .preloader .preloaderWrap .panel-container .panel .cards .front {
    z-index: 2;
    background: url("https://cdn.bisnis.com/interaktif/assets/home/images/content-interaktif-logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-backface-visibility: hidden;
  }
  .preloader .preloaderWrap .panel-container .panel .cards .back {
    z-index: 1;
    background: url("https://cdn.bisnis.com/interaktif/assets/home/images/content-interaktif-bisnis-logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: scale(-1, 1);
    -webkit-animation: Appear 5s infinite;
    -webkit-transform-style: preserve-3d;
  }
  .preloader .preloaderWrap .panel-container .panel .cards, .preloader .preloaderWrap .panel-container .panel .front, .preloader .preloaderWrap .panel-container .panel .back {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  @-webkit-keyframes CardFlip {
    0% {
      -webkit-transform: rotateY(0deg);
    }
    50% {
      -webkit-transform: rotateY(180deg);
    }
    100% {
      -webkit-transform: rotateY(360deg);
    }
  }
  @-webkit-keyframes Appear {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 100%;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  @media (min-width: 768px) {
    .preloaderWrap {
      width: 120px;
    }
  }
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  @media only screen and (max-width: 380px) {
    /*Mini Mobile Styles*/
  }
  @media only screen and (max-width: 480px) {
    /* Mobile styles */
  }
  @media screen and (min-width: 481px) and (max-width: 1023px) {
    /* Tablet styles */
  }
  @media screen and (min-width: 1024px) and (max-width: 1139px) {
    /* Notebook styles */
  }
  @media only screen and (min-width: 1140px) and (max-width: 1399px) {
    /* Laptop styles */
  }
  @media only screen and (min-width: 1400px) {
    /*Desktop styles */
  }
  .headerWrap {
    position: fixed;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
  }
  .headerWrap .headerItem {
    padding: 10px 4px 0;
  }
  .headerWrap .headerItem img {
    width: 80%;
  }
  
  @media (min-width: 768px) {
    .headerItem img {
      width: auto;
    }
  }
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  @media only screen and (max-width: 380px) {
    /*Mini Mobile Styles*/
  }
  @media only screen and (max-width: 480px) {
    /* Mobile styles */
    .headerWrap {
      padding: 0 10px;
    }
  }
  @media screen and (min-width: 481px) and (max-width: 1023px) {
    /* Tablet styles */
  }
  @media screen and (min-width: 1024px) and (max-width: 1139px) {
    /* Notebook styles */
  }
  @media only screen and (min-width: 1140px) and (max-width: 1399px) {
    /* Laptop styles */
  }
  @media only screen and (min-width: 1400px) {
    /*Desktop styles */
  }
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    background-color: #C69C6D;
  }
  
  .main-container {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
  }
  .main-container .content {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
  }
  
  .background-container {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    transform: translateZ(-30px) scale(4);
    margin: 0;
  }
  .background-container img {
    width: 100vw;
  }
  .background-container .bg-container {
    width: 100%;
    overflow-x: hidden;
  }
  .background-container .bg-container .bg {
    width: 100vw;
    position: relative;
  }
  .background-container .bg-container .bg .cloud {
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2;
  }
  .background-container .bg-container .bg .cloudA {
    max-width: 231px;
    height: 286px;
    -webkit-animation: swing 9s infinite alternate;
            animation: swing 9s infinite alternate;
  }
  .background-container .bg-container .bg .cloudB {
    max-width: 403px;
    height: 310px;
    -webkit-animation: swingReverse 9s infinite alternate;
            animation: swingReverse 9s infinite alternate;
  }
  .background-container .bg-container .bg .cloudC {
    max-width: 234px;
    height: 274px;
    -webkit-animation: swingReverse 9s infinite alternate;
            animation: swingReverse 9s infinite alternate;
  }
  .background-container .bg-container .bg .cloudD {
    -webkit-animation: swing 9s infinite alternate;
            animation: swing 9s infinite alternate;
  }
  @-webkit-keyframes swing {
    0% {
      transform: translateX(-7%);
    }
    50% {
      transform: translateX(7%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  @keyframes swing {
    0% {
      transform: translateX(-7%);
    }
    50% {
      transform: translateX(7%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  @-webkit-keyframes swingReverse {
    0% {
      transform: translateX(7%);
    }
    50% {
      transform: translateX(-7%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  @keyframes swingReverse {
    0% {
      transform: translateX(7%);
    }
    50% {
      transform: translateX(-7%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  .background-container .bg-container .bg-1 {
    background: linear-gradient(180deg, #013F0C 0%, #467133 100%);
  }
  .background-container .bg-container .bg-1 img {
    width: 100%;
  }
  .background-container .bg-container .bg-1 .cloud1 {
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
  }
  .background-container .bg-container .bg-1 .cloud2 {
    left: 50px;
    bottom: 0;
  }
  .background-container .bg-container .bg-1 .cloud3 {
    top: 75px;
  }
  .background-container .bg-container .bg-1 .header-text {
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 80%;
    padding: 0 10px;
  }
  .background-container .bg-container .bg-1 .header-text .subtitle {
    font-size: 2.2em;
    text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    margin-bottom: 0;
  }
  .background-container .bg-container .bg-1 .header-text .series {
    font-size: 1.9em;
    margin-top: -3px;
  }
  .background-container .bg-container .bg-1 .header-text .title {
    font-size: 4.5em;
    color: #F2A303;
    text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
  }
  .background-container .bg-container .bg-2 {
    background: linear-gradient(180deg, #467133 0%, #92A85E 100%);
  }
  .background-container .bg-container .bg-2 .img-content {
    width: 100%;
  }
  .background-container .bg-container .bg-2 .cloud1 {
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
  }
  .background-container .bg-container .bg-3 {
    background: linear-gradient(180deg, #92A85E 0%, #B3B969 100%);
  }
  .background-container .bg-container .bg-3 .img-content {
    width: 100%;
  }
  .background-container .bg-container .bg-3 .cloud1 {
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .background-container .bg-container .bg-3 .cloud2 {
    top: 35px;
    left: 35px;
  }
  .background-container .bg-container .bg-4 {
    background: linear-gradient(180deg, #B3B969 0%, #C3B763 100%);
  }
  .background-container .bg-container .bg-4 .img-content {
    width: 100%;
  }
  .background-container .bg-container .bg-4 .cloud1 {
    right: 50px;
    top: 0;
  }
  .background-container .bg-container .bg-4 .cloud2 {
    bottom: 35px;
    left: 50px;
  }
  .background-container .bg-container .bg-5 {
    background: linear-gradient(180deg, #C3B763 0%, #D2B65E 100%);
  }
  .background-container .bg-container .bg-5 .img-content {
    width: 100%;
  }
  .background-container .bg-container .bg-5 .cloud1 {
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
  }
  .background-container .bg-container .bg-5 .cloud2 {
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
  }
  .background-container .bg-container .bg-6 {
    height: auto;
    background: linear-gradient(180deg, #D2B65E 18.89%, #F0D292 33.06%);
  }
  .background-container .bg-container .bg-6 .img-content {
    width: 100%;
  }
  .background-container .bg-container .bg-6 .cloud1 {
    top: 50px;
    left: 50px;
  }
  .background-container .bg-container .bg-6 .cloud2 {
    top: 50%;
    transform: translateY(-50%);
    right: 35px;
  }
  .background-container .bg-container .bg-6 .cloud3 {
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
  }
  .background-container .bg-container .bg-6 .cloud4 {
    bottom: 10%;
    right: 35px;
  }
  .background-container .bg-container .bg-6 .cloud5 {
    bottom: 10%;
    left: 50px;
  }
  .background-container .bg-container .bg-7 {
    background-color: #C69C6D;
    height: 2000px;
  }
  
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  @media only screen and (max-width: 380px) {
    /*Mini Mobile Styles*/
    .background-container {
      transform: translateZ(-135px) scale(14.5) !important;
    }
    .background-container .bg-container .bg-1 .header-text {
      top: 65%;
    }
  }
  @media only screen and (max-width: 480px) {
    /* Mobile styles */
    .background-container {
      transform: translateZ(-130px) scale(14);
    }
    .background-container .bg-container .bg .cloudA {
      max-width: 131px;
      height: 186px;
    }
    .background-container .bg-container .bg .cloudB {
      max-width: 203px;
      height: 110px;
    }
    .background-container .bg-container .bg .cloudC {
      max-width: 134px;
      height: 174px;
    }
    .background-container .bg-container .bg .cloudD {
      max-width: 100px;
      height: 150px;
    }
    .background-container .bg-container .bg-1 {
      padding-bottom: 25px;
      z-index: 1;
    }
    .background-container .bg-container .bg-1 .bg-header {
      scale: 1.2;
      transform-origin: top;
    }
    .background-container .bg-container .bg-1 .cloud1 {
      right: 0;
      top: 55%;
      transform: translateY(-50%);
    }
    .background-container .bg-container .bg-1 .cloud2 {
      left: 35px;
      top: 10%;
    }
    .background-container .bg-container .bg-1 .cloud3 {
      top: 70%;
      left: 35px;
    }
    .background-container .bg-container .bg-1 .header-text {
      padding: 0 20px;
      z-index: 4;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      font-size: 1em;
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .series {
      font-size: 0.9em;
    }
    .background-container .bg-container .bg-1 .header-text .title {
      font-size: 2em;
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-2 {
      z-index: 0;
    }
    .background-container .bg-container .bg-2 .cloud1 {
      top: 25%;
      transform: translateY(-50%);
    }
  }
  @media screen and (min-width: 481px) and (max-width: 1023px) {
    /* Tablet styles */
    .background-container {
      transform: translateZ(-65px) scale(7.5);
    }
    .background-container .bg-container .bg .cloudA {
      max-width: 170px;
      height: 230px;
    }
    .background-container .bg-container .bg .cloudB {
      max-width: 303px;
      height: 210px;
    }
    .background-container .bg-container .bg .cloudC {
      max-width: 134px;
      height: 174px;
    }
    .background-container .bg-container .bg .cloudD {
      max-width: 200px;
      height: 250px;
    }
    .background-container .bg-container .bg-1 .cloud1 {
      right: 50px;
      top: 40%;
      transform: translateY(-50%);
    }
    .background-container .bg-container .bg-1 .cloud2 {
      left: 50px;
      bottom: 10%;
    }
    .background-container .bg-container .bg-1 .cloud3 {
      top: 10%;
      left: 35px;
    }
    .background-container .bg-container .bg-1 .header-text {
      padding: 0 20px;
      z-index: 4;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1199px) {
    /* Notebook styles */
    .background-container {
      transform: translateZ(-45px) scale(5.5);
    }
    .background-container img {
      width: 100%;
    }
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 15%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1399px) {
    /* Laptop styles */
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 20%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media only screen and (min-width: 1200px) {
    .background-container {
      transform: translateZ(-35px) scale(4.5);
    }
  }
  @media only screen and (min-width: 1250px) {
    .background-container {
      transform: translateZ(-32px) scale(4.2);
    }
  }
  @media only screen and (min-width: 1300px) {
    .background-container {
      transform: translateZ(-30px) scale(4);
    }
  }
  @media only screen and (min-width: 1400px) {
    /*Desktop styles */
    .background-container {
      transform: translateZ(-27px) scale(3.7);
    }
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 25%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media only screen and (min-width: 1500px) {
    .background-container {
      transform: translateZ(-25px) scale(3.5);
    }
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 25%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media only screen and (min-width: 1900px) {
    .background-container {
      transform: translateZ(-18px) scale(2.8);
    }
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 30%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  @media only screen and (min-width: 2500px) {
    .background-container .bg-container .bg-1 .header-text {
      z-index: 4;
      top: 30%;
      transform: none;
    }
    .background-container .bg-container .bg-1 .header-text .subtitle {
      font-size: 3.2em;
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
    .background-container .bg-container .bg-1 .header-text .title {
      font-size: 5.5em;
      text-shadow: 3px 5px rgba(4, 4, 4, 0.4);
    }
  }
  .text-container {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
  }
  .text-container .text-wrap {
    padding: 0 100px;
  }
  .text-container .text-wrap .starting-block {
    height: 100vh;
  }
  .text-container .text-wrap .text {
    background-color: rgba(0, 27, 7, 0.72);
  }
  .text-container .text-wrap .text .scroll-down .field {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .text-container .text-wrap .text .scroll-down .field .mouse {
    width: 23px;
    height: 45px;
    border: 2px solid white;
    border-radius: 60px;
    position: relative;
  }
  .text-container .text-wrap .text .scroll-down .field .mouse::before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
    -webkit-animation: wheel 2s infinite;
  }
  .text-container .text-wrap .text .scroll-down .field .vh {
    color: white;
    font-weight: bold;
    font-size: large;
  }
  @keyframes wheel {
    to {
      opacity: 0;
      top: 30px;
    }
  }
  @-webkit-keyframes wheel {
    to {
      opacity: 0;
      top: 30px;
    }
  }
  .text-container .text-wrap .text .scroll-down p {
    font-size: 11px;
  }
  .text-container .text-wrap .text .text-content .paragraphs p {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 40px;
  }
  .text-container .text-wrap .text .text-content .paragraphs p span {
    font-size: 88px;
    font-weight: 600;
    padding: 10px 10px 0 0;
    float: left;
  }
  .text-container .text-wrap .text .text-content .paragraphs p:first-child::first-letter {
    font-size: 88px;
    font-weight: 600;
    padding: 10px 10px 0 0;
    float: left;
    line-height: 60px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .fadeup {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  .text-container .text-wrap .text .text-content .paragraphs .pushed-up {
    margin-top: -15%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .show {
    opacity: 1;
    transform: none;
  }
  .text-container .text-wrap .text .text-content .paragraphs .bigtitle1 {
    font-weight: 800;
    color: #FFBD18;
  }
  .text-container .text-wrap .text .text-content .paragraphs .bigtitle2, .text-container .text-wrap .text .text-content .paragraphs .lottie-title {
    font-size: 2em;
  }
  .text-container .text-wrap .text .text-content .paragraphs .bigtitle3, .text-container .text-wrap .text .text-content .paragraphs .bigtitle1 {
    font-size: 2.5em;
    margin-bottom: 0;
  }
  .text-container .text-wrap .text .text-content .paragraphs .content-img .coindrop {
    width: 80%;
    margin: auto;
  }
  .text-container .text-wrap .text .text-content .paragraphs .content-img .process .col .lottie {
    width: 380px;
    height: 311px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .content-img .linegraphic {
    margin-top: -20%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .content-img .cargraphic {
    margin-top: -10%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .news-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text-container .text-wrap .text .text-content .paragraphs .news-img .news {
    width: 50%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .news-img .news img {
    margin-bottom: 20px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .news-img .news p {
    font-size: 0.9em;
  }
  .text-container .text-wrap .text .text-content .paragraphs .wide-img {
    max-width: 100%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .wide-img .centerized {
    text-align: center;
  }
  .text-container .text-wrap .text .text-content .paragraphs .wide-img .centerized img {
    width: 100%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .wide-img .centerized .lottie {
    width: 100%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .stagger-container {
    max-width: 100%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized {
    text-align: center;
  }
  .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img {
    width: 100%;
  }
  .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
    max-width: 190px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .credit-trigger {
    height: 50px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .credit-trigger .credit {
    background-color: rgba(0, 48, 13, 0.5);
  }
  .text-container .text-wrap .text .text-content .paragraphs .credit-trigger .credit .credit-list {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
  }
  .text-container .text-wrap .text .text-content .paragraphs .credit-trigger .credit .credit-list .credit-title {
    margin-bottom: 0;
  }
  
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  @media only screen and (max-width: 380px) {
    /*Mini Mobile Styles*/
  }
  @media only screen and (max-width: 480px) {
    /* Mobile styles */
    .text-container .text-wrap {
      padding: 0 25px;
    }
    .text-container .text-wrap .starting-block {
      height: 100vh;
    }
    .text-container .text-wrap .text {
      margin-top: -10%;
    }
    .text-container .text-wrap .text .text-content {
      margin-top: 16%;
    }
    .text-container .text-wrap .text .text-content .paragraphs p {
      font-size: 16px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .pushed-up {
      margin-top: -10%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .lottie-title, .text-container .text-wrap .text .text-content .paragraphs .bigtitle1, .text-container .text-wrap .text .text-content .paragraphs .bigtitle2, .text-container .text-wrap .text .text-content .paragraphs .bigtitle3 {
      font-size: 24px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .wide-img {
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .news-img .news {
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container {
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
      max-width: 15%;
      height: auto;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse {
      width: 20px;
      height: 40px;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse::before {
      content: "";
      width: 6px;
      height: 6px;
    }
    @keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
    @-webkit-keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
  }
  @media screen and (min-width: 481px) and (max-width: 1023px) {
    /* Tablet styles */
    .text-container .text-wrap {
      padding: 0 70px;
    }
    .text-container .text-wrap .starting-block {
      height: 100vh;
    }
    .text-container .text-wrap .text .text-content {
      margin-top: 16%;
    }
    .text-container .text-wrap .text .text-content .paragraphs p {
      font-size: 20px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .pushed-up {
      margin-top: -10%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .lottie-title, .text-container .text-wrap .text .text-content .paragraphs .bigtitle1, .text-container .text-wrap .text .text-content .paragraphs .bigtitle2, .text-container .text-wrap .text .text-content .paragraphs .bigtitle3 {
      font-size: 30px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .wide-img {
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .content-img .process .col .lottie {
      margin: auto;
    }
    .text-container .text-wrap .text .text-content .paragraphs .news-img .news {
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container {
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
      max-width: 17%;
      height: auto;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse {
      width: 20px;
      height: 40px;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse::before {
      content: "";
      width: 6px;
      height: 6px;
    }
    @keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
    @-webkit-keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1139px) {
    /* Notebook styles */
    .text-container .text-wrap .text .text-content {
      margin-top: 16%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .wide-img {
      width: 800px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .news-img .news {
      width: 100%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
      max-width: 120px;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse {
      width: 20px;
      height: 40px;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse::before {
      content: "";
      width: 6px;
      height: 6px;
    }
    @keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
    @-webkit-keyframes wheel {
      to {
        opacity: 0;
        top: 25px;
      }
    }
  }
  @media only screen and (min-width: 1140px) and (max-width: 1399px) {
    /* Laptop styles */
    .text-container .text-wrap .text {
      margin-top: -10%;
    }
    .text-container .text-wrap .text .text-content {
      margin-top: 16%;
    }
    .text-container .text-wrap .text .text-content .paragraphs .wide-img {
      width: 900px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
      max-width: 160px;
    }
  }
  @media only screen and (min-width: 1400px) {
    /*Desktop styles */
  }
  @media only screen and (min-width: 1900px) {
    /*Desktop styles */
    .text-container .text-wrap .text .text-content .paragraphs .pushed-up {
      margin-top: -15%;
    }
  }
  @media only screen and (min-width: 2500px) {
    /*Desktop styles */
    .text-container .text-wrap {
      max-width: 2000px;
    }
    .text-container .text-wrap .text {
      margin-top: -10%;
    }
    .text-container .text-wrap .text .scroll-down .field {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse {
      width: 40px;
      height: 80px;
      border: 2px solid white;
      border-radius: 60px;
      position: relative;
    }
    .text-container .text-wrap .text .scroll-down .field .mouse::before {
      content: "";
      width: 10px;
      height: 10px;
    }
    .text-container .text-wrap .text .scroll-down p {
      font-size: 20px;
    }
    .text-container .text-wrap .text .text-content {
      margin-top: 16%;
    }
    .text-container .text-wrap .text .text-content .paragraphs p {
      font-size: 2.2em;
    }
    .text-container .text-wrap .text .text-content .paragraphs .wide-img {
      width: 900px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .stagger-container .centerized .stagger-img img {
      max-width: 100%;
      width: 300px;
    }
    .text-container .text-wrap .text .text-content .paragraphs .credit-trigger {
      height: 200px;
    }
  }
  .credit-container {
    background-color: #E7C899;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper .credit-list {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper .credit-list .credit-title {
    margin-bottom: 0;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper img {
    max-width: 300px;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper .backtotop {
    bottom: 10%;
    position: absolute;
    right: 50px;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper .backtotop a {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #333 !important;
  }
  .credit-container .credit-wrap .credit .credit-list-wrapper .backtotop a svg path {
    fill: #333;
    transition: fill 0.3s;
  }
  
  @media only screen and (max-width: 480px) {
    .credit-container .credit-wrap .credit .credit-list-wrapper .backtotop {
      position: unset;
    }
  }
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  @media only screen and (max-width: 380px) {
    /*Mini Mobile Styles*/
  }
  @media only screen and (max-width: 480px) {
    /* Mobile styles */
  }
  @media screen and (min-width: 481px) and (max-width: 1023px) {
    /* Tablet styles */
  }
  @media screen and (min-width: 1024px) and (max-width: 1139px) {
    /* Notebook styles */
  }
  @media only screen and (min-width: 1140px) and (max-width: 1399px) {
    /* Laptop styles */
  }
  @media only screen and (min-width: 1400px) {
    /*Desktop styles */
  }/*# sourceMappingURL=styles.css.map */