/* Reset
-------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after{margin:0;padding:0;border:0;-webkit-box-sizing:border-box;box-sizing:border-box}
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

/* Root
-------------------------------------------------- */
:root {
   --color-bg: #ffffff;
   --color-text: #141414;
   --color-red: #ff2700;
   --color-lighter-grey: #f5f5f5;
   --color-light-grey: #e6e6e6;
   --color-grey:  #9a9a9a;
   --color-dark-grey: #464646;
   --color-darker-grey: #1e1e1e;
}
::-moz-selection {
  background: var(--color-dark-grey);
  color: var(--color-bg);
}

::selection {
  background: var(--color-dark-grey);
  color: var(--color-bg);
}

/* Typeface
-------------------------------------------------- */
@font-face{font-family: 'Practical350';src:url(../fonts/PracticalGrotesk-350.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'Practical400';src:url(../fonts/PracticalGrotesk-400.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'Practical500';src:url(../fonts/PracticalGrotesk-500.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'Practical600';src:url(../fonts/PracticalGrotesk-700.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family: 'Practical900';src:url(../fonts/PracticalGrotesk-900.woff2) format("woff2");font-style:normal;font-display:swap}

@font-face{font-family: 'Practical350i';src:url(../fonts/PracticalGrotesk-350i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family: 'Practical400i';src:url(../fonts/PracticalGrotesk-400i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family: 'Practical500i';src:url(../fonts/PracticalGrotesk-500i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family: 'Practical600i';src:url(../fonts/PracticalGrotesk-700i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family: 'Practical900i';src:url(../fonts/PracticalGrotesk-900i.woff2) format("woff2");font-style:italic;font-display:swap}


ul.listbox li > span:nth-child(1) sup{font-family: 'Practical350'}
nav.submenu a{font-family: 'Practical500'}
main.trials section .box dl dt span:nth-child(1){font-family: 'Practical600'}
main.trials.eula > h2{font-family: 'Practical900'}
.sub-nav a.active{font-family: 'Practical600'}
body.type nav.submenu a{font-family: 'Practical400'}

/* Grid
-------------------------------------------------- */
.gridlayout{z-index: -2;padding:0 calc(42.5px - 12.5px);position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-flow: row wrap;align-items: flex-start;}
.gridlayout span{width:calc(100% / 12 - 25px);margin:0 12.5px;height:100%;background:red;opacity:.1;display:none}

/* Réglages
-------------------------------------------------- */
img{display:block;width:100%;height:auto}
ul,li{list-style: none}
button{all:unset}
em{font-family: 'Practical400i'}
p strong{font-family: 'Practical600';}
select{cursor: pointer;line-height: inherit;background:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit}
.button{color: black;display:inline-block;padding:9px 18px;background-color:var(--color-bg);border:1px solid var(--color-text);border-radius:32px;font-family:'Practical400',sans-serif;line-height:normal;cursor:pointer;transition:background-color .3s ease,color .125s ease,border-color .125s ease}
.button:hover{background-color:var(--color-light-grey);color:var(--color-grey);border-color:transparent}
.button.red{background-color:var(--color-red);color:var(--color-bg)}
.fade{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-text);pointer-events:none;mix-blend-mode:multiply;opacity:0;z-index:2}
.thumb-video {overflow: hidden;mix-blend-mode: multiply;position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.variable::selection {background: transparent;}
.variable::-moz-selection {background:transparent;}
.variable::-webkit-selection {background:transparent}

/* Liens
-------------------------------------------------- */
a{color:black;text-decoration:none;outline:0}
main .text a{text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:auto;text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:currentColor;transition:opacity .3s ease}
main .text a:hover{opacity: 0.3;}
footer a:hover{opacity: 0.3;}

/* Site
-------------------------------------------------- */
html{width:100%;height:100%}
body{width:100%;height:100%;background: #ffff;font-family:'Practical400', 'Arial', sans-serif;}
body, h1, h2, h3, h4{font-size:16px;line-height:20px;letter-spacing: 0.025rem;}
body{display:flex;flex-flow: column nowrap;align-items: flex-start;}

/* Header
-------------------------------------------------- */
header{position:fixed;top:0;left:0;background:transparent;z-index:8000;mix-blend-mode: difference;padding:12.5px 30px;width:100%;display:flex;flex-flow: row nowrap;align-items: flex-start;}
header article, header nav{flex: 1;display:flex;flex-flow: row nowrap;align-items: flex-start;}
header article h1{display:flex;flex-flow: row nowrap;align-items: flex-start;}
header nav ul{width:100%;display:flex;flex-flow: row nowrap;align-items: flex-start;justify-content: flex-end;}
header nav ul li{display:flex;flex-flow: row nowrap;align-items: flex-start;}
header a{white-space: nowrap;color:white;padding:12.5px;transition: opacity 0.125s ease;}
header a:hover, header a.active{opacity:.3}
header a svg{height:18px;width:18px;position:relative;top: -2px}

/* Main
-------------------------------------------------- */
main{flex:1;padding-top:70px;width: 100%;}

/* Typefaces
-------------------------------------------------- */
main.typefaces{padding:calc(60px + 70px) 42.5px;width:100%;display:flex;flex-flow: column wrap;align-items: flex-start;}
main.typefaces.cave {background: var(--color-text);color: white;padding-top:42.5px;}

/* Box (Tapefaces, Cave, Type)
-------------------------------------------------- */
ul.listbox {justify-content: center;gap:25px;width:100%;display:flex;flex-flow: row wrap;align-items: flex-start;}
ul.listbox li{position:relative;transition:all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);border:1px solid transparent;width: calc((100% - 50px) / 3);padding-bottom: calc(((100% - 50px) / 3) * 0.6667);border-radius: 16px;background:#f5f5f5;overflow: hidden;}
ul.listbox li:hover{box-shadow: 0 4px 8px rgba(0,0,0,0.06);box-shadow: 0 4px 8px rgba(0,0,0,0.06);background: var(--color-bg);border: 1px solid var(--color-lighter-grey);}
ul.listbox li > span:nth-child(1){position:absolute;z-index:9;top:25px;left:25px;display:flex;flex-flow: row wrap;align-items: flex-start;}
ul.listbox li > span:nth-child(1) h2{font-size:20px;}
ul.listbox li > span:nth-child(1) sup{font-size:10px;color:red;margin-left:9px;line-height: 10px;}
ul.listbox li > span:nth-child(2){font-size: 14px;position:absolute;z-index:9;top:18px;right:20px;z-index: 999;}
ul.listbox li > span:nth-child(2) button{transition: all .25s ease}
ul.listbox li > span:nth-child(2) button:hover{background-color: var(--color-light-grey);color: var(--color-grey);border-color: transparent;}
ul.listbox li > span:nth-child(3){font-family: 'CustomFont';transition: font-variation-settings 0.3s ease-out;position:absolute;top:0;right:0;left:0;bottom:12.5px;display:flex;flex-flow: row wrap;align-items:center;justify-content: center;}
ul.listbox li > span:nth-child(4){font-size:14px;color: var(--color-grey);}
ul.listbox li > span:nth-child(4){position:absolute;bottom:25px;left:25px}
ul.listbox li > span:nth-child(4) b{color:red}
ul.listbox li > a{overflow: hidden;position: absolute;width: 100%;height: 100%;display: flex;z-index:9;    mix-blend-mode: multiply;}
section#opentype ul.listbox{grid-column:span 12 / span 12;margin-top:42.5px}
section#opentype ul.listbox span.variable{font-size:100px;cursor:pointer}
section#opentype ul.listbox li > span:nth-child(4) span{background:var(--color-light-grey);color:var(--color-grey);margin-right:10px}
section#opentype ul.listbox li > span:nth-child(5){position:absolute;bottom:25px;right:25px}
.toggle{position:relative;display:inline-block;width:48px;height:24px}
.toggle input{opacity:0;width:0;height:0}
.slider{box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px inset;position:absolute;cursor:pointer;inset:0;background-color:var(--color-light-grey);transition:background-color .3s ease;border-radius:34px}
.slider::before{box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background-color:var(--color-bg);transition:.3s;border-radius:50%}
input:checked + .slider::before{transform:translateX(24px)}
input:checked + .slider{background-color:var(--color-red)}

/* Trials / About
-------------------------------------------------- */
main.trials{padding:calc(60px + 70px) 42.5px 0;width:100%;display:flex;flex-flow: column wrap;align-items: flex-start;}
main.trials section{scroll-margin-top: 130px;padding:30px 0 130px 0;width:100%;display:flex;flex-flow: column wrap;align-items: flex-start;display: grid;gap:25px;border-top: 1px solid var(--color-light-grey);grid-template-columns: repeat(12, 1fr);}
main.trials section .text p+p{text-indent:25px}
main.trials section .text.normal{font-size:16px;line-height:20px;margin-top:42.5px}
main.trials section .box{width:100%;margin-top:55px;margin-bottom:110px;display:flex;flex-flow: column wrap;align-items: flex-start;}
main.trials section .box dl{gap:25px;border-top: 1px solid var(--color-light-grey);padding-top:12.5px;font-size:16px;line-height:20px;margin-top:42.5px;width:100%;display:grid;grid-template-columns: repeat(6, 1fr);}
main.trials section .box dl dt {flex: 1;display: flex;flex-flow: column wrap;align-items: flex-start;grid-column: 1 / 4;}
main.trials section .box dl dd{grid-column: 4 / 7;}
main.trials section .box dl dt span:nth-child(1){color:var(--color-red);font-size:18px;line-height:normal;}
main.trials section .box dl dt span:nth-child(2){color:var(--color-text);font-size:18px;line-height:normal;}
main.trials section .box dl dt span:nth-child(3){display:flex;flex-flow: row wrap;align-items: flex-start;}
main.trials section .faq{margin-top:110px}
main.trials section.faq-section{grid-column:3 / span 8;padding:12.5px 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 25px;border-top:1px solid var(--color-light-grey)}
main.trials section.faq-section .faq{margin:110px 0 0}
main.trials section.faq-section .faqtitle{font-size:16px;line-height:20px;grid-column:1 / 3;color:var(--color-grey)}
main.trials section.faq-section .faq-question.active .triangle{transform:rotate(180deg)}
main.trials section.faq-section .faq-question div{transition:color .25s ease}
main.trials section.faq-section .faq-question.active > div:nth-child(1), .faq-question:hover > div:nth-child(1){color:red;cursor:pointer}
main.trials section.faq-section .faq-answer{display:none;font-size:16px;line-height:20px}
main.trials section.faq-section .faq-answer p{margin-top:12.5px;margin-bottom: 12.5px;}
main.trials section.faq-section .faqtitle + .faq-item{grid-column:3 / 7}
main.trials section.faq-section .faq-question{cursor: pointer;display:flex;flex-flow:row wrap;align-items:flex-start;align-items:center}
main.trials section.faq-section .faq-question div:nth-child(1){flex:1}
main.trials section.faq-section .faq-item{grid-column:3 / 7;margin-bottom:12.5px;padding-bottom:12.5px;border-bottom:1px solid var(--color-light-grey)}
main.trials section.faq-section .faq-item:last-child{border:0}
main.trials section.faq-section .triangle{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #333;flex-shrink:0;margin-left:20px}
main.trials section .box dl dt span.discount{margin-top:10px}
main.trials section .box dl dt span .smallbtn{padding:.3rem .7rem;border-radius:1em;background:var(--color-lighter-grey);color:var(--color-grey);font-size:11px;line-height:normal;text-transform:uppercase;margin-right:5px}
main.trials section .download{margin-top:80px;width:100%;display:flex;flex-flow:row wrap;align-items:center;justify-content:center}
main.trials section .download .button{padding:14px 28px;background:#000;color:#fff;font-size:25px;line-height:normal;margin:0 10px}
main.trials section .download .button:hover{  background-color: var(--color-lighter-grey);color: var(--color-grey);border: 1px solid var(--color-light-grey);box-shadow: 0 4px 8px rgba(0,0,0,0.06);}
main.trials h2{grid-column:1 / span 2;color:var(--color-grey)}
main.trials article{grid-column:4 / span 6;font-size:20px;line-height:26px}
main.trials form{padding:45px 0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}
main.trials form .form-group{padding-top:20px}
main.trials form .form-group.checkbox{grid-column:1 / -1}
main.trials form button.btn-primary{transition:all .125s ease;border: 1px solid transparent;grid-column:1 / -1;padding:14px 28px;display:inline;margin:42.5px auto 0;font-size:25px;line-height:normal;border-radius:40px;background:#000;color:#fff;cursor:pointer}
main.trials form button.btn-primary:hover{  background-color: var(--color-lighter-grey);color: var(--color-grey);border: 1px solid var(--color-light-grey);box-shadow: 0 4px 8px rgba(0,0,0,0.06);}
main.trials form .form-group:nth-last-of-type(4){padding-bottom:42.5px}
main.trials form input.grey{font-family:inherit;width:100%;padding:10px 15px;background-color:var(--color-lighter-grey);border-radius:6px;border:none;font-size:1rem;font-family:'Practical Grotesk',sans-serif;color:var(--color-text);outline:none;-webkit-appearance:none;appearance:none}
main.trials form .csrf{display:none}
.checkbox input[type="checkbox"]{position:absolute;opacity:0;cursor:pointer}
.checkbox label{position:relative;padding-left:30px;cursor:pointer;display:block}
.checkbox label::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border:1px solid #000;background:#fff}
.checkbox input[type="checkbox"]:checked + label::before{background:#000}
.checkbox label a{color:#000;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:auto;text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:currentColor;transition:opacity .3s ease}
main.trials article .text.small{font-size:16px;line-height:20px}
nav.submenu{width:100%;z-index: 999;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;justify-items:center;position:fixed;top:70px;transition:opacity .25s ease}
body.product nav.submenu{opacity:0}
body.product nav.submenu.visible{opacity:1}
nav.submenu a{margin:0 5px;background-color:var(--color-lighter-grey);color:var(--color-grey);border:transparent;font-size: 14px;line-height: 16px;}
nav.submenu form button{font-family: 'Practical500';border:0;font-size: 14px;
line-height: 16px;}
nav.submenu a:hover,nav.submenu a.active{background-color:var(--color-light-grey);color:var(--color-dark-grey)}
.success-message{text-align:center}
.success-message span{font-size:16px;line-height:20px}
footer .success-message{text-align:left}

/* EULA Page
-------------------------------------------------- */
main.trials.eula > h2{color:black;padding-bottom:110px;font-size: 10vw;line-height: 0.85;;width:100%;text-align:center;}
main.trials.eula .text h2{font-size:20px;line-height: normal;color:black;font-family: 'Practical500';}
main.trials.eula .text h2:not(:first-child){border-top: 1px solid var(--color-light-grey);margin-top:30px;padding-top:30px}

/* Project Layout
-------------------------------------------------- */
main.project {padding-top:0}
main.project.custom {padding-top:117.5px}
body.home main.project {padding:42.5px 0 117.5px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);width:100%;margin:0 auto}
.column{grid-column:span var(--span,12)}
.block-image figure figcaption, figure figcaption{margin-top:8px;color: var(--color-grey);}
.blocks{display:flex;flex-direction:column;gap:25px}
.block.block-text-title{font-size:25px;line-height:normal;padding:42.5px 12.5px 12.5px}
.block.block-text-title p{border-top:1px solid;padding-top:12.5px}
body.home section:first-of-type .block.block-text-title p{border-top:0}
.block.block-text-para{display: grid;gap:25px;grid-template-columns: repeat(12, 1fr);font-size:20px;line-height:normal;padding:100px 12.5px;}
.block.block-text-para .text-content{grid-column: 4 / span 6;}
.block.block-text-both{margin-bottom: 42.5px;display: grid;gap:25px;grid-template-columns: repeat(12, 1fr);font-size:20px;line-height:normal;padding:42.5px 12.5px 110px}
.block.block-text-both .text-content{grid-column: 1 / -1;display: grid;gap:25px;grid-template-columns: repeat(12, 1fr);}
.block.block-text-both .text-content h2{grid-column: 1 / span 2;color: var(--color-grey);}
.block.block-text-both .text-content div{grid-column: 4 / span 6;}
.large{width:100%;height:auto;padding:12.6px 42.5px;}
.large img{width:100%;height:auto;border-radius: 15px;}
.block-image{padding:12.5px}
.block-image .image-container{position:relative;overflow: hidden;}
.block-image .image-container.rounded{border-radius:15px}
.block-image .image-container > img{width:80%;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%)}

.block-image .image-container img{width: 100%;height: 100%;object-fit: cover;position:relative}
.block-image .image-container.has-link img:not(.logo){transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);transform: scale(1.02);}
.block-image .image-container.has-link:hover img:not(.logo){transform: scale(1.01);}

.block-image .image-container > img{z-index: 999;position:absolute;top:50%;left:50%;max-width:100%;max-height:100%;object-fit:cover;width:75%;height:auto;transform:translate(-50%,-50%)}
.block-image .image-container.has-link:hover > img{transform: translate(-50%, -50%);}
.block-image .image-container.has-link:after{z-index: 0;opacity:0;content:'';width: 100%;height: 100%;position:absolute;top:0;left:0;background:black;transition:opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1)}
.block-image .image-container.has-link:hover:after{opacity:.1;}
.block-image .image-container figcaption{color: white;position:absolute;bottom:0;padding:25px;opacity:0;transition:opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1)}
.block-image .image-container:hover figcaption{opacity:1}
.block-image .image-container .caption-inside{width:100%;display: flex}
.block-image .image-container .caption-inside span:first-child{flex:1}

div.block-video{padding:12.5px}
div.block-video .block-video-wrapper{position:relative;}
div.block-video .block-video-wrapper .caption-inside{color: white;
position: absolute;
bottom: 0;
padding: 25px;
opacity: 0;justify-content: space-between;
transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);width: 100%;
display: flex;}
div.block-video .block-video-wrapper:hover .caption-inside{opacity:1}

figure video{width:100%}
.block-video .video-container.rounded video{border-radius: 15px;}
.grid.columns-1, .grid.columns-2, .grid.columns-3{padding:0 30px}
.grid.columns-1 img, .grid.columns-2 img, .grid.columns-3 img{}

.column-2 .blocks{gap:0}
.column-2 .block.block-text-both{padding-top:0;padding-bottom: 12.5px;grid-template-columns: repeat(6, 1fr);}
.column-2 .block.block-text-both .text-content{grid-column: 1 / -1;display: grid;gap:0;grid-template-columns: repeat(6, 1fr);}
.column-2 .block.block-text-both .text-content h2{margin-bottom: 10px;grid-column: 1 / -1;color:var(--color-text);font-size:20px;line-height:24px}
.column-2 .block.block-text-both .text-content div p{font-size:16px;line-height:20px}
.column-2 .block.block-text-both .text-content div{grid-column:  1 / -1}

.endbutton{text-align:center;width:100%;padding:110px 0}
.endbutton .button{padding:14px 28px;font-size:25px;line-height:normal}
.project.cave .endbutton .button{background-color:#464646;color: var(--color-grey);border: 1px solid #141414}
.project.cave .endbutton .button:hover{background-color:#141414;color: var(--color-grey);border: 1px solid var(--color-grey)}
.project.custom .endbutton .button{background-color: var(--color-text);color:white}
.project .endbutton .button{background-color:var(--color-text);color:white;border: 1px solid #141414}
.project .endbutton .button:hover{background-color: var(--color-lighter-grey);color: var(--color-grey);box-shadow: 0 4px 8px rgba(0,0,0,0.06);border: 1px solid var(--color-light-grey);}

/* Cave
-------------------------------------------------- */
main.project.cave {background: var(--color-text);color:white;padding-top: 60px;}
.bigscreen.cave {background: var(--color-text);color:white}

/* Type
-------------------------------------------------- */
main.type{padding:42.5px;padding-top:0}
.bigscreen{cursor: pointer;position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.bigscreen .logo{width:66.666%;z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
body.home .bigscreen .logo.lazyloaded{transition-delay: .5s}
body.type .bigscreen .logo.lazyloaded{transition-delay: .5s}
body.the-cave .logo.lazyloaded{transition-delay: .5s}
body.project .bigscreen .logo.lazyloaded{transition-delay: .5s}
body.type .bigscreen{cursor:pointer}
body.project .bigscreen{cursor:pointer;margin-bottom: 60px;}
body.the-cave .bigscreen{cursor:pointer;}
.fullscreen-image,.fullscreen-video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
main.type section{padding:30px 0 130px;width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:25px;border-top:1px solid var(--color-light-grey)}
main.type section#opentype{margin-top:110px}
main.type section#opentype article{grid-column:4 / 10}
main.type section h2{color:var(--color-grey);grid-column:1}
/* Section Overview */
main.type section#overview{padding:42.5px 110px 110px;width:100%;column-gap:0;display:flex;flex-flow:row wrap;justify-content:center;border-top:0;margin-top:130px}
main.type section#overview span{font-size:93px;line-height:110px;text-align:center}
/* Section Languages */
main.type section#languages article{grid-column:2 / -1;columns:9;column-gap:10px;font-size:11px;line-height:14px}
/* Section About */
main.type section#about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:25px}
main.type section#about h2:first-of-type{grid-column:1;grid-row:1}
main.type section#about article:nth-child(2){grid-column:2 / 6;grid-row:1}
main.type section#about h2:nth-of-type(2){grid-column:8;grid-row:1}
main.type section#about article:nth-child(4){grid-column:9 / 12;grid-row:1}
main.type section#about article a{position:relative;display:flex}
/*main.type section#about article a:after{opacity:.025;transition:opacity .125s ease;content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#000}*/
main.type section#about article a:hover{box-shadow: 0 2px 8px #0000000f;}
main.type section#about article p:not(:last-child){margin-bottom:1em}
main.type #maylike{grid-template-columns:repeat(12,1fr);column-gap:25px}
main.type #maylike h2{grid-column: 1 / span 2;}
main.type #maylike article{grid-column:1 / -1;margin-top:60px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:10px}
main.type #maylike article a img{height:31.75px;width:auto}
main.type #maylike article .button{padding:15px 30px;position:relative;transition:all .15s ease}
main.type #maylike article a.button:after{position:absolute;top:0;left:0;right:0;bottom:0;content:'';background:red;mix-blend-mode:screen;opacity:0;transition:opacity .125s ease}
main.type #maylike article a.button:hover:after{opacity:1}
main.type #maylike article a.button:hover{border-color:red;background-color:#fff;box-shadow:0 4px 8px #ff27000f;transition:all .125s ease}
main.type #maylike a.btn-primary{padding:15px 30px;display:inline;font-size:25px;line-height:26px;border-radius:46px;background:#000;color:#fff;cursor:pointer;border:1px solid transparent;transition:all .125s ease}
main.type #maylike a.btn-primary:hover{background-color:var(--color-lighter-grey);color:var(--color-grey);border:1px solid var(--color-light-grey);box-shadow:0 4px 8px #0000000f}
.opentype-features{display:flex;flex-wrap:wrap;gap:8px;padding-top:1rem}
.OT,.OT2{display:inline-flex;align-items:center;border-radius:999px;background:var(--color-lighter-grey);color:var(--color-grey);font-size:14px;line-height:normal;text-transform:uppercase;var--color-bg-space:nowrap;position:relative;cursor:pointer;padding:5px 10px;border-radius:9999px;font-weight:500;letter-spacing:.6px}
.OT2{font-size:.8rem;background:var(--color-light-grey);color:var(--color-grey)}
.OT:hover,.OT2:hover{background:var(--color-light-grey);color:var(--color-dark-grey);box-shadow:0 2px 4px #0000000f}
.simple-tooltip{position:absolute;z-index:9999;max-width:250px;padding:8px 12px;color:var(--color-light-grey);background:var(--color-dark-grey);border-radius:4px;font-size:14px;line-height:1.4;pointer-events:none;opacity:0;text-align:center;transform:translateY(-5px);transition:opacity 0.2s,transform .2s}
.simple-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--color-dark-grey);opacity:0;transition:opacity .2s}
.simple-tooltip.show{opacity:1;transform:translateY(0)}
.simple-tooltip.show::after{opacity:1}
@media (max-width: 680px) {
   .simple-tooltip{max-width:calc(100vw - 40px);font-size:12px}
}

/* Glyphsets
-------------------------------------------------- */
main.type h3 {width:100%;padding:25px 0;color: var(--color-grey);border-top: 1px solid var(--color-light-grey);}
#font-selector-wrapper{position:relative;width:100%;appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background: #fff;
   cursor: pointer;cursor:pointer}
#font-selector-wrapper select{width:100%;appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;}
#font-selector-wrapper::after{
   content: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6L0 0H10L5 6Z' fill='black'/%3E%3C/svg%3E");
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   display: flex;
   align-items: center;
}
.glyphset-viewer{width:100%;position:relative;overflow:visible;display:flex;gap:25px;padding-bottom:130px}
#results{flex:1;margin-left:auto}
#inspector{position:sticky;top:130px;height:fit-content;flex:0 0 auto;width:calc(100%/12 * 4 - 17px);margin-right:calc(100%/12 * 1 + 3px);margin-bottom:42.5px}
.category{margin-bottom:42.5px;width:100%}
.category-title{color:red;margin:0 0 12.5px;font-size:14px;line-height:18px}
.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:5px}
.glyph{text-decoration: none;
   -webkit-text-decoration: none;
   text-decoration-line: none;
   -webkit-text-decorations-in-effect: none;font-family: 'CustomFont';display:flex;align-items:center;justify-content:center;border-radius:4px;text-align:center;font-size:38px;cursor:pointer;aspect-ratio:1 / 1;padding:5px;cursor:pointer;background:#f5f5f5;border-radius:8px;color:#000;transition:background 0.2s,color .2s}
.glyph:hover{background:#464646;color:#fff;cursor:pointer}
.error{background:#fee;color:#c33;padding:20px;border-radius:4px;border-left:4px solid #c33}
#inspector-header{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 10px;padding-top:10px;border-top:1px solid #e0e0e0}
#inspector-unicode-name{font-size:16px;line-height:20px}
#inspector-unicode-code{font-size:16px;line-height:20px}
#inspector-glyph-viewer{font-family: 'CustomFont';position:relative;width:100%;aspect-ratio:5 / 5;overflow:hidden;background:#f5f5f5;border-radius:16px}
#inspector-glyph-display{position:absolute;left:0;top:0;right:0;bottom:0;color:#000;white-space:nowrap;pointer-events:none;line-height:normal;text-align:center;font-size:16vw;display:flex;align-items:center;justify-content:center}

/* Type viewer
-------------------------------------------------- */
.tester-preview-wrapper{overflow:hidden;width:100%;padding:25px 0 42.5px;display:flex;flex-flow:column wrap;align-items:flex-start;border-top:1px solid var(--color-light-grey)}
.tester-controls{width:100%;display: grid;gap: 25px;grid-template-columns: repeat(12, 1fr);}
.controls-left{grid-column: 1 / span 9;flex:1;display: grid;gap: 25px;grid-template-columns: repeat(9, 1fr);}
.controls-left > div:nth-child(1){grid-column: 1 / span 2;}
.controls-left > div:nth-child(2){grid-column: 3 / span 2;}
.controls-left > div:nth-child(3){grid-column:5 / span 2;}
.controls-left > div:nth-child(4){grid-column:7 / span 2;}
.controls-right{grid-column: 11 / span 2;display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-end}
.controls-left div{display: flex;gap: 25px;justify-content: flex-start;align-content: center;align-items: center;}
.controls-left div label{grid-column: 1 / span 1}
.tester-preview-wrapper .text-preview{width:100%;padding:25px 0;outline:none;transition:font-size 0.1s,line-height 0.1s,letter-spacing .1s}
.tester-preview-wrapper:nth-last-of-type(2) .text-preview{font-size:50px}
.tester-preview-wrapper:nth-last-of-type(3) .text-preview{font-size:30px}
.text-preview {column-gap: 25px;column-rule: 1px solid #eee;}
.text-preview:focus{background:#fff;outline:0}
.ot-panel{width:100%;display:flex;gap:25px;background:#fff;}
.ot-panel .ot-container .ot-column{display:flex;flex-flow:column wrap;align-items:flex-start}
.align-btn.active{opacity:.5}
.align-buttons button{margin-right:10px;width:14px;height:14px;background:none}
.align-btn[data-align="left"]{cursor:pointer;background-repeat:no-repeat;background-position:center;background-image:url(../images/Icon_Align_Left.svg)}
.align-btn[data-align="center"]{cursor:pointer;background-repeat:no-repeat;background-position:center;background-image:url(../images/Icon_Align_Center.svg)}
.align-btn[data-align="right"]{cursor:pointer;background-repeat:no-repeat;background-position:center;background-image:url(../images/Icon_Align_Right.svg)}
input[type="range"]{width:150px;;-webkit-appearance:none;box-shadow:none;appearance:none;height:1px;background:var(--color-dark-grey);border-radius:0;outline:none}
input[type="range"]::-webkit-slider-thumb{box-shadow:none;-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;outline:1px solid #000;border:0;transition:background .25s ease}
input[type="range"]::-webkit-slider-thumb:hover{background:black}
input[type="range"]::-moz-range-thumb{box-shadow:none;width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;outline:1px solid #000;border:0;transition:background .25s ease}
input[type="range"]::-moz-range-thumb:hover{background:black;}


.ot-container{padding:25px 0 0;width:100%;grid-template-columns:repeat(12,1fr);flex:1;display:grid;gap:25px}
.ot-column{grid-column:span 2}
.ot-reset-column{grid-column: span 2;}
.checkbox{position:relative}
.checkbox input[type="checkbox"]{position:absolute;opacity:0;cursor:pointer}
.checkbox label{position:relative;display:block;padding-left:18px;cursor:pointer;user-select:none;font-size:16px;line-height:20px}
.checkbox label::before{content:"";position:absolute;left:0;top:5px;width: 10px;height: 10px;border:1px solid #000;background:#fff}
.checkbox input[type="checkbox"]:checked + label::before{background:#000}
.checkbox label:hover::before{border-color:#333}
.reset-button{cursor:pointer}
.reset-button:hover{}
.style-select-wrapper{position:relative}
.font-select,.style-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2em;background:#fff;cursor:pointer}
.style-select-wrapper .selectafter{position:relative;}
.style-select-wrapper .selectafter::after{content:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6L0 0H10L5 6Z' fill='black'/%3E%3C/svg%3E");position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center}
.ot-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;font-size:inherit}
.align-buttons{display:flex;padding-right:15px;position:relative;}
.ot-arrow{transition:transform .3s ease;flex-shrink:0}
.ot-toggle.active .ot-arrow{transform:rotate(180deg)}
.ot-arrow path{fill:currentColor}

/* Footer
-------------------------------------------------- */
footer{display:grid;grid-template-columns:repeat(12,1fr);gap:25px;background-color:var(--color-text);color:var(--color-dark-grey);padding:25px 42.5px 40px;width:100%}
.footer-column.wide{grid-column:span 3}
.footer-column{grid-column:span 1}
.footer-column .subtitle{margin-bottom:15px;border-bottom:1px solid var(--color-dark-grey);padding-bottom:10px;color:var(--color-bg)}
.typefaces-list{columns:2;column-gap:25px}
.svg-link{display:inline-block;width:100%;height:auto;text-decoration:none;color:#fff}
.logo-and-newsletter{display:flex;grid-column: 8 / span 5;;flex-direction:column;align-items:stretch;width:100%;color:var(--color-dark-grey)}
.logo-and-newsletter > span{color: var(--color-grey);padding: 20px 0 10px 0;}
.logo-container{display:flex;justify-content:center;width:100%;padding-left:0}
.newsletter{display:flex;align-items:center;gap:25px;flex-wrap:wrap;width:100%}
.newsletter input{flex:1;min-width:200px;width:100%;padding:8px 16px;border-radius:9999px;border:1px solid var(--color-dark-grey);font-size:16px;outline:none;-webkit-appearance:none;appearance:none;background-color:var(--color-text);color:var(--color-grey)}
.newsletter button{border: 1px solid white;}
.footer-column ul a,.footer-column ul a:visited{color:var(--color-grey);transition:opacity .3s ease}
.footer-bottom{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);gap:25px;color:var(--color-bg);padding-top:25px}
.footer-bottom a,.footer-bottom a:visited{color:var(--color-bg);transition:opacity .3s ease}
.footer-bottom span{display: flex;flex-flow: row wrap;justify-content: flex-start;align-content: center;align-items: center;grid-column: span 3;}
.footer-bottom span:last-child{grid-column: 11 / span 2;text-align:right;justify-content: flex-end;}
.footer-bottom span svg{width:16px;height:16px;margin-right:10px;position: relative;top:0;}
.logo-and-newsletter a.svg-link:hover{opacity:1;}

.newsletter .button{background-color:#464646;color: var(--color-grey);border: 1px solid #141414;font-size: 14px;line-height: normal;}
.newsletter .button:hover{background-color:#141414;color: var(--color-grey);border: 1px solid var(--color-grey)}

/* Cookie
-------------------------------------------------- */
#cookie_banner-wrapper{width:auto;font-size:16px;line-height:20px;position:fixed;bottom:0;right:42.5px;border-radius:18px 18px 0 0;background-color:var(--color-bg);color:var(--color-text);padding:18px;display:flex;justify-content:center;flex-flow:row nowrap;align-items:center;gap:25px;z-index:9999;transform:translateY(0);transition:transform .4s ease,opacity .4s ease;box-shadow:0 0 15px #00000026}
#cookie_banner-wrapper.closing{transform:translateY(100%)}
#cookie_banner-wrapper{width:auto;font-size:16px;line-height:20px;position:fixed;bottom:0;right:42.5px;border-radius:18px 18px 0 0;background-color:var(--color-bg);color:var(--color-text);padding:18px;display:flex;justify-content:center;flex-flow:row nowrap;align-items:center;gap:25px;z-index:9999}
#cookie_banner-wrapper span{display:flex;justify-content:center;flex-flow:row nowrap;align-items:flex-start;gap:12.5px}
#cookie_banner-wrapper a,#cookie_banner-wrapper button{border:none;padding:8px 16px;cursor:pointer;border-radius:26px;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
#cookie_banner-wrapper a{white-space: nowrap;background:var(--color-lighter-grey);color:var(--color-grey);border:1px solid transparent}
#cookie_banner-wrapper a:hover{background:var(--color-light-grey);color:var(--color-dark-grey);border:1px solid transparent}
#cookie_banner-wrapper button{white-space: nowrap;background-color:var(--color-text);color:var(--color-bg);border:1px solid transparent}
#cookie_banner-wrapper button:hover{background-color:var(--color-bg);color:var(--color-text);border:1px solid var(--color-text)}

/* Lazyload
-------------------------------------------------- */
.lazyload, .lazyloading {opacity: 0;}
.lazyloaded {opacity: 1;transition: opacity 300ms;}

/*! Flickity 
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
.carousel{padding:0 30px}
.carousel-cell{width:33.333%;padding:12.5px;height:auto}
.carousel-cell-image{display:block;border-radius:15px;max-height:100%;margin:0 auto;max-width:100%;opacity:0;margin-bottom:8px;-webkit-transition:opacity .4s;transition:opacity .4s}
.carousel-cell span{color:#9a9a9a;font-size:14px;line-height: normal}
.carousel-cell-image.flickity-lazyloaded,.carousel-cell-image.flickity-lazyerror{opacity:1}
.carousel div span a:hover{opacity:.3}
.carousel div span a{color:inherit;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:auto;text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:currentColor;transition:opacity .3s ease}
.nav-mobile{display:none}
.sub-nav{grid-column:1 / span 2;position:sticky;left:0;top:160px;left:0;padding-top:12.5px;border-top:1px solid var(--color-light-grey);margin-top:105px;margin-bottom:42.5px}
.sub-nav a{text-decoration:none;color:var(--color-grey);display:block;transition:.2s ease}
.sub-nav a.active{position:relative;padding-left:1rem}
.sub-nav a.active::before{content:"▸";position:absolute;left:0;top:0}
.sub-nav a:hover{opacity:.7}


/*! Test 
---------------------------------------------- */
@font-face{font-family: 'Practicalvariable';src:url(../fonts/PracticalGroteskVariable.ttf) format("truetype");font-style:normal;font-display:swap}

.container-4-3 {
   width: 100%;margin:100px auto;border:1px solid;
   max-width: 900px;
   aspect-ratio: 4 / 3;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.animated-text {
   font-family: 'Practicalvariable', sans-serif;
   font-size: 350px;
   color: #000;
}


.mobile{display:none}
/*--------------------------------------
-   MEDIA QUERIES
---------------------------------------*/

@media only screen and (max-width:1440px){
   footer,#cookie_banner-wrapper{font-size:14px;line-height:18px}
   .carousel-cell{width:50%}
   ul.listbox li{position:relative;width:calc((100% - 50px) / 2);padding-bottom:calc(((100% - 50px) / 2) * 0.6667)}
   .controls-right{grid-column:10 / span 3}
   .controls-left > div:nth-child(1){grid-column:1 / span 3}
   .controls-left > div:nth-child(2){grid-column:4 / span 3}
   .controls-left > div:nth-child(3){grid-column:7 / span 3}
   .ot-column{grid-column:span 3}
   .controls-left div:nth-child(4){display:none}
   main.type section#languages article {columns: 7;}
   .controls-right {
      grid-column: 10 / span 3;}

}
@media only screen and (max-width:960px){
   .controls-left > div:nth-child(2){grid-column:5 / span 4}
   .controls-right{grid-column:9 / span 4}
   .controls-left{grid-column:1 / span 8}
   .controls-left > div:nth-child(3){display:none}
   .controls-left > div:nth-child(1){grid-column:1 / span 4}
   main.type section#languages article {columns:4;}
}
@media only screen and (max-width:680px){
   .sub-nav{display:none}
   body{overflow-x:hidden}
   header{padding:0}
   header a{padding:15px}
   header > nav:first-of-type{display:none}
   header article,header nav{width:100%}
   .grid.columns-1,.grid.columns-2,.grid.columns-3{padding:0}
   .block.block-text-title{padding:42.5px 15px 15px;font-size:20px;line-height:26px}
   .column.column-2{--span:12!important}
   .block-image{padding:6.5px 15px}
   .carousel{padding:0 6.5px;margin-bottom:25px}
   .carousel-cell{width:100%;padding:0 6.5px}
   .carousel-cell-image{margin-bottom:3.5px}
   .carousel-cell span{font-size:16px;line-height:20px}
   body.home main.project{padding:42.5px 0}

   /* Footer
   -------------------------------------------------- */
   body, h1, h2, h3, h4{font-size:18px;line-height:1.3;letter-spacing: 0.025rem;}
   main.trials article {
      font-size: 18px;
      line-height: 1.3;
   }
   .burger{display:flex;position:fixed;top:20px;right:15px;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer;z-index:9999;mix-blend-mode:difference}
   .burger span{display:block;width:24px;height:2px;background:var(--color-bg);transition:.3s}
   .burger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
   .burger.active span:nth-child(2){opacity:0}
   .burger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
   .nav-mobile{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;color:var(--color-bg);display:flex;flex-direction:column;padding:15px;gap:15px;transform:translateX(100%);transition:transform .4s ease;z-index:9000}
   .nav-mobile.active{transform:translateX(0)}
   .nav-mobile h1 a{padding:0;color:#fff}
   .nav-mobile a{padding:0;color:#fff;transition:opacity .125s ease}
   .nav-mobile > div{grid-column:span 1;border-top:1px solid var(--color-dark-grey);padding:1rem 0 .75rem}
   .nav-mobile > div:first-of-type{border-top:none;padding-top:0}
   .nav-mobile a.active{opacity:.3}
   .nav-mobile a:hover{opacity:.3}
   footer{gap:15px;padding:25px 15px;width:100%;font-size:16px;line-height:20px}
   .footer-column.wide{grid-column:1 / -1}
   .footer-column{grid-column:span 6}
   .logo-and-newsletter{display:flex;grid-column:1 / -1}
   .footer-bottom span{grid-column:1 / -1;justify-content:center}
   .typefaces-list{column-gap:15px}
   footer > article{margin-bottom:25px}
   .footer-bottom span:last-child{margin-top:25px;grid-column:1 / -1;justify-content:center}
   .footer-bottom{gap:0}
   #cookie_banner-wrapper{width:auto;font-size:14px;line-height:16px;right:15px;left:15px;border-radius:18px 18px 0 0;background-color:var(--color-bg);color:var(--color-text);padding:15px;display:flex;justify-content:center;flex-flow:column nowrap;align-items:center;gap:15px;z-index:9999}

   /* Trials
   -------------------------------------------------- */
   main.trials{padding:65px 15px 0;width:100%;display:flex;flex-flow:column wrap;align-items:flex-start}
   main.trials section{padding:15px 0 60px;gap:26px}
   main.trials h2{grid-column:1 / -1}
   main.trials article{grid-column:1 / -1}
   main.trials form .form-group{padding-top:15px;grid-column:1 / -1}
   main.trials form input.grey{padding:10px 15px;font-size:18px;line-height:1.3}
   .sub-nav{display:none}
   nav.submenu a:nth-child(1),nav.submenu a:nth-child(2),nav.submenu a:nth-child(3),nav.submenu a:nth-child(4){display:none}
   nav.submenu{width:100%;z-index:999;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;justify-items:center;position:fixed}
   nav.submenu a{font-size:18px;line-height:normal}
   nav.submenu a span{display:none}
   nav.submenu{position:fixed;top:auto;bottom:0;transform:translateY(150%);transition:transform .3s ease-in-out,bottom .3s ease-in-out}
   nav.submenu.visible{transform:translateY(0);bottom:50px}
   nav.submenu.hidden{transform:translateY(150%);bottom:0}
   main.trials section .box dl dt,main.trials section .box dl dd{grid-column:1 / -1}
   main.trials section .box dl dt span:nth-child(1),main.trials section .box dl dt span:nth-child(2),main.trials section .box dl dt,main.trials section .box dl dd{font-size:18px;line-height:1.3}
   main.trials section .box{margin:0}
   main.trials section.faq-section{grid-column:3 / span 8;margin-top:15px;padding:15px 0}
   main.trials section.faq-section .faqtitle{margin-bottom:26px;color:var(--color-grey);font-size:18px;line-height:1.3;grid-column:1 / -1}
   main.trials section.faq-section .faqtitle + .faq-item,main.trials section.faq-section .faq-item{grid-column:1 / -1}
   main.trials section .download{gap:15px}

   /* Typefaces
   -------------------------------------------------- */
   main.typefaces{padding:65px 15px 0;width:100%;display:flex;flex-flow:column wrap;align-items:flex-start}
   ul.listbox{gap:15px}
   ul.listbox li{width:100%;padding-bottom:66.67%}
   ul.listbox li > span:nth-child(1){top:15px;left:15px}
   ul.listbox li > span:nth-child(2){top:15px;right:15px}
   ul.listbox li > span:nth-child(4){bottom:15px;left:15px}
   main.project.cave .listbox{padding:15px}
   .OT::after,.OT::before{display:none}

   /* Custom
   -------------------------------------------------- */
   main.project.custom{padding-top:65px}
   main.trials article .text.small{font-size:18px;line-height:1.3}
   .block.block-text-para{display:grid;gap:15px;grid-template-columns:repeat(12,1fr);font-size:18px;line-height:1.3;padding:42.5px 15px}
   .block.block-text-para .text-content{grid-column:1 / -1}
   .large{width:100%;height:auto;padding:15px}
   .column.column-3{grid-column:1 / -1}
   .block-image figure figcaption{margin-top:15px}
   .endbutton{text-align:center;width:100%;padding:110px 15px}

   /* Type
   -------------------------------------------------- */
   main.type{padding:15px}
   main.type section h2{grid-column:1 / -1}
   main.type section#opentype article{grid-column:1 / -1}
   section#opentype ul.listbox span.variable{font-size:70px;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 15px))}
   main.type section#languages article{grid-column:1 / -1;columns:1;column-gap:15px;font-size:11px;line-height:14px}
   main.type section#overview{padding:42.5px 0;gap:0;margin-top:0}
   main.type section#overview span{font-size:18px;line-height:1.3}
   .category-title{color:red;margin:0 0 20px;font-size:18px;line-height:1.3}
   main.type section{gap:25px;padding:30px 0 60px}
   main.type section#opentype{margin-top:0}
   main.type section#about h2:first-of-type{grid-column:1 / -1;grid-row:unset}
   .tester-preview-wrapper .text-preview{width:100%;padding:0}
   .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}
   main.type section#about article:nth-child(2){grid-column:1 / -1;grid-row:unset}
   main.type section#about h2:nth-of-type(2){grid-column:1 / -1;grid-row:unset}
   main.type section#about article:nth-child(4){grid-column:3 / -3;grid-row:unset}
   .controls-left{grid-column:1 / span 12}
   .controls-left > div:nth-child(1){grid-column:1 / span 5;gap: 15px;}
   .controls-left > div:nth-child(2){grid-column:7 / span 6}
   .glyph{font-size:26px;line-height:30px}
   .glyphset-viewer{display:inline-block;padding-bottom:30px}
   #results{width:100%}
   .tester-controls{margin-bottom:15px;font-size:14px;line-height:normal}
   input[type="range"]{width:100%}
   .font-select,.style-select{padding-right:0}

   .ot-toggle{display:none}
   .controls-right{display:none}
   .tester-preview-wrapper{padding:15px 0 42.5px}
   #inspector{top:0;width:100%;background:#fff;padding-top:56px}
   #inspector-glyph-display{color:#fff;font-size:40vw}
   #inspector-glyph-viewer{aspect-ratio:4 / 3;background:red;color:#fff}
   main.type #maylike h2{grid-column:1 / -1}
   main.type #maylike article{grid-column:1 / -1;display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:10px}
   .simple-tooltip::after{display:none}


   .bigscreen {min-height: 100svh;}
   .block-image .image-container .caption-inside span:nth-child(2) {
      display:none
   }
   .block-image .image-container .caption-inside {
      padding:12.5px;font-size:16px;line-height: normal
   }
   .footer-column .subtitle {
      margin-bottom: 10px;}
   footer article.footer-column:nth-of-type(4) {
      margin-bottom:50px
   }
   .footer-bottom span:last-child {
      margin-top: 50px;margin-bottom: 25px;}
   .footer-bottom span:nth-child(1) {margin-bottom:5px}

   ul.listbox li > span:nth-child(1) {
      top: 12.5px;
      left: 12.5px;
   }
   ul.listbox li > span:nth-child(2) {
      top: 10px;
      right: 10px;
   }
   ul.listbox li > span:nth-child(2) button {
      padding: 6px 12px
   }
   ul.listbox li > span:nth-child(4) {
      bottom: 8.5px;
      left: 12.5px;
   }
   body.type nav.submenu a {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
   .block-image .image-container.rounded, .carousel-cell-image {
      border-radius: 10px;
   }
   .block.block-text-both .text-content h2 {
      grid-column: 1 / -1;
      color: var(--color-grey);
   }
   .block.block-text-both .text-content div {
      grid-column: 1 / -1;
   }
   .column-2 .block.block-text-both .text-content h2 {
      margin-top: 3.5px;}

   .block-image figure figcaption {
      margin-top: 8px;font-size:16px;line-height: normal
   }
   .font-select {
      width:100%
   }
   .style-select-wrapper::after{right:-10px;top:calc(50% + -2px)}
   main.trials section .download .button, main.trials form button.btn-primary, .endbutton .button {font-size: 20px;line-height: normal}
   main.trials section .box dl dd, main.trials.eula .text h2 {
      font-size: 16px;
      line-height: 1.3;
   }

   body.about a:nth-child(2){display: block}
   body.about a:nth-child(6){display: none}
   main.trials.eula .text h2 {padding-bottom: 25px;}
   body.eula main.trials article .text.small{font-size:16px;line-height:1.3}
   body.eula main.trials.eula .text h2 {font-size:18px;line-height:1.3}
   
   
  main.project.cave {padding-top:0px;}
  .style-select-wrapper .selectafter::after {
     right: -20px;}
   .caption-outside{font-size:16px;line-height:normal}
   
   
}