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


body, html {
  font-kerning: normal;
  font-family: "Epilogue";
  -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {color: #ff4122;}

@font-face {
    font-family: 'Anybody';
    src: url(fonts/Anybody[slnt,wdth,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
}

@font-face {
    font-family: 'Epilogue';
    src: url(fonts/Epilogue.ttf) format("truetype"),
    url(fonts/Epilogue[slnt,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;

}
@font-face {
    font-family: 'Gluten';
    src: url(fonts/Gluten[ital,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;

}

@font-face {
    font-family: 'Grandstander';
    src: url(fonts/Grandstander[slnt,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;

}

@font-face {
    font-family: 'Imbue';
    src: url(fonts/Imbue[opsz,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
}

@font-face {
    font-family: 'Sono';
    src: url(fonts/Sono[MONO,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 200 800;
}

@font-face {
    font-family: 'Tourney';
    src: url(fonts/Tourney[ital,wdth,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;

}

@font-face {
    font-family: 'Trispace';
    src: url(fonts/Trispace[wdth,wght].woff2) format("woff2-variations");
    font-style: normal;
    font-weight: 100 800;

}

body,html {
  color: #000;
  background: #000;
}
#home {
  background-color: #ff4122;
  padding: 3vw 0 1vw;
  overflow: hidden;
}

#nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 5;
}

#nav a#logo {
  background: url("etclogo.svg") 50% 50% no-repeat;
  background-size: contain;
  display: block;
  width: 100px;
  height: 60px;
  text-indent: -9999em;
  cursor: pointer;
}

#nav a#logo {
background: url(etclogo.svg) 50% 50% no-repeat;
background-size: 90px auto;
display: block;
width: 100px;
height: 60px;
text-indent: -9999em;
background-color: black;
padding: 10px;
}


a#logo:hover {
      animation: flash .5s linear infinite;
}


      @keyframes flash {
      0% {
    background-color: #ff4122;
      }
      100% {
    background-color: #000000;
      }
      }

#mission {
}

#mission p{
    color: #ff4122;
  /*  font-family: "Anybody";
    font-variation-settings: "wdth" 180, "wght" 400;*/
    font-family: "Epilogue";
    font-variation-settings: "wght" 330;
    font-feature-settings: ;
    font-size: 3.5vw;
    margin: 2.5vw 5.5vw 2.5vw 2.5vw;
  line-height: 1.35;
}

#nav::before {
  position: fixed;
  display: block;
  content: " ";
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #000;
  z-index: 3;
}
/*
#nav::after {
  position: fixed;
  display: block;
  content: " ";
  bottom: 0;
  left: 0;
  right: 0;
  height: 1vw;
  background: #000;
  z-index: 3;
}

body::before {
  position: fixed;
  display: block;
  content: "  ";
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 1vw;
  background: #000;
  z-index: 3;
}

body::after {
  position: fixed;
  display: block;
  content: "  ";
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 1vw;
  background: #000;
  z-index: 3;
}*/

ul.banner  {
  white-space: nowrap;
  padding: 0 1.5vw;
  position: relative;
  z-index: 2;
}

ul.banner li {
display: inline;
vertical-align: top;
font-size: 9.5vw;
text-transform: uppercase;
padding: 0 .2em 0 0;
line-height: 1;
overflow: hidden;
}


#home a {
  color: #000;
  text-decoration: none;
}
#anybody {
  font-family: "Anybody", sans-serif;
}
#anybody li:nth-child(1) {
  font-variation-settings: "wght" 500, "wdth" 50, "slnt" -10;
}


#anybody li:nth-child(2) {
  font-variation-settings: "wght" 300, "wdth" 100, "slnt" -10;
}
#anybody li:nth-child(3) {
  font-variation-settings: "wght" 800, "wdth" 150, "slnt" -10;
}

#anybody li:nth-child(4) {
  font-variation-settings: "wght" 100, "wdth" 120, "slnt" -10;
}

#anybody li:nth-child(5) {
  font-variation-settings: "wght" 900, "wdth" 80, "slnt" -10;
}
#anybody li:nth-child(5) {
  font-variation-settings: "wght" 400, "wdth" 150, "slnt" -10;
}



#imbue {
  font-family: "Imbue", sans-serif;
}

#imbue li:nth-child(2) {
  font-variation-settings: "wght" 900, "opsz" 100;
}
#imbue li:nth-child(1) {
  font-variation-settings: "wght" 100, "opsz" 10;
}

#imbue li:nth-child(3) {
  font-variation-settings: "wght" 600, "opsz" 50;
}
#imbue li:nth-child(4) {
  font-variation-settings: "wght" 300, "opsz" 100;
}

#imbue li:nth-child(5) {
  font-variation-settings: "wght" 700, "opsz" 50;
}
#imbue li:nth-child(6) {
  font-variation-settings: "wght" 400, "opsz" 10;
}
#imbue li:nth-child(7) {
  font-variation-settings: "wght"800, "opsz" 100;
}
#imbue li:nth-child(8) {
  font-variation-settings: "wght" 200, "opsz" 30;
}
#imbue li:nth-child(9) {
  font-variation-settings: "wght" 100, "opsz" 70;
}
#imbue li:nth-child(10) {
  font-variation-settings: "wght" 700, "opsz" 50;
}



#grandstander {
  font-family: "Grandstander", sans-serif;
}

#grandstander li:nth-child(1) {
  font-variation-settings: "wght" 700, "slnt" 0;
}

#grandstander li:nth-child(2) {
  font-variation-settings: "wght" 200, "slnt" 0;
}

#grandstander li:nth-child(3) {
  font-variation-settings: "wght" 800, "slnt" 0;
}

#grandstander li:nth-child(4) {
  font-variation-settings: "wght" 500, "slnt" 0;
}

#grandstander li:nth-child(5) {
  font-variation-settings: "wght" 100, "slnt" 0;
}


#tourney {
  font-family: "Tourney", sans-serif;
}

#tourney li:nth-child(1) {
  font-variation-settings: "wght" 700, "ital" 1, "wdth" 115;
}

#tourney li:nth-child(2) {
  font-variation-settings: "wght" 300, "ital" 1, "wdth" 75;
}

#tourney li:nth-child(3) {
  font-variation-settings: "wght" 500, "ital" 1, "wdth" 125;
}

#tourney li:nth-child(4) {
  font-variation-settings: "wght" 900, "ital" 1, "wdth" 85;
}

#tourney li:nth-child(4) {
  font-variation-settings: "wght" 100, "ital" 1, "wdth" 105;
}



#epilogue {
  font-family: "Epilogue", sans-serif;

}


#epilogue li:nth-child(1) {
  font-variation-settings: "wght" 100;
}
#epilogue li:nth-child(2) {
  font-variation-settings: "wght" 800;
}
#epilogue li:nth-child(3) {
  font-variation-settings: "wght" 300;
}
#epilogue li:nth-child(4) {
  font-variation-settings: "wght" 900;
}
#epilogue li:nth-child(5) {
  font-variation-settings: "wght" 500;
}




#gluten {
  font-family: "Gluten", sans-serif;

}
#gluten li:nth-child(1) {
  font-variation-settings: "wght" 600, "ital" -1;
}
#gluten li:nth-child(2) {
  font-variation-settings: "wght" 900, "ital" -1;
}
#gluten li:nth-child(3) {
  font-variation-settings: "wght" 400, "ital" -1;
}
#gluten li:nth-child(4) {
  font-variation-settings: "wght" 100, "ital" -1;
}
#gluten li:nth-child(5) {
  font-variation-settings: "wght" 300, "ital" -1;
}
#gluten li:nth-child(6) {
  font-variation-settings: "wght" 800, "ital" -1;
}

#trispace {
  font-family: "Trispace", sans-serif;
}
#trispace li:nth-child(1) {
  font-variation-settings: "wght" 200, "wdth" 110;
}
#trispace li:nth-child(2) {
  font-variation-settings: "wght" 800, "wdth" 75;
}
#trispace li:nth-child(3) {
  font-variation-settings: "wght" 400, "wdth" 80;
}
#trispace li:nth-child(4) {
  font-variation-settings: "wght" 600, "wdth" 125;
}

#sono, .sono {
  font-family: "Sono", sans-serif;
}

#sono li:nth-child(1) {
  font-variation-settings: "wght" 200, "mono" 0;
}
#sono li:nth-child(2) {
  font-variation-settings: "wght" 800, "mono" 1;
}
#sono li:nth-child(3) {
  font-variation-settings: "wght" 600, "mono" 0;
}
#sono li:nth-child(4) {
  font-variation-settings: "wght" 300, "mono" 1;
}
#sono li:nth-child(5) {
  font-variation-settings: "wght" 700, "mono" 0;
}
#sono li:nth-child(6) {
  font-variation-settings: "wght" 500, "mono" 1;
}



#home a ul#anybody {
  -moz-animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
    animation: marquee 20s linear infinite;
}

#home a ul#imbue {
  -moz-animation: marquee 16s linear infinite;
    -webkit-animation: marquee 16s linear infinite;
    animation: marquee 16s linear infinite;
}
#home a ul#grandstander {
  -moz-animation: marquee 18s linear infinite;
    -webkit-animation: marquee 18s linear infinite;
    animation: marquee 18s linear infinite;
}
#home a ul#tourney {
  -moz-animation: marquee 15s linear infinite;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

#home a ul#epilogue {
  -moz-animation: marquee 17s linear infinite;
    -webkit-animation: marquee 17s linear infinite;
    animation: marquee 17s linear infinite;
}

#home a ul#gluten {
  -moz-animation: marquee 19s linear infinite;
    -webkit-animation: marquee 19s linear infinite;
    animation: marquee 19s linear infinite;
}

#home a ul#trispace {
  -moz-animation: marquee 23s linear infinite;
    -webkit-animation: marquee 23s linear infinite;
    animation: marquee 23s linear infinite;
}
#home a ul#sono {
  -moz-animation: marquee 16s linear infinite;
    -webkit-animation: marquee 16s linear infinite;
    animation: marquee 16s linear infinite;
}

#home a:hover ul#anybody,#home a:hover ul#sono, #home a:hover ul#imbue, #home a:hover ul#grandstander,  #home a:hover ul#tourney,  #home a:hover ul#epilogue, #home a:hover ul#gluten, #home a:hover ul#trispace {
      color: #fff;
      animation: none;
      -moz-animation: none;
      -webkit-animation: none;
}


      @-moz-keyframes marquee {
      0% {
      transform: translateX(0%);
      }
      100% {
      transform: translateX(-150%);
      }
      }
      @-webkit-keyframes marquee {
      0% {
      transform: translateX(0%);
      }
      100% {
      transform: translateX(-150%);
      }
      }
      @keyframes marquee {
      0% {
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%)
      }
      100% {
      -moz-transform: translateX(-150%);
      -webkit-transform: translateX(-150%);
      transform: translateX(-150%);
      }
      }



#typepage {
  background: white;
}


/*------ type test styles ----- */


p#testarea {
    margin: 0 auto 0;
    line-height: 1;
    text-align: center;
  padding: 0 2.5vw 10vw;
    z-index: 2;
    position: relative;
    font-weight: normal;
outline: none;
font-variant-ligatures: no-common-ligatures;
}

p#testarea:focus, p#testarea:active, .control input:focus, .control input:active {
  outline: none;
}



/*@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
   p#testarea {-webkit-text-stroke: 0.008em;}
}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
   p#testarea #blink {-webkit-text-stroke: 0;}
}*/

#hero {
min-height: 90vh;
}

#hero img {
  display: block;
}

#tagline {
  position: relative;
  text-align: center;
  color: white;
  font-size: 26px;
  top: -1vw;
  font-family: "Sono";
  font-variation-settings: "MONO" .5;
}

#controls {
display: block;
  margin: 0;
  padding: 20px 4vw 0;
  z-index: 2;
  text-align: left;
  bottom: 30px;
  width: 74%;
  position: sticky;
  position: -webkit-sticky;
  height: 140px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  left: 9vw;
  border-radius: 20px;
  filter: invert();
}

#controls .other {
  display: none !important;
}

.trispace {
  font-variant-ligatures: no-common-ligatures;

}

#controls span {
  position: relative;
  margin-left: 5px;
  font-variation-settings: "wght" 600;
  text-align: left;
	display: inline-block;
  width: 30%;
	margin: 0 3% 0 0;
	font-size: 12px;
  text-transform: uppercase;
  line-height: 2;
  padding: 3px 0;
  letter-spacing: 2px;
  font-family: "Epilogue", sans-serif;
}

.stylecontrols {
  position: absolute;
  left: 140px;
  top: 7px;
  /*transform: scale(.8);*/
  opacity: 0;
}



#styles li.active .stylecontrols{
  opacity: 1;
}

.stylecontrols label {
  font-variation-settings: "wght" 700;
  text-align: left;
	display: inline-block;
	margin: 0 7px 0 0;
	font-size: 11px;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 0;
  letter-spacing: 3px;
  font-family: "Sono", sans-serif !important;
}

#controls span:nth-child(3n+4) {
  margin-right: 0;
}

#controls label {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-right: 10px;
  font-family: "Sono";
}

#controls input {
    margin: 0 auto;
	box-shadow: none;
  width: 100%;
}

input[type="range"] {
border: 1px solid black /*pink*/;
height: 0px;
position: relative;
top: -1px;
-webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 25px;
  width: 25px;
  background: #000;
  cursor: pointer;
  margin-top: -0px;
  border-radius: 25px;
  border: 10px solid #000;
}

.stylecontrols input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 17px;
  width: 17px;
  background: #000;
  cursor: pointer;
  margin-top: -0px;
  border-radius: 25px;
  border: 10px solid #000;
}

input {
cursor: ew-resize;
}

input:focus, input:active {
  outline: none;
}

input[type=range]::-webkit-slider-thumb  {
cursor: ew-resize;
}
input[type=range]::-moz-range-thumb{
cursor: ew-resize;
}

input[type=range]::-ms-thumb {
cursor: ew-resize;

}


#playground.container {
  display: block;
  background: black;
  color: white;
  min-height: 100vh;
}

.testerspot .container {
  padding: 10vw 0 0;
}

#anybody #testarea {
  font-size: 213px;
  font-variation-settings: "wght" 490, "slnt" 0, "wdth" 62;
  line-height: 1;
}

#epilogue #testarea {
  font-size: 133px;
  font-variation-settings: "wght" 100, "slnt" 0;
}

#grandstander #testarea {
  font-size: 150px;
  font-variation-settings: "wght" 400, "slnt" -8;
}

#gluten #testarea {
  font-size: 153px;
  font-variation-settings: "wght" 360, "ital" 0;
}

#testarea.trispace {
  font-size: 100px;
  font-variation-settings: "wght" 300, "wdth" 115;
}

#tourney #testarea {
  font-size: 173px;
  font-variation-settings: "wght" 700, "wdth" 100, "ital" 1;
}

#testarea.sono {
  font-size: 100px;
  font-variation-settings: "wght" 300, "MONO" 0;
}

#imbue #testarea {
  font-size: 190px;
  font-variation-settings: "wght" 500, "opsz" 80;
}


.info h4 a {
display: inline-block;
text-decoration: none;
margin: 1.5em 0;
font-size: 13px;
text-transform: uppercase;
padding: .75em 1em;
font-weight: normal;

font-variation-settings: "wght" 450, "wdth" 130;
letter-spacing: 2px;
cursor: pointer;
z-index: 500;
}



.testerspot.defaultcolor /*bg change */ {
background: #fff;
color: #000000;
}

.defaultcolor p#testarea  {
  color: #fff;
}

.testerspot.defaultcolor span  {
color: #000;
}

.testerspot.defaultcolor input[type="range"] {
border: 1px solid #000 /*pink*/;
background: #000;
color: #f1f1f1;
}

.testerspot.defaultcolor input[type=range]::-moz-range-track {
    background: #000;
}

.testerspot.defaultcolor input[type=range]::-moz-range-thumb {
  background: #000 !important;
  border-radius: 0px;
  border: 0px;
}

.testerspot.defaultcolor input[type=range]::-webkit-slider-thumb {
background: #000;
}


p strong {
}

p em {
}

#backstory  {
  padding-top: calc(20px + 2.5vw);
}

#backstory p {
  font-size: calc(18px + 2.5vw);
  margin: 0 20px 20px;
  padding: .5em 0;
  line-height: 1.25;
  width: auto;
  font-weight: 500;
  letter-spacing: 0.0em;
}




#backstory a {
text-align: center;
}

#jumpto {
  position: sticky;
  top: -1px;
  padding: .75em;
  background: black;
  color: white;
  z-index: 4;
  text-align: center;
  font-family: "Sono";
  font-variation-settings: "wght" 500, "MONO" .5
}

#jumpto li {
  list-style-type: none;
  display: inline-block;
}

#jumpto li#top {
  position: absolute;
  right: 10px;
  top: 20px;
}

#jumpto li#top  a {
font-size: 30px;
  font-weight: 700;
  position: relative;
  top: -11px;
}

#jumpto li a {
  text-decoration: none;
  padding: .5em;
  color: #999;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: 350;
  font-variant-caps: small-caps;
}

article hr {
  background: none;
  height: 3em;
  border: 0px;
}

#jumpto li a:hover, #jumpto li.active a {
color: white;
}

#styles {
  margin: 0 1vw;
  padding: 5vw 2vw 2vw;
  background: white;
}

#styles ul li {
  padding: 4vw 0;
  border-top: 2px solid black;
  position: relative;
}
#styles ul li:focus, #styles ul li span:focus, #styles ul li span:active {
outline: none;
}

#styles ul li em {
  display: inline-block;
  width: 130px;
  font-family: "Sono";
  font-size: 13px;
  text-transform: capitalize;
  font-variation-settings: "wght" 550, "MONO" 0;
  vertical-align: top;
  letter-spacing: -0.04em;
  line-height: 1.35;
  position: absolute;
  top: 1em;
}

#styles ul li.italic em:after {
  content: "Italic";
  padding-left: 6px;
}

#styles ul li span {
  line-height: 1.05;
  font-size: 50px /*calc(30px + 3vw)*/;
  display: block;
  margin-left: 140px;
}

#styles.anybody ul li span {
  font-size: 70px;
}

#styles ul li:nth-child(1) span {font-weight: 100;
}
#styles ul li:nth-child(2) span {font-weight: 200;
}
#styles ul li:nth-child(3) span {font-weight: 300;
}
#styles ul li:nth-child(4) span {font-weight: 400;
}
#styles ul li:nth-child(5) span {font-weight: 500;
}
#styles ul li:nth-child(6) span {font-weight: 600;
}
#styles ul li:nth-child(7) span {font-weight: 700;
}
#styles ul li:nth-child(8) span {font-weight: 800;
}
#styles ul li:nth-child(9) span {font-weight: 900;
}

#styles.sono ul li:nth-child(1) span {font-weight: 200;}
#styles.sono ul li:nth-child(2) span {font-weight: 300;}
#styles.sono ul li:nth-child(3) span {font-weight: 400;}
#styles.sono ul li:nth-child(4) span {font-weight: 500;}
#styles.sono ul li:nth-child(5) span {font-weight: 600;}
#styles.sono ul li:nth-child(6) span {font-weight: 700;}
#styles.sono ul li:nth-child(7) span {font-weight: 800;}

#styles.sono .labelital, #styles.sono .stylecontrols .ital {
  display: none;
}

#styles.sono ul#normal.sans li span{
  font-variation-settings: "MONO" 0;
}



#styles ul#italics li span {font-variation-settings: "ital" 1;}
#styles ul#italicreverse li span {font-variation-settings: "ital" -1;}

#styles ul#slanted.grandstander li span {font-variation-settings: "slnt" -15;}
#styles ul#slanted.epilogue li span {font-variation-settings: "slnt" -12;}

#styles ul#normal li span {font-variation-settings: "wdth" 100;}

#styles ul#condensed li span {font-variation-settings: "wdth" 75;}
#styles ul#semicondensed li span {font-variation-settings: "wdth" 87.5;}

#styles ul#ultracondensed li span {font-variation-settings: "wdth" 50;}
#styles ul#semiexpanded li span {font-variation-settings: "wdth" 112.5;}

#styles ul#expanded li span {font-variation-settings: "wdth" 125;}
#styles ul#extraexpanded li span {font-variation-settings: "wdth" 150;}
#styles ul#ultraexpanded li span {font-variation-settings: "wdth" 200;}



#styles ul#normal li.italic span {font-variation-settings: "wdth" 100, "slnt" -10;}

#styles ul#ultracondensed li.italic span {font-variation-settings: "wdth" 50, "slnt" -10;}

#styles ul#condensed li.italic span {font-variation-settings: "wdth" 75, "slnt" -10;}

#styles ul#expanded li.italic span {font-variation-settings: "wdth" 125, "slnt" -10;}

#styles ul#extraexpanded li.italic span {font-variation-settings: "wdth" 150, "slnt" -10;}


#styles.imbue ul#normal li span {font-variation-settings: "opsz" 50;}

#styles.imbue ul#opsz100 li span {font-variation-settings: "opsz" 100;}
#styles.imbue ul#opsz10 li span {font-variation-settings: "opsz" 10;}





#styles.tourney ul#condensed li.italic span {font-variation-settings: "wdth" 75, "ital" 1;}
#styles.tourney ul#normal li.italic span {font-variation-settings: "wdth" 100, "ital" 1;}

#styles.tourney ul#expanded li.italic span {
font-variation-settings: "wdth" 125, "ital" 1;
}



.defaultcolor .info h2 a {
color: #000;
text-decoration: none;
box-shadow: 0px 1px 0px #ff3145
}

.defaultcolor .info h4 a {
color: #ff3145;
border: 1px solid #ff3145;
}

.defaultcolor .info h2 a:hover {
color: #ff3145;
box-shadow: 0px 3px 0px #ff3145

}

.defaultcolor .info h4 a:hover {
border: 1px solid #ff3145;
background: #ff3145;
color: #fff;
}




#colors {
position: absolute;
right: 80px;
top: 30px;
z-index: 100;
}

#colors li {
list-style-type: none;
text-indent: -33333em;
width: 22px;
height: 22px;
margin: 0 5px;
display: inline-block;
background-size: cover;
border: 2px solid rgba(0,0,0,0);
}



input[type=range]:-moz-focusring{
    outline: 0px solid white;
}



ul#align {
display: inline-block;
position: relative;
top: -4px;
}

#testarea.alignleft {
text-align: left;
}
#testarea.alignright {
text-align: right;
}
#testarea.aligncenter {
text-align: center;
}

#align li {
list-style-type: none;
display: inline-block;
text-indent: -99999em;
width: 28px;
height: 28px;
background-size: cover;
cursor: pointer;
border: 2px solid rgba(0,0,0,0);
border-radius: 8px;
}

.defaultcolor #align li.active {
border: 2px solid #000;
cursor: default;
}


.defaultcolor #alignleft {
background: url("testerimgs/control-alignleft-black.svg") no-repeat 50% 50%;
}
.defaultcolor #alignright {
background: url("testerimgs/control-alignright-black.svg") no-repeat 50% 50%;
}
.defaultcolor #aligncenter {
background: url("testerimgs/control-aligncenter-black.svg") no-repeat 50% 50%;
}





#case, #alts, .case, .alts, .ital, .defaultcolor .liga {
display: inline-block;
width: 28px;
height: 28px;
text-indent: -9999em;
cursor: pointer;
position: relative;
top: -4px;
}

.case, .alts, .ital  {
  width: 28px;
  height: 20px;
}

.stylecontrols input, .stylecontrols a {
  margin-right: 45px;
}

.stylecontrols .case, .stylecontrols .alts, .ital, .stylecontrols .liga {
  position: relative;
  top: -2px;
}


.defaultcolor #case, .stylecontrols .case {
background: url("testerimgs/controls-caseset-black.svg") no-repeat 50% 50%;
background-size: contain;
border: 2px solid #000;
border-radius: 8px;
}

.defaultcolor #case.active , .stylecontrols .case.active{
background: url("testerimgs/controls-caseset-white.svg") no-repeat 50% 50%;
background-color: #000;
}


.defaultcolor #alts, .stylecontrols .alts {
background: url("testerimgs/controls-alternates.svg") no-repeat 50% 50%;
background-size: contain;
border: 2px solid #000;
border-radius: 8px;

}

.defaultcolor #alts.active, .stylecontrols .alts.active {
background: url("testerimgs/controls-alternates-white.svg") no-repeat 50% 50%;
background-color: #000;
}

.stylecontrols .ital {
background: url("testerimgs/controls-ital-black.svg") no-repeat 50% 50%;
background-size: contain;
border: 2px solid #000;
border-radius: 8px;

}

 .stylecontrols .ital.active {
background: url("testerimgs/controls-ital-white.svg") no-repeat 50% 50%;
background-color: #000;
}

.defaultcolor .liga, .stylecontrols .liga {
background: url("testerimgs/controls-liga-black.svg") no-repeat 50% 50%;
background-size: contain;
border: 2px solid #000;
border-radius: 8px;

}

.defaultcolor .liga.active, .stylecontrols .liga {
background: url("testerimgs/controls-liga-white.svg") no-repeat 50% 50%;
background-color: #000;
}


#testarea.cased, #styles ul li.cased span {
text-transform: uppercase;
}

#testarea.alternates, #styles li.alternates span {
  font-feature-settings: "ss01";
}

#testarea.ligaon, p.liga  {
  font-variant-ligatures: common-ligatures;
  font-variant-ligatures: discretionary-ligatures;
}



#testarea.tapped #blink{
display: none;
}

.blinking-cursor {
  position: relative;
  top: -10px;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: rgba(100,100,100,0.5);
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: rgba(100,100,100,0.5);
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: rgba(100,100,100,0.5);
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: rgba(100,100,100,0.5);
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: rgba(100,100,100,0.5);
  }
}

#case:active, #alts:active, #align li:active, #colors li:active, #alts.active {
/*transform: scale(.92);*/
}

.testerspot {
max-width: 100vw;
position: relative;
}

#hometest div {
  padding: 0 2vw;
  display: none;
  color: white;
  font-family: "Epilogue", sans-serif;
  letter-spacing: 1px;
  position: relative;
  z-index: 3;
  width: 96vw;
  vertical-align: top;
}

#hometest div.active {
  display: block;
}

#pics {
  position: relative;
  height: 92vh;
  overflow: hidden;
  background-color: #ff4122; /*red color*/
}

#infopage {
  background-color: #ff4122;
  color: black;
  font-family: "Sono";
  font-variation-settings: "MONO" .5;
}

#infopage a {
  color: black;
}

#infopage a:hover {
      text-decoration: underline white;
}

#infopage p {
  font-size: calc(16px + 2vw);
  letter-spacing: -0.035em;
      padding: 0 12vw 5vw 2vw;
      line-height: 1.3;
      font-weight: 370;
}

#infopage h2 {
  font-size: 7.75vw;
  padding: 2em 1em 2em 20px;
  line-height: .9;
  text-transform: uppercase;
  font-weight: 800;
  font-variation-settings: "slnt" -12;
  letter-spacing: -0.05em;
}

#bgimage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  width: 100%;
  min-height: 92vh;
  text-align: center;
}

#newbackground {
  z-index: 4;
position: absolute;
display: inline-block;
padding: 7px 15px;
font-size: 13px;
font-variation-settings: "wght" 600, "slnt" -12;
text-transform: uppercase;
line-height: 1.2;
top: 30px;
right: 30px;
background: black;
color: #ff4122;
font-family: "Epilogue", sans-serif;
text-decoration: none;
transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#newbackground:hover {
  transform: scale(1.1);
  color: white;
}
#newbackground:active {
  transform: scale(.9);
}

#pics h1 {
  text-align: center;
  font-size: 16px;
  color: white;
  font-family: "Epilogue", sans-serif;
  font-variation-settings: "wght" 350;
  margin: 10vw auto 5.5vw;
  position: relative;
  z-index: 3;
}

#pics h2 {
  text-align: center;
  margin: 0 auto 40px;
  letter-spacing: 0px;
  line-height: 1.15;
 white-space: normal;
 height: 1.1em;
 font-size: 12vw;
}

#pics #typeTrispace h2 {

}

.inactive {
  opacity: .8;
  filter: grayscale();
  cursor: no-drop;
}

#hometest h2:hover {
  transform: scale(1.1);
  transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);
}


#hometest {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}



#pics h3 a {
  color: white;
  padding: 7px;
  transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);

}

#pics h3 a:hover {
  color: black;
  background: white;
}


.tourney {
  font-family: "Tourney", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 800, "ital" 1;
}

 .anybody {
   font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 50, "slnt" 0;
}

.gluten {
  font-family: "Gluten", sans-serif;
  font-variation-settings: "wght" 600, "ital" -1;
}

.trispace {
  font-family: "Trispace", sans-serif;
  font-variation-settings: "wght" 200, "wdth" 115;
}

.imbue {
  font-family: "Imbue", sans-serif;
  font-variation-settings: "wght" 800, "opsz" 50;
}

.grandstander {
  font-family: "Grandstander", sans-serif;
  font-variation-settings: "wght" 900, "slnt" -12;
}

.epilogue {
  font-family: "Epilogue", sans-serif;
  font-variation-settings: "wght" 100;
}

#pics h2:active, #pics h2:focus {
  outline: none;
}

#pics h3 {
  color: white;
  text-align: center;
  font-size: 20px;
  font-variation-settings: "wght" 600;

}

#pics ul {
  max-width: 270px;
  margin: 40px auto;
  column-count: 2;
  line-height: 2;
}

/*transitions on delay*/

#pics h1, #pics h2, #pics #fontswap, #pics div ul, #home, .fontpage {
  opacity: 0;
  transition: all .2s ease-in-out;
}

#pics h2, #pics div ul {
  transition-delay: .2s;
}
#pics h1, #pics .fontpage {
  transition-delay: .4s;
}
#pics #fontswap {
}
 {
  transition-delay: .5s;
}

 {
 transition-delay: .6s;
}

 {
  transition-delay: .7s;
}

 {
  transition-delay: .8s
}

h1.huge {
  font-size: 20vw;
  background: white;
  font-weight: 600;
  text-indent: .25em;
}
#pics.visible h1, #pics.visible h2, #pics.visible #fontswap, #pics.visible ul, #home.visible, #pics.visible .fontpage  {
opacity: 1;
}

.blogarchive {
  background: white;
  color: #ff4122;
  font-family: 'Epilogue';
font-size: 3vw;
margin: 0 auto;
padding: 1em;
line-height: 1.5;
}

.blogarchive ul, .blogarchive li {
  margin: 0 auto;
  padding: 0;
  display: inline;
}

.blogarchive a {
  color: #ff4122;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: .45em 0.5em .3em;
  font-variation-settings: "wght" 600, "slnt" -12;
  font-feature-settings: "ss01";
  transition: all .2s ease-in-out;
  line-height: 1.3;
  margin-right: .5em;
}

.home .blogarchive a {
  text-align: left;
}

.blogarchive a:hover {
 background: #ff4122;
 color: black;
 font-variation-settings: "wght" 600, "slnt" 0;

 }

 .blogarchive h4 {
   text-align: center;
   text-transform: uppercase;
   font-variation-settings: "wght" 700;
font-size: 20px;
letter-spacing: 9px;
/*animation: fontswitch 7s infinite linear;*/
 }


 #homemerch {
position: relative;
background-color: #ff4122;
font-family: "Epilogue", sans-serif;

 }

 #buyhat {
     position: absolute;
     z-index: 2;
     display: block;
     text-align: center;
     top: 20vw;
     left: calc(50% - 12vw);
     border: 2px solid rgba(0,0,0,1);
     width: 22vw;
     padding: 1.5vw;
     transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 a#buyhat:hover {
   transform: scale(1.1);
   border: 6px double rgba(0,0,0,1);

 }

 #buyhat span {
font-variant-caps: small-caps;
 }

#homemerch small {
  font-variation-settings: "wght" 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
margin-bottom: 2.25em;
}

 #homemerch h4 {
   font-variation-settings: "wght" 700;
   font-size: 3vw;
   margin: .3em auto .6em;
   line-height: .5;

 }

 #homemerch p {
   font-size: 15px;
   font-variation-settings: "wght" 400;
   margin-bottom: .5em;
 }

 #homemerch img {
   max-width: 100%;
   mix-blend-mode: screen;
   display: block;
   line-height: .5;
 }

 #homemerch a {
   color: black;
   text-decoration: none;
 }

 p#typehint {
   position: absolute;
   background: rgba(0,0,0,0.5);
   color: white;
   font-size: 14px;
   font-variation-settings: "wght" 500, "slnt" -12;
   padding: 1em;
   display: block;
   width: 300px;
text-align: center;
left: calc(50% - 150px - 1em);
margin-bottom: 3vw;
 }

 #pics #fontswap {
  font-family: "Epilogue";
  font-variation-settings: "wght" 600;
  position: absolute;
  z-index: 4;
  width: 180px;
  top: 29vw;
  left: calc(50% - 90px);
  text-align: center;
  column-count: 1;
  font-size: 18px;
  background-image: url("/img/selectarrow.svg");
  background-position: 97% 12px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);

 }
#pics #fontswap:hover {
  background-color: black;
}

#pics #fontswap.clicked {
   background: black;
   background-position: 97% -20px;
   cursor: pointer;
 }

 .fontpage {
   text-align: center;
   color: black;
  width: 200px;
  display: block;
  padding: 10px 10px 7px;
  font-size: 14px;
  font-variation-settings: "wght" 700;
  border: 2px solid #ff4122;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  background: #ff4122;
  margin: 40px auto;
  letter-spacing: 1px;
  transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);
 }

#pics.visible .fontpage {
  transition-delay: 0s;
}

 .fontpage:hover {
background: none;
border: 6px double white;
transform: scale(1.1);
color: white;
 }


  #fontswap li {
    display: none;
    color: #ff4122;
    cursor: pointer;
    padding: 3px 5px;
    transition: .2s all cubic-bezier(0.34, 1.56, 0.64, 1);

  }

#fontswap.clicked li {
  display: block;
  cursor: pointer;
}


 #fontswap li.active {
   color: white;
   display: block;
 }



#fontswap.clicked li:hover {
background: #ff4122;
color: black;
}

footer {
  padding: 3vw 2.5vw 10vw;
  background: black;
  color: #999;
  font-family: "sono";

}

footer ul {
  display: inline-block;
  vertical-align: top;
  width: calc(25% - 20px);
  margin-right: 20px;
  line-height: 1.5;
}

footer ul:last-child {
  width: calc(40% - 20px);
  line-height: 1.75;
}

footer ul a {
  text-decoration: none;
  display: block;
  padding: 4px;
  font-size: 15px;
  color: #999;
}

footer ul a:hover {
  color: white;
}

#features {
  background: white;
  color: black;
  margin: 0 auto;
  padding: 5vw 2vw;
}

#figures, #otherfeatures, #morefeatures {
  border-top: 2px solid black;
  padding: 3vw 0 0;
}

#figures {
  margin: 0  2vw;
  width: 43vw;
  display: inline-block;
  vertical-align: top;
}
#otherfeatures {
  margin: 0 2vw;
  width: 43vw;
  display: inline-block;
  vertical-align: top;
}

#otherfeatures p.imbue {
  font-size: 5.5vw;
margin: .35em auto;
font-variation-settings: "wght" 100, "opsz" 60;
}



#otherfeatures h3.anybody {
  font-size: 6vw;
  font-weight: 700;
  font-variation-settings: "wdth" 60;
  letter-spacing: 1.41vw;
  line-height: 1.2;
}


#otherfeatures h3.tourney {
  font-size: 5.3vw;
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  line-height: 1.2;
}


#otherfeatures h3.trispace {
font-variation-settings: "wdth" 90;
font-size: 3.5vw;
line-height: 1.5;
}

#otherfeatures h3.sono {
  font-size: 3vw;
}

#otherfeatures h3 span {
  width: 1em;
  display: inline-block;
  text-align: center;
}

#otherfeatures h5.arrows.sono {
  margin: 1em auto;
  font-size: 3vw;
  letter-spacing: 0;
}




#otherfeatures h3.epilogue {
  font-size: 4vw;
  font-weight: 400;
  letter-spacing: 2.21vw;
  line-height: 1;
  margin-top: .3em;
}


#otherfeatures h3.grandstander {
  font-weight: 700;
  font-size: 5vw;
  letter-spacing: 0.75vw;
  line-height: 1.2;
  font-variation-settings: "slnt" 0;
}

#otherfeatures h3.gluten {
  font-weight: 700;
  font-size: 4.5vw;
  letter-spacing: 0.75vw;
  line-height: 1.2;
  font-variation-settings: "slnt" 0;
}



#otherfeatures p.liga.grandstander {
    font-size: 3vw;
    font-weight: 400;
    font-variation-settings: "slnt" -7;
    margin: .35em auto;
}



#otherfeatures h3.alternates {
  font-feature-settings: "ss01";
}

#otherfeatures h3.alternates.trispace {
  margin-bottom: .5em;
}

#typepage #features hr {
  background: none;
  border: none;
  height: 3vw;
}

#otherfeatures h4.smallcaps {
  font-variant-caps: small-caps;
  font-size: 50px;
  margin: .3em auto .7em;
  letter-spacing: 0;
  line-height: 1.3;
  font-variation-settings: "wdth" 150;
  font-weight: 200;
}

#otherfeatures h4.smallcaps.trispace {
  font-variation-settings: "wdth" 110;
      line-height: 1.2;
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 1em;
}

#otherfeatures h4.smallcaps.imbue {
  font-size: 60px;
}

#otherfeatures h4.smallcaps.epilogue {
  font-weight: 300;
  line-height: 1.3;
  font-size: 44px;
}

#otherfeatures h4.smallcaps.offcaps {
  font-variant-caps: normal;
}

#otherfeatures h5.arrows {
  margin: 1em auto;
  font-size: 3.3vw;
  letter-spacing: calc(0px + .6vw);
}

#otherfeatures h5.arrows.trispace {
  margin: .25em auto;
    font-size: 50px;
    letter-spacing: calc(0px + .2vw);
    font-weight: 300;
    font-variation-settings: "wdth" 90, "wght" 900;
    line-height: 1;
}

#features label {
  padding-right: 5px;
}
#features label, #features a  {
  font-family: "Sono", sans-serif !important;
  font-weight: 600;

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: inline-block;
}
#figures h3.anybody {
  font-size: 19.5vw;
  font-weight: 300;
  font-variation-settings: "wdth" 50;
  letter-spacing: 1.5vw;
  line-height: .8;
  margin-bottom: .1em;
}

#figures h3.tourney {
  font-size: 8vw;
  font-weight: 300;
  font-variation-settings: "wdth" 75;
  letter-spacing: 1.1vw;
  line-height: .8;
  margin-bottom: .3em;
}

#figures h3.grandstander {
  font-size: 7.5vw;
font-weight: 600;
letter-spacing: .05em;
line-height: 1;
margin-bottom: .1em;
font-variation-settings: "slnt" 0;
}

#figures h3.gluten {
  font-size: 7.45vw;
font-weight: 600;
letter-spacing: .05em;
line-height: 1;
margin-bottom: .1em;
font-variation-settings: "ital" -1;
}

#figures h3.epilogue {
  font-size: 7.95vw;
font-weight: 600;
letter-spacing: .05em;
line-height: 1;
margin-bottom: .3em;
}

#figures h3.trispace {
  font-size: 5.85vw;
  font-variation-settings: "wdth" 95;
font-weight: 300;
letter-spacing: .05em;
line-height: 1;
margin: .25em auto;
}

#figures h3.sono {
  font-size: 5.85vw;
  font-variation-settings: "MONO" 1;
font-weight: 300;
letter-spacing: .05em;
line-height: 1;
margin: .25em auto;
}

#otherfeatures h3.alternates.sono {
  font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05";
  margin-bottom: 1em;
}



#figures h3.imbue {
  font-size: 11.2vw;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  margin-bottom: .1em;
  font-variation-settings: "wght" 400, "opsz" 100;
}

#figures p {
  font-size: 40px;
      word-break: break-all;
      font-variation-settings: "wdth" 150;
      letter-spacing: 16px;
      margin: .5em 0 1.5em 0;
      line-height: 1.4;
}

#figures a, #otherfeatures a {
  color: black;
  display: inline-block;
  cursor: pointer;
  padding: 5px 3px;
  color: #999;
}
#figures a:hover, #otherfeatures a:hover {
  border-bottom: 1px solid #999;
}

#figures a.active, #figures a.active:hover, #otherfeatures a.active, #otherfeatures a.active:hover {
  color: black;
  border-bottom: 1px solid black;
}

#figures p.tabular {
  font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';
}

#figures p.tabular.imbue {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

#backstory, #styles {
  margin: 3vw auto ;
}

#playground {
  margin: 0 auto;
}

#typepage hr {
  height:3vw;
  background: none;
  border: 0px;
}


p#fractions {
  font-feature-settings: "frac";
      font-size: 3.5vw;
      margin: .25em 0 .5em;
      word-spacing: .25em;
      letter-spacing: 0;
}

p#fractions.trispace {
  font-feature-settings: "frac";
  font-size: 3.2vw;
  margin: .25em 0 .5em;
  word-spacing: 0;
  letter-spacing: 0;
}

#figures p#lining.trispace {
  font-size: 30px;
}

p#fractions.grandstander {
  font-size: 5vw;
}

p#fractions.gluten {
  font-size: 6vw;
}

p#fractions.epilogue {
  font-size: 5vw;
}

p.symbols {
      margin: 1.5em 0 1em;
      font-variation-settings: "wdth" 110;
}

#features p span {
  display: inline-block;
      padding: .1em .25em 0;
      width: 1em;
      text-align: center;
      margin: 0 0 .25em 0;
      border: 1px solid rgba(0,0,0,0);
      font-size: 35px;
      line-height: 1.3;
      font-weight: 300;
      border-radius: 15px;
}

#features p span.hover {
  transform: scale(2.2);
  position: relative;
background: rgba(255,255,255,0.95);
  cursor: crosshair;
  box-shadow: 0px 5px 50px rgba(0,0,0,0.25)

}

#morefeatures {
  margin: 2vw;

}
a#smallcapsswitch.active {
  content: "on";
}

section#download {
  background: #ffffff;
  padding: 10vw 0;
  width: 75%;
  display: flex;
  margin: 0 auto;
}

#download p {
  font-size: 16px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.0;
  font-family: "Sono";
  font-variation-settings: "MONO" .5;
}

#download div, #download ul {
  width: 45%;
  margin: 0 auto;
  display: inline-block;
  vertical-align: top;
}

#download h3 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 auto 1em;
  font-family: "Sono";
  font-variation-settings: "MONO" .5;
}

#download h3 span {
  font-weight: 300;
}

#download p a {
  color: #ff4122;
  text-decoration: underline;
}
#download li a {
  background: #ff4122;
  color: #fff;
  padding: 1.4em 1em 1.2em;
  font-size: 16px;
  display: block;
  width: 300px;
  margin: .5em auto;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 4px solid #ff4122;
  font-family: "Sono";
  font-variation-settings: "MONO" .5;
  border-radius: 20px;

}
#download li a:hover {
  background: white;
  transform: scale(1.1);
  border: 4px solid black;
  color: black;
}

.inactive {
  opacity: .8;
  filter: grayscale();
  cursor: no-drop;
}

#download ul {
  text-align: center;
}

#download li {
  display: inline-block;
   margin: 0 1em;
}

#download li a.inactive:hover {
  transform: scale(1);
}



article {
  background: white;
  padding: 0 2vw 6vw;
  font-size: 25px;
  line-height: 1.5;
}

article h1 {
  font-size: 5vw;
  font-style: normal;
  letter-spacing: 0;
  font-weight: 650;
  font-variation-settings: "slnt" -12;
  font-feature-settings: "ss01";
}

#blognav {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
}

hr#top {
min-height: calc(20vh + 10vw);
border: none;
margin: 0 -2vw 5vw;
}

article #blognav h1 {
  width: calc(55% - 2vw);
  margin: 14vh auto 3vh;
  line-height: 1.03;
  color: black;
}

article #blognav.offscreen h1 {
  color: white;
}

h1.bigfonts a{
  color: black;
  text-decoration: none;
}

h1.bigfonts a:hover {
  text-decoration: none;
  color: #ff4122;
}

#infopage small {
  display: block;
  text-align: center;
  padding: 2em;
}
h1.bigfonts {
  font-size: 13vw;
  line-height: 1;
  font-feature-settings: normal;
}
h1.bigfonts .anybody {
  font-variation-settings: "wdth" 60;
  font-weight: 400;
}
h1.bigfonts .epilogue {
  font-variation-settings: "wght" 400;
}

h1.bigfonts .imbue {
  font-variation-settings: "opsz" 50;
  font-weight: 400;
}
h1.bigfonts .tourney {
  font-variation-settings: "wdth" 125;
  font-weight: 700;
}
h1.bigfonts span {
  display: block;
  text-align: center;
}

article #blognav.offscreen {
position: fixed;
top: 0;
background: black;
color: white;
}

article #blognav.offscreen h1 {
font-size: 18px;
margin: 20px auto 0;
}

.meta {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
width: calc(55% - 2vw);
margin: .2em auto 1em;
display: block;
}

.offscreen .meta {
  font-size: 11px;
}


article img {
  display: block;
  margin: 2vw auto 1em;
  height: auto;
  max-width: 90%;
}

article p, article ul, article ol, article h2, article h3  {
  width: 55%;
  margin: 0 auto 1em;
  font-weight: 300;
}

article ul li {
  list-style-type: disc;
      margin: .5em 1em;
      padding-left: .25em;
      font-size: 22px;
      font-weight: 330;
      font-variation-settings: "slnt" -12;
      font-feature-settings: "ss01";
}

article ol li {
  list-style-type: decimal;
      margin: .5em 1em;
      padding-left: .25em;
      font-size: 22px;
      font-weight: 330;
      font-variation-settings: "slnt" -12;
      font-feature-settings: "ss01";
      letter-spacing: .25px;
}
#emailblurb {
  text-align: center;
  display: block;
  margin: 0 auto 0;
  padding: 2em;
  font-variation-settings: "slnt" -12;
  font-feature-settings: "ss01";
  color: #666;
  line-height: 1.3;
  background: #eee;
  clear: both;
}

#emailblurb a {
  color: black;
  color: #666;
}

#emailblurb a:hover {
  color: #ff4122;
}

.home #emailblurb {
  display: none;
}

article a:hover, #backstory a:hover {text-decoration: underline black;}


#styles.imbue .labelalt, #styles.imbue a.alts, #styles.imbue .labelital, #styles.imbue a.ital, #styles.gluten .labelital, #styles.gluten a.ital, #styles.epilogue .labelital, #styles.epilogue a.ital, #styles.trispace .labelital, #styles.trispace a.ital   {display:none;}




iframe {
  display: block;
  margin: 1em auto;
}

article .alignright {
  float: right;
    margin: 1em 5vw;
    clear: right;
    display: block;
    text-align: right;
}

small.caption {
  font-size: 14px;
  text-transform: uppercase;
  font-variation-settings: "ital" 1;
  color: #555;
  margin: -.5em 5vw 2em;
  letter-spacing: .5px;
  text-align: center;
  display: block;
}

article h2 {
  font-weight: 700;
  clear: both;
  margin: .5em auto;
  font-size: calc(16px + 2vw);
}

code {
  font-family: "trispace";
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  padding: 1em;
  font-size: 18px;
  background: #eee;
  display: block;
  margin: 2em auto;
  width: 50%;
}

#menuoverlay {
  position: fixed;
  top: -100vh;
}


#menuoverlay.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: black;
  color: white;
  padding: calc(5vw);
  border: 20px solid #ff4122;
}

#menuoverlay ul {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}

#menuoverlay ul li h4 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 450;
  margin: 20px 5px 10px;
  letter-spacing: 2px;
  color: #fff;
  font-family: "Sono";
}
#menuoverlay ul li a {
  font-size: calc(3vw + 2vh);
  text-decoration: none;
  display: block;
  padding: 5px;
}

#menuoverlay ul li a:hover {
  color: white;
}


#closeoverlay {
  font-size: 100px;
  position: absolute;
  top: -20px;
  left: 0px;
  cursor: pointer;
  padding: 15px;
  line-height: .8;
  display: block;
}

#closeoverlay:hover {
  color: white;
}


.grandstander .stylecontrols .ital, .grandstander .stylecontrols .labelital {
  display: none;
}


#controls .mobile{
  display: none;
}
#controls .desktop{
  display: inline-block;
}

#ptwbadge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 90px;
  height: 90px;
  z-index: 4;
  display: block;
}

#ptwbadge img {
  width: 100%;
}

#ptwbadge:hover {
  transform: scale(1.1)
}


#newstuff {
 color: #eee;
 font-size: calc(18px + 4vw);
 padding: 2em 1em;
 letter-spacing: -0.00em;
 font-family: "Anybody";
 font-variation-settings: "wdth" 55, "wght" 300, "slnt" -10;
 text-transform: uppercase;
}

#newstuff h3 {
  font-variation-settings: "wdth" 150, "wght" 700;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 3em;
  text-align: center;

}


#backstory.anybody {
font-variation-settings: "wdth" 130, "wght" 800, "slnt" 0;
letter-spacing: -0.02em

}

#backstory.epilogue, #backstory.imbue {
letter-spacing: -0.02em
}

#backstory.gluten {
font-variation-settings: "wght" 800, "ital" -1;
line-height: 1;
letter-spacing: -0.02em
}

#backstory.grandstander {
font-variation-settings: "wght" 400;
line-height: 1.2;
}

#backstory.sono {
font-variation-settings: "wght" 700, "MONO" 0;
line-height: 1.2;
}

#backstory.tourney {
font-variation-settings: "wght" 900, "wdth" 110;
line-height: 1.2;
}

#backstory.trispace {
font-variation-settings: "wdth" 80, "wght" 300;
line-height: 1.2;
letter-spacing: -0.04em;
}



::selection {
  color: white;
  background: black;
}

/*---responsiveness-----
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v------------
-----------v----------*/

@media only screen and (max-width:900px) {

#nav {
  position: static;
}

#otherfeatures p.liga.grandstander {
  font-size: 32px;
  line-height: 1.2;
}

#controls .mobile{
  display: inline-block;
}
#controls .desktop{
  display: none;
}

#tagline {
  top: 0;
}

#playground.container {
  min-height: auto;
}

#controls {
  border-radius: 0px;
}

.alignright, small.caption  {
  float: none;
    margin: 1em auto;
    text-align: center;
}


#homemerch small {
line-height: 2;
}

article p, article ul,  article ol, article h2, article h3  {
width: 96%;
}

article, article li {
  font-size: 18px;
}

#home {    padding: 20px 0px;
}

#newbackground, #nav::before, #nav::after, body::before, body::after   {
  display: none;
}
#pics {
  height: auto;
  min-height: 80vh;
}

#bgimage {

left: -100vh;
mix-blend-mode: multiply;
width: 200vh;
max-width: 200vh;
}

#pics h2 {
  font-size: 48px;
  margin-bottom: 100px;
}
#pics ul {
font-size: 16px;
text-align: center;
column-count: 1;
width: auto;
}

.blogarchive {
  font-size: 7vw;
}

.blogarchive a {
      font-variation-settings: "wght" 600, "ital" 0;
      margin-right: auto;
}

.blogarchive h4 {
      font-size: 12px;
      margin: 30px auto;
}

#buyhat {
    top: 10vw;
    left: calc(50% - 42vw);
    border: 2px solid rgba(255,255,255,1);
    width: 80vw;
    padding: 1.5vw;
}

#homemerch p {
  font-size: 13px;
}

#homemerch h4 {
  font-size: 11vw;
}

#mission p {
  column-count: 1;
font-size: 20px;
padding: 15px;
}

article ol li {
  font-size: 18px;
}

footer {
  font-size: 12px;
  padding: 20px;
}

footer ul, footer ul:last-child{
  display: block;
  width: auto;
  padding: 0;
}

.blogarchive a {
  text-align: center;
  display: block;
}

.blogarchive ul, .blogarchive li {
  display: block;
}

#pics h1 {
  margin: 50px auto;
}
#pics #fontswap {
top: 190px;
}

article #blognav h1, .meta {
width: auto;
}

article #blognav.offscreen h1 {
  color: white;
}

article #blognav h1 {
  font-size: 25px;
  margin: 1em auto .5em;
}

#nav a#logo {
  background-size: 70px auto;
    width: auto;
    text-align: center;
    height: 40px;
}

ul.banner li {
  font-size: 13vw;
line-height: 1.25;
}

.info {
position: static;
width: auto;
padding: 20px;
}

body.info {
  padding: 0px;
}

#controls {
padding: 20px 0;
width: 100vw;
text-align: center;
}

#colors, ul#align  {
display: inline-block;
}

#colors {
margin-left: 50px;
}

#colors li {
margin: 0;
}


#controls input {
top: 8px;
}

p#testarea {
padding: 20px 20px 40px;
}

#gluten #testarea, #testarea.trispace, #testarea.sono, #anybody #testarea, #epilogue #testarea, #grandstander #testarea,  #trispace #testarea, #fonts #testarea, #tourney #testarea, #imbue #testarea {
font-size: 47px;
}

#controls span {
  width: 40.1%;
      margin: 0 2%;
      font-size: 12px;
}

#controls span:nth-child(3n+4) {
  margin: 0 2%;
}

#controls span.control.other {
width: auto;
margin: 1em auto 0;
}
#controls span.control.other label {
  display: none;
}

#controls label {
  top: 10px;
}

.info li {
display: block;
margin: 0 auto 10px;
width: 100%;
}

.info h2 a {
display: block;
}

.info h4 a {
display: block;
text-align: center;
}

.defaultcolor .info h2 a {
border-bottom: 0px;
border-top: 0px solid #0f0b07;
padding-top: 10px;
}

.blackpink .info h2 a {
border-bottom: 0px;
border-top: 0px solid #ff3145;
padding-top: 10px;
}

.pinkwhite .info h2 a {
border-bottom: 0px;
border-top: 0px solid #fff;
padding-top: 10px;
}

#tagline {
  font-size: 17px;
margin: 2em auto;
}

#jumpto li a {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0px;
  padding: 2px;
  font-weight: 500;
}

#backstory p {
  font-size: 16px;
      margin: 0 auto;
      padding: .5em 20px;
      line-height: 1.35;
      width: auto;
}

#styles {
  padding: 20px;
}

#styles ul li em {
position: static;
width: auto;
font-size: 13px;
}

#jumpto {
  padding: 10px 0;
}

.testerspot .container, #backstory, #styles, #features {
  padding-top: 20vw;
}

footer ul a {
padding: 5px 0px;
}

#styles ul li span {
  margin: 10px 0 20px;
}

.stylecontrols {
  display: none !important;
}

#styles ul li span, #styles.anybody ul li span {
  font-size: 30px;
  line-height: 1;
}

#figures {
  width: auto;
  display: block;
  padding: 20px 0 0;
}

#figures h3 {
  font-size: 45vw;
    text-align: center;
}


#figures p {
  margin: 15px auto 25px;
  font-size: 30px;
}

#figures p#fractions {
  font-size: 30px;
text-align: left;
}


#otherfeatures {
  width: auto;
  display: block;
  border-top: 0px;
}


#otherfeatures h4.smallcaps {
  font-size: 30px;
}

#features p span {
  font-size: 22px;
  padding: .25em;
  margin: .25em;
}

#controls {
  margin: 0 auto
}


#download li {
  display: block;
   margin: 0 auto;
}

hr#top, #jumpto li#top, #controls .control.tracking, #controls .control.leading{
  display: none;
}

#blognav {
  position: static;
  background: white;
  color: black;
  padding: 11px;
}

#download div, #download ul, section#download{
  width: auto;
  display: block;
}

section#download {
 padding: 10vw 20px;
}

#download li a {
  font-size: 13px;
display: block;
width: auto;
}

#download h3 {
  font-size: 35px;
}

img, iframe {
  max-width: 100%;
}

code {
  width: auto;
}

#download ul {
  margin: 1em auto;
}

#hero {
min-height: auto;
}

h1.huge {
  padding: .5em 0 0;
}


#otherfeatures h3, #figures h3{
  font-size: 45px !important;
  text-align: left;
  font-weight: 400;
  font-variation-settings: "wght" 400;
}

#otherfeatures h5.arrows {
  font-size: 30px;
}

#infopage h1 {display: none;}
#infopage p {
    column-count: 1;
    padding: 0 20px 5vw;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0.01em;
  }

#emailblurb {
  padding: 1.5em;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
  footer ul a  {
    line-height: 1;
  }

  #closeoverlay {
    font-size: 70px;
    left: calc(50% - .5em);
    padding: 0 15px;
    top: -7px;
  }

  #menuoverlay.active {
    padding: 20px;
    border: 10px solid #ff4122;
  }

  #infopage h2 {
    font-size: 29px;
padding: 1em 7vw;
  }

  #menuoverlay .info li {
    margin: 0 auto;
  }

  #menuoverlay ul {
    width: auto;
    display: block;
  }

  #menuoverlay ul li a {
    padding: 2px 5px;
  }
p#fractions.gluten {
  font-size: 50px;
}
#figures h3.grandstander, #figures h3.anybody, #figures h3.imbue {
  margin-bottom: .5em;
}

#ptwbadge {
  position: absolute;
  bottom: auto;
  top: 20px;
}

}