body {
    margin: 0;
}
.container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    margin: 0 auto;
}
.row {
    display: flex;
    justify-content: center;
    /* padding: .9rem; */
}
.block {
    flex-flow: column;
}
.right{
    justify-content: right !important;
}
.row .sign {
    cursor: pointer;
    display: flex;
    flex-flow: column;
    z-index: 2;
}
.row .sign-select {
    cursor: pointer;
    display: flex;
    flex-flow: column;
    z-index: 2;
    padding: 8px;
}
.row .sign-select img, 
.sign-learn img {
    width: 119px;
}
.sign-learn {
    padding: 6px;
    cursor: pointer;
    z-index: 2;
}
.index-mobile {
    display: block;
    max-width: 350px !important;
}
.index-desktop {
    display: none;
}
.sun-header-index {
    width: 150px;
    position: relative;
    z-index: 3;
}
.bottom-graph-home {
    width: 250px;
    margin-top: -100px;
    margin-left: 35px;
    z-index: 0;
  }
  .legal {
    max-width: 300px; 
    margin: 0 auto; 
    font-size: 9px;
    padding-bottom: 20px;
  }
  .legal-footer {
    max-width: 300px;
    margin: 0 auto;
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.8em;
    padding-top: 120px;
  }
  .legal-footer a {
      color: black;
  }
  .bottom-graph-index {
    position: absolute;
    width: 300px;
    margin-top: -190px;
    margin-left: 0px;
    z-index: 0;
    pointer-events: none;
  }
  img.bottom-graph.up {
    width: 300px;
    margin-top: -190px;
    z-index: 0;
    position: absolute;
    bottom: 0;
    pointer-events: none;
  }
  @media only screen and (max-width: 362px) {
    .sun-bar {
        margin-top: -4px;
    }
    .heading-home {
        left: 20px;
        top: -72px;
    }
    .home-frame-mobile {
        min-height: 700px;
    }
  }
  @media only screen and (max-width: 380px) {
    .rising-sign {
        margin-top: -16px;
        
    }
    .rising-heading {
        padding: 1.5rem 1rem 1rem 1rem;
    }

  }
@media only screen and (min-width: 318px) {
    .mobile-x {
        padding: .9rem 0 0 0;
    }
    .mobile-t {
        padding: 0;
    }
    .mobile-b {
        padding-bottom: 16px !important;
    }
}
@media only screen and (min-width: 567px) {
    .container {
        max-width: 320px;
    }
    .sign-details-section .container {
        max-width: 460px;;
        width: 460px !important;
    }
    .sign-details-inner-section {
        margin-top: 2rem !important;
    }
}
@media only screen and (min-width: 767px) {
    .home-frame-mobile {
        display: none;
    }
    .home-frame-mobile-index {
        display: none;
    }
    .home-frame-tablet {
        display: block;
        top: 8px;
        width: 100%;
        max-width: 1030px;
        position: absolute;
        z-index: 0;
        pointer-events: none;
        height: 100%;
    }
    .row {
        padding: .9rem;
    }
    .page-wrapper {
        overflow: visible;
    }
    .popup-warpper {
        margin-top: 32px;
    }
    .sign-details-section {
        padding-top: 0;
    }
    .mt-3-lg {
        margin-top: 3rem !important;
    }
    .container {
        max-width: 885px;
    }
    .frame {
        display: none;
    }
    .desktop-frame {
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: auto;
    }
    .intial-frame {
        display: none;
    }
    .logo {
        max-width: 87px;
        width: 86px;
    }
    .logo-absolute {
        max-width: 87px;
        width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 20%;
        left: 45%;
      }
      .logo-absolute-index {
        max-width: 87px;
        width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 20%;
        left: 42.8%;
        z-index: 4;
      }
      .logo-absolute-learn {
        max-width: 87px;
        width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 20%;
        left: 44%;
        z-index: 4;
      }

    .logo-absolute-wrapper {
        width: 100%;
        max-width: 785px;
        margin-top: 240px;
        margin-top: 180px;
    }
    .logo-absolute-wrapper-index {
        position: relative;
        width: 785px;
        margin: 0 auto;
        text-align: center;
        margin-top: 1rem;
        bottom:0;
        left: 0;
        background: #E2E2E2;
    }
    .sun-wrapper {
        padding-top: 2rem !important;
    }
    .sun {
        background: url(../images/sun.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        left: 0%;
        margin-top: 18px;
    }
    .sun-no {
        background: url(../images/sun.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        left: 0%;
        margin-top: -125px;
    }
    .sun-header {
        width: 265px;
    }
    .sun-header-learn {
        width: 265px;
        position: relative;
        z-index: 3;
        top: 0;
    }
    .sun-header-index {
        position: relative;
        width: 265px;
        margin-left: -22px;
        z-index: 3;
    }
    .sun-bar-home {
        margin: -3px auto 0 auto;
        right: 0%;
    }
    .sun-bar-home-no {
        margin: -7px auto 0 auto;
        right: 0%;
        width: 450px;
    }
    .sun-bar-index {
        width: 492px;
        position: absolute;
        left: 18%;
        top: 100%;
    }
    .sun-bar {
        width: 492px;
        position: absolute;
        left: 20%;
        top: 100%;
    }
    .bar-animate  {
        width: 450px;
    }
    .graph-container {
        width: 785px;
        z-index: 0;
        display: flex;
        margin: 0 auto;
        justify-content: center;
      }

    .middle-graph {
        position: absolute;
        left: 0;
        bottom: 0;
        /* margin: -38px 30px -52%; */
        /* margin: 0px 0 0 -125px; */
        /* top: 0; */
        margin-bottom: -216px;
        margin-left: 17px;
        width: 730px;
    }
    .middle-graph-index {
        position: absolute;
        left: 20%;
        bottom: 0;
        margin: -1px 0 -325px -171px;
        width: 800px;
        z-index: 0;
    }
    .middle-graph-learn {
        position: absolute;
        left: 20%;
        bottom: 0;
        margin: 0px 0 -370px -171px;
        width: 800px;
        z-index: 0;      
    }
    .heading-home {
        font-size: 2.375rem;
        line-height: 44px;
        top: -56px;
    }
    .heading-home span {
        font-size: 2.625rem;
        line-height: 48px;
    }
    .sub-heading {
        padding-bottom: 64px;
        margin-top: 24px;
    }
    .home-text {
        font-size: 18px;
        line-height: 22px;
        max-width: 395px;
        margin-top: 2px;
        margin-bottom: 0;
        padding-top: 64px;
    }
    .footer {
        position: relative !important;
        top: 100;
        width: 100%;
        max-width: 865px;
        margin: 0 auto;
        font-size: 10px !important;
        padding-top: 0;
    }
    .footer .break:before {
        content: "";
        white-space: normal;
      }
    .footer a 
    .fixed-footer {
        position: relative;
    }
    .footer-select {
        padding-top: 0 !important;
    }
    .index-mobile {
        display: none !important;
    }
    .index-desktop {
        display: block;
    }
    .desktop-row {
        display: flex;
        justify-content: center;
        padding-top: 24px;
        position: relative;
    }
    .desktop-row img {
        z-index: 400;
    }
    .desktop-row .bottom-row {
        padding-bottom: 16px;
    }
    .desktop-row .row {
        padding: 0 !important;
    }
    a.btn-spotify.animate__animated.animate__fadeIn.animate__delay-5s {
        margin-top: 64px;
      }
      .bottom-graph-home {
          width: 320px;
          margin-top: 0;
          margin-left: 16px;
      }
      .bottom-graph-index {
        position: absolute;
        width: 320px;
        margin-top: 0;
        margin-left: 0px;
      }
      img.bottom-graph.up {
        width: 520px;
        z-index: 0;
        position: absolute;
        bottom: 0%;
        top: 0;
        pointer-events: none;
      }
      .legal {
        max-width: 412px;
      }
      .new-footer {
        position: static;
        margin: 200px 0 0 0;
      }
      .legal-footer {
          max-width: 480px;
          padding-top: 80px;
      }
      .desktop-bg {
          background: url('../images/bottom_graph-small.png') center center no-repeat;
          background-size: contain;
      }
      .intial-frame {
        display: none !important;
      }
}
.initial-frame {
    display: none;
}
@media only screen and (min-width: 1030px) {
    .home-frame-tablet {
        display: none;
    }
    .home-frame-desktop {
        display: block;
        height: 100%;
        width: 100%;
        max-width: 1900px;
        position: fixed;
        z-index: 0;
        pointer-events: none;
    }
    .new-footer {
        margin: 280px 0 0 0;
      }
}