:root{
    --grotesk:#2932b6;
}
div.progress-bar{
    background-color:var(--grotesk);
    }
section.tf-intro{
    background-color: var(--grotesk);
    /* color: rgb(54, 164, 238); */
}
h1.tf-page-title{
    font-size: 13vw;
    line-height: 0.9;
}
div.tf-intro-left p{
    border-top: 1px solid var(--mid-gray-2);
}
div.tf-intro-left{
    margin-top:20px;
}






h1.tf-page-title{
    overflow:hidden;
}
h1.tf-page-title span{
    display: inline-block;
    transform: translateY(100%);
    animation: up 1s 0.3s cubic-bezier(0, 0.72, 0.25, 1) forwards;
}
h1.tf-page-title-top span:nth-child(1){
    animation-delay: 0.3s;
}
h1.tf-page-title-top span:nth-child(2){
    animation-delay: 0.35s;
}
h1.tf-page-title-top span:nth-child(3){
    animation-delay: 0.4s;
}

h1.tf-page-title-bottom span:nth-child(1){
    animation-delay: 0.45s;
}
h1.tf-page-title-bottom span:nth-child(2){
    animation-delay: 0.5s;
}

h1.tf-page-title-bottom span:nth-child(3){
    animation-delay: 0.55s;
}

h1.tf-page-title-bottom span:nth-child(4){
    animation-delay: 0.6s;
}

h1.tf-page-title-bottom span:nth-child(5){
    animation-delay: 0.65s;
}

h1.tf-page-title-bottom span:nth-child(6){
    animation-delay: 0.7s;
}

h1.tf-page-title-bottom span:nth-child(7){
    animation-delay: 0.75s;
}


div.tf-intro-right-inner div{
    overflow: hidden;
}
div.tf-intro-right-inner div p{ 
    transform: translateY(120%);
    animation: up 1.2s 0.3s cubic-bezier(0, 0.72, 0.25, 1) forwards;
}









@media(max-width:1400px){
    div.option:nth-child(2){
        grid-column: 1/4;
    }
}


@media(max-width:1250px){
    h1.tf-page-title{
        font-size: 15vw;
        line-height: 0.9;
    }
}
@media(max-width:1200px){
    div.option:nth-child(1){
        grid-column: 1/13;
    }
    div.option:nth-child(2){
        grid-column: 1/4;
    }
    div.option:nth-child(3){
        grid-column: 10/13;
    }
}



@media(max-width:900px){
    div.option:nth-child(2){
        grid-column: 1/6;
    }
    div.option:nth-child(3){
        grid-column: 10/13;
    }
}


div.active-glyph-container{
    font-family: NMC Grotesk Regular;
}
section.glyphs-category div{
    font-family: NMC Grotesk Regular;
}

div.baseline{
    top:390px;
  }
  div.x-height{
    top:189px;
  }
  div.cap-height{
    top:101px;
  }
  div.ascender-height{
    top:130px;
  }
  @media(max-width:1400px){
    div.baseline{
        top:262px;
      }
      div.x-height{
        top:137px;
      }
      div.cap-height{
        top:82px;
      }
      p.micro{
          font-size:10px;
      }
}



/* a.tester-text{
    color:var(--grotesk);
} */



.download-text{
    color:var(--grotesk) !important;
}