html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  position:relative;
}
@keyframes up {
  0%{
      transform: translateY(100%) skew(-25deg, -25deg);
      opacity: 0;
  }
  100%{
      transform: translateY(0%) skew(0deg, 0deg);
      opacity: 1;
  }
}

div.progress-bar{
  width:0px;
  position:fixed;
  top:0;
  left:0;
  height:3px;
  z-index: 12;
  }
div.header-bg{
  background-color:var(--black);
  width:100vw;
  position:fixed;
  top:0;
  left:0;
  height:80px;
  z-index: 3;
  /* transition: var(--transition);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44); */
}
header.tf-header{
    /* height:60px; */
    position:fixed;
    z-index: 7;
    top:0;
    left:0;
    width:100vw;
    padding:var(--padding);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background:none;
    font-size: 24px;
}
header.tf-header div{
    opacity: 1;
}
div.tf-header-left p{
    display: inline;
    margin-right:10px;
}
div.tf-header-left a{
    opacity: 0.3;
}
img.small-arrow{
  max-height: 15px;
}
div.tf-header-left a.home{
  opacity: 1;
  margin-right:2px;
}
div.tf-header-left a.current-section{
  opacity: 1;
}
div.tf-header-right img{
    max-height: 30px;
}
.bw-icon{
  position: fixed;;
  top:45px;
  right:25px;
  z-index: 3;
  max-width: 28px;
  cursor: pointer;
}
.color-toggle-on{
  background-color: var(--white) !important;
  color: var(--black) !important;
  transition: var(--transition);
}

div.tf-header-right-mobile{
  display: none;
  cursor:pointer;
}




main.menu-open{
  opacity:0.15;
}
section.tf-intro{
    padding:var(--padding);
    height:100vh;
    position:sticky;
    z-index: -2;
    top:0;
    left:0;
    z-index: 0;
    pointer-events: none;
}
div.section-start.tf-intro-start{
  height:600px;
  width: 40vw;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color:blue; */
}
div.tf-intro-inner{
    display: flex;
    position: absolute;
    bottom: 8vh;
}
div.tf-intro-right{
    width:22vw;
    margin-right:50px;
}
div.tf-intro-right p{
    margin-bottom: 20px;
    font-size: 14px;
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 100, 'slnt' 0;
    padding-top:12px;
    letter-spacing: 0.08;
}
div.tf-intro-left{
    width:70vw;
    position:relative;
}
h1.tf-page-title{
    font-size: 9vw;
    line-height: 1;
    /* display:inline-block; */
}
.span-space{
  margin-right:60px;
}


h1.mobile-section-header{
  /* margin-bottom: 30px; */
  background-color:rgb(0, 0, 0);
  color:var(--white);
  font-size: 16px;
}
.padding{
  padding: var(--padding);
}
.header-adjust{
  padding-top:25px;
}



section.tf-styles{
    /* background-color: #000; */
    position: relative;
    z-index: 2;
    padding: var(--padding);
    padding-top: 100px;
    padding-bottom: 100px;
    font-size: 3vw;
    display: flex;
}
div.section-start.tf-styles{
  position: relative;
  height: 40px;
  width: 40px;
  top: 200px;
}
div.tf-styles-left{
    width:45vw;
    margin-right:50px;
}
div.tf-styles-right{
    width:45vw;
}
div.style{
    margin-bottom: 10px;
    /* border-top: 1px solid var(--mid-gray-1); */
}
div.style p:nth-child(1){
    color:var(--mid-gray-1);
    font-size: 22px;
    font-family: NMC Grotesk Light;
}
/* @media(max-width:1100px){
    section.tf-styles{
        display:block;
    }
} */






section.mobile-alphabet{
  padding: var(--padding);
  display:none;
  margin-bottom:80px;
  padding-top:30px;
}
section.mobile-alphabet h1{
  font-size: 16vw;
  white-space: normal;
  word-break: break-all;
}









section.tf-samples{
    padding:var(--padding);
    padding-bottom: 150px;;
    padding-top:150px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width:100vw;
    /* border-top:1px solid var(--mid-gray-1); */
}
div.sample{
  position: relative;
  width:100%;
  border-top:1px solid var(--mid-gray-1);
  margin-bottom: 100px;
}
div.sample-text{
  position: relative;
}
p.sample-text{
  font-size: 9.3vw;
  margin:-70px 0 0px 0;
  overflow-x: hidden;
  line-height: 1.3;
  position:relative;
  z-index: -1;
  box-sizing: border-box;
}
div.sample-left-50{
  position:absolute;
  bottom:0;
  left:0;
  height:100%;
  width:50%;
  opacity: 0.5;
  z-index: 2;
  cursor: w-resize;
}

div.sample-right-50{
  position:absolute;
  bottom:0;
  right:0;
  height:100%;
  width:50%;
  opacity: 0.5;
  z-index: 2;
  cursor: e-resize;
}

div.section-start.tf-samples{
  position: absolute;
  top:200px;
  left:0;
  height:400px;
  width:40px;
  /* background-color:red; */
}
div.sample-options{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:32px;
    padding: 40px 40px 20px 0px;
    margin-bottom: 80px;
    opacity: .2;
    transition: 0.4s;
  }
  div.sample:hover div.sample-options{
    opacity: 1;
  }
  div.option{
    max-width: 300px;
  }
  div.option label{
    font-size: 18px;
    display:flex;
    justify-content: space-between;
    margin-top:14px;
  }
  div.option:nth-child(1){
    grid-column: 1/13;
}
div.option:nth-child(2){
  grid-column: 1/3;
}
div.option:nth-child(3){
  grid-column: 10/12;
}




  section.tf-glyphs{
    display: flex;
    border-top:1px solid;
    border-bottom:1px solid;
    position: relative;
    z-index: 2;
  }
  div.tf-three-left{
    height:100vh;
    padding:var(--padding);
    position:sticky;
    top:0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(22, 22, 22); */
  }
  div.tf-three-left-container{
    position: relative;
  }
  div.active-glyph-container{
    width:500px;
    height:500px;
    /* border:1px solid var(--mid-gray-1); */
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size:400px;
    font-variation-settings: 'wght' 400, 'slnt' 0;
    margin-bottom: 270px;
    position:relative;
  }
  div.glyph-details{
    margin-top:20px;
    opacity: 0.8;
  }
  div.metrics{
    height:1px; 
    width:100%;
    background-color: gray;
    position: absolute;
  }
  p.micro{
    font-family: NMC Red Mono;
    font-size:11px;
    opacity: 0.4;
  }
  
  div.tf-three-right{
    width:70%;
    border-left: 1px solid var(--mid-gray-1);
    padding-left:40px;
  }
  div.glyphs{
    padding: 90px 40px 150px 0;
  }
  div.glyphs-container{
    /* display:grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 5px; */
    font-size: 32px;
    font-variation-settings: 'wght' 400, 'slnt' 0;
    /* cursor:none; */
  }
  section.glyphs-category{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 5px;
  }
  section.glyphs-category p{
    grid-column: 1/7;
    font-size: 14px;
    margin:40px 0 10px 0;
  }
  section.glyphs-category div{
    height:100px;
    height: 70px;
    border-top: 1px solid var(--mid-gray-1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 20px;
  }
  section.glyphs-category:hover div{
    opacity: 0.5;
  }
  section.glyphs-category div:hover{
    background-color: rgb(206, 206, 206);
    transform: scale(1.2);
    opacity: 1;
    z-index: 4;
  }
  select.glyphs-select{
    margin-top:20px;
    border-bottom:1px solid var(--gray);
  }
  div.glyph-details{
    /* display: flex; */
    /* justify-content: space-between; */
    /* padding: 30px; */
    font-size:16px;
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 200;
    /* border-top: 1px solid gray; */
    padding-top: 20px;
  }
/* OPENTYPE STYLES ==================================================== */
div.active-glyph-container{
    font-variant-ligatures: discretionary-ligatures;
}
section.glyphs-ligatures{
    font-variant-ligatures: discretionary-ligatures;
}

section.ss01 div{
    font-feature-settings: 'ss01';
}
div.active-glyph-container.ss01{
    font-feature-settings: 'ss01';
}

section.ss02 div{
    font-feature-settings: 'ss02';
}
div.active-glyph-container.ss02{
    font-feature-settings: 'ss02';
}

section.ss03 div{
    font-feature-settings: 'ss03';
}
div.active-glyph-container.ss03{
    font-feature-settings: 'ss03';
}

section.ss04 div{
  font-feature-settings: 'ss04';
}
div.active-glyph-container.ss04{
  font-feature-settings: 'ss04';
}

section.ss05 div{
  font-feature-settings: 'ss05';
}
div.active-glyph-container.ss05{
  font-feature-settings: 'ss05';
}


section.glyphs-lining-numerals div{
    font-variant-numeric: lining-nums;  
}
div.active-glyph-container.lnum{
    font-variant-numeric: lining-nums; 
}

section.glyphs-fractions div{
    font-feature-settings: "frac";
}











@keyframes blink{
  0%{
    opacity:0.3;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0.3;
  }
}
  section.tf-tester{
    width:100vw;
    padding-top:100px;
    position:relative;
  }
  div.section-start.tf-tester{
    width:40px;
    height:40px;
    position:absolute;
    top:40%;
    left:0;
    pointer-events: none;
  }
  div.tester-content{
    /* height:120vh; */
    display: flex;
    justify-content: center;
  }
  a.tester-text{
    cursor:pointer;
    font-size:120px;
    margin-top:200px;
    animation: blink 2s ease infinite;
    outline:none;
    min-height:70vh;
    width:90vw;
    text-align: center;
  }
  div.tester-options{
    padding: var(--padding);
    height:100px;
    width:100vw;
    position:sticky;
    bottom:0;
    left:0;
    visibility: hidden;
    transform: translateY(100%);
    border-top:1px solid gray;
    /* background-color: var(--dark-grey); */
    box-sizing: border-box;
    display:grid;
    grid-template-columns: repeat(18, 1fr);
    grid-gap: 36px;
    transition: var(--transition);
  }
  div.tester-options.open{
    transform:translateY(0);
    visibility: visible;
  }
  div.tester-option label{
    font-size: 18px;
    display:flex;
    justify-content: space-between;
    margin-top:14px;
  }
  div.tester-option:nth-child(1){
    grid-column:1/4;
  }
  div.tester-option:nth-child(2){
    grid-column:4/7;
  }
  div.tester-option:nth-child(3){
    grid-column:7/10;
  }
  div.tester-option:nth-child(4){
    grid-column:16/19;
  }
  div.tester-option select{
    border: 1px solid gray;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-size: 18px;
  }
  


  section.tf-download{
    display: flex;
    justify-content: space-between;
    grid-gap: 44px;
    padding:var(--padding);
    padding-bottom: 250px;
    padding-top: 100px;
    max-width: 100%;
    box-sizing: border-box;
  }
  div.tf-download-left{
    width:40%;
  }
  div.tf-download-left p{
    font-variation-settings: 'wght' 100, 'slnt' 0;
  }
  div.download-description{
    font-size:28px;
    margin-bottom: 100px;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  section.tf-download h1{
    border-bottom: 1px solid;
    margin-bottom: 12px;
    font-family: NMC Red Mono;
    font-size: 24px;
    padding-bottom:14px;
  }
  h2.download-text{
    font-size: 44px;
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 400;
    margin-top:20px;
  }
  div.tf-download-right{
    width:50%;
  }
  div.download-detail{
    border-top: 1px solid;
    display:flex;
    padding-top:7px;
    margin-bottom: 20px;
  }
  div.download-detail.no-border{
    border:none;
  }
  div.dd-left{
    width:25%;
    font-family: NMC Red Mono;
    font-variation-settings: 'wght' 100, 'slnt' 0;
  }
  div.dd-right{
    max-width: 75%;
    font-variation-settings: 'wght' 100, 'slnt' 0;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }
span.beta{
  color:red;
}


section.tf-page-index{
  padding-top:100px;
  /* padding:var(--padding); */
  box-sizing: border-box;
  /* max-width: 80%; */
}
section.tf-page-index div.index-container{
  background:none;
}