:root {
	--font-size-large: 200px;
	
	--font-size-medium: 24px;
	--font-size-1: 19px;
	--font-size-2: 16px;
	--font-size-3: 13px;
	--font-size-5: 104px;
	--line-height-1: 1.15;
	--line-height-2: 1.25;
	--line-height-3: 1.33;
	--line-height-4: 1.5;
	--black: #191919;
	--grey: #979797;
	--light-grey: #c6c6c6;
	--off-white: #f5f5f5;
	--white: #ffffff;
}
* {
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::-moz-selection { /* Code for Firefox */
  color: var(--white);
  background: var(--black);
}

::selection {
  color: var(--white);
	background: var(--black);
}
/* Global */
#header {
	position: relative;
	top:0;
	left: 0;
	right:0;
	width: 100%;
	background: var(--white);
	z-index: 100;
}
img {
	width: 100%;
	height: auto;
}
.menu-icon {
	width: 40px;
	height: 40px;
}
fontdue-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--light-grey);
	border-radius: 50px;
}
.cart-button__label {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
	color: var(--black);
}
/* Type testers */
.type-tester {
	margin: 60px 0 90px;	
}
.type-tester__toolbar {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
	margin: 0 0 30px;
	padding-top: 20px;
	color: var(--black);
	
}
.type-tester__toolbar__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: none;
}
.type-tester__slider {
	display: flex;
	justify-content: flex-end;
	margin-right:0;
}
.type-tester__name__family,
.type-tester-select label.select:first-of-type {
	display: none;
}
.select__text .icon {
	bottom: 0;
}
.text-align-left * {
	text-align: left!important; 
}
/* Character map */
.character-viewer__character-map {
	margin-bottom: 60px;
}
.character-viewer__character-map, 
.character-viewer__features-map {
	grid-template-columns: repeat(12, 1fr);
}
.character-viewer__monitor,
.character-viewer__feature-monitor {
	grid-column-start: span 6;
}
.character-viewer_blocks {
	grid-column-start: span 6;
}
.character-viewer__block__characters>div {
	padding: 18px 0;
	border: 1px solid #c6c6c6;
}
.character-viewer__monitor__title,
.character-viewer__feature-monitor__title,
.character-viewer__block__name {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
	color: var(--black);
}
.character-viewer__block {
	margin-bottom: 60px;
}
.character-viewer__monitor__line__label,
.character-viewer__monitor__line__value {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-3);
	line-height: var(--line-height-1);
	margin-top: 5px;
	color: var(--black);
	
}
.character-viewer__monitor__details,
.character-viewer__feature-monitor__label {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-2);
	line-height: var(--line-height-4);
	margin-top: 60px;
	color: var(--black);
}
.character-viewer__block__characters {
	font-size: var(--font-size-1);
}
.character-viewer__block[data-name="Basic Latin"] .character-viewer__block__characters div:nth-of-type(1),
.character-viewer__block[data-name="Basic Latin"] .character-viewer__block__characters div:nth-of-type(2),
.character-viewer__block[data-name="Basic Latin"] .character-viewer__block__characters div:nth-of-type(3),
.character-viewer__block[data-name="Private Use Area"] {
	display: none;
}
/*Sign up*/
.newsletter-signup {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-2);
	line-height: var(--line-height-4);
	margin: 13px 0 0;
	color: var(--black);
	width: calc(100%);
	max-width: 100%;
}
.newsletter-signup__section {
	margin-bottom: 20px;
}
.newsletter-signup__checkbox-field {
	margin-top: 0;
}
.newsletter-signup .text-field__label-wrapper {
	display: none;
}
input:checked+.checkbox__icon {
	visibility: visible;
	background: #191919;
}
.checkbox__icon {
	color: #191919;
}
.box {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	transition: border 200ms ease-in-out;
}
.box:hover {
	border: 1px solid #171717;
	transition: border 200ms ease-in-out;
}
.box:before {
	display: table; 
	padding-top: 100%; 
	content: '';
}
.box div {
	width: 100%;
	position: absolute;
	top: 10px;
}
.box h3,
.box p {
	font-size: var(--font-size-2);
	color: var(--black);
}
.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.justify-content-center {
	justify-content: center;
}
.justify-content-end {
	justify-content: end;
}
.justify-content-space-between {
	justify-content: space-between;
}
.align-content-flex-end {
	align-content: flex-end;
}
.align-items-center {
	align-items: center;
}
.column-gap-10 {
	column-gap: 10px;
}
.gap-10-10 {
	gap: 10px 10px;
}
.ii-increments-sans-black {
	font-family: "II Increments Sans Black";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-bold {
	font-family: "II Increments Sans Bold";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-medium {
	font-family: "II Increments Sans Medium";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-regular {
	font-family: "II Increments Sans Regular";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-light {
	font-family: "II Increments Sans Light";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-black-oblique {
	font-family: "II Increments Sans Black Oblique";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-bold-oblique {
	font-family: "II Increments Sans Bold Oblique";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-medium-oblique {
	font-family: "II Increments Sans Medium Oblique";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-regular-oblique {
	font-family: "II Increments Sans Oblique";
	font-style: normal;
	font-weight: 400;
}
.ii-increments-sans-light-oblique {
	font-family: "II Increments Sans Light Oblique";
	font-style: normal;
	font-weight: 400;
}
.ii-vorkurs-bold {
	font-family: "II Vorkurs Bold";
	font-style: normal;
	font-weight: 400;
}
.ii-vorkurs-medium {
	font-family: "II Vorkurs Medium";
	font-style: normal;
	font-weight: 400;
}
.ii-vorkurs-light {
	font-family: "II Vorkurs Light";
	font-style: normal;
	font-weight: 400;
}
.ii-balfron {
	font-family: "II Balfron Regular";
	font-style: normal;
	font-weight: 400;
}
.font-size-full {
	font-size: 16.127vw;
}
.font-size-large {
	font-size: var(--font-size-large);
	letter-spacing: -0.33rem;
}
.font-size-medium {
	font-size: var(--font-size-medium);
	line-height: var(--line-height-2);
}
.font-size-base {
	font-size: var(--font-size-1);
	line-height: 1.15;
}
.font-size-2 {
	font-size: var(--font-size-2);
}
.font-size-5 {
	font-size: var(--font-size-5);
}
.font-size-aa {
	font-size: 152px;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: -11px;
}
.line-height-1 {
	line-height: var(--line-height-1);
}
.line-height-2 {
	line-height: var(--line-height-2);
}
.line-height-3 {
	line-height: var(--line-height-3);
}
.ii-increments-sans-medium.font-size-aa {
	font-size: 152px;
	letter-spacing: -0.25rem;
}
.ii-vorkurs-bold.font-size-aa {
	font-size: 153px;
	letter-spacing: -0.66rem;
	bottom: -13px;
}
.ii-balfron.font-size-aa {
	font-size: 162px;
	bottom: 5px;
}
.text-align-center {
	text-align: center;
}
.text-align-right {
	text-align: right;
}
.color-black {
	color: var(--black);
}
.color-grey {
	color: var(--grey);
}
.background-off-white {
	background: var(--off-white);
}
ul {
	margin-top: 10px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	list-style: none;
}
a {
	color: var(--black);
	text-decoration: none;
}
a:hover {
	color: var(--grey);
	cursor: pointer;
}

.text-decoration-none {
	text-decoration: none;
}
.btn,
.submit-button {
	text-decoration: none;
	min-height: 40px;
	color: var(--white);
	background: var(--black);
	border: 1px solid var(--black);
	border-radius: 50px;
	padding: 0 30px 0;
}
.btn.secondary {
	color: var(--black);
	background: var(--white);
	border: 1px solid var(--light-grey);
	transition: border 200ms ease-in-out;
}
.btn:hover {
	color: var(--white);
	transition: border 200ms ease-in-out;
}
.btn.secondary:hover {
	color: var(--black);
	border: 1px solid var(--black);
	transition: border 200ms ease-in-out;	
}
input {
	border: 1px solid var(--light-grey);
}
.border-radius-25 {
	border-radius: 25px;
}
.border-light-grey {
	border: 1px solid var(--light-grey);
}
.border-top-black {
	border-top: 1px solid var(--black);
}
.border-top-grey {
	border-top: 1px solid var(--light-grey)
}
.margin-top-120 {
	margin-top: 120px;
}
.margin-top-60 {
	margin-top: 60px;
}
.margin-top-30 {
	margin-top: 30px;
}
.margin-top-22 {
	margin-top: 22px;
}
.margin-top-20 {
	margin-top: 20px;
}
.margin-top-15 {
	margin-top: 15px;
}
.margin-top-10 {
	margin-top: 10px;
}
.margin-bottom-120 {
	margin-bottom: 120px;
}
.padding-30 {
	padding: 30px;
}
.padding-20 {
	padding: 20px;
}
.padding-10 {
	padding: 10px;
}
.padding-top-30 {
	padding-top: 30px;	
}
.padding-top-20 {
	padding-top: 20px;	
}
.padding-top-15 {
	padding-top: 15px;	
}
.padding-top-10 {
	padding-top: 10px;	
}
.padding-bottom-60 {
	padding-bottom: 60px;
}
.padding-bottom-30 {
	padding-bottom: 30px;
}
.width-100 {
	width: 100%;
}
.height-100 {
	height: 100%;
}
.slider img {
	width: 100%;
	height: auto;
}