:root {
  --bg: #ffffff;
  --base: #f6f6f6;
  --highlight: #e6e6e6;
  --highlight2: #e6e6e6;
  --highlight3: #ffd700;
  --highlight4: #e1dddd;
  --text: #000000;
  --text2: #282a2c;
  --text3: #414447;
  --text4: #cccccc;
  }

@media (prefers-color-scheme: dark) {
   :root {
     --bg: #000000;
     --base: #191919;
     --highlight: #292929;
     --highlight2: #2e2e2e;
     --highlight3: #0000ff;
     --highlight4: #3c3a3a;
     --text: #ffffff;
     --text2: #dad6d1;
     --text3: #5b5b57;
     --text4: #2e2e2e;
   }
  }

body, input, select, .text{
  color: var(--text);
  }

body{
  background-color: var(--bg);
  }


::selection {
  color: #b8b8b8;
}

* {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

.tester--input,
.menu--information,
.text,
.menu--contact,
.build--number{
  -webkit-touch-callout: text;
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}

.build--number{
  display: ;
}

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

::-moz-selection {
  background: rgba(200,200,200,0.1);
}

*{
	box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none;
}

p{
	margin: 0;
  padding-bottom: 20px;
  color: var(--text2);
}

.text,.title, .desc, .instruct--title{
  color: var(--text2);
}

a{
  text-decoration: none;
  color: var(--text2);
}

a:hover{
  text-decoration: none;
  color: var(--text);
}

.align--center{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.align--left{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.align--center--x{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}


.border--box{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.section--menu,
.section--instruct,
.section--checkout,
.section--checkout--confirm{
	height: 100%;
	position: absolute;
	top: 0;
  transition: transform .8s;
}

.section--menu{
	width: 50px;
  position: fixed;
	right: 0px;
	z-index: 100;
  overflow: hidden;
  background: var(--bg);
}

#blackpencil {
  color: #dad6d1;
  background: #191919;
}

.section--menu.section--info--open{
  border-right: 0px solid #a0a0a0;
}

.section--instruct,
.section--checkout,
.section--checkout--confirm{
	width: 400px;
  height: 100%;
	right: 50px;
	z-index: 0;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--bg);
}

.section--checkout,
.section--checkout--confirm{
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

.section--checkout.enabled,
.section--checkout--confirm.enabled{
  opacity: 1;
  pointer-events: auto;
}

.section--tester{
	width: calc(100% - 450px);
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: var(--bg);
	z-index: 1;
  transition: width 0.5s, left 0.5s, transform .8s;
}

.section--tester.load{
  width: calc(100% - 50px);
  left: 0px;
}

.section--tester .header{
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  z-index: 1;
}

.section--tester .footer{

}


.header .align--right{
  position: absolute;
  right: 20px;
}

.footer{
	width: 100%;
	height: 48px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.menu{
  width: 100%;
  margin-top: 10px;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--text);
  z-index: 10;
  text-align: center;
	line-height: 30px;
  transition: opacity .15s;
  opacity: 1;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu--list{
  width: 100%;
  height: 30px;
  cursor: pointer;
  position: relative;
  left: 0px;
  transition: left 0.25s;
}

.menu--list:nth-child(2){
  transition: left 0.25s 0.1s;
}

.menu--list:nth-child(3){
  transition: left 0.25s 0.2s;
}

.menu--list:nth-child(4){
  transition: left 0.25s 0.3s;
}

.menu--list:nth-child(5){
  transition: left 0.25s 0.4s;
}

.menu--list:nth-child(6){
  transition: left 0.25s 0.5s;
}

.load .menu--list{
  left: 50px;
}


.menu--circle{
  position: absolute;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  transition: .3s;
}

.menu--on .menu--circle{
  background: var(--highlight2);;
}

.menu--title{
	position: fixed;
	width: 200px;
	text-align: left;
	color: var(--text);
  z-index: 10;
	right: 39px;
  top: 400px;
  transition: opacity .15s;
  white-space: nowrap;
	transform: rotate(90deg);
	transform-origin: right bottom ;
	opacity: 0;
  pointer-events: none;
}

.section--information{
  top: 0;
  height: 100%;
	width: calc(100% - 50px);
  position: fixed;
	left: 100%;
	background: var(--bg);
	z-index: 50;
  overflow: hidden;
	transition: transform .8s;
}

.section--info--open{
  transform: translate3d(calc(-100vw + 50px), 0, 0);
}

.section--info--open .menu{
	opacity: 0;
  pointer-events: none;
}

.menu--nav li{
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 30px;
  cursor: pointer;
}

.menu--contact{
	position: absolute;
  bottom: 0px;
}

.menu--info{
  left: 0px;
  height: 100%;
  width: 100%;
	color: white;
  position: absolute;
  overflow: hidden;
}

.menu--wrapper{
  height: 100%;
  width: calc(100% / 3);
  float: left;
  padding: 10px 10px 10px 0px;
  position: relative;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu--section{
  height: auto;
  width: 100% ;
	color: var(--text);
  padding: 20px;
  background: var(--base);
  margin: 0px 10px 10px 0px;
  border-radius: 20px;
  position: relative;
}

.menu--section:last-of-type{
  border-right: 0px solid white;
}

.menu--info .title{
  padding-bottom: 40px;
}


.menu--logo,
.menu--logo--information{
  text-align: right;
  width: 200px;
	color: var(--text);
	position: absolute;
	left: 35px;
	bottom: 203px;
	transform: rotate(90deg);
	transform-origin: left top 0;
	opacity: 1;
	transition: opacity .15s;
  cursor: pointer;
}

.menu--logo--information{
	opacity: 0;
}

.menu--close.checkbox{
  position: absolute;
  opacity: 0;
  top: 15px;
  width: 30px;
  height: 30px;
  left: 10px;
}

.section--info--open .menu--close{
  opacity: 1;
  pointer-events: auto;
}

.omsetype--logo{
	color: white;
	font-size: 40px;
	position: absolute;
	left: 7px;
	bottom: 0px;
}

.instruct--title{
  transform: translate(0, -1px);
  display: block;
}

.instruct--block{
	width: 100%;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
	padding: 20px 20px 20px 20px;
  border-radius: 20px;
  margin: 10px 0px 10px 0px;
  background: var(--base);
}

.instruct--block:last-child{
  border: 0;
}

.instruct--block p{
  margin-top: 20px;
}

.instruct--block--open{
	transform: translate(0, 0);
	transition: transform 0.5s;
	display: block;
	z-index: 1;
}

.instruct--block--close{
	transform: translate(0, -100%);
	transition: transform 0.5s;
	display: block;
	z-index: 1;
}

.section--instruct .content{
	width: 100%;
	height: auto;
	position: relative;
}

.section--instruct {
	background: var(--bg);
}

.instruct--panel{
	width: 100%;
	height: auto;
	position: relative;
  cursor: default;
}
.instruct--panel.hide{
  height: 0;
  overflow: hidden;
  margin: 0;
}


.panel--order{
  border: 1px solid var(--highlight2);
  border-radius: 6px;
  margin-top: 0;
  margin-bottom: 30px;
}

.panel{
	width: 100%;
	position: relative;
}

.panel{
	width: 100%;
	position: relative;
}

.email--input{
  border: 1px solid var(--highlight2);
  border-radius: 6px;
  margin-bottom: 5px;
}

.instruct--panel.panel--download .panel:last-child,
.instruct--panel.panel--checkout .panel:last-child{
	transition: background 0.15s;
  background: var(--text);
  border-radius: 10px;
  color: var(--bg);
  margin-top: 5px;
}


.panel--purchase{
  border: 1px solid var(--highlight2);
}

.downloading.panel--download,
.button--download--pro.downloading{
  opacity: 0.7;
  cursor: progress;
}

.panel--download input::placeholder,
.panel--checkout input::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #949494;
  opacity: 1; /* Firefox */
}

.panel--download input:-ms-input-placeholder,
.panel--checkout input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  color: #949494;
}

.panel--download input::-ms-input-placeholder,
.panel--checkout input::-ms-input-placeholder{ /* Microsoft Edge */
  color: #949494;
}

.downloading form{
  pointer-events: none;
}

.panel--full{
	height: 400px;
}

.panel--half{
  height: 200px;
}

.panel--quarter{
	height: 50px;
}

#instruct--6 .panel--quarter{
  margin-bottom: 10px;
}

.optical--alternate {
  margin-bottom: 5px;
}

.panel--quarter.panel--input{
	border: 0;
}

.weight--picker .panel input[type=range]{
	width: 260px;
}

.panel--header{
  width: 100%;
  margin-bottom: 5px;
}

.panel--title{
  margin-bottom: 40px;
}

.bar--align--left{
  left: 20px;
  padding: 12px;
  line-height: 24px;
  margin: 0;
  position: absolute;
  padding-left: 0px;
  color: var(--text2);
}

.licensee--confirm .bar--align--left, .eula--confirm .bar--align--left, .panel--italic .bar--align--left{
  left: 0px;
}


.wrapper--steps{
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

.step{
	width: 376px;
}

.alert {
  padding: 15px 20px;
  background-color: var(--highlight3);
  color: var(--text2);
  border-radius: 20px;
  height: 50px
}

.closebtn {
  margin-left: 15px;
  color: var(--text2);
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;

}

.alert a{
  border-bottom: none;
  font-weight: 650;
}

table{
	table-layout: fixed;
  border-spacing: 8px;
  /*  	border-collapse: collapse;  */
  border-collapse: separate;
}

.menu--section table{
	table-layout: fixed;
  border-spacing: 0px;
  border-collapse: collapse;
}

.wrapper--choose{
	width: 100%;
	height: auto;
	position: relative;
  margin: -8px;
  /*  	padding: 20px;  */
}

.wrapper--review{
	width: 100%;
	height: auto;
	position: relative;
  /*  	padding: 20px;  */
  border-spacing: 0px;
  border-collapse: collapse;
  color: var(--text2);
}

.wrapper--review{
  height: auto;
}

.wrapper--choose td,
.wrapper--review td{
	height: 175px;
  width: 175px;
	position: relative;
}

.wrapper--review td{
  height: 50px;
  padding: 15px;
  vertical-align: top;
}


.table--grid tr td:first-child{
  border-right: 1px solid var(--highlight2);
}

.table--grid tr td:first-child{
  border-right: 1px solid var(--highlight2);
}

.table--grid tr:first-child{
  border-top: 0px;
}

.table--grid tr{
  border-top: 1px solid var(--highlight2);
}


.choose--block{
	font-size: 145px;
	cursor: pointer;
	transition: background 0.15s;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
}

.choose--block.selected:hover .block--number{
	opacity: 1;
}

.choose--block.selected{
	background: var(--highlight);
  border-radius: 10px;
}

.choose--block:not(.selected):hover{
	border: 1px solid var(--highlight);
  border-radius: 10px;
}

.choose--block:not(.selected):hover .block--number{
	opacity: 1;
}

.choose--block .letter--lower{
  margin-top: -15px;
}

.block--number{
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 14px;
	color: var(--text2);
  opacity: 0;
}

.step--controller{
	width: 100%;
	height: 50px;
	position: relative;
	padding: 20px;
	background: var(--text2);
	table-layout: fixed;
	border-collapse: collapse;
}

.step--controller td{
  font-variation-settings: "wght" 75 !important;
}

.step--controller td,
.review--alternates td{
	position: relative;
	font-size: 20px;
	transition: background 0.15s, color 0.15s;
}

.step--controller td.selected{
	background: black;
	color: white;
}

#reversedRange {
  direction: rtl
}

input[type=text], input[type=email] {
  background: transparent;
  width: 90%;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: ew-resize;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.61), 0px 0px 0px rgba(13, 13, 13, 0.61);
  background: var(--highlight4);
  border-radius: 0px;
  border: 0px solid var(--text);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid var(--text2);
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: var(--highlight2);
  cursor: ew-resize;
  -webkit-appearance: none;
  margin-top: -7px;
}

.instruct--panel input[type=range]::-webkit-slider-thumb {
  background: var(--base);
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--text);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: ew-resize;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.61), 0px 0px 0px rgba(13, 13, 13, 0.61);
  background: var(--text);
  border-radius: 0px;
  border: 0px solid var(--text);
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid var(--text);
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: var(--highlight);
  cursor: ew-resize;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: ew-resize;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: var(--text);
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.61), 0px 0px 0px rgba(13, 13, 13, 0.61);
}
input[type=range]::-ms-fill-upper {
  background: var(--text);
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.61), 0px 0px 0px rgba(13, 13, 13, 0.61);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: var(--highlight);
  cursor: ew-resize;
  height: 2px;
}
.input input[type=range]::-ms-thumb {
  background: var(--highlight);
}
input[type=range]:focus::-ms-fill-lower {
  background: var(--text);
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--text);
}

.panel input[type=range]{
	width: 320px;
}

.panel--val{
	top: auto;
	bottom: 0px;
}

.input--slider{
	width: 100%;
  display: flex;
  margin-left: 0px;
  margin-top: -15px;
  transform: translate(-50%, calc(-50% + 0.5px));
}

.slider--top,
.slider--bottom{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.amount--input{
  text-align: center;
  width: 60px;
  height: 26px;
  border: 1px solid var(--highlight2) !important;
  background: var(--base);
  border-radius: 16px;
  margin-left: 10px;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.slider--top{
  left: auto;
  right: 0;
}

.instruct--selector{
  display: flex;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: 20px;
}

.instruct--selector .button{
  width: 43%;
  height: 40px;
  border: 0px solid #a0a0a0;
  background: var(--base);
  border-radius: 20px;
  font-size: 13px;
}

.selector--basic{
  margin-left: 5%;
  margin-right: 2%;
}

.selector--advanced{
  margin-left: 2%;
  margin-right: 5%;
}

.instruct--selector .button:not(.selected):hover{
  background: var(--highlight);
}

.instruct--selector .button.selected{
  background: var(--highlight);
}


.instruct--advanced,
.instruct--basic{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.instruct--advanced.selected,
.instruct--basic.selected{
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.interpolator--panel{
  height: auto;
  padding: 20px;
}

.input--grid{
  width: 100%;
  height: 360px;
  position: relative;
  background: var(--base);
  overflow: hidden;
  border-radius: 10px;
  transition: background 0.15s;
  border: 1px solid var(--highlight4);
}

.interpolator--selector{
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  background: none !important;
  border-radius: 10px;
}

.interpolator--selector .selector--right{
  width: 200px;
  height: 50px;
  position: relative;
  border-radius: 0 10px 10px 0;
  border: 1px solid var(--highlight2);
  background: var(--base);
}

.interpolator--selector .selector--left{
  width: 200px;
  height: 50px;
  position: relative;
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--highlight2);
  border-right: none;
  background: var(--base);
}

.interpolator--selector .selector--left .button-li{
  border-radius: 10px 0 0 10px;
}

.interpolator--selector .selector--right:hover,
.interpolator--selector .selector--left:hover{
  border: none !important;
}

.interpolator--selector .selector--left{
  width: 200px;
  height: 50px;
  position: relative;
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--highlight2);
  border-right: none;
  background: var(--base);
}

.interpolator--selector .selector--right .button-li{
  border-radius: 0 10px 10px 0;
}

.selector--left li:first-child{
  border-radius: 10px 0 0 0;
  border-top: 1px solid var(--highlight2) !important;
}

.selector--left li:last-child{
  border-radius: 0 0 0 10px;
}

.selector--right li:first-child{
  border-radius: 0 10px 0 0;
  border-top: 1px solid var(--highlight2) !important;
}

.selector--right li:last-child{
  border-radius: 0 0 10px 0;
}

.interpolator--selector .button{
  position: relative;
  width: 100% !important;
  height: 50px;
  background: var(--base);
  border: 1px solid var(--highlight2);
  border-top: none;
}

.dropdown .button.selected{
  background: var(--base) !important;
}

.dropdown .button:hover{
  background: var(--highlight) !important;
}

.axis--x, .axis--y{
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.axis--x .axis--line{
  width: 100%;
  height: 1px;
  position: absolute;
  background: var(--highlight4);
}

.axis--x span{
  position: absolute;
  left: 10px;
  top: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.axis--y span{
  position: absolute;
  left: 10px;
  bottom: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.axis--y .axis--line{
  height: 100%;
  width: 1px;
  position: absolute;
  background: var(--highlight4);
}

.grid--background{
  position: absolute;
  width: calc(100% + 2px);
  height: 362px;
  margin: -1px;
  border-spacing: inherit: 0px;
  border-collapse: collapse;
}

.grid--background td{
  width: 36px;
  height: 36px;
  border: 0.5px solid var(--highlight2);
  pointer-events: none;
}

.current--val{
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--highlight4);
  margin: -5px;
}

.dropdown--arrow {
  right: 16px;
  top: 50%;
  position: absolute;
  line-height: 0;
  pointer-events: none;
  transition: transform 0.0s;
  transform: translate(0, -50%);
}

.dropdown--arrow svg{
  width: 12px;
}

.dropdown.open .dropdown--arrow{
  transform: translate(0, -50%) rotate(180DEG);
}

.dropdown--content{
  height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  transition: height 0.0s;
  margin: 0;
  padding: 0;
  top: -50px;
  border-radius: 6px;
  text-align: left;
}

.interpolator--selector .dropdown:hover .dropdown--content{
  height: 350px;
}

.dropdown--content .button:hover{
  background: var(--highlight2);
}

.selector--left .dropdown--current{
  border-right: 0;
}

.selector--left .dropdown--content{
  width: calc(100%);
}

.dropdown .desc{
  left: 20px;
}

.advanced--val{
  height: auto;
  margin-top: 20px;
}

.advanced--val .text--bar{
  cursor: default !important;
  transition: background 0.5s;
}

.advanced--val .text--bar.saved{
  background: var(--highlight);
}

.button{
  cursor: pointer;
}

.panel .button{
  width: 26px;
  height: 26px;
  border: 1px solid var(--highlight2);
  background: var(--base);
  border-radius: 6px;
  padding: 1px;
}

#instruct--4 .button{
  top: 10px;
  right: 10px;
  border-radius: 50%;
  position: absolute;
}

.weight--add{
  margin-left: 5px;
}

.button--checkbox{
    width: 26px;
    height: 26px;
    border: 1px solid var(--highlight2);
    background: var(--highlight);
    border-radius: 50%;
    padding: 1px;
    position: relative;
    bottom: 0;
}

.weight--add:hover{
  background: var(--highlight2);
}

.weight--add span, .weight--remove span {
  height: 26px;
  font-size: 21px;
  font-weight: 300;
}

.weight--add span svg, .weight--remove span svg {
  width: 12px;
  height: 12px;
  top: 0;
  position: absolute;
}

.weight--remove{
  position: absolute !important;
  top: 0;
  right: 0;
  margin: 6px;
  padding: 3px;
  border-radius: 50% !important;
}

.weight--remove:hover{
  background: var(--highlight) !important;
}

.weight--remove span{
  pointer-events: none;
}

.weight--block,
.italic--block{
  width: 100%;
  height: 175px;
  position: relative;
  border: 1px solid var(--highlight);
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
	transition: background 0.15s;
	cursor: pointer;
}

.instruct--italic p{
  padding-bottom: 40px;
}

.weight--block:not(.selected):hover,
.italic--block:not(.selected):hover{
	background: var(--highlight);
}

.weight--block.selected,
.italic--block.selected{
	background: var(--highlight);

}

.panel--full,
.panel--half{
  transition: background 0.15s;
}

.panel--input input{
  cursor: ew-resize;
}


.weight--selector:hover .panel--half,
.terminal--selector:hover .panel--half,
.skew--selector:hover .panel--half,
.rnds--selector:hover .panel--half{
  background: var(--highlight);
}

.weight--picker:hover .panel--full{
  background: var(--highlight);
}

.review--left{
  width: 150px;
}

.review--right{
  width: auto;
}


.review--edit{
  position: absolute;
  right: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.wrapper--review tr:hover .review--edit{
  opacity: 1;
  pointer-events: auto;
}

.review--edit:hover{
  opacity: 0.5 !important;
  cursor: pointer;
}

.review--alternates{
  width: 247px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 0;
}

.review--alternates td{
  height: auto;
  position: relative;
}

.review--alternates tr:first-child td:last-child{
  border-right: 0;
}

.review--italics .review--left,
.review--italics .review--right,
.summary--weights .review--left,
.summary--weights .review--right{
  /*height: auto !important;*/
}

.review--weights .review--right,
.review--italics .review--right,
.summary--weights .review--right,
.summary--total .review--right,
.summary--licenses .review--right{
  padding: 0 !important;
}

.summary--italics, .summary--name, .summary--optical{
  display: none;
  border-top: 1px solid var(--highlight2);
  border-bottom: 0;
}
.summary--italics.enabled,
.summary--name.enabled,
.summary--optical.enabled {
  display: table-row;
}
.summary--italics td,
.summary--italics .text--bar,
.summary--name td,
.summary--name .text--bar,
.summary--optical td,
.summary--optical .text--bar{
  height: 50px !important;
  border-bottom: 0;
}
.summary--italics .review--right,
.summary--name .review--right,
.summary--optical .review--right {
  padding: 0 !important;
}

.text--bar{
  height: 50px;
  position: relative;
}
.text--bar--double{
  height: calc(50px + 1.5em);
}

.advanced--val .text--bar,
.review--weight.text--bar,
.review--italic.text--bar{
  height: 32px;
  top: 8px;
  border-bottom: 0px solid #a0a0a0;
  cursor: pointer;
}

.license--bar{
  cursor: default !important;
}

.advanced--val .text--bar:last-child,
.review--weight:last-child,
.review--italic:last-child{
  border: 0;
}

.text--bar .desc{
  left: 20px;
  top: 50%;
  position: absolute;
  transform: translate(0, -50%);
  width: calc(100% - 30px);
}

.panel--header .desc{
  left: 0;
}

.text--bar .align--right{
  left: auto;
  right: 15px;
  top: 50%;
  position: absolute;
  text-align: right;
  transform: translate(0, -50%);
}

.text--bar .align--left{
  left: 0px;
  top: 50%;
  position: absolute;
  text-align: right;
  transform: translate(0, -50%);
}

.panel--header .align--right{
  right: 0px;
}

.italics--exclude{
  display: none;
  padding: 10px;
}
.review--italics.disabled .italics--exclude{
  display: block;
}
.review--italics.disabled .review--left,
.review--italics.disabled .review--right{
  height: 150px !important;
}
.review--italics.disabled .review--italic{
  display: none;
}

.align--right{
  position: absolute;
}

.section--checkout .panel--download .panel--quarter,
.section--checkout .panel--checkout .panel--quarter{
  border: 1px solid var(--highlight2);
}

.licensee--confirm {
  border: none !important;
}

.licensee {
  display: none;
}

.section--checkout .panel--checkout .panel--header{
  border: 0px;
}

.section--checkout .button--hover{
  border-radius: 0px;
  border-bottom: 0px !important;
}

.panel--end {
  border-bottom: 1px solid var(--highlight2) !important;
}

#country {
  border-radius: 0px;
  background: none;
  color: var(--text2);
}

.top-radius {
  border-radius: 6px 6px 0 0 !important;
}

.bottom-radius {
  border-radius: 0 0 6px 6px !important;
  border-bottom: 1px solid var(--highlight2) !important;
}

.button--purchase {
  background: var(--text);
  border-radius: 10px !important;
}

.button--purchase input {
  color: var(--bg);
  background: none;
}

.open--eula:hover{
  text-decoration: underline;
}

.button--rename,
.button--checkout,
.button--download,
.button--download--pro{
  cursor: pointer;
  opacity: 0.7;
}

#custom--added {
  display: none;
}

#custom--added.enabled {
  display: block;
  color: var(--bg);
}

.button--rename input,
.button--download input,
.button--checkout input {
  width: 100%;
  height: 100%;
  position: absolute;
  background: transparent;
  color: var(--highlight);
  border: 0;
  outline: none;
}

.button--download--pro{
  background: var(--text);
  border-radius: 10px;
  color: var(--highlight);
}

.button--download--pro,
.button--return{
  margin: 20px 0;
}

.button--hover input{
  cursor: pointer;
}

.button--hover{
  border-radius: 6px;
}

.button--rename.enabled,
.button--download.enabled,
.button--checkout.enabled{
  opacity: 1;
}


.button--download.enabled input,
.button--checkout.enabled input{
  color: var(--highlight);
}

::placeholder {
  color: #b8b8b8;
  opacity: 1;
}

.panel input,
.panel select{
  border: 0;
  outline: 0;
}

.checkbox input[type="checkbox"] {
    opacity: 0;
    pointer-events: none;
}

.checkbox{
  width: 26px;
  height: 26px;
  top: 11px;
  right: 0px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--highlight2);
  background: var(--highlight);
}

.checkbox:hover{
  background: var(--highlight2);
}

.checkbox.enabled{
  background: var(--highlight);
}

.checkbox label {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}

.checkbox label svg,
.checkbox svg {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45DEG);
}

.checkbox input:checked + label {
  opacity: 1;
}

.panel--divide{
  width: calc(100% + 40px);
  left: -20px;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--highlight2);
  padding: 5px 0 0 0;
}

.spacer{
  margin: 30px 0 0 0;
}

.dropdown--license{
  border: 0;
  margin-bottom: 10px;
}

.dropdown--license .button{
  width: 100%;
  height: 49px;
}

.dropdown--license .dropdown--content .button{
  background: var(--base);
    border-radius: 0;
    border-bottom: 0;
}

.dropdown--license.active{
}

.error{
  color: red;
  margin-top: 10px;
  display: block;
}

.error a{
  color: red;
  border-bottom: 1px solid red;
}

.dropdown--license .dropdown--content .button:first-child{
  background: var(--base);
    border-radius: 6px 6px 0 0 !important;
}

.dropdown--license .dropdown--content .button:last-child{
  border-radius: 0 0 6px 6px !important;
  border-bottom: 1px solid var(--highlight)
}

.dropdown--license .dropdown--content .button:hover{
  background: var(--highlight);
}

.dropdown--license > .button{
  width: 100%;
  height: 100%;
}

.dropdown--license li span{
  left: 20px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
}

.dropdown--content li span{
  left: 20px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
}

.interpolator--selector .selector--left .dropdown--content{
  border-radius: 10px 0 0 10px;
}

.interpolator--selector .selector--right .dropdown--content{
  border-radius: 0 10px 10px 0;
}

.total--value{
  right: 15px;
  top: 50%;
  transform: translate(0px, -50%);
}

.checkout--header{
  position: relative;
}

.checkout--close{
  top: 50%;
  transform: translate(0, -50%);
  right: 0 !important;
}

#card--element{
  padding: 14px 20px;
}

select{
  border: none;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  height: 50px;
  background: var(--highlight);
  padding-left: 20px;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-position: right 20px top 53%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='15' height='15' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>");
  background-repeat:no-repeat;
}

select:focus {
  outline:0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  border: 0;
  transition: background-color 5000s;
  -webkit-text-fill-color: var(--text2) !important;
}

.download--pro span{
  white-space: nowrap;
}





/*TIP WINDOW*/

.tip{
  width: 26px;
  height: 26px;
  background: var(--highlight);
  border-radius: 50%;
  cursor: pointer;
}

.radiobox{
  width: 24px;
  height: 24px;
  border: 1px solid #a0a0a0;
  border-radius: 50%;
  cursor: pointer;
  left: 12px;
  top: 12px;
  position: absolute;
}

.tip:hover{
  background: var(--highlight2);
  border: 1px solid var(--highlight);
}


.tip.enabled{
  background: var(--highlight3);
  border: 1px solid var(--highlight3);
}

.draggable--container{
  top: 0;
  right: 0;
  padding: 10px;
  position: absolute;
  width: 100%;
  height: calc(100% - 52px);
}

.tip--window{
  top: 5px;
  right: 5px;
  position: absolute;
  width: 400px;
  height: auto;
  background: var(--base);
  border-radius: 10px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, height 0.2s;
}

.tip--window .panel--header{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.tip--window .panel--header.text--bar--double{
  height: calc(50px + 1.5em);
}
.tip--window .checkbox{
  right: 17px;
}

.tip--window.enabled{
  opacity: 1;
  pointer-events: auto;
}

.tip--window .desc{
  left: 75px;
  width: calc(100% - 125px);
}

.tip--icon{
  width: 45px;
  border-radius: 50px;
  height: 20px;
  background: var(--highlight3);
  font-size: 13px;
  margin-left: 20px;
}

.tip--contents{
  position: relative;
  width: 100%;
  height: auto;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.tip--contents.selected{
  opacity: 1;
}

.tip--contents .panel--header{
  position: relative;
  pointer-events: none;
}

.tip--diagram .letter--zoom,
.letter--xray{
  width: 100%;
  height: 100%;
  border: 1px solid #a0a0a0;
  position: relative;
  background: var(--highlight2);
}

.tip--diagram{
  height: 380px;
  width: 400px;
  padding: 0 20px 0 20px;
}

.tip--text{
  height: auto;
  padding: 20px 20px 20px 20px;
  color: var(--text2);
  line-height: 1.4;
}

.tip--window .button{
  border: 1px solid #a0a0a0;
  border-radius: 50%;
}

.tip--controller{
  position: absolute;
  bottom: 10px;
  display: flex;
  right: 20px !important;
  margin-top: -5px;
}

.tip--controller span{
  padding: 5px;
}

.letter--zoom,
.letter--xray{
  overflow: hidden;
}

.letter--xray > .big--letter:before{
  content: " ";
  position: absolute;
  display: block;
  height: 1ex;
  bottom: 84px;
  left: -200px;
  width: 600px;
  border: 1px dashed #a0a0a0;
  z-index: 10;
}

.letter--xray > .big--letter:after{
  content: " ";
  position: absolute;
  display: block;
  bottom: 330px;
  left: -200px;
  width: 600px;
  height: 5px;
  border-bottom: 1px dashed #a0a0a0;
  border-top: 1px dashed #a0a0a0;
  z-index: 10;
}

.letter--xray > .letter--bottom:before{
  content: " ";
  position: absolute;
  display: block;
  bottom: 82px;
  left: -200px;
  width: 600px;
  height: 1ex;
  border: 1px dashed #a0a0a0;
  z-index: 10;
}

.letter--xray > .double--letter:before{
  content: " ";
  position: absolute;
  display: block;
  bottom: 58px;
  left: -200px;
  width: 600px;
  height: 1ex;
  border: 1px dashed #a0a0a0;
  z-index: 10;
}

.letter--xray > .double--letter:after{
  content: " ";
  position: absolute;
  display: block;
  bottom: 251px;
  left: -200px;
  width: 600px;
  border-bottom: 1px dashed #a0a0a0;
  z-index: 10;
}

.letter--xray.zoomed > .big--letter:before{
  display: none;
}

.letter--xray.zoomed > .big--letter:after{
  display: none;
}

.xray--viewer{
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  position: absolute;
  overflow: hidden;
  border: 1px dashed #a0a0a0;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
  background: var(--highlight2);
  transform: translate(-50%, -50%);
}

.letter--xray .big--letter{
  text-align: center;
  top: 50%;
  font-size: 350px;
  width: 400px;
}

.serif--letter{
  text-align: center;
  top: 20%;
  font-size: 1000px;
  width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -950px !important;
  margin-left: 60px !important;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  font-family:  "Universal Serif 1", "Universal Serif 2";
  font-variation-settings: "wght" 600, "cnts" 50, "aprt" 0, "wdth" 50, "strs" 50, "srfs" 50;
}

.terminal--letter{
  text-align: center;
  font-size: 500px;
  width: 400px;
  position: absolute;
  left: 10%;
  top: 60%;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  font-family:  "Universal Serif 1", "Universal Serif 2";
  font-variation-settings: "wght" 800, "cnts" 25, "aprt" 0, "wdth" 100, "strs" 50, "srfs" 50;
}

.spur--letter{
  text-align: center;
  top: 20%;
  font-size: 600px;
  width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -280px !important;
  margin-left: 40px !important;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}


.letter--xray.zoom--wrapper .big--letter{
  transition: font-variation-settings 2s;
}

.xray--viewer .big--letter{
  transform: translate(-50%, -50%) scale(2);
  left: 50%;
  top: 50%;
}

.letter--bottom{
  margin-top: -50px !important;
}

.letter--mid{
  margin-top: -30px;
}

.xray--viewer .letter--bottom{
  margin-top: -100px !important;
}

.xray--viewer .letter--mid{
  margin-top: -60px !important;
}

.letter--xray .big--letter.double--letter{
  font-size: 250px;
  letter-spacing: -0.0204em;
}

.zoom--wrapper{
  border: 0;
}

.zoom--wrapper.zoomed{
  transform: scale(3.18);
}

.letter--ends{
  display: none;
}



#tip--1a .zoom--wrapper{
  transform-origin: 25.9% 78.3%;
}
#tip--1a .zoom--wrapper.zoom--alt{
  transform-origin: 25.8% 52%;
}
#tip--1a .zoom--wrapper .ends--max{
  display: block;
}



#tip--1b .zoom--wrapper{
  transform-origin: 76% 30.6%;
}
#tip--1b .zoom--wrapper.zoom--alt{
  transform-origin: 77.3% 75.4%;
}
#tip--1b .zoom--wrapper .ends--min{
  display: block;
}



#tip--1c .zoom--wrapper{
  transform-origin: 25.8% 52%;
}
#tip--1c .zoom--wrapper.zoom--alt{
  transform-origin: 50% 58%;
}
#tip--1c .zoom--wrapper .letter--ends{
  display: block;
}



#tip--1d .zoom--wrapper{
  transform-origin: 64.4% 76.2%;
}
#tip--1d .zoom--wrapper.zoom--alt{
  transform-origin: 32.4% 32.4%;
}
#tip--1d .zoom--wrapper .ends--min{
  display: block;
}



.letter--ends .big--letter{
  /*-webkit-text-stroke: 1px #a0a0a0;*/
  color: transparent;
}

.letter--ends .big--letter.end--fill{
  -webkit-text-stroke: 0px;
  color: #00000029;
}

.change{
  opacity: 0;
}

.ll, .lr{
  position: absolute;
  height: 500px;
  width: 1px;
  border-right: 1px dashed #a0a0a0;
  top: 0;
}

.ll{
  left: 5.5em;
}

.lr{
  left: 8.48em;
}

.letter--zoom .val{
  position: absolute;
  z-index: 1;
  padding: 10px;
}

.letter--xray.zoomed{
  background: transparent;
}

.tip--diagram .grid--img{
  z-index: 0;
  position: absolute;
  width: 200%;
  height: 200%;
  margin: -1px -1px;
}

.xray--viewer .grid--img{
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  margin: -6px 0 0 0;
}

.xray--viewer .grid--img.letter--bottom{
  margin: 0 0 0 0 !important;
}

.xray--viewer .grid--img.double--letter{
  margin: -9px 0 0 0 !important;
  width: 360px;
  height: 360px;
}

.recommended:before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffd700;
  right: 0px;
  top: 0;
  border-radius: 50%;
  margin: 15px;
}









/*TYPE TESTER*/

.load .tester--input{
  font-size: calc(22vw - 30px);
}

.tester--input{
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 80px 20px 80px 20px;
    line-height: 1em;
    outline: none;
    overflow: scroll;
    transition: all 0.5s;
    scrollbar-width: none;
    -ms-overflow-style: none;  // IE 10+
}

.glyph--sheet{
    display: none;
    font-size: 120px;
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 80px 20px 80px 20px;
    line-height: 1em;
    outline: none;
    overflow: scroll;
    transition: all 0.5s;
    scrollbar-width: none;
    -ms-overflow-style: none;  // IE 10+
}

.flex-grid {
	display: flex;
	flex-wrap: wrap;
}

.flex-grid-item {
	height: 200px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 33.3333%;
	flex-basis: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
  position: relative;
  border: 1px solid var(--highlight2);
  margin-right: -1px;
  margin-bottom: -1px;
}

.blank {
	height: 0;
  border: 0px;
  margin-right: -1px;
  margin-bottom: -1px;
}

.flex-grid-item p {
  font-size: 12px;
  color: var(--highlight2);
  font-family: var(--font);
  font-weight:400;
}

.folio--top {
  top: 10px;
  position: absolute;
}

.folio--bottom {
  bottom: -10px;
  position: absolute;
}







/* CONTROLS */

#size--block{
	padding: 10px;
	position: absolute;
  width: 300px;
	height: 100%;
	top: 0;
	left: 100px;
	border-right: 0px solid #a0a0a0;
  border-bottom: 0px solid #a0a0a0;
}

#control--block{
  padding: 10px;
  position: absolute;
  width: 590px;
  height: 100%;
  top: 0;
  left: 408px;
}

#content--block{
  padding: 10px;
  position: absolute;
  width: 350px;
  height: 100%;
  top: 0;
  right: 0;
  border-left: 0px solid #a0a0a0;
  border-bottom: 0px solid #a0a0a0;
}

#opentype--block{
  padding: 10px;
  position: absolute;
  width: 90px;
  height: 100%;
  top: 0;
  left: 0;
  border-right: 0px solid #a0a0a0;
  cursor: pointer;
}

#italic--toggle .control--text{
  margin-left: -1px;
}

.controls{
  position: absolute;
  display: flex;
  width: 100%;
  height: 26px;
  left: 0;
  justify-content: space-around;
  padding-right: 5px;
}

.hide{
  display: none;
}

.invert{
  filter: invert(1);
}

.contentblock65{
  width: 65px !important;
  right: 3px !important;
}

#size--block .controls{
  border-radius: 15px;
  background: var(--highlight2);
  margin-left: 5px;
  margin-right: 5px;
}

.load.tester--controls{
  transform: translate(0, 50px);
}

.tester--controls{
  transition: transform 0.5s;
  transform: translate(0, 1px);
  z-index: 1;
}

.tester--controls .button, .button{
  position: relative;
  bottom:0;
  width:26px;
  height:26px;
}

.tester--controls .button:not(#letterspacing--button):not(#lineHeight--button):not(#black--white):not(.text--box):hover{
  color: var(--text);
}

#control--size--slider{
  top: 50%;
  left: 50%;
  width: calc(100% - 80px);
  margin-left: -10px;
  margin-top: 0;
  position: absolute;
}

#control--size--slider .slider--top,
#control--size--slider .slider--bottom{
	padding: 0 10px;
}

#control--size--slider .slider--bottom{
	text-align: right;
	width: auto;
}

#control--size--slider .slider--top{
	width: 50px;
}

.control--text.slider--bottom{
  left: 10px;
}

.control--text.slider--top{
  right: 10px;
}

.parent svg path{
  fill: var(--text);
}

#black--white {
  height: 26px;
  width: 26px;
  background: var(--highlight2);
  border-radius: 13px;
}

#black--white .white--half{
  position: absolute;
  top: 5px;
  left: 5px;
transform: translateX(8px);
height: 16px;
width: 8px;
border-radius: 0px 8px 8px 0px;
background: var(--bg);
}

#black--white .black--half{
  position: absolute;
  top: 5px;
  left: 5px;
height: 16px;
width: 8px;
border-radius: 8px 0px 0px 8px;
background: var(--text);
}

.auto--container, .optical--container {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto--container .tabs {
  display: flex;
  position: relative;
  background-color: var(--highlight2);
  border-radius: 26px;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 50px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  font-size: 13px;
  line-height: 10px;
  color: var(--text3);
}

.tabs.clicked--on {
    color: var(--text) !important;
}

.optical--container .tabs {
  display: flex;
  position: relative;
  background-color: var(--highlight2);
  padding: 2px;
  border-radius: 22px;
}

.optical--container .tabs * {
    z-index: 2;
}

.optical--container input[type=radio] {
    display: none;
}

.optical--container .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 70px;
    border-radius: 22px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    font-size: 13px;
    line-height: 10px;
}

.optical--container label {
    color: var(--text3);
}

.optical--container input[type=radio]:checked+label {
    color: var(--text);
}

.optical--container input[id=radio-1]:checked~.glider {
    transform: translateX(0);
}

.optical--container input[id=radio-2]:checked~.glider {
    transform: translateX(100%);
}

.optical--container .glider {
    position: absolute;
    display: flex;
    height: 22px;
    width: 70px;
    background-color: var(--highlight4);
    z-index: 1;
    border-radius: 22px;
    transition: 0.25s ease-out;
}

.toggle-button-container {
  display: flex;
  align-items: center;
}

.toggle-button-label {
  display: inline-block;
  height: 26px;
  position: relative;
  width: 26px;
}

.toggle-button-label .toggle-button {
  display: none;
}

.button--square{
  background: var(--highlight2);
  width: 26px;
  border-radius: 14px;
}

.clicked--on {
  background: var(--highlight4) !important;
}

#vCenter--toggle img{
	width: 19px;
}

.vCenter--on{
	height: auto;
	top: calc(50% - 90px);
	transform: translateY(calc(-50% + 50px));
  overflow: visible !important;
}


#align--buttons{
  width: 84px;
  display: flex;
  justify-content: center;
  background: var(--highlight2);
  border-radius: 14px;
}

#align--buttons .right--align, #align--buttons .center--align,
#align--buttons .left--align{
  height: 26px;
  width: 28px;
}

#align--buttons .right--align{
  border-radius: 0 14px 14px 0;
  border-right: 1px solid transparent;
}

#align--buttons .left--align{
  border-radius: 14px 0 0 14px;
  border-left: 1px solid transparent;
}

.top--line{
  position: absolute;
  top: 6px;
  left: 7px;
  width: calc(100% - 14px);
  height: 1px;
  background: var(--text3);
}

.middle--line{
  position: absolute;
  top: 9px;
  width: calc(90% - 14px);
  height: 1px;
  background: var(--text3);
}

.third--line{
  position: absolute;
  top: 12px;
  left: 7px;
  width: calc(100% - 14px);
  height: 1px;
  background: var(--text3);
}

.bottom--line{
  position: absolute;
  width: calc(90% - 14px);
  top: 15px;
  height: 1px;
  background: var(--text3);
}

.last--line{
  position: absolute;
  width: calc(100% - 14px);
  top: 18px;
  left: 7px;
  height: 1px;
  background: var(--text3);
}

.left--align .bottom--line, .left--align .middle--line{
  left: 7px;
}

.right--align .bottom--line, .right--align .middle--line{
  right: 7px;
}


#letterspacing--button, #lineHeight--button,
#contentType--button{
  width: 86px;
  display: flex;
  justify-content: space-between;
  background: var(--highlight2);
  border-radius: 15px;
}

.paragraph.loading,
.sentence.loading{
  cursor: wait;
}

.word{
  width: 54px !important;
}

#letterspacing--button .text--box,
.ls--val,
#lineHeight--button .text--box,
.lh--val{
  width: 30px;
  padding: 5px;
  position: relative;
}

.ls--val,
.lh--val{
  border-radius: 15px;
}

.lh--val span,
.ls--val span{
  width: 100%;
  text-align: center;
  outline: none;
}

.lh--val,
.ls--val{
  width: 69px !important;
  position: relative;
  background: var(--highlight2);;
}

#letterspacing--button .arrows,
#lineHeight--button .arrows{
  height: 20px;
	width: 10px;
  position: absolute;
  right: 9px;
  top: 1px;
}

#letterspacing--button .arrows svg,
#lineHeight--button .arrows svg{
	width: 9px;
}


#letterspacing--button .arrows .top,
#lineHeight--button .arrows .top{
  height: 50%;
	width: 100%;
	position: relative;
}

#letterspacing--button .arrows .bottom,
#lineHeight--button .arrows .bottom{
	top: 9px;
  height: 50%;
	width: 100%;
	position: absolute;
}

#contentType--button{
	width: 150px;
}

#contentType--button{
	width: 150px;
}

#content--block .button{
	background: var(--highlight2);;
  border-radius: 15px;
  width: 40px;
  height: 26px;
  padding: 5px;
}

#opentype--block .button{
	background: var(--highlight2);;
  border-radius: 15px;
  width: 90px;
  height: 26px;
  padding: 5px;
}


#content--block .paragraph,
#content--block .sentence{
  width: 86px;
}

#content--block .full{
  width: 60px;
}

#content--randomize{
	border-radius: 30px;
	border: 1px solid #a0a0a0;
}



/*OPENTYPE CONTROLS*/
.opentype--menu{
  position: fixed;
  top: 100%;
  left: 10px;
  height: auto;
  width: 220px;
  background: var(--base);
  z-index: 0;
  transition: transform 0.5s;
  border-radius: 10px;
}

.opentype--menu.open{
  transform: translate(0, calc(-100% - 48px));
}
.opentype--menu li{
  height: 31px;
  cursor: pointer;
  width: 100%;
}
.opentype--menu li:first-child{
  border-top: 0px solid #a0a0a0;
  border-radius: 10px 10px 0 0;
}
.opentype--menu li:last-child{
  border: 0px solid #a0a0a0;
  border-radius: 0 0 10px 10px;
}
.opentype--menu li:hover{
  background: var(--highlight);
}
.opentype--menu li.selected{
  background: var(--highlight);
}

.opentype--menu li span{
  left: 10px !important;
  font-size: 13px;
}


.mobile--vid{
  display: none;
}




/*COLORS*/

.icon {
    display: inline-flex;
    align-self: center;
}

.icon svg, .icon img {
    height: 13px;
    width: auto;
    fill: currentColor;
}

.icon.baseline svg, .icon img {
    top: 1px;
    position: relative;
}


.clicked--on .top--line, .clicked--on .middle--line, .clicked--on .third--line, .clicked--on .bottom--line, .clicked--on .last--line{
	background: var(--text);
}

.menu--contact.inline{
  position: relative;
}



.mobile--wrapper{
  display: none;
}



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

  #letterspacing--button .arrows,
  #lineHeight--button .arrows{
    top: 3px;
  }

  .tester--input{
    padding: 50px 20px 50px 20px;
  }

	.control--title, .weight--title,
	.content--title{
		width: 0;
		position: absolute;
	}

  .draggable--container{
    height: calc(100% - 95px);
  }

  .load.tester--controls{
    transform: translate(0, 120px);
  }

  .text--bar {
    height: 40px;
  }

  .serif--letter{
    font-size: 600px;
    margin-top: -550px !important;
    margin-left: 40px !important;
  }

  .instruct--selector .button{
    height: 36px;
  }

  .section--instruct,
  .section--checkout,
  .section--checkout--confirm{
    right: 40px;
    width: 330px;
  }

  .section--tester{
    width: calc(100% - 370px);
  }

  .section--tester.load{
    width: calc(100% - 40px);
    left: 0px;
  }

  .tester--input{
    height: 100%;
  }

  .section--menu{
    width: 40px;
  }

  .section--info--open{
    transform: translate3d(calc(-100vw + 40px), 0, 0);
  }

  .menu--title{
    right: 35px;
    top: 400px;
  }

  .menu--logo,
  .menu--logo--information{
    left: 28px;
  }

  .omsetype--logo{
    font-size: 30px;
    left: 7px;
  }

  .menu--close.checkbox{
    top: 14px;
    left: 7px;
    width: 26px;
    height: 26px;
  }


  .menu--circle{
    left: 7px;
    width: 26px;
    height: 26px;
  }

  .tip--window{
    width: 290px;
  }

  .tip--window .panel--header{
    top: 10px;
  }
  .tip--window .panel--header.text--bar--double{
    height: calc(40px + 1.5em);
  }

  .tip--diagram{
    width: 290px;
    height: 290px;
    padding: 20px 20px 0 20px;
  }

  .tip--text{
    padding: 20px 20px 20px 20px;
  }

  .tip,
  .panel .button,
  .tester--controls .button,
  .checkbox{
    width: 26px;
    height: 26px;
  }

  .weight--add{
    min-width: 26px;
  }

  .weight--add {
    width: 24px;
    height: 24px;
  }

  .bar--align--left{
    left: 5px;
    padding: 9px;
    line-height: 20px;
  }

  .panel--checkout .bar--align--left{
    left: 5px;
  }

  select {
    padding-left: 14px;
    padding-bottom: 10px;
  }

  .dropdown--license > .button {
    width: 100%;
    height: 100%;
  }

  .dropdown--license .button {
      width: 100%;
      height: 40px;
  }

  .dropdown--license li span{
    left: 14px;
  }

  .dropdown .desc {
    left: 14px;
  }

  .block--number{
    font-size: 15px;
  }

  .checkbox{
    top: 5px;
    background: var(--highlight2);
  }

  .tester--controls{
    height: 41px;
  }

  #control--block,
  #size--block,
  #content--block{
    padding: 7px;
  }

  #size--block{
    left: 97px;
  }

  .controls{
    height: 26px;
  }

  #content--block .button{
    height: 26px;
  }

  #content--block{
    top: -36px;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
    border: 0px;
  }

  #vCenter--toggle img{
    width: 15px;
  }

  .vCenter--on{
    height: auto;
  }

  #control--size--slider{
    top: 13px;
  }

  .step{
    width: 306px;
  }

  .step:last-child{
    width: 306px;
  }

  .step--controller{
    height: 40px;
  }

  .wrapper--choose{
    height: 140px;
  }

  .wrapper--choose td{
    height: 140px;
    width: 140px;
  }

  .choose--text{
    height: auto;
    font-size: 14px;
  }

  .input--grid{
    height: 290px;
  }

  .grid--background td{
    width: 29px;
    height: 29px;
  }

  .grid--background {
    height: 292px;
  }

  .interpolator--selector .dropdown:hover .dropdown--content{
    height: 280px;
  }

  .interpolator--selector .button{
    height: 40px;
  }

  .interpolator--selector .selector--left, .interpolator--selector .selector--right {
    height: 40px;
  }

  .input--slider {
    margin-top: -5px
  }

  .dropdown--content {
    top: -40px;
  }

  .advanced--val{
    margin-top: 10px;
  }

  .panel input[type=range] {
    width: 220px;
  }

  .panel--quarter {
    height: 40px;
  }

  .text--bar--double{
    height: calc(40px + 1.5em);
  }

  .panel--half {
    height: 140px;
  }

  .panel--full {
    height: 280px;
  }

  .wrapper--review td{
    height: 40px;
    width: 140px;
  }

  .review--italics.disabled .review--left,
  .review--italics.disabled .review--right{
    height: 120px !important;
  }

  .review--left {
      width: 100px;
  }

  .review--alternates td {
    height: auto;
  }

  .review--alternates {
    width: 187px;
    height: 120px;
  }

  /* .review--weights{
    height: 120px;
  } */


  .letter--bottom {
    margin-top: -40px !important;
  }

  .letter--mid {
    margin-top: -20px !important;
  }

  .letter--xray .big--letter {
    font-size: 250px;
  }

  .letter--xray > .big--letter:before {
    bottom: 73px;
  }

  .letter--xray > .big--letter:after {
    bottom: 249px;
  }

  .letter--xray > .double--letter:before {
    bottom: 50px;
  }

  .letter--xray > .double--letter:after {
    bottom: 175px;
  }

  .letter--xray .big--letter.double--letter{
    font-size: 175px;
    letter-spacing: -0.0258em;
  }

  #card--element {
    padding: 10px 14px;
  }

  #control--block .controls{
    width: 100%;
  }

  .choose--block .letter--lower {
    margin-top: -10px;
  }

  #opentype--block{
    padding: 7px;
  }

  #opentype--block .controls{
    height: 26px;
  }

  .opentype--menu.open {
    transform: translate(0, calc(-100% - 39px));
  }


}

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

  #control--block{
    left: auto;
    right: 0;
  }

  #size--block{
    background: transparent;
    left: 0;
  }

  #size--block .controls {
    width: calc(100vw - 965px);
    transform: translate(0,0);
    transition: transform 0.5s;
  }

  #opentype--block{
    display: none;
  }

  #control--size--slider{
    opacity: 1;
  }

  #size--block .slider--top{
    transform: translate(0, -50%);
  }

}

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


  #size--block .controls {
    width: calc(100vw - 810px);
  }

}

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

  .wrapper--main{
    display: none;
  }

  .mobile--wrapper{
    padding: 20px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--bg);
    display: block;
    overflow: auto;
    max-height: 100vh;
  }

.mobile--wrapper .header{
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: left;
  }

  .mobile--wrapper .title{
      top: 50%;
      left: 50%;
      width: 100%;
      text-align: left;
      padding: 10px 0 40px 0;
    }

    .mobile--header{
      font-size: 4vw;
      text-align: center;
    }

    .mobile--tester--input{
        font-size: 96vw;
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0px 10px 80px 10px;
        line-height: 0.9;
        outline: none;
        transition: all 0.5s;
        scrollbar-width: none;
        -ms-overflow-style: none;  // IE 10+
    }

  .mobile--title{
    font-size: 30vw;
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-align: left;
  }

  .menu--section {
    min-height: 540px;
    margin: 0px 20px 20px 0px;
  }

  .scroll-left {
 height: 400px;
 overflow: hidden;
 position: relative;
 margin: -20px;
 padding: 20px;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 font-size: 48vw;
 letter-spacing: -10px;
 line-height: 0.9;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 60s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%);
 }
 100% {
 transform: translateX(-1000%);
 }
}

  .mobile--subtitle{
    font-size: 8vw;
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: left;
    margin-bottom: 40px;
  }

  .mobile--wrapper svg{
    padding: 15% 10% 15% 10%;
    width: 100%;
  }

  .mobile--wrapper img{
    padding: 5%;
    width: 100%;
  }

  .mobile--footer{
    margin: 20px -20px -20px -20px;
    padding: 20px 20px 20px 20px;
    width: calc(100% + 40px);
    background: var(--base);
  }

  .mobile--section{
    margin: 20px -20px 20px -20px;
    padding: 20px;
    width: calc(100% + 40px);
    background: var(--base);
    font-size: 4vw;
  }

  .mobile--feature{
  	color: var(--text);
    background: var(--highlight3);
  }

  .mobile--feature svg{
    color: var(--text);
  }

  .toggle-button-container {
    padding-bottom: 60px;
  }

  .mobile--center{
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    position: relative;
  }

  .mobile--caption{
    display: inline-block;
    padding: 10px;
    margin: 5px;
    font-size: 16px;
    text-align: center;
    background: #ccc;
    border-radius: 20px;
    height: 40px;
    width: 120px;
  }

  .mobile--text{
    padding: 20px 0 40px 0;
    font-size: 19px;
    line-height: 1.4;
  }

  .mobile--p{
    font-size: 19px;
    line-height: 1.4;
  }

  .mobile--vid{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: calc(56.25vw + 20px);
    padding: 20px;
    transform: translate(-50%, -50%);
  }

  #blackpencil a{
    color: #ffffff;
  }

  .panel--quarter {
    height: 50px;
    margin-bottom: 20px;
  }

  .panel--quarter input {
    font-size:  19px;
  }

  .bar--align--left{
    font-size: 19px;
    left: 20px;
  }


  .button--hover{
    background: var(--highlight);
  }

  .mobile--vid iframe{
    width: 100%;
    height: 100%;
  }

  video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}


}

@-moz-document url-prefix() {
  .wrapper--choose td, .wrapper--review td {
    background-clip: padding-box !important;
  }
}