*,:after,:before{box-sizing:border-box}:root{font-size:18px} 
body,html,main{height:100%;width:100%;position:relative} 
body{margin:0;--color-text:#000;--color-text-alt:#848484;--color-title:#d3d3d3;--color-bg:#dcdcdc;--color-link:#c62e3e;--color-link-hover:#000;color:var(--color-text);background-color:var(--color-bg);--cursor-stroke:#c62e3e;--cursor-fill:none;--cursor-stroke-width:1px;--cursor-text:#000;font-family:tenon,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} 
a{text-decoration:none;color:var(--color-link);outline:none} 
a:focus,a:hover{text-decoration:underline;color:var(--color-link-hover);outline:none} 
.unbutton{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer} 
.unbutton:focus{outline:none} 
.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000} 
.js .loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)} 
.js .loading:after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards} 
@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}} 
.message{z-index:100;background:var(--color-text);color:var(--color-bg);padding:.5rem;font-size:.75rem;position:relative} 
.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.frame{padding:1rem 5vw;position:relative;z-index:1000} 
.frame__title{font-size:1rem;margin:0 0 1rem;font-weight:400} 
.frame__links{display:inline} 
.frame__demos a:not(:last-child),.frame__links a:not(:last-child){margin-right:1rem} 
.frame__demos{margin:1rem 0} 
.frame__demo--current,.frame__demo--current:hover{color:var(--color-text);text-decoration:none} 
.content{display:flex;flex-direction:column;width:100vw;height:300px;justify-content:center;position:relative;align-items:center} 
.grid{position:absolute;width:120%;height:120%;top:-10%;left:-10%;display:grid;grid-template-columns:repeat(50,2%);grid-template-rows:repeat(50,2%);perspective:1000px} 
.grid--inactive{pointer-events:none} 
.grid__item{grid-area:var(--grid-row)/var(--grid-column)/span 12/span 5} 
.grid__item,.grid__item-img{position:relative;will-change:transform} 
.grid__item-img{width:100%;height:100%;background-size:cover;background-position:50% 50%;border-radius:10px} 
.char{will-change:transform} 
.pos-1{--grid-row:10;--grid-column:5} 
.pos-2{--grid-row:1;--grid-column:15} 
.pos-3{--grid-row:1;--grid-column:29} 
.pos-4{--grid-row:15;--grid-column:12} 
.pos-5{--grid-row:17;--grid-column:25} 
.pos-6{--grid-row:20;--grid-column:38} 
.pos-7{--grid-row:35;--grid-column:5} 
.pos-8{--grid-row:40;--grid-column:14} 
.pos-9{--grid-row:37;--grid-column:29} 
.pos-10{--grid-row:35;--grid-column:38} 
.pos-11{--grid-row:1;--grid-column:44} 
.pos-12{--grid-row:32;--grid-column:20} 
.pos-13{--grid-row:22;--grid-column:2} 
.pos-14{--grid-row:9;--grid-column:38} 
.pos-15{--grid-row:4;--grid-column:7} 
.pos-16{--grid-row:28;--grid-column:36} 
.content__title{font-size:8vw;margin:0;line-height:1.2;position:relative;color:var(--color-title);text-transform:uppercase;pointer-events:none} 
.content__title-line{display:block;position:relative;overflow:hidden;line-height:1} 
.content__title-line--1{margin-left:-5vw} 
.content__title-line--2{margin-right:-5vw} 
.preview{position:relative;pointer-events:none} 
.js .preview{width:100%;height:100%;position:absolute;top:0;left:0} 
.preview__item{position:relative;margin:0 auto;padding:0 5vw;display:grid;grid-template-rows:auto auto auto;grid-template-columns:50% 50%;grid-template-areas:"preview-back preview-back" "preview-img preview-title" "preview-content preview-content"} 
.js .preview__item{perspective:1000px} 
.js .preview__item:not(.preview__item--open){position:absolute;overflow:hidden;height:0;opacity:0} 
.js .preview__item--open{pointer-events:auto} 
.preview__item-back{grid-area:preview-back;justify-self:start;font-size:.857rem;text-transform:uppercase;font-weight:500;padding-left:90px;margin-bottom:1rem;background:url(arrow.2103f144.svg) no-repeat 0 50%} 
.preview__item-title{grid-area:preview-title;font-family:dystopian,sans-serif;font-size:8vw;font-size:clamp(1.5rem,8vw,20vh);margin:0;grid-column-start:1;align-self:center;padding-left:1rem;position:relative;overflow:hidden;pointer-events:none} 
.preview__item-imgwrap{width:100px;height:150px;border-radius:10px;overflow:hidden;grid-area:preview-img;transform-origin:50% 100%} 
.preview__item-img{width:100%;height:100%;background-size:cover;background-position:50% 50%} 
.preview__item-content{grid-area:preview-content;max-width:calc(1100px - 80vh);min-height:440px;line-height:1.3} 
.preview__item-meta{color:var(--color-text-alt);font-size:.857rem;padding:1rem 0 0} 
.preview__item-meta span{display:block} 
.preview__item-info{display:block;color:var(--color-link);margin:1rem 0} 
.preview__item-button{color:#fff;border:0;border-radius:2rem;text-transform:uppercase;font:inherit;font-size:.875rem;font-weight:500;background:#000;padding:1rem 2rem;display:block;cursor:pointer;margin:1rem} 
.preview__item-button:active,.preview__item-button:hover{outline:none;background:#c2462a} 

.cursor{display:none} 
@media screen and (min-width:53em){
body,html,main{overflow:hidden} 
.message{display:none} 
.grid__item-img {font-size: 25pt; width:170%}
.tooltip .tooltiptext {
    width: 400%;
    margin-left: -200%; 
	font-size: 12pt;
}
.big {font-size:30pt}
.frame{position:fixed;z-index:100;top:0;left:0;display:grid;align-content:space-between;width:100%;max-width:none;height:100%;padding:1rem 1.5rem;grid-gap:6vw;pointer-events:none;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;grid-template-areas:"title links ..." "... ... ..." "... ... ..."} 
.frame__title-wrap{grid-area:title;display:flex} 
.frame__title{margin:0} 
.frame__tagline{position:relative;margin:0 0 0 1rem;padding:0 0 0 1rem;opacity:.5} 
.frame__demos{margin:0;grid-area:demos;justify-self:end} 
.frame__links{grid-area:links;padding:0} 
.frame a{pointer-events:auto} 
.content{height:100%} 
.preview__item{height:100%;width:80vw;grid-template-columns:47% 53%;grid-template-rows:minmax(max(5rem,18vh),1fr) auto auto 1fr;grid-template-areas:"... ..." "preview-back ..." "preview-title preview-title" "preview-img preview-content"} 
.preview__item-title{justify-self:center;padding:0; opacity: 0.1;} 
.preview__item-meta{padding:1rem 0} 
.preview__item-info{margin:1rem 0 3rem} 
.preview__item-imgwrap{width:100%;height:100%;grid-row-start:3;border-radius:10px 10px 0 0} 
.preview__item-content{padding:0 0 0 4rem} 
} 
@media (any-pointer:fine){
.cursor{display:block;width:100%;height:100%;z-index:9999} 
.cursor,.cursor__svg{position:absolute;top:0;left:0;pointer-events:none} 
.cursor__svg-circle{fill:var(--cursor-fill);stroke:var(--cursor-stroke);stroke-width:var(--cursor-stroke-width)} 
.cursor__text{position:absolute;top:1.875rem;left:80px;font-size:.857rem;text-transform:uppercase;font-weight:500;fill:var(--cursor-text)} 
} 
.splitting .char,.splitting .word{display:inline-block} 
.splitting .char{position:relative} 
.splitting .char:after,.splitting .char:before{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;user-select:none} 
.splitting{--word-center:calc(var(--word-total)/2 - 0.5);--char-center:calc(var(--char-total)/2 - 0.5);--line-center:calc(var(--line-total)/2 - 0.5)} 
.splitting .word{--word-percent:calc(var(--word-index)/var(--word-total));--line-percent:calc(var(--line-index)/var(--line-total))} 
.splitting .char{--char-percent:calc(var(--char-index)/var(--char-total));--char-offset:calc(var(--char-index) - var(--char-center));--distance:calc(var(--char-offset)*var(--char-offset)/var(--char-center));--distance-sine:calc(var(--char-offset)/var(--char-center));--distance-percent:calc(var(--distance)/var(--char-center))} 
.splitting.cells img{width:100%;display:block} 
@supports (display:grid){
.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden} 
.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr)} 
.splitting .cell{background:inherit;position:relative;overflow:hidden} 
.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100%*var(--col-total));height:calc(100%*var(--row-total));left:calc(-100%*var(--col-index));top:calc(-100%*var(--row-index))} 
.splitting .cell{--center-x:calc(var(--col-total)/2 - 0.5);--center-y:calc(var(--row-total)/2 - 0.5);--offset-x:calc(var(--col-index) - var(--center-x));--offset-y:calc(var(--row-index) - var(--center-y));--distance-x:calc(var(--offset-x)*var(--offset-x)/var(--center-x));--distance-y:calc(var(--offset-y)*var(--offset-y)/var(--center-y))} 
} 
@font-face {font-family: "Troika";  src: url("Troika.ttf") format("truetype"); font-style: normal; font-weight: normal;} 
@font-face {font-family: "Monster";  src: url("ds_moster.ttf") format("truetype"); font-style: normal; font-weight: normal; }
@font-face {font-family: "Old";  src: url("a_OldTyperNr_Regular.ttf") format("truetype"); font-style: normal; font-weight: normal; } 

.preview__item-content{font-family: Old}
.grid__item-img {font-family: Troika}
.hidden{visibility:hidden}

 @media screen and (max-width:53em){
.grid__item-img {font-size: 15pt}
.big {font-size:20pt}
.tooltip .tooltiptext {
	width: 250%;
	font-size: 10pt;
	margin-left: -125%; 
	}
 }

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #c2462a;
    color: #fff;
    text-align: justify;
    padding: 15px 15px;
    border-radius: 6px;     
    position: absolute;
    z-index: 1000;
    bottom: 100%;
    left: 50%;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #c2462a transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.preview__item-description{
	text-align: justify;	
}