/* Auto scroll snap */

@view-transition {
  navigation: auto;
}

.row, .column {
  scroll-snap-align: start; 
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 61px;
  scroll-snap-type: y proximity;
}

/* TYPETR base colors */

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

/* Reset */

h1, h2, h3, h4, h5, h6 {
    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 {
    font-family: "Upgrade Medium";    
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    color: #202020;
}
h2 a:hover {
    color: #808080;
}

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

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;
}
li a:hover {
    color: #808080;
}

.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 */

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

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: 899; /* Position z-layer under Fontdue cart boxes */ 
  animation: slideDown 0.4s ease-out forwards;

}

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

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

.top-under-menu {
    padding-top: 5em;
}
.name-title {
    font-size: 5em;  
    padding-top: 0.25em; 
    text-align: center; 
}
.name-title a {
    text-decoration: none;
    color: black;
    letter-spacing: 0;
}
.name-title a:hover {
    color: #808080;
}

/* 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;
}

/* 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;
}
.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; 
}
.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;
    /* padding-top: 0.12em; */
    transform: translateY(calc(0.105em)); /* shift so baseline hits 50px */
}
header .familyName .andMore {
    /* Responsive to hide the “and more...” */
}
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: 17px;
    animation: slideLeft 0.2s ease-out forwards;
}
header .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
header .navbar li {
    margin-right: 20px;
}
header .navbar a {
    color: white;
    font-size: 1.2em;
    text-decoration: none;
}
header .navbar a:hover {
    color: #E0E0E0;
    text-decoration: none;
}
header .hamburger {
    display: none;
    position: absolute;
    top:0px;
    right:0px;
    font-size: 30px;
    cursor: pointer;
    float: right;
    padding: 20px;
    padding-right: 40px;
}

/* 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;
}

/* Image cells */

.titleImage {
    margin-top: 20px; 
    padding-top: 30px;
    width: 100%; 
    height: 400px; 
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
}
.titleImageSmall {
    margin-top: 20px; 
    padding-top: 30px;
    width: 100%; 
    height: 350px; /* Fitting Bitcount animations */
    background-size: contain;
    background-position: 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); 
  z-index: 1000;
}

.popup-content {
  background-color: #282828;
  margin-top: 70px;
  margin-left:250px;
  padding: 20px;
  width: 300px;
  max-width: 300px;
  border-radius: 5px;
  position: relative;
  animation: slideDown 0.2s ease-out forwards;
}

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

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

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

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

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


.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;
}
.column p {
    margin: 0 40px 0 0;
}
.column14 {
    /*flex: 1;*/
    width: 25%;
    padding-right: 16px;
    box-sizing: border-box;
    background-color: #F0F0F0;
}
.column34 {
    /*flex: 1;*/
    width: 75%;
    padding-right: 16px;
    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;
}

div.responsiveShow {
    display: none;
}

/* Footer */
footer {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 1em;
    background-color: white;
    color: #333;
    width: 100%;
}
footer p {
    font-size: 1em;
    margin: 0;
}

/* Type testers */

div.type-tester {
    padding: 1em;
    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%;
}

:root {
  --character_viewer_sticky_top: 100px;
}

/* Cart button */

fontdue-cart-button {
    font-family: "Upgrade Medium";
    font-size: 1.2em;
}
/* 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: outline-color 0.2s ease;
}

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

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

/* Media Queries */

/* Extra Small Phones (320–359px) */
@media (max-width: 359px) { 
    header {
        background-color: brown; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName, header .logo {
        display: none;
    }
    /*header .hamburger,*/ 
    header .smallLogo {
        display: block;
    }
    button.buy-button {
        display: block;
        margin: 1em auto 0;
    }
    .row {
        flex-direction: column;
    }
    .column {
        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;
    }
    .name-title {
        font-size: 2em;  
    }
    .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;
    }
}
/* Small Phones (360–399px) */
@media (min-width: 360px) and (max-width: 399px) { 
    header {
        background-color: lightgray; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    /*
    header .hamburger {
        display: block;
    }
    */
    button.buy-button {
        display: block;
        margin: 1em auto 0;
    }
    .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;
    }
    .name-title {
        font-size: 2.5em;  
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
}
/* Medium Phones (400–479px) */
@media (min-width: 400px) and (max-width: 479px) { 
    header {
        background-color: orange; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    /*
    header .hamburger {
        display: block;
    }
    */
    button.buy-button {
        display: block;
        margin: 1em auto 0;
    }
    .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;
    }
    .name-title {
        font-size: 3em;  
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
}
/* Large Phones (480–599px) */
@media (min-width: 480px) and (max-width: 599px) { 
    header {
        background-color: pink; /* Testing responsive */
    }    
    /*header .navbar, */
    header .familyName {
        display: none;
    }
    /*
    header .hamburger {
        display: block;
    }
    */
    button.buy-button {
        display: block;
        margin: 1em auto 0;
    }
    .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;
    }
    .name-title {
        font-size: 3.5em;  
    }
    footer {
        text-align: center;
        background-color: white;
        color: #333;
    }
    footer p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;
    }
}
/* -------------------------------------------------------------- */
/* Small Tablets (600–767px) */

@media (min-width: 600px) and (max-width: 767px) { 
    header {
        background-color: gray; /* Testing responsive */
    }    
    header .familyName {
        display: none;
    }
    button.buy-button {
        display: block;
        margin: 1em auto 0;
    }
    .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;
    }
    .name-title {
    font-size: 4em;  
    }
    .titleImage {
        height: 250px;
    }
    .titleImageSmall {
        height: 200px;
    }
    footer p {
        margin-left: 2em;
        margin-right: 2em;
    }
}
/* Medium Tablets (768–991px) */
@media (min-width: 768px) and (max-width: 991px) { 
    header {
        background-color: purple; /* Testing responsive */
    }    
    header .andMore{
        display: none;
    }
    fontdue-type-testers .type-tester {
    --type-tester--adjustment: 1;
    }
    .name-title {
    font-size: 4em;  
    }
    .titleImage {
        height: 280px;
    }
    .titleImageSmall {
        height: 210px;
    }
    footer p {
        margin-left: 2em;
        margin-right: 2em;
    }
}
/* Large Tablets / Small Desktop (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) { 
    header {
        background-color: lightgreen; /* 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;
    }
}
/* Desktop (1200–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) { 
    header {
        background-color: pink; /* Testing responsive */
    }    
    .row {
        width: 1200px;
        margin:0 auto;
    }
    footer p {
        margin-left: 1em;
        margin-right: 1em;
    }
}
/* Large Desktop (1600px+) */
@media (min-width: 1600px) { 
    header {
        background-color: yellow; /* Testing responsive */
    }    
    .row {
        width: 1200px;
        margin:0 auto;
    }
    footer p {
        margin-left: 1em;
        margin-right: 1em;
    }
}

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