html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

:root {
    font-synthesis: none;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Variable font */
@font-face {
    font-family: "Oldschoolgrotesk Variable";
    src:    url("assets/fonts/OldschoolGroteskVar_W.woff2") format("woff2-variations"),
            url("assets/fonts/OldschoolGroteskVar_W.woff") format("woff-variations"),
            url("assets/fonts/OldschoolGroteskVar.ttf") format("truetype-variations");
    font-weight: 25 900;
    font-stretch: 25% 100%;
    font-style: oblique 0deg 12deg;
}

/* Fallback static font*/
@font-face {
  font-family: "Oldschoolgrotesk";
  src: url("assets/fonts/OldschoolGrotesk_W-Regular.woff2") format("woff2"),
       url("assets/fonts/OldschoolGrotesk_W-Regular.woff") format("woff");
  font-weight: normal;
}


body,
html {
    font-family: "Oldschoolgrotesk Variable", "Oldschoolgrotesk", sans-serif;
    font-weight: 430;
    font-stretch: 80%;
    font-variation-settings: "slnt" 0;
    color: #1e1e1e;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 16px;
    /*perspective: 1000px;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /*overflow: scroll;
    scroll-snap-type: proximity;
    scroll-snap-type: y proximity;*/
    
}

::-moz-selection {
    color: inherit;
    background: none;
    text-shadow: none;
}

 ::selection {
    color: inherit;
    background: none;
    text-shadow: none;
}

u {
    text-decoration:none;
}

h1,
h2,
h3,
h4,
h6,
p {
    margin-bottom: 10px;
}

h1 {
    font-size: 120px;
    line-height: 120px;
}

/*h1.typetester-size {
    line-height: 132px;
}*/


h2 {
    font-size: 70px;
    line-height: 50px;
}

h3 {
    font-size: 30px;
    line-height: 30px;
}

h4 {
    font-size: 300px;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.clear {
    clear: both;
}


/*.intro,
.overview,
.typetester,
.designspace,
.highlights
{
    display: none;
}
*/

.hide {
    display: none;
}

.show {
    display: block;
}

.pointer {
    cursor: pointer;
}


/* ROTATION */


/* TRANSISTION */

.transistion {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}


/* COLUMN */


.col-1 {
    flex-basis: calc(10vw - 20px);
}

.col-2 {
    flex-basis: calc(20vw - 20px);
}

.col-2-5 {
    flex-basis: calc(25vw - 30px);
    margin: 10px;
}

.col-3 {
    flex-basis: calc(30vw - 20px);
}

.col-4 {
    flex-basis: calc(40vw - 20px);
}

.col-5 {
    flex-basis: calc(50vw - 20px);
}

.col-6 {
    flex-basis: calc(60vw - 20px);
}

.col-7 {
    flex-basis: calc(70vw - 20px);
}


.col-10 {
    flex-basis: calc(100vw - 20px);
}

.space {
    flex-basis: calc(100vw - 20px);
    height: 200px;
}


/* WEIGHT */

.air {
    font-weight: 50;
}

.thin {
    font-weight: 100;
}

.xlight {
    font-weight: 190;
}

.light {
    font-weight: 280;
}

.book {
    font-weight: 360;
}

.regular {
    font-weight: 430;
}

.medium {
    font-weight: 560;
}

.bold {
    font-weight: 700;
}

.xbold {
    font-weight: 800;
}

.heavy {
    font-weight: 900;
}


/*WIDTH */

.compressed {
    font-stretch: 25%;
}

.condensed {
    font-stretch: 50%;
}

.compact {
    font-stretch: 80%;
}

.normal {
    font-stretch: 100%;
}

/* ITALIC SLANTED */
.slanted {
    font-variation-settings: "slnt" 12;
}


/*SECTION*/

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

section:nth-of-type(even) {
    background: #1e1e1e;
    color: white;
}

section:nth-of-type(odd) {
    background: white;
}

section {
    min-height: calc(100% - 10px);
    width: calc(100vw - 10px);
    display: flex;
    flex-flow: row wrap;
    padding: 5px;
    scroll-snap-align: start;
}



article {
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1 1 auto;
    margin: 5px;
    position: relative;
}

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

.item {
    position: relative;
    height: 100%;
    width: 100%;
    float: left;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.item.type h2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    text-align: center;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.item.type h6:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
}

.item.letter {
    overflow: hidden;
    /* REPLACE THIS */
    width: 200px;
    display: grid;
    place-items: center;
    background: #dcdcd7;
}

.item.letter h4 {
    position: absolute;
    top:50%;
    color: white;
}


/* INTRO */

.intro .item.type {
    /* REPLACE THIS */
    width: calc(100% - 210px);
    -webkit-transform: translateZ(-10px);
    -moz-transform: translateZ(-10px);
    -ms-transform: translateZ(-10px);
    -o-transform: translateZ(-10px);
    transform: translateZ(-10px);
}

.intro .col-5:nth-child(1) .item.letter,
.intro .col-5:nth-child(2) .item.letter,
.intro .col-5:nth-child(3) .item.type,
.intro .col-5:nth-child(4) .item.type {
    position: absolute;
    right: 0;
}

.intro-parent {
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    
    }

.intro {
    overflow:hidden;
}


.rotate {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    /*perspective: 1000px;*/
}

.intro .item.type h2 {
    -webkit-transform: perspective(1000px) translateZ(120px) scale(0.85);
    -moz-transform: perspective(1000px) translateZ(120px) scale(0.85);
    -ms-transform: perspective(1000px) translateZ(120px) scale(0.85);
    -o-transform: perspective(1000px) translateZ(120px) scale(0.85);
    transform: perspective(1000px) translateZ(120px) scale(0.85);
}

.intro .item.type h2.ro-h {
    -moz-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(45deg);
    -webkit-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(45deg);
    -o-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(45deg);
    -ms-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(45deg);
    transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(45deg);
}

.intro .item.type h2.ro-f {
    -moz-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(-90deg);
    -webkit-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(-90deg);
    -o-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(-90deg);
    -ms-transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(-90deg);
    transform: perspective(1000px) translateZ(120px) scale(0.85) rotate(-90deg);
}


/* INTRO HOVER ANIMATION */

.active .topleft .animation em {
    --delay: calc((var(--char-index) + 1) * 2500ms / 16);
    animation-name: breathe;
    animation-duration: 1.42s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: var(--delay);
}

.topleft .animation {
    opacity: 0;
}

.active .topleft.hover .animation {
    opacity: 1;
}

.active .topleft.hover .static {
    opacity: 0;
}

.active .topleft.hover .animation span {
    display:block;
    width:102%;
}


@keyframes breathe {
    0% {
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
    50% {
        font-weight:200;
        font-stretch: 100%;
        font-variation-settings: "slnt" 12;
    }
    100% {
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
}


/* TOPRIGHT */

.active .topright h2.layer {
    animation-name: jump;
    animation-duration: 1.89s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    visibility: hidden;
    padding:20px;
}

.active .topright.hover h2.layer {
    visibility: visible;
}

@keyframes jump {
    0% {
        -moz-transform: perspective(1000px) translate3D(0,0,120px) scale(0.85);
        -webkit-transform: perspective(1000px) translate3D(0,0,120px) scale(0.85);
        -o-transform: perspective(1000px) translate3D(0,0,120px)scale(0.85);
        -ms-transform: perspective(1000px) translate3D(0,0,120px) scale(0.85);
        transform: perspective(1000px) translate3D(0,0,120px) scale(0.85);
        /*font-variation-settings: "wght" 800, "wdth" 25, "slnt" 0;*/
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
        opacity:1;

    }
    30% {
        opacity:1;


    }
    50%,75% {
        -moz-transform: perspective(1000px) translate3D(50px,-50px, 280px) scale(0.85);
        -webkit-transform: perspective(1000px) translate3D(50px,-50px, 280px)  scale(0.85);
        -o-transform: perspective(1000px) translate3D(50px,-50px, 280px)  scale(0.85);
        -ms-transform: perspective(1000px) translate3D(50px,-50px, 280px)  scale(0.85);
        transform: perspective(1000px) translate3D(50px,-50px, 280px)  scale(0.85);
        /*font-variation-settings: "wght" 100, "wdth" 100, "slnt" 12;*/
        font-weight:100;
        font-stretch: 100%;
        font-variation-settings: "slnt"12;
        opacity:0;

    }
    100% {
        -moz-transform: perspective(1000px) translate3D(0,0, 120px) scale(0.85);
        -webkit-transform: perspective(1000px) translate3D(0,0, 120px) scale(0.85);
        -o-transform: perspective(1000px) translate3D(0,0, 120px) scale(0.85);
        -ms-transform: perspective(1000px) translate3D(0,0, 120px) scale(0.85);
        transform: perspective(1000px) translate3D(0,0, 120px) scale(0.85);
        /*font-variation-settings: "wght" 800, "wdth" 25, "slnt" 0;*/
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
        opacity:0;
    }
}
/*
.active .topright h2.basis {
    animation-name: basisjump;
    animation-duration: 3.79s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    visibility: visible;
}

.active .topright .type:hover h2.basis {
    visibility: visible;
}

@keyframes basisjump {
    0% {

        opacity:1;
    }
    15% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}*/


/* BOTTOM LEFT */

.active .bottomleft h2.animation span span {
    animation-name: squece;
    animation-duration: 947ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;

}

.active .bottomleft h2.animation span span:nth-of-type(2) {
    animation-delay: 50ms;
}

.active .bottomleft h2.animation span span:nth-of-type(3) {
    animation-delay: 100ms;
    display:block;
    width:102%;
}

.bottomleft .animation {
    opacity: 0;
}

.active .bottomleft.hover .animation {
    opacity: 1;
}

.active .bottomleft.hover .static {
    opacity: 0;
}

@keyframes squece {
    0%,5% {
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
        
    }
    15% {
        font-weight:100;
        font-stretch: 100%;
        font-variation-settings: "slnt" 12;
        
    }
    100% {
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
}


/* BOTTOM RIGHT */

.active .bottomright h2.animation {
    animation-name: rotate;
    animation-duration: 1.89s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.bottomright .animation {
    opacity: 0;
}

.active .bottomright.hover .animation {
    opacity: 1;
}

.active .bottomright.hover .static {
    opacity: 0;
}

@keyframes rotate {
    0%,5% {
        -moz-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(0);
        -webkit-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(0);
        -o-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(0);
        -ms-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(0);
        transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(0);
        /*font-variation-settings: "wght" 800, "wdth" 25, "slnt" 0;*/
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
    25%,30% {
        -moz-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(90deg);
        -webkit-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(90deg);
        -o-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(90deg);
        -ms-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(90deg);
        transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(90deg);
        /*font-variation-settings: "wght" 100, "wdth" 25, "slnt" 12;*/
        font-weight:100;
        font-stretch: 25%;
        font-variation-settings: "slnt" 12;
    }
    50%,55% {
        -moz-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(180deg);
        -webkit-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(180deg);
        -o-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(180deg);
        -ms-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(180deg);
        transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(180deg);
        /*font-variation-settings: "wght" 800, "wdth" 25, "slnt" 0;*/
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
    75%,80% {
        -moz-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(270deg);
        -webkit-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(270deg);
        -o-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(270deg);
        -ms-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(270deg);
        transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(270deg);
        /*font-variation-settings: "wght" 800, "wdth" 100, "slnt" 12;*/
        font-weight:800;
        font-stretch: 100%;
        font-variation-settings: "slnt" 12;
    }
    100% {
        -moz-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(360deg);
        -webkit-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(360deg);
        -o-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(360deg);
        -ms-transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(360deg);
        transform: translateZ(120px) scale(0.85) rotate(-90deg) rotateX(360deg);
        /*font-variation-settings: "wght" 800, "wdth" 25, "slnt" 0;*/
        font-weight:800;
        font-stretch: 25%;
        font-variation-settings: "slnt" 0;
    }
}


/* SOUND */

.sound,
.sounddist {
    cursor: url(assets/dot-cursor.png) 25 25, auto;
}

.mousesound {
    display: none;
    position: fixed;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    transform: translate(-50%, -50%);
    background: red;
    top: 0;
    left: 0;
}


/* OVERVIEW */


.overview {
    z-index:99999999;
}

.overview h3 {
    line-height: 30px;
    margin-bottom: 0px;
}

.overview article a {
    color:white;
}

.overview article a:hover {
    text-decoration:none;
}

.sliderholder {
    height: 37px;
    margin-top: -2px;
    position: relative;
    display: block;
    overflow: hidden;
}

.sliderholder h3 {
    font-variation-settings: "slnt" 12;
}

.sliderholder h3 em {
    font-variation-settings: "slnt" 0;
    font-style: normal;
    width:calc(30vw - 10px);
    display:inline-block;
}

.sliderholder:first-child {
    margin-top: 0;
}

.sliderholder .slider {
    position: absolute;
    top: -80px;
    animation: slide 12s ease-in-out infinite;
}

.sliderholder .slider h3 {
    margin-bottom: 10px;
}

@keyframes slide {
    0% {
        top: 0;
    }
    15%,
    25% {
        top: -40px;
    }
    40%,
    50% {
        top: -80px;
    }
    65%,
    75% {
        top: -120px;
    }
    90%,
    100% {
        top: -160px;
    }
}


/* OPACITY ANIMATIONEN */

.slider h3.compressed {
    animation: opCom 12s ease-in-out infinite;
}

@keyframes opCom {
    0% {
        opacity: 1;
    }
    10%,
    80% {
        opacity: 0;
    }
    90%,
    100% {
        opacity: 1;
    }
}

.slider h3.condensed {
    animation: opCon 12s ease-in-out infinite;
}

@keyframes opCon {
    0%,
    5% {
        opacity: 0;
    }
    15%,
    25% {
        opacity: 1;
    }
    35%,
    100% {
        opacity: 0;
    }
}

.slider h3.compact {
    animation: opComp 12s ease-in-out infinite;
}

@keyframes opComp {
    0%,
    30% {
        opacity: 0;
    }
    40%,
    50% {
        opacity: 1;
    }
    60%,
    100% {
        opacity: 0;
    }
}

.slider h3.normal {
    animation: opNorm 12s ease-in-out infinite;
}

@keyframes opNorm {
    0%,
    55% {
        opacity: 0;
    }
    65%,
    75% {
        opacity: 1;
    }
    85%,
    100% {
        opacity: 0;
    }
}


/* OPACITY ANIMATIONEN END */


/* TYPETESTER */

.typetester {
    overflow-x: hidden;
}

.typetester .col-10 {
    overflow: hidden;
}

.typetester h1 {
    white-space: nowrap;
    z-index: 99;
    padding-top: 10px;
    width: calc(100vw - 10px);
    overflow: hidden;
}

.typetester h1.twolines {
    overflow: hidden;
}

.typetester h1.twolines span,
.typetester h1.paragraph span {
    display: none;
}

.typetestersingle {
    width: 100vw;
    display: flex;
    flex-flow: row wrap;
}

.typetestersingle .col-1 {
    margin-right: 20px;
}

.typetester-range,
.typetesteroutput {
    display: none;
    z-index: 999999;
    position: relative;
}

.typetester-range {
    display:inline;
}

/*.typetestersingle:hover .typetester-range,
.typetestersingle:hover #typetesteroutput {
    display: block;
}
*/

[contenteditable="true"]:active,
[contenteditable="true"]:focus {
    border: none;
    outline: none;
}

.addItalic span {
    display:none;
}

.addItalic span.active {
    display:inline;
}

/* TYPETESTER RANGE */

input[type=range].typetester-range {
    width: 100%;
    margin: 5px 0;
    background-color: transparent;
    -webkit-appearance: none;
}

input[type=range].typetester-range:focus {
    outline: none;
}

input[type=range].typetester-range::-webkit-slider-runnable-track {
    background: #1e1e1e;
    border: 0;
    border-radius: 25px;
    width: 100%;
    height: 5px;
    cursor: pointer;
}

input[type=range].typetester-range::-webkit-slider-thumb {
    margin-top: -5px;
    width: 15px;
    height: 15px;
    background: #1e1e1e;
    border: 0px solid rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range].typetester-range:focus::-webkit-slider-runnable-track {
    background: #232323;
}

input[type=range].typetester-range::-moz-range-track {
    background: #1e1e1e;
    border: 0;
    border-radius: 25px;
    width: 100%;
    height: 5px;
    cursor: pointer;
}

input[type=range].typetester-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #1e1e1e;
    border: 0px solid rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
}

input[type=range].typetester-range::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 5px 0;
    color: transparent;
    width: 100%;
    height: 5px;
    cursor: pointer;
}

input[type=range].typetester-range::-ms-fill-lower {
    background: #191919;
    border: 0;
    border-radius: 50px;
}

input[type=range].typetester-range::-ms-fill-upper {
    background: #1e1e1e;
    border: 0;
    border-radius: 50px;
}

input[type=range].typetester-range::-ms-thumb {
    width: 15px;
    height: 15px;
    background: #1e1e1e;
    border: 0px solid rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}

input[type=range].typetester-range:focus::-ms-fill-lower {
    background: #1e1e1e;
}

input[type=range].typetester-range:focus::-ms-fill-upper {
    background: #232323;
}


/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/

@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range].typetester-range {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

/* ITALIC BUTTON */

.italicbutton {
    position:fixed;
    top:10px;
    left: 50%;
    transform: translateX(-50%);
    height:30px;
    width:calc(10vw - 20px);
    color:white;
    background:red;
    cursor:pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    z-index: 999999999;
    transition: all 0.5s ease;
    background-image: linear-gradient(to right, #e60000 50%, transparent 50%);
    background-size: 0% 100%;
    background-position: left bottom;
    background-repeat: no-repeat;

}

.italicbutton:hover {
    background-size: 202% 100%;
}

.italicbutton.hide {
    display:none;
}


  
  .italicbutton:active {
    animation-name: buzz;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

@keyframes buzz {
50% {
    -webkit-transform: translateX(-50%) scale(0.9);
    transform:translateX(-50%)  scale(0.9);
}
100% {
    -webkit-transform:translateX(-50%)  scale(1);
    transform:translateX(-50%)  scale(1);
}
}


/* DESIGNSPACE */

.designspace .row {
    min-height: 120px;
    justify-content: center;
    text-align: center;
}

.designspace .row.line {
    min-height: 20px;
    height: 20px;
    width:calc(100vw - 30px);
}

.designspace .output {
    overflow: hidden;
    height: 120px;
}

.designspace .output h1 {
    white-space: nowrap;
}

.ds {
    /*padding: 5px;*/
    margin-top: 15px;
    flex-basis:calc(100vw - 10px);
}

.ds h1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1 1 auto;
    position: relative;
    line-height: inherit;
    opacity: 0;
    width: calc(100% / 10);
}

.ds h1.hover {
    opacity: 1;
    /*cursor: pointer;*/
}

.designspace .col-1 {
    text-align: center;
}




/* HIGHLIGHTS */

.highlightsingle {
    width: calc(100vw - 10px);
    display: flex;
    flex-flow: row wrap;
}

.highlights .item {
    min-height: 400px;
}

.highlights .item.type p {
    margin-top: auto;
    margin-bottom: 0;
}

.junctions.col-2 .item.letter {
    position: absolute;
    right: 0;
}

.junctions .item.letter h4 {
    clip-path: circle(100%);
}

.junctions .item.letter:hover,
.junctions .item.letter.hover {
    /*width: 95px;*/
    background: #1e1e1e
}

.junctions .item.letter:hover h4,
.junctions .item.letter.hover h4 {
    clip-path: circle(40% at 64% 350%)
}

.col-2.junctions .item.letter:hover h4,
.col-2.junctions .item.letter.hover h4 {
    clip-path: circle(40% at 30% -150%);
}

.alternates {
    overflow: hidden;
    position:relative;
}

.garage {
    position:Absolute;
    top:0;
    left:0;
    width:200vw;
    height:100%;
}

.alternates h4 {
    color: White;
    background: #dcdcd7;
    float: left;
    margin-right: 10px;
    padding-top:7px;
    padding-bottom:0px;
    padding-right:8px;
    padding-left:8px;
    width:auto;
    height:100%;
    display: grid;
    place-items: center;
    overflow:hidden;
    font-size: 260px;
    
}

.alternates h4:hover,
.alternates h4.hover {
    font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05";
    cursor:pointer;
}


.alternates h4.alta:hover {
    padding-right:25px;
}

.alternates h4.altr:hover {
    padding-right:35px;
}


.alternates h4.alta {
width:150px;
}

.alternates h4.altr {
width:100px;
}

.alternates h4.altj {
padding-left: 25px;
}

/* PROPORTIONS*/

.proportions h1 {
    color: White;
    background: #1e1e1e;
    float: left;
    margin-right: 10px;
    width:auto;
    height:calc(100% - 20px);
}

.proportions h1 span {
    background:#dcdcd7;
    width:auto;
    height:100%;
    padding:0;
    display:block;
    display: grid;
    place-items: center;
    text-align: center;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.proportions {
width:100%;
overflow-x:hidden;
}

.proportions .propnormal,
.proportions .propcompressed {
    width:200vw;
    height:50%;
}

.propnormal:hover h1,
.propcompressed:hover h1,
.propnormal.hover h1,
.propcompressed.hover h1  {
    margin-right:0;
}


/*.darkmode:hover .item.letter {
    background: #1e1e1e;
}


.darkmode:hover .item.letter h4 {
    font-weight: 360;
}*/

/* ITALIC */

.featureslanted {
    overflow:hidden;
}

.featureslanted .alternates {
    overflow:visible;
}


.featureslanted h4 {
    position:relative;
    font-feature-settings: inherit;
    font-variation-settings: "slnt" 0;
    background:none;
    overflow:visible;
    padding:0 8px;
    z-index:1;
}

.featureslanted h4:hover,
.featureslanted h4.hover  {
    font-feature-settings: inherit;
    font-variation-settings: "slnt" 12;
    z-index:10;
}

.featureslanted h4::before {
    content: '';
    display: inline-block;
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:-1;
    transform: skew(0, 0);
    background:#dcdcd7;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.featureslanted h4:hover::before,
.featureslanted h4.hover::before {
    background:#1e1e1e;
    transform: skew(-12deg, 0);
}


/* CHARACTER SET */

.characterset h3 {
    width: calc(100vw - 20px);
    text-align: justify;
    line-height: 50px;
    word-wrap: break-word;
}


/*#character {
    cursor: pointer;
}*/

.characterset i {
    width: calc(100% / 40);
    display: inline-block;
    font-weight: 50;
    font-stretch: 25%;
    text-align: center;
}


/* AIRWEIGHT */

.airweight {
    overflow: hidden;
}

.airweight .col-10 {
    padding-top: 80px;
    margin-top: auto;
}

.airweight h5 {
    font-size: 400px;
    line-height: 250px;
}

.airweight h5:nth-child(1) {
    margin-left: calc(10vw - 20px);
}

.airweight h5:nth-child(2) {
    margin-left: -100px;
}

.airweight h5:nth-child(3) {
    margin-left: calc(10vw - 20px);
}

[data-aos^=fade][data-aos^=fade] {
    transition-property: all !important;
}

.aos-init {
    font-variation-settings: "slnt" 12;
}

.aos-animate {
    font-variation-settings: "slnt" 0;

}


/* FOOTER */

.footer .item.type p {
    margin-top: auto;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer .split:hover {
    cursor: pointer;
}

.split i {
    display: inline-block;
    animation-name: footer;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
}


@keyframes footer {
    0% {
        font-variation-settings: "slnt" 0;
        
    }
    50% {
        font-variation-settings: "slnt" 12;
    }
    100% {
        font-variation-settings: "slnt" 0;
    }
}


.footer a.logo {
    width: 9vw;
    display: block;
    margin: 0 auto;
}

.footer a.logo img {
    width: 100%;
    height: auto;
}



body.hidebody {
    overflow:hidden;
}


.overlay {
    position:Fixed;
    z-index:99999999999999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#1e1e1e;
    color:white;
    text-align:center;
    height:200vh;

}

.centeroverlay-containter.move {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.centeroverlay-containter {
    display:table;
    width:100vw;
    height:105vh;
}

.centeroverlay {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.overlay img#dot {
    width:11px; 
    height:Auto;
    object-fit: cover;
    margin-left:2px;
    cursor: url(assets/dot-cursor.png) 25 25, auto;
}

.overlay h2 em {
    --delay: calc((var(--char-index) + 1) * 250ms);
    animation-name: breathe;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: var(--delay);
}


/* RESPONSIVE */

@media screen and (max-width:950px) {
    .highlightsingle .col-2.junctions {
        display:none;
    }

    /*.footer .download .split i:nth-child(9),
    .footer .download .split i:nth-child(10),
    .footer .download .split i:nth-child(11),
    .footer .download .split i:nth-child(12) {
        display:none;
    }*/
    .mhide {
        display:none;
    }
}


@media screen and (max-width:900px) {
    .intro .col-5 {
        flex-basis: calc(100vw - 20px);
    }

    .intro .item.type {
        width:calc(100% - 210px) !important;
    }

    .intro .item.type h2,
    .rotate,
    .intro .item.type h2.ro-h {
        transform-style: flat;
        -webkit-transform: inherit !important;;
        -moz-transform: inherit !important;;
        -ms-transform: inherit !important;;
        -o-transform: inherit !important;;
        transform: inherit !important;;
    }

    .item.letter {
        width: 200px !important;
    }

    .intro .item.letter .normal {
        font-stretch: 100%;
    }
    .intro .item.letter .heavy {
        font-weight: 900 !important;
    }
    .highlightsingle article {
        flex-basis:calc(100vw - 20px);
    }

    .alternates {
        height:350px;
    }

    .hjunc article:nth-child(1) {
        order:2;
        flex-basis:calc(50vw - 20px);
    }

    .hjunc article:nth-child(2) {
        order:1;
        flex-basis:calc(100vw - 20px);
    }

    .hjunc article:nth-child(3),
    .highlightsingle .col-2.junctions {
        display:block;
        order:3;
        flex-basis:calc(50vw - 20px);
    }

    .hjunc .item.letter {
        width: 100% !important;
    }

    .hprop article:nth-child(1) {
        order:2;
    }

    .hprop article:nth-child(2) {
        order:1;
    }

    .proportions  {
        min-height:400px;
    }

    .overview .col-3,
    .overview .col-2,
    .characterset .col-3,
    .characterset .col-2 {
        flex-basis:calc(50vw - 20px);
    }

    .overview article:nth-child(5) {
        flex-basis:calc(50vw - 20px);
    }

    .overview article:nth-child(6) {
        flex-basis:calc(50vw - 20px);
    }

    .overview article:nth-child(7) {
        flex-basis:calc(100vw - 20px);
    }

    .designspace u {
    display:block;
    }

    .designspace .row.line {
        height: 50px;
    }

    .characterset i {
        width: calc(100% / 20);
    }

    .airweight .col-4 {
        flex-basis:calc(100vw - 20px);
    }

    .airweight h5 {
        font-size: 250px;
        line-height: 150px;
    }

    .footer .col-3 {
        flex-basis:calc(50vw - 20px);
    }

    .italicbutton {
        width:50Vw;
    }

    .sliderholder h3 em {
        width:calc(50vw - 20px);
        margin-right: 10px;
    }

    .overview .col-1.compact {
        flex-basis: calc(15vw - 20px);
    }

    .overview .col-2.compact {
        flex-basis: calc(85vw - 20px);
    }
}

@media screen and (min-width:1450px) { 
    body, html{
        font-size: 18px;
        line-height: 20px;
    }

    h2 {
        font-size:100px;
        line-height:75px;
    }

    h3 {
        font-size:50px;
        line-height:50px;
    }

    .overview h3 {
        line-height:55px;
    }

    .sliderholder {
        height:52px;
    }

    @keyframes slide {
        0% {
            top: 0;
        }
        15%,
        25% {
            top: -65px;
        }
        40%,
        50% {
            top: -130px;
        }
        65%,
        75% {
            top: -195px;
        }
        90%,
        100% {
            top: -260px;
        }
    }

    .designspace .ds.col-10 {
        height:72vh;
    }

    .designspace .ds .col-10.row {
        height:18vh;
    }

    .ds h1 {
        height:9vh;
        /*padding-top:9vh;*/
        font-size:160px;
        line-height:140px;
    }

    .designspace .output {
        padding-top:15px;
        margin-top:0;
    }

    .airweight h5 {
        font-size: 550px;
        line-height: 350px;
    }

    .airweight h5:nth-child(1) {
        text-align: right;
        margin-left:0;
        margin-right: -5vw;
    }
    
    .airweight h5:nth-child(2) {
        margin-left: -5vw;
    }
    
    .airweight h5:nth-child(3) {
        text-align: right;
        margin-left:0;
        margin-right: -5vw;
    }

    .characterset h3 {
        line-height: 65px;
    }

    .junctions .item.letter:hover h4 {
        clip-path: circle(40% at 64% 250%)
    }

    .airweight .col-10 {
        padding-top:0;
        margin-top: 110px;
    }

    .highlights .item {
        min-height: 550px;
    }
}

@media screen and (max-width:700px) {
    .sliderholder h3 em {
        width:auto;
        margin-right:0;
    }
    .sliderholder h3 span {
        display:none;
    }
}

@media screen and (max-width:550px) {
    .col-2-5,
    .footer .col-3,
    .col-4,
    .col-5 {
        flex-basis:100vw;
        }

    .overview .col-1,
    .overview article:nth-child(5) {
        flex-basis:25vw;
    }

    .overview .col-2,
    .overview article:nth-child(6) {
        flex-basis:65vw !important;
    }

    .typetestersingle article:nth-child(4),
    .typetestersingle article:nth-child(5) {
        display:none;
    }

    .typetester h1 {
        font-size: 60px !important;
        line-height: 60px !important;
    }

    .ds h1 {
        opacity: 1;
        font-size: 35px;
        line-height: 20px;
    }

    .designspace .line {
        display:none;
    }

    .designspace .row {
        min-height: 90px;
    }

    .item.type h2 {
        position: relative;
        height: 100%;
    }

    .highlightsingle h4 {
        font-size:250px;
    }

    .proportions h1 span {
        height: calc(100% - 30px);
        padding-top: 30px;
    }

    .proportions .propnormal, 
    .proportions .propcompressed {
        width: 400vw;
    }

    .characterset .space {
        height: auto;
    }

    .characterset h3 {
        font-size:25px;
        line-height:25px;
    }

    .characterset i {
        width: calc(100% / 15);
    }

    .airweight article:nth-child(2) {
        display:none;
    }

    .airweight .col-10 {
        padding-top: initial;
        margin-top: initial;
    }

    .airweight h5 {
        font-size: 150px;
        line-height: 100px;
    }

    .footer h2 {
        font-size: 55px;
        line-height: 45px;
    }

    .footer a.logo {
        width: 40vw;
    }

    .intro .col-5 .item.letter, 
    .intro .col-5 .item.type {
        position: relative !important;
        width: 100% !important;
        height: 50%;
    }

    .intro .item {
        height:Auto;
    }

    .intro .bottomleft .item.type,
    .intro .bottomright .item.type {
        margin-top:10px;
    }


    .intro .animation,
    .intro h2.layer {
        opacity: 1;
    }

    .intro .static {
        opacity: 0;
        display:none !important;
    }

    .intro h2.layer,
    .intro .basis  {
        visibility: visible !important;
        position:absolute !important ;
        height:auto !important;
    }

}