/* Auto scroll snap */

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

@view-transition {
  navigation: auto;
}

.row, .column, .type-tester, .character-viewer_blocks, .features,
.character-viewer__block__character-list > div, img  {
  scroll-snap-align: start; 
}

html {
  --scroll-offset: 125px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
  scroll-snap-type: y proximity;
  overscroll-behavior: contain;
}

html.page-home,  html.two-items {
  --scroll-offset: 80px;
}

html.three-items {
  --scroll-offset: 125px;
}

html.page-admin {
  --scroll-offset: 70px;
}

:root {
  --character_viewer_sticky_top: 100px;
  --nav-scroll-trigger: 600;
}

::selection {
  background: #E31C79;
  color: white;
}

/* TYPETR base colors */

.gray-dark {
    color: #202020;
}
.gray-light {
    color: #E6E6E6;
}
.red {
    color: #CC0256;
}
.yellow {
    color: #A5B306;
}
.blue {
    color: #3360B9;
}

ul li, ol li {
    line-height: 1.4em;
    padding-top: 0.7em;
}

li a:link, li a:visited, li a:active, {
    font-family: "Upgrade Medium";    
    font-weight: 400;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: #202020;
}

a {
  transition: color 100ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Reset */


h1, h2, h3, h4, h5, h6,
.sectionNavList a:link, .sectionNavList a:visited, .sectionNavList a:active,
.menuBox ul li:link, .menuBox ul li:visited, .menuBox ul li:active  {
    font-style: normal;
    font-weight: none; /* or 400 */
    font-synthesis: none; /* prevent browser from faking bold/italic */
}

h2 a:link, h2 a:visited, h2 a:active,
.sectionNavList a:link, .sectionNavList a:visited, .sectionNavList a:active,
.menuBox ul li:link, .menuBox ul li:visited, .menuBox ul li:active  {
    font-family: "Upgrade Medium";    
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    color: #202020;
}

h4{
    font-size: 1.2em;
    margin-bottom: 10px;
}


.character-viewer__monitor__details span:nth-child(odd) {
  font-weight: 700; /* bold */
}
.select__text, .type-tester__features-button__button,
.character-viewer__monitor__details .select{
    font-weight: bold;
    display: inline-block;
    transition:
        background-color 0.2s ease,
        transform 0.2s cubic-bezier(.4, 0, .2, 1);
}

.character-viewer__monitor__details .select:hover{
    transform: translateX(10px);
}

.type-tester__features-button__button:hover{
    transform: translateX(-10px);
}

.character-viewer__block__character-list>div:hover{
    background-color: #3360B9;
}

.character-viewer__block__character-list>div:active,
.character-viewer__block__character-list > div[data-selected="true"]{
    background-color: #E31C79;
}

h1, h2, h3, h4, h5, h6, a, ol li, ul li, ol li, p, a {
 font-feature-settings: 'liga' 1; 
 text-decoration: none;
}

.type-tester__slider__handle:hover,
h2 a:hover, .sectionNavList a:hover, .menuBox ul li:hover, ol li a, ul li a,
.character-viewer__monitor__details>span>label,
.type-tester__features-button__button {
    color: #4E76C0;  
}

.type-tester-select .select:hover,
h2 a:active, .sectionNavList a:active, .menuBox ul li:hover, ol li a:hover, ul li a:hover,
.character-viewer__monitor__details>span>label:hover,
.type-tester__features-button__button:hover {
    color: #E31C79;  
}

p a:link, p a:visited, p a:active {
    text-decoration: none;
    color: #202020;
}
p a:hover {
    color: #E31C79;
}

.leading09 {
    line-height: 0.9em;
}
.leading1 {
    line-height: 1em;
}
.leading12 {
    line-height: 1.2em;
}
.leading13 {
    line-height: 1.3em;
}
.leading14 {
    line-height: 1.4em;
}
.leading15 {
    line-height: 1.5em;
}
.leading18 {
    line-height: 1.8em;
}

/* General Styles */

/* Animation */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  font-family: "Upgrade Regular", sans-serif; 
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  background-color: white;
  width: 100vw;
  overflow-x: hidden;
  line-height: 1;
  -webkit-text-size-adjust: none; 
  -moz-text-size-adjust: none;  
  text-size-adjust: none;  
    -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

fontdue-cart-button,
.cart-button__label{
  font-family: "Upgrade Regular", sans-serif; 
}

header {
    display: block;
    height: 50px;
    padding: 10px;
    background-color: black;
    color: white;
    border-bottom: 1px white solid;
    position: fixed;
    z-index: 100;
    width: 100%;
    box-shadow: 0 14px 16px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Position z-layer under Fontdue cart boxes */ 
    animation: slideDown 0.4s ease-out forwards;
}


/* ===== contact ===== */
.contact-block {
    display: flex;
    align-items: center;
    background: white;
    border-bottom: 1px solid #202020;
    transition: all 0.2s ease;
}

.contact-block img.contact {
  max-width: 130px; 
  height: auto;
  object-fit: cover;
}

.contact-block > div {
  display: flex;
  align-items: center; /* Verticaal uitlijnen */
  gap: 20px; /* Ruimte tussen image en div */
  padding: 0px;
}

/* ===== sticky ===== */

.contact-block.sticky {
    position: sticky;
    top: 70px;
    z-index: 10;
}

.column34 img.contact {
  max-width: 150px; /* of wat passend is */
  height: auto;
}

.top-under-menu {
    padding-top: 5em;
}
.name-title {
    font-size: 8vw;  
    padding-top: 0.25em; 
    text-align: center; 
    animation: fadeIn 1s ease-out forwards;
}
.name-title a {
    text-decoration: none;
    color: black;
    letter-spacing: 0;
      display: inline-block; /* nodig voor transform */
      transform: scale(1);
      transition:
        transform 0.1s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
}
.name-title a:hover {
  transform: scale(1.05); /* klein beetje groter */
    color: #E31C79;
}

/* Font stuff */

.presti { 
    font-family: "Presti Text Normal";    
    font-feature-settings: 'ss01': 1, 'liga': 1; /* Allow flourishes as ~tru4 */
    font-weight: 400;
    letter-spacing: 0.02em;
}
.presti-bold {
    font-family: "Presti Deck Bold";    
    font-feature-settings: 'ss01': 1, 'liga': 1; /* Allow flourishes as ~tru4 */
    font-weight: 400;
    letter-spacing: 0.02em;
}
.presti p {
    line-height: 1.4em;
    font-feature-settings: 'ss01': 1, 'liga': 1; /* Allow flourishes as ~tru4 */
}


/* Presti VF Display */

.presti-thin {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 100;
}
.presti-light {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 200;
}
.presti-book {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 300;
}
.presti-normal {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 350;
}
.presti-regular {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 400;
}
.presti-standard {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 450;
}
.presti-medium {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 500;
}
.presti-semibold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 600;
}
.presti-bold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 700;
}
.presti-extrabold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 800;
}
.presti-black {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 900;
}

/* Presti VF Head */

.presti-thin {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 100;
}
.presti-light {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 200;
}
.presti-book {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 300;
}
.presti-normal {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 350;
}
.presti-regular {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 400;
}
.presti-standard {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 450;
}
.presti-medium {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 500;
}
.presti-semibold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 600;
}
.presti-bold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 700;
}
.presti-extrabold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 800;
}
.presti-black {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 900;
}

/* Presti VF Deck */

.presti-deck-thin {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 100;
}
.presti-deck-light {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 200;
}
.presti-deck-book {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 300;
}
.presti-deck-normal {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 350;
}
.presti-deck-regular {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 400;
}
.presti-deck-standard {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 450;
}
.presti-deck-medium {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 500;
}
.presti-deck-semibold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 600;
}
.presti-deck-bold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 700;
}
.presti-deck-extrabold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 800;
}
.presti-deck-black {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 900;
}

/* Presti VF Text */

.presti-text-thin {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 100;
}
.presti-text-light {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 200;
}
.presti-text-book {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 300;
}
.presti-text-normal {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 350;
}
.presti-text-regular {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 400;
}
.presti-text-standard {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 450;
}
.presti-text-medium {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 500;
}
.presti-text-semibold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 600;
}
.presti-text-bold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 700;
}
.presti-text-extrabold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 800;
}
.presti-text-black {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 900;
}

/* Presti VF Small */

.presti-small-thin {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 100;
}
.presti-small-light {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 200;
}
.presti-small-book {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 300;
}
.presti-small-normal {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 350;
}
.presti-small-regular {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 400;
}
.presti-small-standard {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 450;
}
.presti-small-medium {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 500;
}
.presti-small-semibold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 600;
}
.presti-small-bold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 700;
}
.presti-small-extrabold {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 800;
}
.presti-small-black {
    font-family: "Presti VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 900;
}

/* Presti VF Display Italic */

.presti-thin-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 100;
}
.presti-light-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 200;
}
.presti-book-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 300;
}
.presti-normal-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 350;
}
.presti-regular-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 400;
}
.presti-standard-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 450;
}
.presti-medium-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 500;
}
.presti-semibold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 600;
}
.presti-bold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 700;
}
.presti-extrabold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 800;
}
.presti-black-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 36, 'wght' 900;
}

/* Presti VF Head */

.presti-thin-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 100;
}
.presti-light-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 200;
}
.presti-book-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 300;
}
.presti-normal-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 350;
}
.presti-regular-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 400;
}
.presti-standard-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 450;
}
.presti-medium-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 500;
}
.presti-semibold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 600;
}
.presti-bold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 700;
}
.presti-extrabold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 800;
}
.presti-black-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 24, 'wght' 900;
}

/* Presti VF Deck */

.presti-deck-thin-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 100;
}
.presti-deck-light-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 200;
}
.presti-deck-book-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 300;
}
.presti-deck-normal-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 350;
}
.presti-deck-regular-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 400;
}
.presti-deck-standard-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 450;
}
.presti-deck-medium-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 500;
}
.presti-deck-semibold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 600;
}
.presti-deck-bold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 700;
}
.presti-deck-extrabold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 800;
}
.presti-deck-black-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 18, 'wght' 900;
}

/* Presti VF Text */

.presti-text-thin-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 100;
}
.presti-text-light-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 200;
}
.presti-text-book-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 300;
}
.presti-text-normal {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 350;
}
.presti-text-regular-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 400;
}
.presti-text-standard-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 450;
}
.presti-text-medium-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 500;
}
.presti-text-semibold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 600;
}
.presti-text-bold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 700;
}
.presti-text-extrabold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 800;
}
.presti-text-black-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 11, 'wght' 900;
}

/* Presti VF Small */

.presti-small-thin-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 100;
}
.presti-small-light-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 200;
}
.presti-small-book-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 300;
}
.presti-small-normal-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 350;
}
.presti-small-regular-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 400;
}
.presti-small-standard-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 450;
}
.presti-small-medium-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 500;
}
.presti-small-semibold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 600;
}
.presti-small-bold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 700;
}
.presti-small-extrabold-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 800;
}
.presti-small-black-italic {
    font-family: "Presti VF Italic";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'opsz' 8, 'wght' 900;
}

/* Promise - Beta versions */

.promise {
    font-family: "Promise Regular";
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
}

/* Prominence - Beta versions */

.prominence {
    font-family: "Prominence Regular";
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
}

/* Productus */

.productus {
    font-family: "Productus Book";
    font-weight: 400;
}
.productus-italic {
    font-family: "Productus Book Italic";
    font-weight: 400;
}
.productus p {
    letter-spacing: 0.04em;
    line-height: 1.4em;
}
.productus-bold {
    font-family: "Productus Bold";
    font-weight: 400;
}
.productus-bold-italic {
    font-family: "Productus Bold Italic";
    font-weight: 400;
}
.productus-bold p {
    letter-spacing: 0.04em;
    line-height: 1.4em;
}

.productus-book {
    font-family: "Productus Book";
    font-style: normal;
    font-weight: 400;
}
.productus-book-italic {
    font-family: "Productus Book Italic";
    font-style: normal;
    font-weight: 400;
}
.productus-medium {
    font-family: "Productus Medium";
    font-style: normal;
    font-weight: 400;
}
.productus-medium-italic {
    font-family: "Productus Medium Italic";
    font-style: normal;
    font-weight: 400;
}
.productus-semibold {
    font-family: "Productus Semi Bold";
    font-style: normal;
    font-weight: 400;
}
.productus-semibold-italic {
    font-family: "Productus Semi Bold Italic";
    font-style: normal;
    font-weight: 400;
}
.productus-bold {
    font-family: "Productus Bold";
    font-style: normal;
    font-weight: 400;
}
.productus-bold-italic {
    font-family: "Productus Bold Italic";
    font-style: normal;
    font-weight: 400;
}
.productus-black {
    font-family: "Productus Bold";
    font-style: normal;
    font-weight: 400;
}
.productus-black-italic {
    font-family: "Productus Bold Italic";
    font-style: normal;
    font-weight: 400;
}

/* Proforma Classic */

.proforma-classic {
    font-family: "Proforma Classic Book";
    font-weight: 400;
}
.proforma-classic p {
    letter-spacing: 0.02em;
    line-height: 1.4em;
}


.proforma-classic-ultralight {
    font-family: "Proforma Classic Ultra Light";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-ultralight-italic {
    font-family: "Proforma Classic Ultra Light Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-light {
    font-family: "Proforma Classic Light";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-light-italic {
    font-family: "Proforma Classic Light Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-book {
    font-family: "Proforma Classic Book";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-book p {
    letter-spacing: 0.015em;
    line-height: 1.4em;
}
.proforma-classic-book-italic {
    font-family: "Proforma Classic Book Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-medium {
    font-family: "Proforma Classic Medium";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-medium-italic {
    font-family: "Proforma Classic Medium Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-semibold {
    font-family: "Proforma Classic Semi Bold";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-semibold-italic {
    font-family: "Proforma Classic Semi Bold Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-bold {
    font-family: "Proforma Classic Bold";
    font-style: normal;
    font-weight: 400;
}
.proforma-classic-bold p {
    letter-spacing: 0.015em;
    line-height: 1.4em;
}
.proforma-classic-bold-italic {
    font-family: "Proforma Classic Bold Italic";
    font-style: normal;
    font-weight: 400;
}

/* Proforma Pro VF */

.proforma-pro {
    font-family: "TP Proforma Pro Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
}
.proforma-pro p {
    letter-spacing: 0.03em; /* Needs to be calibrated again, once the final VF is made */
    line-height: 1.4em; /* Needs to be calibrated again, once the final VF is made */
}
.proforma-pro-bold {
    font-family: "TP Proforma Pro Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'wght' 700;
}
.proforma-pro-bold p {
    letter-spacing: 0.03em; /* Needs to be calibrated again, once the final VF is made */
    line-height: 1.4em; /* Needs to be calibrated again, once the final VF is made */
}

/* Proforma Pro */

.proforma-pro-thin {
    font-family: "Proforma Pro Thin";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-thin {
    font-family: "Proforma Pro Tx Thin";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-thin-italic {
    font-family: "Proforma Pro Thin Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-thin-italic {
    font-family: "Proforma Pro Tx Thin Italic";
    font-style: normal;
    font-weight: 400;
}

.proforma-pro-extralight {
    font-family: "Proforma Pro ExtraLight";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-extralight {
    font-family: "Proforma Pro Tx ExtraLight";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-extralight-italic {
    font-family: "Proforma Pro ExtraLight Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-extralight-italic {
    font-family: "Proforma Pro Tx ExtraLight Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-light {
    font-family: "Proforma Pro Light";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-light {
    font-family: "Proforma Pro Tx Light";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-light-italic {
    font-family: "Proforma Pro Light Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-light-italic {
    font-family: "Proforma Pro Tx Light Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-semilight {
    font-family: "Proforma Pro SemiLight";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-semilight {
    font-family: "Proforma Pro Tx SemiLight";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-semilight-italic {
    font-family: "Proforma Pro SemiLight Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-semilight-italic {
    font-family: "Proforma Pro Tx SemiLight Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-book {
    font-family: "Proforma Pro Book";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-book {
    font-family: "Proforma Pro Tx Book";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-book-italic {
    font-family: "Proforma Pro Book Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-book-italic {
    font-family: "Proforma Pro Tx Book Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-normal {
    font-family: "Proforma Pro Normal";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-normal {
    font-family: "Proforma Pro Tx Normal";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-normal-italic {
    font-family: "Proforma Pro Normal Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-normal-italic {
    font-family: "Proforma Pro Tx Normal Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-regular {
    font-family: "Proforma Pro Regular";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-regular {
    font-family: "Proforma Pro Tx Regular";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-regular-italic {
    font-family: "Proforma Pro Regular Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-regular-italic {
    font-family: "Proforma Pro Tx Regular Italic";
    font-style: normal;
    font-weight: 400;
}

.proforma-pro-standard {
    font-family: "Proforma Pro Standard";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-standard {
    font-family: "Proforma Pro Tx Standard";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-standard-italic {
    font-family: "Proforma Pro Standard Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-standard-italic {
    font-family: "Proforma Pro Tx Standard Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-medium {
    font-family: "Proforma Pro Medium";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-medium {
    font-family: "Proforma Pro Tx Medium";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-medium-italic {
    font-family: "Proforma Pro Medium Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-medium-italic {
    font-family: "Proforma Pro Tx Medium Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-semibold {
    font-family: "Proforma Pro SemiBold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-semibold {
    font-family: "Proforma Pro Tx SemiBold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-semibold-italic {
    font-family: "Proforma Pro SemiBold Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-semibold-italic {
    font-family: "Proforma Pro Tx SemiBold Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-bold {
    font-family: "Proforma Pro Bold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-bold {
    font-family: "Proforma Pro Tx Bold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-bold-italic {
    font-family: "Proforma Pro Bold Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-bold-italic {
    font-family: "Proforma Pro Tx Bold Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-extrabold {
    font-family: "Proforma Pro ExtraBold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-extrabold {
    font-family: "Proforma Pro Tx ExtraBold";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-extrabold-italic {
    font-family: "Proforma Pro ExtraBold Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-extrabold-italic {
    font-family: "Proforma Pro Tx ExtraBold Italic";
    font-style: normal;
    font-weight: 400;
}


.proforma-pro-black {
    font-family: "Proforma Pro Black";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-black {
    font-family: "Proforma Pro Tx Black";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-black-italic {
    font-family: "Proforma Pro Black Italic";
    font-style: normal;
    font-weight: 400;
}
.proforma-pro-text-black-italic {
    font-family: "Proforma Pro Tx Black Italic";
    font-style: normal;
    font-weight: 400;
}


/* PowerLift */

.powerlift {
    font-family: "PowerLift Tight";    
    font-weight: 400;
    letter-spacing: 0;
}
.powerlift p, p.powerlift {
    line-height: 1em; 
    letter-spacing: 0;
}
.powerlift-outline {
    font-family: "PowerLift Tight Outline";    
    font-weight: 400;
    letter-spacing: 0;
}
.powerlift-outline p, p.powerlift-outline {
    line-height: 1em; 
    letter-spacing: 0;
}

/* Responder VF */

.responder-p {
    font-family: "Responder P VF Regular";
    /* Slightly lighter, as 400 seems bolder compared to other families. */
    font-variation-settings: 'ital': 0, 'wght': 250;
    font-feature-settings: 'clig' 1; 
}
.responder-p-bold {
    font-family: "Responder P VF Regular";
    font-variation-settings: 'ital': 0, 'wght': 600;
    font-feature-settings: 'clig' 1; 
}
.responder-p p {
    line-height: 1.4em;
    font-feature-settings: 'clig' 1; 
}
.responder-m {
    font-family: "Responder M Regular Italic";
    font-style: normal;
    font-weight: 400;
    line-height: 1.4em;
    font-feature-settings: 'clig' 1; 
}

.responder-p-thin {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 100;
    font-feature-settings: 'clig' 1; 
}
.responder-p-light {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 200;
    font-feature-settings: 'clig' 1; 
}
.responder-p-book {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 300;
    font-feature-settings: 'clig' 1; 
}
.responder-p-regular {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 400;
    font-feature-settings: 'clig' 1; 
}
.responder-p-medium {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 500;
    font-feature-settings: 'clig' 1; 
}
.responder-p-semibold {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 600;
    font-feature-settings: 'clig' 1; 
}
.responder-p-bold {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 700;
    font-feature-settings: 'clig' 1; 
}
.responder-p-extrabold {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 800;
    font-feature-settings: 'clig' 1; 
}
.responder-p-black {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 0, 'wght' 900;
    font-feature-settings: 'clig' 1; 
}
.responder-p-thin-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 100;
    font-feature-settings: 'clig' 1; 
}
.responder-p-light-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 200;
    font-feature-settings: 'clig' 1; 
}
.responder-p-book-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 300;
    font-feature-settings: 'clig' 1; 
}
.responder-p-regular-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 400;
    font-feature-settings: 'clig' 1; 
}
.responder-p-medium-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 500;
    font-feature-settings: 'clig' 1; 
}
.responder-p-semibold-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 600;
    font-feature-settings: 'clig' 1; 
}
.responder-p-bold-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 700;
    font-feature-settings: 'clig' 1; 
}
.responder-p-extrabold {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 800;
    font-feature-settings: 'clig' 1; 
}
.responder-p-black-italic {
    font-family: "Responder P VF Regular";
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'ital' 1, 'wght' 900;
    font-feature-settings: 'clig' 1; 
}

/* Upgrade */

.upgrade-black {
    font-family: "Upgrade Black";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-black-italic {
    font-family: "Upgrade Black Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-bold {
    font-family: "Upgrade Bold";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-bold-italic {
    font-family: "Upgrade Bold Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-semibold {
    font-family: "Upgrade Semibold";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-semibold-italic {
    font-family: "Upgrade Semibold Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-medium {
    font-family: "Upgrade Medium";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-medium-italic {
    font-family: "Upgrade Medium Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade {
    font-family: "Upgrade Regular";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-italic {
    font-family: "Upgrade Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-light {
    font-family: "Upgrade Light";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-light-italic {
    font-family: "Upgrade Light Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-thin {
    font-family: "Upgrade Thin";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade-thin-italic {
    font-family: "Upgrade Thin Italic";    
    font-weight: 400;
    letter-spacing: 0.02em;
}
.upgrade p {
    line-height: 1.4em;
}

/*  Bitcount */

.bitcount {
    font-family: "Bitcount Mono Double Regular Circle";
    font-weight: 400;
}
.bitcount p {
    line-height: 1.4em;
}
.bitcount-bold {
    font-family: "Bitcount Mono Double Bold Circle";
    font-weight: 400;
}
.bitcount-bold p {
    line-height: 1.4em;
}

.bitcount-grid {
    font-family: "Bitcount Grid Double Regular Circle";
    font-weight: 400;
}
.bitcount-mono {
    font-family: "Bitcount Mono Double Regular Circle";
    font-weight: 400;
}
.bitcount-prop {
    font-family: "Bitcount Prop Double Regular Circle";
    font-weight: 400;
}

.bitcount-grid-book {
    font-family: "Bitcount Grid Double Book Circle";
    font-weight: 400;
}
.bitcount-mono-book {
    font-family: "Bitcount Mono Double Book Circle";
    font-weight: 400;
}
.bitcount-prop-book {
    font-family: "Bitcount Prop Double Book Circle";
    font-weight: 400;
}

.no-tracking {
    letter-spacing: 0;
}
.no-bullet {
     list-style-type: none;
}

.size16 {
    font-size: 16px;
}
.size18 {
    font-size: 18px;
}
.size20 {
    font-size: 20px;
}
.size24 {
    font-size: 24px;
}
.size28 { /* Used for Responder P, optically same size as .size24 for other families */
    font-size: 28px;
}
.size30 {
    font-size: 30px;
}
.size36 {
    font-size: 36px;
}
.size48 {
    font-size: 48px;
}
.size56 {
    font-size: 56px;
}
.size64 {
    font-size: 64px;
}
.size80 {
    font-size: 80px;
}
.size100 {
    font-size: 100px;
}

.aalt {
    font-feature-settings: 'aalt' 1; /* Access All Alternates */
}
.liga {
    font-feature-settings: 'liga' 1; /* Ligatures is default on */
}
.no-liga {
    font-feature-settings: 'liga' 0; 
}
.clig {
    font-feature-settings: 'clig' 1; 
}
.no-clig {
    font-feature-settings: 'clig' 0; 
}
.case {
    font-feature-settings: 'case' 1; 
}

.frac {
    font-feature-settings: 'frac' 1; /* Fractions */    
}
.tnum {
    font-feature-settings: 'tnum' 1; /* Table figures */
}
.onum {
    font-feature-settings: 'onum' 1; /* Old style figures */
}
.sups {
    font-feature-settings: 'sups' 1; /* Superior figures  & lower case */
}
.dnom {
    font-feature-settings: 'dnom' 1; /* Denomerator figures */
}
.sinf {
    font-feature-settings: 'sinf' 1; /* Inferiors figures & lower case */
}
.numr {
    font-feature-settings: 'numr' 1; /* Numerator figures */
}
.zero {
    font-feature-settings: 'zero' 1; /* Slashed zero */
}

.smcp {
    font-feature-settings: 'smcp' 1; /* Small caps */
}
.c2sc {
    font-feature-settings: 'c2sc' 1;
}
.c2sc-smcp {
    font-feature-settings: 'smcp' 1, 'c2sc' 1;
}

.swsh {
    font-feature-settings: 'swsh' 1; /* Set of selected swashes */
}
.ss01 {
    font-feature-settings: 'ss01' 1;
}
.no-ss01 {
    font-feature-settings: 'ss01' 0;
}
.ss02 {
    font-feature-settings: 'ss02' 1;
}
.ss03 {
    font-feature-settings: 'ss03' 1;
}
.ss04 {
    font-feature-settings: 'ss04' 1;
}
.ss04-clig {
    font-feature-settings: 'ss04' 1, 'clig' 1;
}
.ss05 {
    font-feature-settings: 'ss05' 1;
}
.ss05-clig {
    font-feature-settings: 'ss05' 1, 'clig' 1;
}
.ss06 {
    font-feature-settings: 'ss06' 1;
}
.ss06-clig {
    font-feature-settings: 'ss06' 1, 'clig' 1;
}
.ss07 {
    font-feature-settings: 'ss07' 1;
}
.ss07-clig {
    font-feature-settings: 'ss07' 1, 'clig' 1;
}
.ss08 {
    font-feature-settings: 'ss08' 1;
}
.ss08-clig {
    font-feature-settings: 'ss08' 1, 'clig' 1;
}
.ss09 {
    font-feature-settings: 'ss09' 1;
}
.ss09-clig {
    font-feature-settings: 'ss09' 1, 'clig' 1;
}
.ss10 {
    font-feature-settings: 'ss10' 1;
}
.ss11 {
    font-feature-settings: 'ss12' 1;
}
.ss12 {
    font-feature-settings: 'ss12' 1;
}
.ss13 {
    font-feature-settings: 'ss13' 1;
}
.ss14 {
    font-feature-settings: 'ss14' 1;
}
.ss15 {
    font-feature-settings: 'ss15' 1;
}
.ss16 {
    font-feature-settings: 'ss16' 1;
}
.ss17 {
    font-feature-settings: 'ss17' 1;
}
.ss18 {
    font-feature-settings: 'ss18' 1;
}
.ss19 {
    font-feature-settings: 'ss19' 1;
}
.ss20 {
    font-feature-settings: 'ss20' 1;
}

.ss12-ss17 {
    font-feature-settings: 'ss12' 1, 'ss17' 1;
}
.ss12-ss18 {
    font-feature-settings: 'ss12' 1, 'ss18' 1;
}
.ss12-ss19 {
    font-feature-settings: 'ss12' 1, 'ss19' 1;
}
.ss12-ss20 {
    font-feature-settings: 'ss12' 1, 'ss20' 1;
}

/* Header logo */

header .logo { /* Floating left box with logo */
    display: block;
    float: left;
    width: 260px; /* Make distance to familyName */
}
header .familyName { /* Floating left box with current family name */
    display: block;
    float: left;
    font-size: 40px;
    text-align: left;
    transform: translateY(calc(0.105em)); /* shift so baseline hits 50px */
    animation: fadeIn 0.2s ease-out forwards;
}

header .familyName:hover {
    color: #E31C79;
}

header .familyName .andMore {
    animation: fadeIn 0.2s ease-out forwards;
}
header .logo img {
    padding-top: 4px;
    height: 42px;
}
header .smallLogo { /* Text logo for really small screen sizes, no space for image */
    transform: translateY(calc(0.4em)); /* shift so baseline hits 50px */
    display: none;
}
header .smallLogo a { /* Text logo for really small screen sizes, no space for image */
    color: white;
    font-family: "Upgrade Semibold";
    font-size: 38px;
    letter-spacing: 0.25em;
    text-decoration: none;
}
header .smallLogo a:hover { /* Text logo for really small screen sizes, no space for image */
    color: #E0E0E0;
}

/* Header navigation */

header .navbar {
    display: block;
    float: right;
    padding: 4px;
    padding-right: 30px;
    animation: fadeIn 0.4s ease-out forwards;
}
header .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
header .navbar li {
    margin-right: 10px;
}
header .navbar a {
    color: white;
    font-size: 1.2em;
    text-decoration: none;
}
header .navbar a:hover {
    color: #4E76C0;
    text-decoration: none;
}

header .navbar .current{
    color: #E31C79;  
}

.menuBox .current, .ot:hover{
    color: #E31C79;  
}

header .hamburger {
    position: absolute;
    top:0px;
    right:0px;
    font-size: 30px;
    cursor: pointer;
    float: right;
    padding: 20px;
    padding-right: 40px;
    animation: fadeIn 0.7s ease-out forwards;
    z-index: 100000000;
}

.cta-cart {
    animation: fadeIn 0.3s ease-out forwards;
}

header .hamburger:hover{
    color: #E31C79;  
}

h2 a.active {
  color: red; /* actieve linkkleur */
  font-weight: bold; /* optioneel */
}

/* Slideshow */

.slideshow {
    padding-top: 60px;
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

/* Font selector */

.font-selector {
    padding: 30px;
}
.font-selector a {
    text-decoration: none;
}


.select_text svg path,
.select_text svg text,
.select_text svg line {
  stroke-width: 2; 
}

/* Image cells */

.titleImage {
    margin-top: 20px; 
    padding-top: 30px;
    width: 100%; 
    height: 400px; 
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    box-shadow: inset 0 -30px 35px -15px rgba(0, 0, 0, 0.25);
}
.titleImageSmall {
    margin-top: 0px; 
    width: 100%; 
    height: 350px; /* Fitting Bitcount animations */
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
}

div.image {
    width: 98%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    padding: 0;
}

/* Pop-up */
.popup {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); 
  animation: fadeIn .4s forwards;
  z-index: 10000;
}

.store-modal__container__background {
    animation: fadeIn .5s forwards;
}

.store-modal__container__overlay {
    z-index: 10000000000;
}

.popup-content {
  background-color: #202020;
  margin-top: 70px;
  margin-left:250px;
  padding: 10px;
  padding-right:30px;
  padding-bottom:0px;
  width: 300px;
  max-width: 300px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
  animation: slideDown .3s forwards;
}

.popup-content .column {
  background-color: #202020;    
}

.popup-content .column a {
  color: white;    
}

.popup-contentp a:link, .popup-contentp a:visited, .popup-contentp a:active {
    text-decoration: none;
    color: #E31C79;  
}
.popup-contentp p a:hover {
    color: #4E76C0;  
}

.familyName:hover, .close:hover, .menuBox .close:hover, .navbar a:hover,
.popup-content:hover .column a:hover {
    color: #4E76C0;  
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30pt;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.menuBox .close{
  font-size: 30pt;
  color: black;   
  font-weight: regular;
  animation: fadeIn 0.7s ease-out forwards;
  padding-top: 5px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
    flex: 1;
    width: 50%;
    min-width: 300px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}

.topline {
    border-top: 1px solid #202020;
}


.type-tester .select-button-hover-parent:first-child {
  border-top: none;
}

.page-admin .titleImage{
    border-bottom: 1px solid #202020;
}

.column p {
    margin: 0 40px 0 0;
}

.column14{
    width: 25%;
    min-width: 250px;     
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}

.column14.ab {
  padding-top: 0px;
  padding-bottom: 0px;
}

.column34 {
    flex: 1;
    padding-right: 20px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}

.column13 {
    /*flex: 1;*/
    width: 33%;
    padding-right: 12px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}
.column23 {
    /*flex: 1;*/
    width: 66%;
    padding-right: 12px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}

.ab{
    background-color: #F0F0F0;
    padding-bottom: 20px;
}

.sticky {
  position: sticky;
  top: 85px;
  height: auto;
}

.sticky-OT {
  position: sticky;
  top: 135px;
  height: auto;
}

.sticky img {
    width:100%;
}

/* Basis sectie */

.section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.interview {
    border-top: 1px solid gray;
    display: grid;
    gap: 0px;
    margin-bottom: 10px;
}

.interview h2{
    font-size: 36pt;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-block-start: 0px;
    margin-block-end: 0em;
}

/* Afbeeldingen */
.img-banner {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Variant: 2 images onder tekst */
.image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Variant: 50% content blocks */
.interview--grid {
    grid-template-columns: repeat(2, 1fr);
}

.content-block {
    display: grid;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.img-mask {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* pas aan indien nodig */
    overflow: hidden;
}

/* Afbeelding vult het masker */
.img-mask img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sectionNav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;

    background-color: #F0F0F0;      
    border-bottom: 1px solid #202020;
    box-shadow: 0 14px 16px rgba(0, 0, 0, 0.2);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    line-height: 0px;
}

.sectionNavList a {
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sticky a.active ,
.sectionNavList a.active {
    color: #E31C79;
}

.sectionNav.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.sectionNavList {
    width:100%;
    max-width: 1200px;     
    margin: 0;      
    padding-top: 0px;     
    padding-left: 20px;     
    padding-bottom: 15px; 
    list-style: none;
    display: flex;
    flex-direction: column;
    font-size: 1.3em;
}

.sticky h2 {
    font-size: 1.3em;    
}

.sectionNavList H2 {
    padding:2px;
    padding-bottom:5px;
    padding-left:15px;
}

.features{
    border-top: 1px solid gray;
    padding-bottom: 15px;
}

div.responsiveShow {
    display: none;
}

code {
    background: rgba(0,0,0,0.05);
    padding: 10px;
    border-radius: 4px;
    line-height: 4em;
}


/* Footer */
footer {
    border-top: 1px solid lightgray;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 1em;
    background-color: white;
    color: #333;
    width: 100%;
    animation: fadeIn 1s ease-out forwards;
}
footer p {
    font-size: 1em;
    margin: 0;
}

/* Type testers */

div.type-tester {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
fontdue-type-testers {
    font-size: 8em;
    font-feature-settings: "kern" 1, "clig" 1, "liga" 1, "ss01" 1, "frac" 1;
    padding: 0;

    width: 100% !important;
    max-width: 100% !important;
    display: block;
}
div.smallWeightTester { /* For small screen sizes */
    font-size: 8em;
    font-feature-settings: "kern" 1, "clig" 1, "liga" 1, "ss01" 1, "frac" 1;
    padding-left: 16px;
    padding-right: 16px;
    width: 100% !important;
    max-width: 100% !important;
    display: none;   
}
div.smallWeightTester {
    width: 100%;
}

/* Cart button */

fontdue-cart-button {
    font-family: "Upgrade Medium";
    font-size: 1.2em;
}

fontdue-cart-button:hover {
    color: #4E76C0;
}

fontdue-cart-button:active {
    color: #E31C79;
}

.character-viewer__monitor__container {
    top: 170px;
}
/* Buy button */

button.buy-button {
    font-size: 1.5em;
    padding: 0.4em;
    background-color: #3360B9; /* TYPETR Blue */
    color: #F0F0F0;
    margin-top: 0.4em; 
    margin-bottom: 0.4em;
    text-align: center;
    width: 80%;

    border-radius: 6px;       /* small rounded corners */
    border: none;             /* optional: remove default border */

    outline: 1px solid transparent;
    outline-offset: 1px; /* optional: moves the outline away a bit */
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

button.buy-button:hover {
    background-color: #E31C79;
    color: #FFFFFF;

    border-radius: 6px;       /* small rounded corners */
    border: none;             /* optional: remove default border */
    transform: scale(1.03);
}

#weightsStyles h1, #openTypeFeatures h1, div.responsiveHide h1{
    padding-top: 10px;
}

.type-tester__text__container{
    padding-left: 0px;
}
/* Media Queries */

.box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); 
  animation: fadeIn 0.3s ease-out forwards;
  z-index: 10000000000;
}

#menuBox{
    position: fixed;
    background-color: #F0F0F0;      
    color:black;  
    top: 0px;
    right:0px;
    text-decoration: none;
    width: 200px;
    height:100vh;
    margin-right: 10px;
    display: block;
    float: left;
    margin: 0px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 15px;
    animation: slideIn 0.2s ease-out forwards;
    border-left: 1px solid #202020;
    flex-direction: row;
    z-index: 1000000;
}

.contact {
  display: grid;
  grid-template-columns: 1.6em auto;
  column-gap: 0.9em;
}

.contact br {
  display: contents;
}

.label {
  text-align: left;
  display: block;
  font-weight: bold;
  color:#E31C79;
}

.cta-cart {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1000;

  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px; /* rounded rectangle */
  background-color: #3360B9;
  color: #fff;

  cursor: pointer;
  user-select: none;

box-shadow:
  0 0 8px rgba(0, 0, 0, 0.12),
  0 8px 24px rgba(0, 0, 0, 0.12);
  transition:
    background-color 0.1s ease,
    transform 0.15s ease,
    box-shadow 0.1s ease;
  font-size: 32px;

  border: none; /* zorgt dat er geen border is */
  box-shadow: 14px 14px 16px rgba(0, 0, 0, 0.2);

}

/* Hover */
.cta-cart:hover {
  background-color: #E31C79;
  transform: translateY(-5px);
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);

}

 h2 a, .sectionNavList li a{
    display: inline-block;
    transition:
        background-color 0.2s ease,
        transform 0.2s cubic-bezier(.4, 0, .2, 1);
}

.contact a{
    display: inline-block;
    transition:
        background-color 0.2s ease,
        transform 0.3s cubic-bezier(.4, 0, .2, 1);    
}

.sectionNavList li a:hover{
    transform: translateY(-3px);
}

.contact a:hover{
    transform: translateX(7px);
}

h2 a:hover{
    transform: translateX(10px);
}

.specimen div {
  color: gray;
}

.specimen {
  container-type: inline-size;
  container-name: specimen-text;

  white-space: nowrap;
  overflow: hidden;

  line-height: 1.6;
  font-size: 1rem;

  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.specimen .ot {
  transition: color 0.2s ease;
}

.specimen .ot {
  color: #E31C79;    
}

.features .specimen:first-of-type {
  color: gray;
}

.features .specimen:nth-of-type(2) {
  color: black;
  padding-bottom: 10px;
}

@media (min-width: 768px) {
    html.three-items, html.two-items{
      --scroll-offset: 125px;        
    }
    .sectionNavList {
        margin: 0 auto;
        width: 100%;
        max-width: 1200px;
        flex-direction: row;
        justify-content: flex-start; /* eerder: justify-content: center; */
        gap: 1.5em;
    }
    div.column14.topline.ab h2{
        padding-top:0px;
        padding-left:0px;
    }
    div.sticky img{
        border-radius: 5px;
    }
    div.sticky {
        margin-top: 20px;
    }
    .cta-cart {
    display: none;
    }

    .feature-switch-mobile{
        display:inline;
    }
    .feature-switch-desktop{
        display:none;
    }
    .column14.ab {
      padding-bottom: 20px;
    }
    .specimen {
      font-size: calc(var(--type-tester--adjustment, 1) * 48px);
    }
}

@media (max-width: 600px) {
    h1 .proforma-classic,
    .responder-p-bold .responder-p-book,
    .powerlift .powerlift-outline,
    .bitcount-bold .bitcount {
        display: block;
        margin-top: 0.2em; /* optioneel voor wat ruimte */
    }
}

@media (max-width: 768px) {
    html, body {
      overflow-x: hidden;
    }
    html.page-admin {
      --scroll-offset: 195px;
    }
    html.two-items{
      --scroll-offset: 170px;        
    }
    html.three-items{
      --scroll-offset: 215px;        
    }
    .sticky {
        display: flex;
        align-items: center; /* verticaal uitlijnen */
        justify-content: flex-start; /* optioneel: start van de container */
        gap: 0.5em; /* ruimte tussen afbeelding en tekst */
    }

    .sticky h2{
        padding-left: 5px;
    }

    .sticky img {
        width:40%;
        max-width: 150px; /* pas aan naar wens */
        height: auto;
    }

    .sticky > div {
        flex: 1; /* neemt resterende ruimte in */
        margin: 0; /* margin auto weghalen voor flex layout */
        padding: 0px;
    }

    .sticky p.contact {
        margin: 0; /* eventueel */
    }
    .sectionNavList li a:hover{
        transform: translateX(10px);
    }
    div.column14.topline.ab,{
        padding-left:0px;
        padding-right:0px;
        padding-top:0px;
        padding-bottom:0px;
    }

    .sectionNavList {
        margin: 0 auto;
        width: 100%;
        max-width: 1200px;
    }

    .sectionNavList h2{
        padding: 0.6em;
        padding-left: 1em;
        padding-bottom: 0em;
    }
    .image-row {
        grid-template-columns: 1fr;
    }

    .section-grid {
        grid-template-columns: 1fr;
    }

    .interview--grid {
        grid-template-columns: 1fr;
    }

    .column14:has(.buy-button):not(:has(h2, ul, ol)),
    .column14:has(img):not(:has(h2, ul, ol)) {
        display: none;
    }

    .column14:has(img .contact):not(:has(h2, ul, ol)) {
        display: block;
    }

    /* 2. Alleen de buy-button verbergen als er WEL inhoud is */
    .column14:has(h2, ul, ol) .buy-button {
        display: none;
    }

    .row:has(.column34) + .row .column34 {
        padding-top: 0;
    }

    div.column14, div.column34, div.column13, div.column23 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    div.column34 {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    h1{
        margin: 0px;
        margin-top: 10px;
      }

    #weightsStyles h1, #openTypeFeatures h1, div.responsiveHide h1{
        padding-top: 0px;
        padding-bottom: 10px;
    }
     p {
        margin-top: 20px;
        margin-bottom: 20px;
     } 
    .name-title {
        font-size: 10vw;  
    }
    .size64 {
          font-size: 8.5vw;
    }
    .size68 {
          font-size: 9vw;
    }
    .size80 {
          font-size: 13vw;
    }
    .size82 {
          font-size: 13.5vw;
    }
    .smallWeightTester{
        padding:10px;
        padding-bottom:20px;
        padding-top:20px;
    }
    .feature-switch-mobile{
        display:none;
    }
    .feature-switch-desktop{
        display:inline;
    }
    div.type-tester {
        margin-bottom: 5px;
        padding-left: 5px;
    }
    .specimen {
      font-size: calc(var(--type-tester--adjustment, 1) * 40px);
    }
}

/* Extra Small Phones (320–359px) */
@media (max-width: 359px) { 
    :root {
      --nav-scroll-trigger: 500;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName, header .logo {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .column {
        width: 100%;
    }
    .column p, .column h1, .column h2 {
        padding-left: 5px;
        padding-right: 5px;
    }

    div.column14, div.column34, div.column13, div.column23 {
        width: 100%;
        padding: 10px;
    }
    div.responsiveHide, div.familyName, img.responsiveHide {
        display: none;
    }
    div.responsiveShow, div.smallWeightTester {
        display: block;
    }
    .titleImage, .titleImageSmall {
        height: 200px;
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
    .quit{
        display: none;
    }
    .responsiveShow {
        display: none;
    }
    #navbar{
        display: none;
    }
    .popup-content {
      margin-top: 70px;
      margin-left:0px;
      padding: 0px;
      padding-left: 0px;
      width: 100%;
      max-width: 100%;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      position: relative;
      animation: slideDown .3s forwards;
    }
    #menuBox{
        width: 50%;
    }
}
/* Small Phones (360–399px) */
@media (min-width: 360px) and (max-width: 399px) { 
    :root {
      --nav-scroll-trigger: 500;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .column, .type-tester {
        width: 100%;
    }
    .column p, .column h1, .column h2 {
        padding-left: 16px;
        padding-right: 16px;
    }
    div.column14, div.column34, div.column13, div.column23 {
        width: 100%;
        padding: 15px;
    }
    .column14 {
        padding: 15px;        
    }
    div.responsiveHide, div.familyName, img.responsiveHide {
        display: none;
    }
    div.responsiveShow, div.smallWeightTester  {
        display: block;
    }
    .titleImage {
        height: 200px;
    }
    .titleImageSmall {
        height: 150px;
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
    .quit{
        display: none;
    }
    .responsiveShow {
        display: none;
    }
    #navbar{
        display: none;
    }
    .popup-content {
      margin-top: 70px;
      margin-left:0px;
      padding: 0px;
      padding-left: 0px;
      width: 100%;
      max-width: 100%;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      position: relative;
      animation: slideDown .3s forwards;
    }
    #menuBox{
        width: 50%;
    }
}
/* Medium Phones (400–479px) */
@media (min-width: 400px) and (max-width: 479px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color: black /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .column, .type-tester {
        width: 100%;
    }
    .column p, .column h1, .column h2 {
        padding-left: 16px;
        padding-right: 16px;
    }
    div.column14, div.column34, div.column13, div.column23 {
        width: 100%;
        padding: 15px;
    }
    div.responsiveHide, div.familyName, img.responsiveHide {
        display: none;
    }
    div.responsiveShow, div.smallWeightTester  {
        display: block;
    }
    .titleImage {
        height: 200px;
    }
    .titleImageSmall {
        height: 150px;
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
    .quit{
        display: none;
    }
    #navbar{
        display: none;
    }
    .popup-content {
      margin-top: 70px;
      margin-left:0px;
      padding: 0px;
      padding-left: 0px;
      width: 100%;
      max-width: 100%;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      position: relative;
      animation: slideDown .3s forwards;
    }
}
/* Large Phones (480–599px) */
@media (min-width: 480px) and (max-width: 599px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .column, .type-tester {
        width: 100%;
    }
    .column p, .column h1, .column h2 {
        padding-left: 16px;
        padding-right: 16px;
    }
    div.column14, div.column34, div.column13, div.column23 {
        width: 100%;
        padding: 16px;
    }
    div.responsiveHide, div.familyName, img.responsiveHide {
        display: none;
    }
    div.responsiveShow, div.smallWeightTester {
        display: block;
    }
    .titleImage {
        height: 200px;
    }
    .titleImageSmall {
        height: 150px;
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
    .quit{
        display: none;
    }
    #navbar{
        display: none;
    }
    .popup-content {
      margin-top: 70px;
      margin-left:0px;
      padding: 0px;
      padding-left: 0px;
      width: 100%;
      max-width: 100%;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      position: relative;
      animation: slideDown .3s forwards;
    }
}
/* -------------------------------------------------------------- */
/* Small Tablets (600–767px) */

@media (min-width: 600px) and (max-width: 767px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    header .familyName {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .column, .type-tester {
        width: 100%;
    }
    .column p, .column h1, .column h2 {
        padding-left: 16px;
        padding-right: 16px;
    }
    div.column14, div.column34, div.column13, div.column23 {
        width: 100%;
        padding: 16px;z
    }
    div.responsiveHide, div.familyName, img.responsiveHide {
        display: none;
    }
    div.responsiveShow, div.smallWeightTester  {
        display: block;
    }
    .titleImage {
        height: 250px;
    }
    .titleImageSmall {
        height: 200px;
    }
    .responsiveShow {
        display: none;
    }
    footer p {
        margin-left: 2em;
        margin-right: 2em;
    }
    .quit{
        display: none;
    }
    .responsiveShow {
        display: none;
    }
    #navbar{
        display: none;
    }
    .popup-content {
      margin-top: 70px;
      margin: 0 auto;
      margin-top: 70px;
      position: absolute;
      padding: 0px;
      padding-left: 0px;
      width: 400px;
      max-width: 100%;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      position: relative;
      animation: slideDown .3s forwards;
    }
}

@media (min-width: 768px) and (max-width: 890px) { 
    header .hamburger {
        display: inline;
    }
    #navbar{
        display: none;
    }
}

@media (min-width: 890px) and (max-width: 991px) { 
    header .hamburger {
        display: none;
    }
    #menuBox{
        display: none;
    }
}

/* Medium Tablets (768–991px) */
@media (min-width: 768px) and (max-width: 991px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color:  black; /* Testing responsive */
    }    
    header .andMore{
        display: none;
    }
    fontdue-type-testers .type-tester {
    --type-tester--adjustment: 1;
    }
    .titleImage {
        height: 280px;
    }
    .titleImageSmall {
        height: 210px;
    }
    footer p {
        margin-left: 2em;
        margin-right: 2em;
    }
    .responsiveShow {
        display: none;
    }
    .interview h2{
        font-size: 6vw;
    }
    .feature-switch-mobile{
        display:none;
    }
    .feature-switch-desktop{
        display:inline;
    }
    .contact-block {
        display: none;
    }
    .name-title {
        font-size: 5em;  
    }
    .image-row {
        grid-template-columns: 1fr;
    }
    .section-grid {
        grid-template-columns: 1fr;
    }

    .interview--grid {
        grid-template-columns: 1fr;
    }
}
/* Large Tablets / Small Desktop (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    fontdue-type-testers .type-tester {
    --type-tester--adjustment: 1;
    }
    .titleImage {
        height: 350px;
    }
    .titleImageSmall {
        height: 300px;
    }
    footer p {
        margin-left: 2em;
        margin-right: 2em;
    }
    .responsiveShow {
        display: none;
    }
    .interview h2{
        font-size: 4vw;
    }
    header .hamburger {
        display: none;
    }
    #menuBox{
        display: none;
    }
    .feature-switch-mobile{
        display:none;
    }
    .feature-switch-desktop{
        display:inline;
    }
    .contact-block {
        display: none;
    }
    .name-title {
        font-size: 5em;  
    }
}

/* Desktop (1200–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) { 
    :root {
      --nav-scroll-trigger: 550;
    }
    header {
        background-color: black; /* Testing responsive */
    }    
    .row {
        width: 1200px;
        margin:0 auto; 
    }
    footer p {
        margin-left: 1em;
        margin-right: 1em;
    }
    .responsiveShow {
        display: none;
    }
    header .hamburger {
        display: none;
    }
    #menuBox{
        display: none;
    }
    .contact-block {
        display: none;
    }
    .name-title {
        font-size: 5em;  
    }
}
/* Large Desktop (1600px+) */
@media (min-width: 1600px) { 
    header {
        background-color: black; /* Testing responsive */
    }    
    .row {
        width: 1200px;
        margin:0 auto;
    }
    footer p {
        margin-left: 1em;
        margin-right: 1em;
    }
    .responsiveShow {
        display: none;
    }
    header .hamburger {
        display: none;
    }
    #menuBox{
        display: none;
    }
    .contact-block {
        display: none;
    }
    .name-title {
        font-size: 5em;  
    }
}


div.type-tester {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;

}

div.character-viewer{
    padding-top: 30px;    
}