@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



body {

  line-height: 1;

}



a {

  text-decoration-skip-ink: auto;

}



a[href^=tel] {

  color: inherit;

  text-decoration: none;

}



button {

  outline: 0;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after, q:before, q:after {

  content: "";

  content: none;

}



q {

  display: inline;

  font-style: italic;

}



q:before {

  content: '"';

  font-style: normal;

}



q:after {

  content: '"';

  font-style: normal;

}



textarea, input[type=text], input[type=button], input[type=submit], input[type=reset], input[type=search], input[type=password] {

  -webkit-appearance: none;

  appearance: none;

  border-radius: 0;

}



input[type=search] {

  -webkit-appearance: textfield;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



th, td {

  padding: 2px;

}



big {

  font-size: 120%;

}



small, sup, sub {

  font-size: 80%;

}



sup {

  vertical-align: super;

}



sub {

  vertical-align: sub;

}



dd {

  margin-left: 20px;

}



kbd, tt {

  font-family: courier;

  font-size: 12px;

}



ins {

  text-decoration: underline;

}



del, strike, s {

  text-decoration: line-through;

}



dt {

  font-weight: bold;

}



address, cite, var {

  font-style: italic;

}



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

  display: block;

}



* {

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



.screen-reader-text {

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

  -webkit-clip-path: inset(50%);

  clip-path: inset(50%);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute !important;

  width: 1px;

  word-wrap: normal !important;

  word-break: normal;

}



.screen-reader-text:focus {

  background-color: #f7f7f7;

  border-radius: 3px;

  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

  clip: auto !important;

  -webkit-clip-path: none;

  clip-path: none;

  color: #007acc;

  display: block;

  font-size: 14px;

  font-size: 0.875rem;

  font-weight: 700;

  height: auto;

  right: 5px;

  line-height: normal;

  padding: 15px 23px 14px;

  text-decoration: none;

  top: 5px;

  width: auto;

  z-index: 100000;

}



.skip-link {

  left: -9999rem;

  top: 2.5rem;

  z-index: 999999999;

  text-decoration: underline;

}



.skip-link:focus {

  display: block;

  left: 6px;

  top: 7px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  line-height: normal;

  padding: 15px 23px 14px;

  z-index: 100000;

  right: auto;

}



.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active) {

  position: absolute !important;

  height: 1px;

  width: 1px;

  overflow: hidden;

  clip: rect(1px 1px 1px 1px);

  clip: rect(1px, 1px, 1px, 1px);

  white-space: nowrap;

}



@font-face {

  font-family: "oom-regular";

  src: url("fonts/_OoMStandard-Regular.otf") format("opentype");

}

/* Cakra */

@font-face {

  font-family: cakra-normal;

  src: url("fonts/Cakra/_Cakra-Normal.otf") format("opentype");

}

/* Gauranga */

@font-face {

  font-family: gauranga-kalpa;

  src: url("/webfont.php?font=gauranga-kalpa&format=woff2") format("woff2");

}

@font-face {

  font-family: gauranga-stava;

  src: url("/webfont.php?font=gauranga-stava&format=woff2") format("woff2");

}

/* Marc */

@font-face {

  font-family: marc-bold;

  src: url("/webfont.php?font=marc-bold&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-book;

  src: url("/webfont.php?font=marc-book&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-extraBold;

  src: url("/webfont.php?font=marc-extrabold&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-light;

  src: url("/webfont.php?font=marc-light&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-medium;

  src: url("/webfont.php?font=marc-medium&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-regular;

  src: url("/webfont.php?font=marc-regular&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-semiBold;

  src: url("/webfont.php?font=marc-semibold&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-thin;

  src: url("/webfont.php?font=marc-thin&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-ultraLight;

  src: url("/webfont.php?font=marc-ultralight&format=woff2") format("woff2");

}

@font-face {

  font-family: marc-vf;

  src: url("/webfont.php?font=marc-vf&format=woff2") format("woff2");

}

/* Raghava */

@font-face {

  font-family: raghava-grotesk-regular;

  src: url("/webfont.php?font=raghava-grotesk-regular&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-bold;

  src: url("/webfont.php?font=raghava-grotesk-bold&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-book;

  src: url("/webfont.php?font=raghava-grotesk-book&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-ultraBold;

  src: url("/webfont.php?font=raghava-grotesk-ultrabold&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-heavy;

  src: url("/webfont.php?font=raghava-grotesk-heavy&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-light;

  src: url("/webfont.php?font=raghava-grotesk-light&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-medium;

  src: url("/webfont.php?font=raghava-grotesk-medium&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-semiBold;

  src: url("/webfont.php?font=raghava-grotesk-semibold&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-thin;

  src: url("/webfont.php?font=raghava-grotesk-thin&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-ultraLight;

  src: url("/webfont.php?font=raghava-grotesk-ultralight&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-hairline;

  src: url("/webfont.php?font=raghava-grotesk-hairline&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-black;

  src: url("/webfont.php?font=raghava-grotesk-black&format=woff2") format("woff2");

}

@font-face {

  font-family: raghava-grotesk-vf;

  src: url("/webfont.php?font=raghava-grotesk-vf&format=woff2") format("woff2");

}

/* Uttara */

@font-face {

  font-family: uttara-offWhite;

  src: url("/webfont.php?font=uttara-offwhite&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-white;

  src: url("/webfont.php?font=uttara-white&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-extraLight;

  src: url("/webfont.php?font=uttara-extralight&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-light;

  src: url("/webfont.php?font=uttara-light&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-book;

  src: url("/webfont.php?font=uttara-book&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-regular;

  src: url("/webfont.php?font=uttara-regular&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-medium;

  src: url("/webfont.php?font=uttara-medium&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-semiBold;

  src: url("/webfont.php?font=uttara-semibold&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-bold;

  src: url("/webfont.php?font=uttara-bold&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-black;

  src: url("/webfont.php?font=uttara-black&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-onBlack;

  src: url("/webfont.php?font=uttara-onblack&format=woff2") format("woff2");

}

@font-face {

  font-family: uttara-vf;

  src: url("/webfont.php?font=uttara-vf&format=woff2") format("woff2");

}

@font-face {

  font-family: prabhupada-roman;

  src: url("fonts/Prabhupada Roman/_PrabhupadaRoman_TRIAL-Regular.otf") format("opentype");

}

@font-face {

  font-family: prabhupada-book;

  src: url("fonts/Prabhupada Book/_PrabhupadaBook_TRIAL-Regular.otf") format("opentype");

}

*, ::before, ::after {

  box-sizing: border-box;

}



:focus-visible {

  outline: none;

}



:root {

  --light-blue: #d5f0f3;

  --blue: #7ea5a8;

  --black: #202020;

  --real-black: #000;

  --font-regular: "oom-regular", sans-serif;

  --light-gray: #d3d3d3;

  --extralight-gray: #e9e9e9;

  --dark-gray: #3a3a3a;

  --gray: #c2c2c2;

  --darker-gray: #616161;

  --red: #ff3b3b;

  --white: #f6f6f6;

  --black45: rgba(32,32,32,.45);

}



html {

  scroll-padding-top: 60px;

}



body {

  font-size: 13.5px;

  line-height: 1.3;

  font-family: var(--font-regular);

  color: var(--black);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-smoothing: antialiased;

  overflow-x: hidden;

  background-color: var(--white);

}



a {

  color: var(--black);

  text-decoration: none;

}



.container {

  padding: 0 20px;

}



main section {

  background-color: var(--white);

  color: var(--black);

}



section.intro {

  min-height: 100vh;

}



.row-forced {

  margin: 0 -10px;

  display: flex;

}



.col-1-2-forced {

  width: 50%;

  padding: 0 10px;

}



.col-1-6-forced {

  width: 16.66666%;

  padding: 0 10px;

}



.col-5-6-forced {

  width: 83.33333%;

  padding: 0 10px;

}



#footer {

  background-color: var(--light-blue);

  padding: 20px 0;

  color: var(--blue);

  position: relative;

  z-index: 101;

}

#footer h2 {

  color: var(--black);

  font-size: 36px;

  line-height: 48px;

  margin-bottom: 10px;

  height: 50px;

}

#footer h3 {

  margin: 20px 0;

  border-bottom: 1px solid var(--blue);

  line-height: 21px;

}

#footer #footer-top ul {

  margin: 0 0 30px;

  column-count: 2;

}

#footer #footer-top ul ul {

  margin: 0;

  column-count: 1;

}

#footer #footer-top ul li {

  white-space: nowrap;

  line-height: 21px;

}

#footer #footer-top ul li a {

  color: var(--blue);

  cursor: pointer;

}

#footer #footer-header {

  background: url("../img/logo.svg") no-repeat;

  background-size: 32px;

  padding-left: 45px;

  background-position: 0 7px;

}

#footer #footer-header img {

  display: none;

  height: 50px;

  vertical-align: top;

}

#footer #footer-header img.visible {

  display: block;

}

#footer #newsletter-title {

  color: var(--real-black);

  font-size: 21px;

  line-height: 1.1;

  padding: 15px 0 0 0;

  border-bottom: 0;

  margin: 50px 0 20px;

  max-width: 80%;

}

#footer .newsletter {

  border-bottom: 1px solid var(--blue);

  margin: 20px 0 20px;

  display: flex;

}

#footer .newsletter ::placeholder {

  opacity: 1;

  color: var(--blue);

}

#footer .newsletter input[type=email] {

  font-family: var(--font-regular);

  color: var(--blue);

  font-size: 21px;

  background-color: transparent;

  border: 0;

  width: calc(100% - 40px);

}

#footer .newsletter input[type=submit] {

  border: 0;

  margin-left: auto;

  background-color: transparent;

  background-image: url("../img/arrow/arrow-blue.svg");

  background-size: 20px;

  background-position: right center;

  background-repeat: no-repeat;

  width: 40px;

  height: 40px;

  cursor: pointer;

  font-size: 0;

  color: transparent;

  transition: margin 0.3s, width 0.3s;

}

#footer .newsletter input[type=submit]:hover {

  margin-right: -7px;

  width: 47px;

}

#footer #footer-bottom {

  padding: 50px 0 0;

}

#footer #footer-bottom ul {

  border-top: 1px solid var(--blue);

  padding: 12px 0 10px;

}

#footer #footer-bottom ul li {

  display: inline-block;

  margin: 0 8px 0 0;

}

#footer #footer-bottom ul li a {

  color: var(--blue);

}

#footer #footer-bottom .copyright {

  border-top: 1px solid var(--blue);

  padding: 12px 0 10px;

  display: flex;

}



.arrow-link {

  position: relative;

}

.arrow-link .arrow {

  display: inline-block;

  margin-right: 10px;

  width: 10px;

  height: 10px;

  background-image: url("../img/arrow/arrow-black.svg");

  transition: margin 0.2s;

}

.arrow-link:hover .arrow {

  margin-left: 6px;

  margin-right: 4px;

}



#footer .arrow-link .arrow {

  background-image: url("../img/arrow/arrow-blue.svg");

}



main.font section.intro .arrow-link .arrow {

  background-image: url("../img/arrow/arrow-white.svg");

}



.btn {

  line-height: 1.8;

  padding: 0 12px;

  border-radius: 3px;

  border: 1px solid var(--dark-gray);

  color: var(--dark-gray);

  background-color: transparent;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  font-family: var(--font-regular);

  transition: transform 0.2s;

}

.btn:hover {

  cursor: pointer;

  transform: scale(0.95);

}



.accordion {

  display: flex;

  flex-direction: column;

}



.accordion-item {

  line-height: 1.4;

}



.accordion-item:not(.open) {

  overflow: hidden;

}



.accordion-header {

  cursor: pointer;

  user-select: none;

}



.accordion-content {

  height: 0;

  transition: height 0.3s ease-in-out, opacity 0.3s;

  opacity: 0;

}



.accordion-item.open .accordion-header.arrow-link::before {

  margin-left: 6px;

  margin-right: 4px;

}



.accordion-item .accordion-header.arrow-link + .accordion-content .accordion-content-inner {

  padding: 2px 0 10px 20px;

}



.accordion-item.visible .accordion-content {

  opacity: 1;

}



#header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: height 0.4s, background 0.2s;

  pointer-events: auto;

  z-index: 105;

  background-color: var(--white);

}

#header.no-bg {

  background-color: transparent;

}

#header .container {

  padding-top: 15px;

  padding-bottom: 15px;

}

#header .row {

  position: relative;

}

#header .header-part-1 {

  width: 50%;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 2;

}

#header .header-logo {

  color: var(--black);

  line-height: 30px;

  pointer-events: auto;

  transition: color 0.3s;

  display: inline-block;

  width: 100%;

}

#header .header-logo .char {

  display: none;

}

#header .btnBuyCart {

  position: absolute;

  top: 0;

  right: 0;

  line-height: 30px;

  background-color: var(--red);

  color: var(--white) !important;

  border: 0;

  pointer-events: auto;

}

#header #menu-button {

  position: absolute;

  top: 17px;

  left: calc(50% - 13px);

  width: 26px;

  height: 26px;

  border: 0;

  padding: 0;

  background-color: transparent;

  cursor: pointer;

  pointer-events: auto;

  z-index: 5;

}

#header #menu-button span {

  background: var(--black);

  width: 100%;

  height: 2px;

  display: inline-block;

  position: absolute;

  left: 0;

  top: 8px;

  transition: background 0.3s;

}

#header #menu-button span:last-child {

  top: auto;

  bottom: 8px;

}

#header .first-menu {

  padding: 140px 0 40px;

}

#header .first-menu, #header .second-menu {

  transition: opacity 0.4s 0.2s;

  opacity: 1;

}

#header .first-menu a, #header .second-menu a {

  display: block;

  color: var(--white);

  font-size: 21px;

  line-height: 1.5;

  transition: color 0.3s;

  cursor: pointer;

}

#header #btnColorScheme {

  position: absolute;

  left: 0;

  bottom: -60px;

  width: 24px;

  height: 24px;

  padding: 0;

  border: 0;

  cursor: pointer;

  font-size: 0.1px;

  background-color: transparent;

}

#header #btnColorScheme svg {

  width: 100%;

  height: 100%;

  fill: var(--white);

  transition: transform 0.3s, fill 0.3s;

}

#header.dark-gray a.header-logo {

  color: var(--dark-gray);

}

#header.dark-gray #menu-button span {

  background-color: var(--dark-gray);

}

#header.white a.header-logo {

  color: var(--white);

}

#header.white #menu-button span {

  background-color: var(--white);

}

#header[data-color=black] a.header-logo {

  color: var(--black);

}

#header[data-color=black] #menu-button span {

  background-color: var(--black);

}



body.menu-opened #header {

  background-color: var(--black);

}

body.menu-opened #header a.header-logo {

  color: var(--white);

}

body.menu-opened #header #menu-button span {

  background-color: var(--white);

}



body:not(.menu-opened) #header {

  height: 60px;

  overflow: hidden;

}

body:not(.menu-opened) #header .first-menu, body:not(.menu-opened) #header .second-menu {

  opacity: 0;

  transition: opacity 0.4s 0s;

}



main.font section.intro {

  color: var(--white);

  display: flex;

  flex-direction: column;

  position: relative;

}

main.font section.intro .bg {

  position: absolute;

  z-index: 1;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

main.font section.intro .bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  vertical-align: top;

}

main.font section.technical, main.font section.visual, main.font section.overview, main.font section.overview {

  padding: 30px 0 10px;

}

main.font section.technical h2, main.font section.visual h2, main.font section.overview h2, main.font section.overview h2 {

  border-bottom: 1px solid var(--black);

  padding-bottom: 10px;

  margin-bottom: 25px;

  font-size: 13.5px;

}

main.font section.technical .accordion {

  border-top: 1px solid var(--black);

}

main.font section.technical .accordion .accordion-item {

  border-bottom: 1px solid var(--dark-gray);

}

main.font section.technical .accordion h3 {

  font-size: 30px;

  line-height: 1em;

  padding: 12px 0;

  position: relative;

}

main.font section.technical .accordion h3::after {

  content: "";

  position: absolute;

  right: 0;

  top: 15px;

  display: inline-block;

  width: 22px;

  height: 22px;

  background-image: url("../img/cross.svg");

  transition: transform 0.3s;

}

main.font section.technical .accordion .accordion-item.open h3::after {

  transform: rotate(45deg);

}

main.font section.technical .accordion .accordion-item.open.characters-overview h3 {

  position: sticky;

  top: 60px;

  margin-bottom: 80vh;

}

main.font section.technical .accordion .accordion-item.open.characters-overview .row {

  margin-top: -80vh;

}

main.font section.technical .accordion .accordion-content-inner {

  padding-bottom: 20px;

}

main.font section.technical .accordion .accordion-item.open.characters-overview .sticky {

  position: sticky;

  top: 110px;

}

main.font section.technical .font-styles h4 {

  font-size: 39px;

}

main.font section.technical .font-styles h4 span {

  font-feature-settings: "numr";

}

main.font section.technical .font-styles p {

  margin: 0 0 10px;

}

main.font section.technical .open-type-features .font {

  font-size: 30px;

  line-height: 1.1;

  font-variant-ligatures: none;

  margin-top: 4px;

}

main.font section.technical .open-type-features .font em {

  opacity: 0.45;

}

main.font section.technical .open-type-features h4 {

  padding-top: 15px;

}

main.font section.technical .open-type-features h4:first-of-type {

  padding-top: 5px;

}

main.font section.technical #glyphTable h4 {

  margin: 0 0 10px;

}

main.font section.technical #glyphTable .wrapper {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 30px;

}

main.font section.technical #glyphTable .wrapper .glyph {

  cursor: pointer;

  transition: background 2s;

}

main.font section.technical #glyphTable .wrapper .glyph .unicode {

  border-top: 1px solid var(--dark-gray);

  border-bottom: 1px solid var(--dark-gray);

  font-size: 12px;

  line-height: 20px;

}

main.font section.technical #glyphTable .wrapper .glyph canvas {

  width: 60px;

  height: 40px;

  transition: transform 0.3s;

}

main.font section.technical #glyphTable .wrapper .glyph:hover {

  background-color: rgba(58, 58, 58, 0.36);

  transition-duration: 0s;

}

main.font section.technical #glyphTable .wrapper .glyph:hover canvas {

  transform: scale(1.4);

}

main.font section.technical #glyph {

  width: 100%;

  padding-top: min(80%, 100vh - 270px);

  position: relative;

}

main.font section.technical #glyph #glyph-canvas {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  width: auto;

  height: 100%;

  margin: auto;

}

main.font section.technical #glyph #glyph-coords {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

}

main.font section.technical #glyph #glyph-coords .horizontal-line {

  position: absolute;

  width: 100%;

  left: 0;

  height: 1px;

  background-color: rgba(58, 58, 58, 0.36);

}

main.font section.technical #glyph #glyph-coords .horizontal-line .name {

  position: absolute;

  left: 0;

  top: -22px;

}

main.font section.technical #glyph #glyph-coords .horizontal-line .number {

  position: absolute;

  right: 0;

  top: -22px;

}

main.font section.technical #glyph #glyph-coords .baseline {

  top: 75%;

  background-color: var(--dark-gray);

}

main.font section.technical #glyph #glyph-coords .vertical-line {

  position: absolute;

  height: 100%;

  width: 1px;

  left: 50%;

  top: 0;

  background-color: rgba(58, 58, 58, 0.36);

}

main.font section.technical #glyph #glyph-coords .width {

  text-align: center;

  width: 100%;

  position: absolute;

  left: 0;

  bottom: 0;

}

main.font section.technical #glyphInfo {

  margin: 40px 0;

}

main.font section.technical #glyphInfo td {

  padding: 0;

}

main.font section.technical #glyphInfo td:first-child {

  padding-right: 30px;

}

main.font .gallery {

  margin: 0 -10px;

}

main.font .gallery .gallery-wrapper {

  margin: 0 10px 20px;

  border-radius: 5px;

  overflow: hidden;

}

main.font .gallery .gallery-wrapper img {

  width: 100%;

  height: 100%;

  vertical-align: top;

  object-fit: cover;

  object-position: center;

  transform: scale(1.5);

  transform-origin: top;

}

main.font .info {

  margin: auto 0 40px;

  padding-top: 140px;

  position: relative;

  z-index: 2;

}

main.font .info .beta {

  background-color: var(--light-blue);

  padding: 20px;

  color: var(--black);

}

main.font .info h1 {

  font-size: 48px;

  line-height: 1;

  margin-bottom: 25px;

}

main.font .about {

  padding: 20px 0 0;

  position: relative;

  z-index: 2;

}

main.font .about h2 {

  border-bottom: 1px solid var(--white);

  padding-bottom: 10px;

  margin-bottom: 25px;

}

main.font .about table {

  width: 100%;

}

main.font .about table tr:last-child td {

  padding-bottom: 20px;

}

main.font .about table td {

  padding: 2px 0;

}

main.font .about table td:first-child {

  width: 100px;

}

main.font .about table td:last-child {

  width: calc(100% - 100px);

}

main.font .about .last-column ul li a {

  color: var(--white);

  line-height: 21px;

}

main.font .about .buttons {

  margin: 20px 0;

}

main.font .about .buttons .btn {

  color: var(--white);

  border-color: var(--white);

  line-height: 26px;

  margin-right: 10px;

  margin-bottom: 10px;

}



body[data-scheme=white] main.font section.technical #glyph #glyph-coords .horizontal-line:not(.baseline), body[data-scheme=white] main.font section.technical #glyph #glyph-coords .vertical-line {

  background-color: rgba(255, 255, 255, 0.36);

}



body[data-scheme=black] main.font section.technical #glyph #glyph-coords .horizontal-line:not(.baseline), body[data-scheme=black] main.font section.technical #glyph #glyph-coords .vertical-line {

  background-color: rgba(0, 0, 0, 0.36);

}



main.font section.overview .info {

  padding-top: 0px;

}

main.font section.overview .about {

  padding-top: 0;

}

main.font section.overview .about .container > .row {

  border-top: 1px solid var(--black);

  padding-top: 20px;

}

main.font section.overview .about .btn {

  color: var(--black);

  border-color: var(--black);

}



.select-style {

  width: 190px;

  position: relative;

  cursor: pointer;

}

.select-style .select-trigger {

  position: relative;

  padding: 3px 8px;

  height: 100%;

}

.select-style .select-trigger::after {

  position: absolute;

  right: 5px;

  top: 3px;

  content: "▼";

  font-family: "raghava-grotesk-regular";

}

.select-style .select-trigger input {

  border: 0;

  background-color: transparent;

  padding: 0;

  font-size: 13.5px;

  line-height: 16px;

  font-family: var(--font-regular);

  pointer-events: none;

  color: var(--darker-gray);

}

.select-style .select-options {

  position: absolute;

  top: 22px;

  width: 100%;

  border-radius: 4px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  z-index: 2;

  background-color: var(--extralight-gray);

}

.select-style .select-options .option {

  display: block;

  padding: 3px 8px;

  border-top: 1px solid var(--light-gray);

  width: 100%;

  background-color: var(--extralight-gray);

}

.select-style .select-options .option.selected, .select-style .select-options .option.selected:hover {

  color: var(--extralight-gray);

  background-color: var(--darker-gray);

  border-color: var(--darker-gray);

}

.select-style .select-options .option:hover {

  background-color: var(--light-gray);

}

.select-style .select-options .option.disabled {

  pointer-events: none;

  opacity: 0.36;

}

.select-style.opened .select-options {

  opacity: 1;

  pointer-events: auto;

}



.range input {

  margin: -5px 0 0;

  width: 100px;

  opacity: 0;

  cursor: pointer;

  position: relative;

  z-index: 1;

}

.range .slider {

  width: 100px;

  height: 7px;

  background-color: #b3b3b3;

  display: inline-block;

  vertical-align: top;

  margin-top: 8px;

  position: relative;

}

.range .slider .slider-handle {

  height: 7px;

  position: absolute;

  top: 0;

  left: 0;

  background-color: var(--darker-gray);

}

.range .title, .range .value {

  padding: 3px 8px;

  vertical-align: top;

  display: inline-block;

}

.range .value {

  padding-left: 2px;

}

.range .value .number {

  width: 30px;

  text-align: right;

  display: inline-block;

}



.control {

  background-color: var(--extralight-gray);

  border-radius: 4px;

  display: inline-block;

  margin: 0 5px 5px 0;

  height: 22px;

  line-height: 16px;

  vertical-align: top;

  color: var(--darker-gray);

}



@keyframes font-weight {

  from {

    font-weight: 100;

  }

  to {

    font-weight: 720;

  }

}

.type-tester {

  margin: 40px 0;

}

.type-tester.main .content {

  width: 100%;

  height: 50vw;

  padding: 0 50px;

  position: relative;

}

.type-tester.main.is-variable .content {

  color: transparent;

}

.type-tester.main.is-variable .content .animation {

  animation-name: font-weight;

  animation-duration: 4s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

  animation-direction: alternate;

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  color: var(--black);

}

.type-tester.main.is-variable .part01 {

  opacity: 0;

  transition: opacity 0.3s;

  pointer-events: none;

}

.type-tester.main.is-variable.interacted .content {

  color: var(--black);

}

.type-tester.main.is-variable.interacted .animation {

  display: none;

}

.type-tester.main.is-variable.interacted .part01 {

  opacity: 1;

  pointer-events: auto;

}

.type-tester form {

  margin-bottom: 20px;

}

.type-tester .content {

  font-size: 14px;

  background-color: transparent;

  width: 100%;

  border: none;

  color: var(--black);

  overflow: hidden;

  resize: none;

}

.type-tester .radios {

  padding: 4px 8px;

}

.type-tester .radios .radio-holder {

  height: 14px;

  position: relative;

  display: inline-block;

  margin-right: 5px;

}

.type-tester .radios .radio-holder:last-child {

  margin-right: 0;

}

.type-tester .radios .radio-holder svg {

  height: 14px;

  vertical-align: top;

  fill: var(--darker-gray);

}

.type-tester .radios .radio-holder label {

  opacity: 0.5;

  cursor: pointer;

}

.type-tester .radios .radio-holder input {

  opacity: 0;

  margin: 0;

  width: 1px;

  height: 1px;

  position: absolute;

}

.type-tester .radios .radio-holder label:hover, .type-tester .radios .radio-holder input:checked + label {

  opacity: 1;

}

.type-tester .type-tester-header .part02 {

  display: flex;

  flex-wrap: wrap;

}



section.fonts {

  padding-bottom: 40px;

}



.font-link {

  display: block;

  padding-top: 15px;

  opacity: 1;

  transition: opacity 0.5s;

  border-bottom: 1px solid var(--light-gray);

  position: relative;

}

.font-link .header {

  display: flex;

  padding: 0 0 20px;

}

.font-link .header > * {

  width: 33.33333%;

}

.font-link .header .name {

  text-align: center;

}

.font-link .header .styles {

  text-align: left;

}

.font-link .header .price {

  text-align: right;

}

.font-link .header .blink-link {

  color: var(--black);

}

.font-link .content {

  position: relative;

  overflow: hidden;

  height: 70vw;

  display: block;

}

.font-link .content.font-gauranga {

  font-family: "gauranga-stava";

}

.font-link .content.font-gauranga .front {

  font-size: 30vw;

}

.font-link .content.font-marc {

  font-family: "marc-semibold";

}

.font-link .content.font-marc .front {

  font-size: 22vw;

}

.font-link .content.font-raghava-grotesk {

  font-family: "raghava-grotesk-regular";

}

.font-link .content.font-raghava-grotesk .front {

  font-size: 22vw;

}

.font-link .content.font-cakra {

  font-family: "cakra-normal";

}

.font-link .content.font-cakra .front {

  font-size: 40vw;

  line-height: 0.8;

}

.font-link .content.font-uttara {

  font-family: "uttara-light";

}

.font-link .content.font-uttara .front {

  font-size: 18vw;

}

.font-link .content.font-prabhupada-roman {

  font-family: "prabhupada-roman";

}

.font-link .content.font-prabhupada-roman .front {

  font-size: 34vw;

}

.font-link .content.font-prabhupada-book {

  font-family: "prabhupada-book";

}

.font-link .content.font-prabhupada-book .front {

  font-size: 34vw;

}

.font-link .content.font-uttara-grotesk {

  font-family: "uttara-grotesk-regular";

}

.font-link .content.font-uttara-grotesk .front {

  font-size: 22vw;

}

.font-link .content .beta-version {

  text-align: center;

  position: absolute;

  width: 90px;

  height: 90px;

  bottom: 15px;

  right: 0;

  display: flex;

  padding: 30px;

  margin: 10px;

  align-items: center;

  justify-content: center;

  z-index: 1;

  font-family: var(--font-regular);

}

.font-link .content .beta-version .text {

  position: absolute;

  color: var(--white);

  font-size: 18px;

  line-height: 1em;

}

.font-link .content .beta-version .background {

  background-image: url("../img/circle.svg");

  animation-name: rotate-n-pulse;

  animation-duration: 10s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  width: 100%;

  height: 100%;

  position: absolute;

}

.font-link .content .front {

  display: flex;

  height: 100%;

  width: 100%;

  text-align: center;

  line-height: 1;

  justify-content: center;

  align-items: center;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  transition: opacity 0.5s;

  transition-delay: 0.5s;

}

.font-link .content .hover {

  width: 100%;

  height: 100%;

  display: block;

}

.font-link .content .hover > span {

  opacity: 0;

  transition: opacity 0.5s, left 0.5s;

  font-size: 5vw;

  left: 50px;

  position: relative;

  margin-right: 2vw;

}

.font-link .content .hover span:nth-child(1) {

  transition-delay: 0.5s;

}

.font-link .content .hover span:nth-child(2) {

  transition-delay: 0.6s;

}

.font-link .content .hover span:nth-child(3) {

  transition-delay: 0.7s;

}

.font-link .content .hover span:nth-child(4) {

  transition-delay: 0.8s;

}

.font-link .content .hover span:nth-child(5) {

  transition-delay: 0.9s;

}

.font-link .content .hover span:nth-child(6) {

  transition-delay: 1s;

}

.font-link .content .hover span:nth-child(7) {

  transition-delay: 1.1s;

}

.font-link .content .hover span:nth-child(8) {

  transition-delay: 1.2s;

}

.font-link .content .hover span:nth-child(9) {

  transition-delay: 1.3s;

}

.font-link .content .hover span:nth-child(10) {

  transition-delay: 1.4s;

}

.font-link .content .hover span:nth-child(11) {

  transition-delay: 1.5s;

}

.font-link .content .hover span:nth-child(12) {

  transition-delay: 1.6s;

}

.font-link .content .hover span:nth-child(13) {

  transition-delay: 1.7s;

}

.font-link .content .hover span:nth-child(14) {

  transition-delay: 1.8s;

}

.font-link .content .hover span:nth-child(15) {

  transition-delay: 1.9s;

}

.font-link:hover .content .front {

  opacity: 0;

  transition-delay: 0s;

}

.font-link:hover .content .hover > span {

  opacity: 1;

  left: 0;

}

.font-link:not(:hover) .content .hover > span {

  transition-delay: 0s !important;

  transition-duration: 0.2s !important;

}

.font-link.hidden {

  opacity: 0;

}



.font-wrapper:first-child .font-link {

  border-top: 1px solid var(--light-gray);

}



.main-carousel {

  height: 100vh;

  overflow: hidden;

  position: relative;

}

.main-carousel .slides {

  height: 100%;

}

.main-carousel .slide {

  height: 100%;

  width: 100vw;

  position: absolute;

  left: 0;

  transition: opacity 1s ease-in-out;

  z-index: 1;

  overflow: hidden;

}

.main-carousel .slide.slide-next {

  z-index: 5;

  opacity: 0;

}

.main-carousel .slide.slide-actual {

  z-index: 4;

}

.main-carousel .slide.slide-prev {

  z-index: 3;

}

.main-carousel .slide.slide-prev-prev {

  z-index: 2;

}

.main-carousel .slide .media {

  position: absolute;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100%;

  object-fit: cover;

  object-position: center;

  vertical-align: top;

}

.main-carousel.changing-to-next .slide.slide-actual {

  z-index: 5;

}

.main-carousel.changing-to-next .slide.slide-prev {

  z-index: 4;

}

.main-carousel.changing-to-next .slide.slide-prev-prev {

  z-index: 3;

}

.main-carousel.changing-to-next .slide.slide-next {

  z-index: 2;

}

.main-carousel .content {

  position: absolute;

  display: flex;

  flex-direction: column;

  width: 100%;

  bottom: 0;

  left: 0;

  z-index: 6;

}

.main-carousel .content .content-wrapper {

  position: relative;

  margin-top: auto;

  width: 100%;

  padding: 20px 0 20px;

  color: var(--white);

}

.main-carousel .content .content-wrapper::before {

  position: absolute;

  border-bottom: 1px solid var(--white);

  height: 1px;

  content: "";

  display: inline-block;

  top: 0;

  left: 0;

  width: 100%;

  transition: width 14s linear 0.5s, border-color 0.3s ease-in-out 0s;

}

.main-carousel .content .content-wrapper::after {

  position: absolute;

  border-bottom: 1px solid var(--white);

  width: 100%;

  height: 1px;

  content: "";

  display: inline-block;

  top: 0;

  left: 0;

  opacity: 0.45;

  transition: border-color 0.3s ease-in-out 0s;

}

.main-carousel .content .controls {

  padding: 20px 0 0;

  transition: color 0.3s;

}

.main-carousel .content .name {

  padding: 20px 0 0;

}

.main-carousel .content .arrow {

  background-color: transparent;

  border: 0;

  font-size: 0;

  cursor: pointer;

  transition: margin 0.1s, padding 0.1s;

  padding: 0 3px;

}

.main-carousel .content .arrow img {

  width: 10px;

  height: 10px;

  vertical-align: bottom;

  transition: filter 0.3s;

  filter: invert(0%);

}

.main-carousel .content .arrow.previous:hover {

  margin-left: -2px;

  padding-right: 5px;

}

.main-carousel .content .arrow.next:hover {

  padding-left: 5px;

}

.main-carousel .content table {

  width: 100%;

  margin-top: 20px;

}

.main-carousel .content table td {

  padding: 2px 0;

  width: 80px;

}

.main-carousel .content table td:last-child {

  width: calc(100% - 80px);

}

.main-carousel .content table .second-to-last-col td {

  width: 130px;

}

.main-carousel .content table .second-to-last-col td:last-child {

  width: calc(100% - 130px);

}

.main-carousel .content .buttons {

  margin: 20px 0 0;

  float: right;

}

.main-carousel .content .buttons .btn {

  color: var(--white);

  border-color: var(--white);

  line-height: 26px;

}

.main-carousel.changing .content-wrapper::before {

  width: 0%;

  transition-duration: 0s;

  transition-delay: 0s;

}

.main-carousel[data-actual="0"] .content table, .main-carousel[data-actual="2"] .content table, .main-carousel[data-actual="4"] .content table {

  display: none;

}

.main-carousel[data-actual="1"] .content .content-wrapper, .main-carousel[data-actual="3"] .content .content-wrapper, .main-carousel[data-actual="4"] .content .content-wrapper {

  color: var(--black);

}

.main-carousel[data-actual="1"] .content .content-wrapper::before, .main-carousel[data-actual="1"] .content .content-wrapper::after, .main-carousel[data-actual="3"] .content .content-wrapper::before, .main-carousel[data-actual="3"] .content .content-wrapper::after, .main-carousel[data-actual="4"] .content .content-wrapper::before, .main-carousel[data-actual="4"] .content .content-wrapper::after {

  border-color: var(--black);

}

.main-carousel[data-actual="1"] .content .arrow img, .main-carousel[data-actual="3"] .content .arrow img, .main-carousel[data-actual="4"] .content .arrow img {

  filter: invert(100%);

}

.main-carousel[data-actual="1"] .content .buttons .btn, .main-carousel[data-actual="3"] .content .buttons .btn, .main-carousel[data-actual="4"] .content .buttons .btn {

  color: var(--black);

  border-color: var(--black);

}



main.homepage section {

  min-height: 100vh;

}

main.homepage section.intro {

  position: relative;

}

main.homepage section.about {

  padding: 40px 0;

  font-size: 18px;

}

main.homepage section.about .hero {

  font-size: 24px;

  line-height: 1.1em;

  margin-bottom: 40px;

}

main.homepage section.about .logo {

  margin: 40px 0 0;

  max-width: 280px;

}

main.homepage section.about .logo svg {

  fill: var(--black);

}

main.homepage section.about .offer {

  margin-bottom: 40px;

}

main.homepage section.about .offer:first-child {

  margin-top: 60px;

}

main.homepage section.about .offer:last-child {

  margin-bottom: 0;

}

main.homepage section.about .offer header {

  border-bottom: 1px solid var(--black);

  padding: 15px 0;

  display: flex;

  margin-bottom: 20px;

}

main.homepage section.about .offer header h2 {

  font-size: 24px;

}

main.homepage section.about .offer header .btn {

  margin: 4px 0 4px auto;

  font-size: 13.5px;

  border-color: var(--black);

  color: var(--black);

}

main.homepage section.about .offer .font-link {

  padding-top: 0;

  border-bottom: 0;

}

main.homepage section.about .offer .font-link .price {

  text-align: right;

}

main.homepage section.about .offer p {

  margin-bottom: 1em;

}

main.homepage section.about .offer ul {

  margin-bottom: 20px;

}

main.homepage section.about .offer small, main.homepage section.about .offer .small {

  font-size: 13.5px;

  line-height: 1.1em;

  display: block;

}

main.homepage section.about .offer .small {

  margin-bottom: 60px;

}

main.homepage section.about .offer .col-1-3 {

  text-align: right;

  display: flex;

}

main.homepage section.about .offer .price {

  margin: auto 0 0 auto;

  position: relative;

  text-align: center;

  display: inline-block;

  width: 90px;

}

main.homepage section.about .offer .price .img-holder {

  transition: transform 0.3s;

}

main.homepage section.about .offer .price svg {

  vertical-align: top;

  fill: var(--black);

  animation: rotate-n-pulse 10s linear infinite;

}

main.homepage section.about .offer .price .text {

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  line-height: 1em;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

}

main.homepage section.about .offer .price:hover .img-holder {

  transform: scale(1.1);

}

main.homepage section.about .offer:nth-child(2) .price img {

  animation-delay: -4s;

}

main.homepage section.about .offer:nth-child(3) .price img {

  animation-delay: -7s;

}

main.homepage section:not(.about) h2 {

  padding: 30px 0 25px;

  border-bottom: 1px solid var(--black);

  margin-bottom: 30px;

}

main.homepage section:not(.about) p {

  font-size: 18px;

}

main.homepage section:not(.about) p:not(:first-child) {

  text-indent: 40px;

}

main.homepage section:not(.about) .hero {

  margin-bottom: 30px;

}

main.homepage section:not(.about) .buttons {

  margin-bottom: 30px;

  text-align: right;

}

main.homepage section:not(.about) .buttons a {

  margin-left: 5px;

  color: var(--black);

  border-color: var(--black);

}

main.homepage .timer {

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  mix-blend-mode: lighten;

  pointer-events: none;

  z-index: 1;

}

main.homepage .timer .time {

  width: 0;

  left: 0;

  right: auto;

  top: 0;

  position: absolute;

  background-color: var(--light-blue);

  height: 100%;

  transition: width 9s linear 0s;

}

main.homepage .timer .time.playing {

  width: 100%;

}

main.homepage .timer .time.white {

  left: auto;

  right: 0;

  width: 0;

}

main.homepage .offer.hidden .timer .time {

  width: 0;

  transition-duration: 0s;

  transition-delay: 0.5s;

}

main.homepage #reveal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2000;

  text-align: center;

  background-color: var(--white);

  display: flex;

}

main.homepage #reveal.hidden {

  display: none !important;

}

main.homepage #reveal .reveal-holder {

  margin: auto;

  display: none;

}

main.homepage #reveal .reveal-holder h1 {

  font-size: 18px;

}

main.homepage #reveal.dark {

  background-color: var(--black);

  color: var(--gray);

}



#cursor {

  font-size: 11px;

  height: 30px;

  line-height: 30px;

  padding: 0 15px;

  border-radius: 5px;

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

  background-color: rgba(255, 255, 255, 0.4);

  position: fixed;

  z-index: 10000;

  color: #000;

  text-transform: uppercase;

  vertical-align: top;

  backdrop-filter: blur(10px);

  margin-top: -15px;

  pointer-events: none;

  opacity: 1;

  transition: opacity 0.2s, transform 0s;

  white-space: nowrap;

}



#cursor.drag {

  height: 80px;

  width: 80px;

  line-height: 80px;

  border-radius: 50%;

  text-align: center;

  margin-top: -40px;

}



#cursor.arrow {

  height: 80px;

  width: 80px;

  line-height: 74px;

  border-radius: 50%;

  text-align: center;

  margin-top: -40px;

  font-size: 28px;

}



#cursor.hidden {

  opacity: 0;

}



#cursor.clicked {

  transform: scale(0.9);

}



[data-cursor], [data-cursor] * {

  cursor: none !important;

}



#alertInPlace {

  background-color: var(--real-black);

  color: var(--gray);

  padding: 10px 20px;

  position: absolute;

  border-radius: 4px;

  z-index: 100;

  transition: opacity 0.2s;

}

#alertInPlace.hidden {

  opacity: 0;

  pointer-events: none;

  transition-duration: 1s;

}



@keyframes rotate-n-pulse {

  0% {

    transform: rotate(0deg) scale(1);

  }

  25% {

    transform: rotate(90deg) scale(0.9);

  }

  50% {

    transform: rotate(180deg) scale(1);

  }

  75% {

    transform: rotate(270deg) scale(0.9);

  }

  100% {

    transform: rotate(360deg) scale(1);

  }

}

.blink-link {

  color: var(--red);

  white-space: nowrap;

}



body.fontDetail[data-scheme=black] {

  --white: #fff;

  --black: #000;

}

body.fontDetail[data-scheme=black] .arrow-link .arrow {

  background-image: url("../img/arrow/arrow-black.svg");

}

body.fontDetail[data-scheme=black] .accordion h3:after {

  background-image: url("../img/cross-black.svg") !important;

}

body.fontDetail[data-scheme=black] section.intro, body.fontDetail[data-scheme=black] section#section-cart {

  --white: #f6f6f6;

  --black: #202020;

}



body.fontDetail[data-scheme=white] {

  --white: #000;

  --black: #fff;

}

body.fontDetail[data-scheme=white] .arrow-link .arrow {

  background-image: url("../img/arrow/arrow-white.svg");

}

body.fontDetail[data-scheme=white] .accordion h3:after {

  background-image: url("../img/cross-white.svg") !important;

}

body.fontDetail[data-scheme=white] section.intro, body.fontDetail[data-scheme=white] section#section-cart {

  --white: #f6f6f6;

  --black: #202020;

}



#fonts-list {

  margin: auto 0 0;

  width: 100%;

  position: relative;

}

#fonts-list tr td {

  padding: 0;

}

#fonts-list a {

  text-decoration: none;

}

#fonts-list sup {

  text-transform: uppercase;

  font-size: 0.6em;

}



#bg-fonts {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  z-index: -1;

  pointer-events: none;

}

#bg-fonts img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 0;

}



#bg-fonts.cakra img#bg-cakra, #bg-fonts.gauranga img#bg-gauranga, #bg-fonts.marc img#bg-marc, #bg-fonts.prabhupadaBook img#bg-prabhupadaBook, #bg-fonts.prabhupadaRoman img#bg-prabhupadaRoman, #bg-fonts.raghava img#bg-raghava, #bg-fonts.uttara img#bg-uttara {

  opacity: 1;

}



body.bg-font #bg-fonts {

  z-index: 100;

}

body.bg-font #bg-fonts #fonts-list, body.bg-font #bg-fonts #fonts-list a {

  color: var(--white);

}



body.bg-font main.homepage section.about .hero {

  visibility: hidden;

}



main.homepage section.about .sticky-column {

  z-index: 102;

}



.standards–square {

  border-radius: 8px;

  width: 240px;

  height: 240px;

  padding: 10px;

  background-color: var(--light-blue);

  color: var(--blue);

  text-align: center;

  position: relative;

  display: flex;

}

.standards–square .content {

  margin: 0 auto auto;

  font-size: 180px;

  vertical-align: top;

  line-height: 1.05;

  display: inline-block;

}

.standards–square .line {

  width: calc(100% - 30px);

  height: 1px;

  background-color: var(--blue);

  opacity: 0.27;

  position: absolute;

  left: 15px;

}

.standards–square .line-top {

  top: 55px;

}

.standards–square .line-middle {

  top: 101px;

}

.standards–square .line-bottom {

  top: 180px;

}



main.homepage section.about .sticky-column {

  position: relative;

}



#custom-fonts-overlay {

  position: absolute;

  width: 100%;

  height: 100%;

  z-index: 1;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.3s;

}

#custom-fonts-overlay.shown {

  opacity: 1;

}

#custom-fonts-overlay img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



#font-showcase .font-link:hover .content .front {

  opacity: 1;

}

#font-showcase .showcase {

  position: relative;

}

#font-showcase .font-link {

  display: none;

}

#font-showcase .font-link.active {

  display: block;

}

#font-showcase .font-link .header {

  position: relative;

  z-index: 2;

  font-size: 13.5px;

  padding-top: 20px;

  overflow: hidden;

}

#font-showcase .font-link .header > * {

  transform: translate(0, 0);

  transition: transform 0.5s;

}

#font-showcase.hidden .font-link .header > * {

  transform: translate(0, -60px);

}

#font-showcase.hidden .content {

  opacity: 0;

  transition-duration: 0;

}

#font-showcase .content {

  transition: opacity 0.5s;

}

#font-showcase header {

  overflow: hidden;

  position: relative;

  margin-bottom: 0;

}

#font-showcase h2 {

  transition: top 0.5s;

  position: absolute;

  left: 0;

  top: 15px;

}



.black-hole-showcase {

  border-radius: 8px;

  background-color: var(--light-blue);

  overflow: hidden;

  position: relative;

}

.black-hole-showcase .slides {

  position: relative;

  width: 100%;

  padding-top: 82%;

}

.black-hole-showcase .carousel-cell {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: -100%;

  transition: left 1s ease-in-out 0.5s;

  z-index: 2;

  background-color: var(--light-blue);

}

.black-hole-showcase .carousel-cell .image {

  border-radius: 6px;

  width: 100%;

  transform: scale(0.9);

  transition: transform 0.5s 0s ease-in-out;

  vertical-align: top;

}

.black-hole-showcase .carousel-cell.slide-actual {

  left: 0;

  z-index: 3;

}

.black-hole-showcase .carousel-cell.slide-next {

  left: 100%;

  z-index: 1;

}

.black-hole-showcase .carousel-cell.slide-actual .image {

  transform: scale(1);

  transition-delay: 1.5s;

}

.black-hole-showcase .content {

  position: absolute;

  bottom: 0px;

  left: 0;

  width: 100%;

  padding: 10px 15px;

  color: var(--black);

  display: flex;

  flex-direction: row;

  transition: bottom 0.5s;

  z-index: 5;

  font-size: 13.5px;

}

.black-hole-showcase .content .client, .black-hole-showcase .content .glyphs {

  min-width: 100px;

}

.black-hole-showcase .content .glyphs {

  text-align: right;

}

.black-hole-showcase .content .cuts {

  padding: 0 15px;

  margin: 0 auto;

}

.black-hole-showcase.changing .content {

  bottom: -50px;

}



aside#trial-fonts {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 1900;

}

aside#trial-fonts .overlay {

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.72);

  opacity: 0;

  transition: opacity 0.5s;

}

aside#trial-fonts .panel {

  height: 100%;

  max-width: 560px;

  width: 100%;

  position: absolute;

  top: 0;

  right: -560px;

  background-color: var(--light-blue);

  color: var(--blue);

  overflow-y: auto;

  transition: right 0.5s;

  font-size: 18px;

  padding: 20px 0;

}

aside#trial-fonts .panel .container {

  display: flex;

  flex-direction: column;

  min-height: 100%;

}

aside#trial-fonts.shown {

  pointer-events: auto;

}

aside#trial-fonts.shown .overlay {

  opacity: 1;

}

aside#trial-fonts.shown .panel {

  right: 0;

}

aside#trial-fonts header {

  display: flex;

  flex-direction: row;

  border-bottom: 1px solid var(--blue);

  margin-bottom: 25px;

}

aside#trial-fonts header h2 {

  font-size: 42px;

}

aside#trial-fonts header button {

  margin-left: auto;

  background-color: transparent;

  padding: 0;

  border: 0;

  width: 48px;

  height: 48px;

  cursor: pointer;

  transition: transform 0.3s cubic-bezier(0.09, 0.98, 0.7, 1.2);

}

aside#trial-fonts header button:hover {

  transform: rotate(90deg);

}

aside#trial-fonts form {

  height: 100%;

  margin-top: 15px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}

aside#trial-fonts form .font-select {

  margin-bottom: auto;

}

aside#trial-fonts form .font-select .font-select-holder {

  margin: 10px 0;

}

aside#trial-fonts form .font-select input {

  width: 0;

  height: 0;

  visibility: hidden;

  position: absolute;

}

aside#trial-fonts form .font-select label {

  font-size: 24px;

  line-height: 40px;

  border: 1px solid var(--blue);

  display: inline-block;

  width: 66%;

  border-radius: 3px;

  text-align: center;

  cursor: pointer;

  transition: margin 0.3s, color 0.3s, background 0.3s;

}

aside#trial-fonts form .font-select input:checked + label {

  margin-left: 34%;

}

aside#trial-fonts form .font-select input:checked + label, aside#trial-fonts form .font-select label:hover {

  background-color: var(--blue);

  color: var(--light-blue);

}

aside#trial-fonts form .font-select input#gauranga + label {

  font-family: "gauranga-stava";

}

aside#trial-fonts form .font-select input#raghava-grotesk + label {

  font-family: "raghava-grotesk-regular";

}

aside#trial-fonts form .font-select input#marc + label {

  font-family: "marc-regular";

}

aside#trial-fonts form .font-select input#prabhupada-roman + label {

  font-family: "prabhupada-roman";

}

aside#trial-fonts form .font-select input#prabhupada-book + label {

  font-family: "prabhupada-book";

}

aside#trial-fonts form .font-select input#uttara + label {

  font-family: "uttara-regular";

}

aside#trial-fonts form .inputs {

  margin: 20px 0;

}

aside#trial-fonts form .inputs input {

  width: 100%;

  border: 0;

  border-bottom: 1px solid var(--blue);

  color: var(--blue);

  background: transparent;

  padding: 5px 0;

  margin-top: 15px;

  font-size: 18px;

  opacity: 0.45;

  transition: opacity 0.3s;

  font-family: var(--font-regular);

}

aside#trial-fonts form .inputs ::placeholder {

  opacity: 1;

  color: var(--blue);

}

aside#trial-fonts form .inputs input:not(:placeholder-shown), aside#trial-fonts form .inputs input:focus {

  opacity: 1;

}

aside#trial-fonts form .form-row {

  display: flex;

  margin-top: 5px;

}

aside#trial-fonts form .form-row .checkbox-holder {

  margin-right: 40px;

}

aside#trial-fonts form .form-row .checkbox-holder input {

  visibility: hidden;

  position: absolute;

}

aside#trial-fonts form .form-row .checkbox-holder label {

  font-size: 13.5px;

  display: inline-block;

  padding-left: 52px;

  position: relative;

}

aside#trial-fonts form .form-row .checkbox-holder label a {

  opacity: 0.45;

  color: var(--blue);

  transition: opacity 0.3s;

}

aside#trial-fonts form .form-row .checkbox-holder label a:hover, aside#trial-fonts form .form-row .checkbox-holder label a:focus {

  opacity: 1;

}

aside#trial-fonts form .form-row .checkbox-holder label:before {

  content: "";

  width: 32px;

  height: 32px;

  border: 1px solid var(--blue);

  border-radius: 3px;

  display: inline-block;

  position: absolute;

  top: 0;

  left: 0;

}

aside#trial-fonts form .form-row .checkbox-holder label:after {

  content: "";

  width: 32px;

  height: 32px;

  display: inline-block;

  position: absolute;

  top: 0;

  left: 0;

  background-image: url("/img/tick-blue.svg");

  opacity: 0;

  transition: opacity 0.2s;

  cursor: pointer;

}

aside#trial-fonts form .form-row .checkbox-holder input:checked + label:after {

  opacity: 1;

}

aside#trial-fonts form .form-row .submit-holder {

  margin-left: auto;

}

aside#trial-fonts form .form-row .submit-holder button {

  border-radius: 3px;

  color: var(--blue);

  border-color: var(--blue);

  white-space: nowrap;

  padding: 3px 15px;

}

aside#trial-fonts form .form-row .submit-holder button .hover {

  display: none;

}

aside#trial-fonts form .form-row .submit-holder button:hover .hover {

  display: block;

}



main.information, main.benefits {

  padding-top: 60px;

}

main.information p, main.benefits p {

  font-size: 18px;

  line-height: 1.2em;

  margin-bottom: 1em;

}

main.information p a, main.benefits p a {

  color: var(--red);

}

main.information ol, main.information ul, main.benefits ol, main.benefits ul {

  padding-left: 24px;

  counter-reset: ordered;

}

main.information ol li, main.information ul li, main.benefits ol li, main.benefits ul li {

  padding: 5px 0 0 10px;

  position: relative;

  font-size: 18px;

  line-height: 1.2em;

  counter-increment: ordered;

}

main.information ol li:before, main.information ul li:before, main.benefits ol li:before, main.benefits ul li:before {

  content: "";

  display: block;

  background: url("../img/circle.svg");

  position: absolute;

  left: -24px;

  top: 5px;

  width: 24px;

  height: 24px;

  vertical-align: top;

  animation: rotate-n-pulse 10s linear infinite;

}

main.information ol li:nth-child(5n+1):before, main.information ul li:nth-child(5n+1):before, main.benefits ol li:nth-child(5n+1):before, main.benefits ul li:nth-child(5n+1):before {

  animation-delay: 4s;

}

main.information ol li:nth-child(5n+2):before, main.information ul li:nth-child(5n+2):before, main.benefits ol li:nth-child(5n+2):before, main.benefits ul li:nth-child(5n+2):before {

  animation-delay: 8s;

}

main.information ol li:nth-child(5n+3):before, main.information ul li:nth-child(5n+3):before, main.benefits ol li:nth-child(5n+3):before, main.benefits ul li:nth-child(5n+3):before {

  animation-delay: 2s;

}

main.information ol li:nth-child(5n+4):before, main.information ul li:nth-child(5n+4):before, main.benefits ol li:nth-child(5n+4):before, main.benefits ul li:nth-child(5n+4):before {

  animation-delay: 6s;

}

main.information ol li:after, main.benefits ol li:after {

  content: counter(ordered, upper-alpha);

  display: block;

  position: absolute;

  left: -24px;

  top: 6px;

  width: 24px;

  height: 14px;

  vertical-align: top;

  color: var(--white);

  text-align: center;

  font-size: 13.5px;

  line-height: 18px;

}

main.information section, main.benefits section {

  min-height: 200px;

  padding: 0 0 30px;

}

main.information section .section-header, main.benefits section .section-header {

  padding: 0 0 10px;

  margin-bottom: 25px;

  font-size: 13.5px;

  border-bottom: 1px solid var(--black);

  position: sticky;

  top: 59px;

  line-height: 30px;

  background-color: var(--white);

  z-index: 1;

}

main.information section .section-header .section-nav a, main.benefits section .section-header .section-nav a {

  margin-right: 24px;

  transition: letter-spacing 0.3s;

}

main.information section .section-header .section-nav a:hover, main.information section .section-header .section-nav a.active, main.benefits section .section-header .section-nav a:hover, main.benefits section .section-header .section-nav a.active {

  letter-spacing: 2px;

}

main.information section .section-header .section-nav .subnav, main.benefits section .section-header .section-nav .subnav {

  display: inline-block;

  padding: 5px 0;

  line-height: 20px;

}

main.information section .section-header .section-nav .subnav a, main.benefits section .section-header .section-nav .subnav a {

  opacity: 0.54;

  margin-right: 12px;

}

main.information section article, main.benefits section article {

  padding: 160px 0 0;

}

main.information section article .article-top, main.benefits section article .article-top {

  margin-bottom: 60px;

}

main.information section article header, main.benefits section article header {

  position: static;

}

main.information section article h3, main.information section article h4, main.information section article h5, main.benefits section article h3, main.benefits section article h4, main.benefits section article h5 {

  margin-bottom: 10px;

  font-size: 10px;

  line-height: 1.5em;

}

main.information section article h3 .submenu, main.information section article h4 .submenu, main.information section article h5 .submenu, main.benefits section article h3 .submenu, main.benefits section article h4 .submenu, main.benefits section article h5 .submenu {

  opacity: 0.54;

}

main.information section article p, main.benefits section article p {

  margin-bottom: 0;

}

main.information section article p:not(:first-of-type), main.benefits section article p:not(:first-of-type) {

  text-indent: 2em;

}

main.information section article p a, main.benefits section article p a {

  color: var(--red);

}

main.information section article small, main.benefits section article small {

  margin-top: 20px;

  display: block;

}

main.information section article small p, main.benefits section article small p {

  font-size: 13.5px;

  text-indent: 0 !important;

}

main.information section article .small-column, main.benefits section article .small-column {

  height: 100%;

  display: flex;

  flex-direction: column;

}

main.information section article .small-column p, main.benefits section article .small-column p {

  font-size: 13.5px;

}

main.information section article .small-column h5, main.benefits section article .small-column h5 {

  margin-bottom: 15px;

}

main.information section article .small-column h5 .uppercase, main.benefits section article .small-column h5 .uppercase {

  display: block;

  text-transform: uppercase;

}

main.information section article .small-column .link, main.benefits section article .small-column .link {

  position: relative;

  margin-top: auto;

}

main.information section article .small-column .link:before, main.benefits section article .small-column .link:before {

  content: "";

  width: 10px;

  height: 10px;

  display: inline-block;

  background: url("../img/arrow/arrow-black.svg");

  transition: margin 0.3s;

  margin-right: 6px;

}

main.information section article .small-column .link:hover:before, main.benefits section article .small-column .link:hover:before {

  margin-right: 0px;

  margin-left: 6px;

}

main.information section article .small-column .link a, main.benefits section article .small-column .link a {

  cursor: pointer;

}

main.information section article .terms, main.benefits section article .terms {

  padding-top: 60px;

}

main.information section article .terms .title, main.benefits section article .terms .title {

  font-size: 18px;

  line-height: 1.2em;

  margin-bottom: 20px;

}

main.information section article .uppercase, main.benefits section article .uppercase {

  text-transform: uppercase;

}

main.information section article em, main.benefits section article em {

  background-color: var(--light-blue);

  padding: 0px 10px 5px;

}

main.information .accordion, main.benefits .accordion {

  border-top: 1px solid var(--black);

}

main.information .accordion .accordion-item, main.benefits .accordion .accordion-item {

  border-bottom: 1px solid var(--black);

}

main.information .accordion .accordion-item .accordion-content-inner, main.benefits .accordion .accordion-item .accordion-content-inner {

  padding-bottom: 40px;

}

main.information .accordion h4, main.benefits .accordion h4 {

  font-size: 24px;

  line-height: 1em;

  padding: 10px 0 15px;

  position: relative;

  margin-bottom: 0;

}

main.information .accordion h4 sup, main.benefits .accordion h4 sup {

  font-size: 0.5em;

}

main.information .accordion h4::after, main.benefits .accordion h4::after {

  content: "";

  position: absolute;

  right: 0;

  top: 13px;

  display: inline-block;

  width: 22px;

  height: 22px;

  background-image: url("../img/cross.svg");

  transition: transform 0.3s;

}

main.information .accordion .accordion-item.open h4::after, main.benefits .accordion .accordion-item.open h4::after {

  transform: rotate(45deg);

}

main.information .download-button-holder, main.benefits .download-button-holder {

  margin-top: 40px;

}

main.information .hero, main.benefits .hero {

  font-size: 24px;

  line-height: 1.1em;

  margin-bottom: 1em;

}

main.information #legend, main.benefits #legend {

  margin-top: 80px;

  position: relative;

}

main.information #legend .legend-photos, main.benefits #legend .legend-photos {

  position: relative;

  margin-bottom: 20px;

}

main.information #legend .legend-photos .image, main.benefits #legend .legend-photos .image {

  border-radius: 10px;

  overflow: hidden;

}

main.information #legend .legend-photos .image img, main.benefits #legend .legend-photos .image img {

  width: 100%;

  object-fit: cover;

  object-position: center;

  vertical-align: top;

}

main.information #legend .legend-photos .image.overlay, main.benefits #legend .legend-photos .image.overlay {

  position: absolute;

  top: 0;

  left: 0;

  display: none;

}

main.information #legend .legend-buttons, main.benefits #legend .legend-buttons {

  margin-bottom: 10px;

}

main.information #legend .legend-buttons .change-founders, main.benefits #legend .legend-buttons .change-founders {

  margin: 0 0 15px;

  background-color: transparent;

  color: var(--black);

  text-align: left;

  font-size: 13.5px;

  padding: 0;

  border: 0;

  font-family: var(--font-regular);

  cursor: pointer;

}

main.information #legend .legend-buttons .change-founders span, main.benefits #legend .legend-buttons .change-founders span {

  margin-right: 10px;

  white-space: nowrap;

}

main.information #legend .legend-buttons .change-founders.overlay, main.benefits #legend .legend-buttons .change-founders.overlay {

  opacity: 0.45;

}

main.information #legend.active .legend-photos .image.overlay, main.benefits #legend.active .legend-photos .image.overlay {

  display: block;

}

main.information #legend.active .legend-buttons .change-founders.default, main.benefits #legend.active .legend-buttons .change-founders.default {

  opacity: 0.45;

}

main.information #legend.active .legend-buttons .change-founders.overlay, main.benefits #legend.active .legend-buttons .change-founders.overlay {

  opacity: 1;

}

main.information #article-opentype-features h4, main.information #article-opentype-features h5, main.benefits #article-opentype-features h4, main.benefits #article-opentype-features h5 {

  margin-top: 20px;

}

main.information #article-opentype-features .glyphs, main.benefits #article-opentype-features .glyphs {

  font-size: 27px;

}

main.information #article-opentype-features .glyphs em, main.benefits #article-opentype-features .glyphs em {

  opacity: 0.45;

  padding: 0;

  background: transparent;

  color: var(--black);

}

main.information #article-opentype-features .glyphs.tnum, main.benefits #article-opentype-features .glyphs.tnum {

  font-feature-settings: "tnum" 1;

}

main.information #article-opentype-features .glyphs.zero, main.benefits #article-opentype-features .glyphs.zero {

  font-feature-settings: "zero" 1;

}

main.information #article-opentype-features .glyphs.case, main.benefits #article-opentype-features .glyphs.case {

  font-feature-settings: "case" 1;

}

main.information .features .row, main.benefits .features .row {

  margin: 0 -6px;

}

main.information .features .col-1-3, main.information .features .col-2-3, main.benefits .features .col-1-3, main.benefits .features .col-2-3 {

  padding: 0 6px;

}

main.information .features .feature, main.benefits .features .feature {

  padding: 10px;

  background-color: rgba(32, 32, 32, 0.09);

  border-radius: 10px;

  margin-bottom: 12px;

  text-align: center;

  font-size: 5vw;

  cursor: pointer;

  font-feature-settings: "liga" 0, "frac" 0, "sups" 0, "subs" 0, "tnum" 0, "zero" 0, "case" 0;

}

main.information .features .feature span, main.benefits .features .feature span {

  opacity: 0.45;

}

main.information .features .feature span .no-change, main.benefits .features .feature span .no-change {

  font-feature-settings: "liga" 0, "frac" 0, "sups" 0, "subs" 0, "tnum" 0, "zero" 0, "case" 0;

  opacity: 1;

}

main.information .features .feature span.active, main.benefits .features .feature span.active {

  display: none;

}

main.information .features .feature.hover span, main.information .features .feature.active span, main.benefits .features .feature.hover span, main.benefits .features .feature.active span {

  opacity: 1;

}

main.information .features .feature.hover .active, main.information .features .feature.active .active, main.benefits .features .feature.hover .active, main.benefits .features .feature.active .active {

  display: block;

}

main.information .features .feature.hover .original, main.information .features .feature.active .original, main.benefits .features .feature.hover .original, main.benefits .features .feature.active .original {

  display: none;

}

main.information .features.liga .feature.hover, main.information .features.liga .feature.active, main.benefits .features.liga .feature.hover, main.benefits .features.liga .feature.active {

  font-feature-settings: "liga" 1;

}

main.information .features.frac .feature.hover, main.information .features.frac .feature.active, main.benefits .features.frac .feature.hover, main.benefits .features.frac .feature.active {

  font-feature-settings: "frac" 1;

}

main.information .features.subs .feature.hover, main.information .features.subs .feature.active, main.benefits .features.subs .feature.hover, main.benefits .features.subs .feature.active {

  font-feature-settings: "subs" 1;

}

main.information .features.sups .feature.hover, main.information .features.sups .feature.active, main.benefits .features.sups .feature.hover, main.benefits .features.sups .feature.active {

  font-feature-settings: "sups" 1;

}

main.information .features.tnum .feature.hover, main.information .features.tnum .feature.active, main.benefits .features.tnum .feature.hover, main.benefits .features.tnum .feature.active {

  font-feature-settings: "tnum" 1;

}

main.information .features.zero .feature.hover, main.information .features.zero .feature.active, main.benefits .features.zero .feature.hover, main.benefits .features.zero .feature.active {

  font-feature-settings: "zero" 1;

}

main.information .features.case .feature.hover, main.information .features.case .feature.active, main.benefits .features.case .feature.hover, main.benefits .features.case .feature.active {

  font-feature-settings: "case" 1;

}

main.information #section-service article, main.benefits #section-service article {

  padding-top: 360px;

}

main.information #section-service article header, main.benefits #section-service article header {

  display: flex;

  padding: 15px 0;

  border-bottom: 1px solid var(--black);

  margin-bottom: 20px;

}

main.information #section-service article header h3, main.benefits #section-service article header h3 {

  font-size: 18px;

  margin: 0;

}

main.information #section-service article header .btn, main.benefits #section-service article header .btn {

  color: var(--black);

  border-color: var(--black);

  margin: 0 0 0 auto;

}

main.information #section-service article ul, main.benefits #section-service article ul {

  margin-top: 1.5em;

}

main.information #section-faq .faq-holder, main.benefits #section-faq .faq-holder {

  counter-reset: faq;

  font-size: 18px;

}

main.information #section-faq .faq-holder .title, main.benefits #section-faq .faq-holder .title {

  text-transform: uppercase;

  font-size: 10px;

  padding: 2em 0;

  margin-top: 70px;

}

main.information #section-faq .faq-holder .accordion-header, main.benefits #section-faq .faq-holder .accordion-header {

  line-height: 1.2em;

  font-size: 18px;

  padding-left: 50px;

  padding-right: 40px;

  position: relative;

}

main.information #section-faq .faq-holder .accordion-header:before, main.benefits #section-faq .faq-holder .accordion-header:before {

  counter-increment: faq;

  content: counter(faq, decimal-leading-zero);

  position: absolute;

  left: 0;

}

main.information #section-faq .faq-holder .accordion-header:after, main.benefits #section-faq .faq-holder .accordion-header:after {

  width: 18px;

  height: 18px;

}

main.information #section-faq .faq-holder .accordion-content, main.benefits #section-faq .faq-holder .accordion-content {

  line-height: 1.2em;

}

main.information #section-faq .faq-holder .accordion-content .text, main.benefits #section-faq .faq-holder .accordion-content .text {

  padding-left: 50px;

}



main.benefits .sub-header {

  margin-bottom: 15px;

  border-bottom: 1px solid var(--black);

}

main.benefits em {

  background-color: var(--black45);

  color: var(--white);

  padding: 1px 12px 5px;

  border-radius: 3px;

  font-size: 13.5px;

  vertical-align: text-bottom;

  white-space: nowrap;

  margin-right: 1px;

}

main.benefits em.dark {

  background-color: var(--black);

}

main.benefits .licenses {

  margin-top: 30px;

}

main.benefits .licenses .row-forced {

  margin-bottom: 20px;

}

main.benefits .licenses h5 {

  font-size: 10px;

  margin-bottom: 0.5em;

}

main.benefits .licenses em {

  margin-bottom: 3px;

  display: inline-block;

}

main.benefits .blue-box {

  border-radius: 10px;

  background-color: var(--light-blue);

  padding: 30%;

  width: 100%;

  margin-top: 20px;

}

main.benefits .languages-available .letter, main.benefits .languages-available .language {

  padding: 2px 20px 4px;

  border-radius: 3px;

  display: inline-block;

  margin: 0 2px 5px 0;

}

main.benefits .languages-available .letter {

  background-color: var(--light-blue);

  color: var(--blue);

  cursor: pointer;

}

main.benefits .languages-available .letter:hover {

  color: var(--real-black);

}

main.benefits .languages-available .language {

  background-color: var(--black45);

  color: var(--white);

  cursor: pointer;

  transition: background-color 2s;

}

main.benefits .languages-available .language:hover, main.benefits .languages-available .language.selected {

  background-color: var(--black);

  transition-duration: 0s;

}

main.benefits .languages-available .languages {

  display: none;

}

main.benefits .languages-available .letter-holder {

  display: inline;

}

main.benefits .languages-available .letter-holder.opened .letter {

  color: var(--real-black);

}

main.benefits .languages-available .letter-holder.opened .languages {

  display: inline;

}

main.benefits #article-glyphs-set .toggle-buttons {

  margin-bottom: 15px;

}

main.benefits #article-glyphs-set .toggle-buttons .btn {

  color: var(--black);

  border-color: var(--black);

}

main.benefits #article-glyphs-set .toggle-buttons .btn.active {

  color: var(--white);

  background-color: var(--black);

}

main.benefits #article-glyphs-set .glyph-set {

  display: flex;

  flex-wrap: wrap;

}

main.benefits #article-glyphs-set .glyph-set .glyph {

  font-size: 24px;

  padding: 5px 10px;

  text-align: center;

  width: 16.66666%;

  position: relative;

  border-right: 1px solid var(--black);

  transition: background-color 2s;

}

main.benefits #article-glyphs-set .glyph-set .glyph .content {

  transition: transform 0.3s;

}

main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(6n) {

  border-right-width: 0;

}

main.benefits #article-glyphs-set .glyph-set .glyph::after {

  position: absolute;

  bottom: 0;

  left: 5px;

  width: calc(100% - 10px);

  height: 1px;

  content: "";

  background-color: var(--black);

}

main.benefits #article-glyphs-set .glyph-set .glyph::before {

  position: absolute;

  top: 0;

  left: 5px;

  width: calc(100% - 10px);

  height: 0px;

  content: "";

  background-color: var(--black);

}

main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(1)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(2)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(3)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(4)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(5)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(6)::before {

  height: 1px;

}

main.benefits #article-glyphs-set .glyph-set .glyph:hover {

  background-color: rgba(58, 58, 58, 0.36);

  transition-duration: 0s;

}

main.benefits #article-glyphs-set .glyph-set .glyph:hover .content {

  transform: scale(1.4);

}

main.benefits #article-glyphs-set .glyph-set .glyph.disabled {

  color: var(--light-gray);

}

main.benefits #article-languages-tester .type-tester {

  height: 600px;

  overflow: hidden;

}

main.benefits #article-languages-tester .type-tester .content {

  font-family: var(--font-regular);

  color: var(--black);

}



.black-hole-box {

  background-color: var(--black);

  border-radius: 10px;

  color: #424242;

  font-size: 24px;

  line-height: 1em;

  padding: 15px 0 0;

  margin-top: 30px;

  overflow: hidden;

  transition: color 0.3s;

}

.black-hole-box:hover {

  color: var(--light-blue);

}

.black-hole-box header {

  border-bottom: 1px solid #424242;

  padding-bottom: 10px;

  margin-bottom: 15px;

  font-size: 13.5px;

}

.black-hole-box .btn {

  border: 0;

  color: var(--black);

  background-color: #424242;

  font-size: 13.5px;

  padding: 2px 15px 5px 15px;

  line-height: 1em;

  vertical-align: middle;

}

.black-hole-box .btn:hover {

  transform: none;

}

.black-hole-box .btn.hovered {

  background-color: var(--light-blue);

}

.black-hole-box .bottom {

  margin-top: 100px;

  height: 200px;

  width: 100%;

  background-image: url("../img/blackhole.jpg");

  background-size: cover;

  background-position: center;

}



.download-button {

  width: 100%;

  background-color: var(--light-blue);

  display: block;

  line-height: 1.2em;

}

.download-button .inner {

  background-image: url("../img/download.svg");

  background-position: right 15px top 13px;

  background-repeat: no-repeat;

  background-size: 24px;

  color: var(--black);

  display: block;

  width: 100%;

  padding: 10px 55px 10px 15px;

  opacity: 0.36;

  transition: opacity 0.3s;

}

.download-button:hover .inner, .download-button:focus .inner {

  opacity: 1;

}

.download-button .uppercase {

  display: block;

  text-transform: uppercase;

}



.cryptedmail {

  cursor: pointer;

  color: var(--red);

  white-space: nowrap;

}



main.cart, #section-cart {

  padding: 60px 0;

  background-color: var(--white);

}

main.cart h2, #section-cart h2 {

  padding: 0 0 10px;

  margin-bottom: 25px;

  font-size: 13.5px;

  border-bottom: 1px solid var(--black);

  line-height: 30px;

}

main.cart .part, #section-cart .part {

  padding: 12px 0 6px;

  border-bottom: 1px solid var(--black);

  transition: opacity 0.3s;

}

main.cart .part .part-title, #section-cart .part .part-title {

  margin-bottom: 15px;

  font-size: 10px;

}

main.cart .part .row, #section-cart .part .row {

  margin: 0 -6px;

}

main.cart .part .col-1-2, #section-cart .part .col-1-2 {

  padding: 0 6px;

}

main.cart .part.active .part-title, #section-cart .part.active .part-title {

  font-size: 30px;

}

main.cart .part.disabled, #section-cart .part.disabled {

  opacity: 0.36;

  pointer-events: none;

}

main.cart .part.disabled .box h4 .price-right, #section-cart .part.disabled .box h4 .price-right {

  opacity: 0;

}

main.cart .select-typeface, #section-cart .select-typeface {

  width: 100%;

  margin-bottom: 6px;

  position: relative;

  z-index: 5;

}

main.cart .select-typeface .control, #section-cart .select-typeface .control {

  width: 100%;

  height: auto;

}

main.cart .select-typeface .control .select-trigger, #section-cart .select-typeface .control .select-trigger {

  padding: 8px 12px;

}

main.cart .select-typeface .control .select-trigger::after, #section-cart .select-typeface .control .select-trigger::after {

  top: 8px;

  right: 12px;

}

main.cart .select-typeface .control .select-options, #section-cart .select-typeface .control .select-options {

  top: 34px;

}

main.cart .select-typeface .control .select-options .option, #section-cart .select-typeface .control .select-options .option {

  padding: 8px 12px;

}

main.cart #cart-selection .select, #section-cart #cart-selection .select {

  padding-top: 2px;

  cursor: default;

}

main.cart #cart-selection .select-trigger, #section-cart #cart-selection .select-trigger {

  width: 60px;

  border-radius: 4px;

  cursor: pointer;

}

main.cart #cart-selection .select-trigger input, #section-cart #cart-selection .select-trigger input {

  font-size: 12px;

  line-height: 13px;

}

main.cart #cart-selection .select-trigger::after, #section-cart #cart-selection .select-trigger::after {

  font-size: 8px;

}

main.cart #cart-selection .select-options, #section-cart #cart-selection .select-options {

  width: 60px;

  font-size: 12px;

  line-height: 13px;

}

main.cart #cart-selection .select-label, #section-cart #cart-selection .select-label {

  left: 75px;

  pointer-events: auto;

}

main.cart #cart-selection .select-label .tooltip, #section-cart #cart-selection .select-label .tooltip {

  position: absolute;

  background-color: var(--gray);

  bottom: 16px;

  opacity: 0.54;

  padding: 0px 6px 2px;

  border-radius: 4px;

  display: inline-block;

  opacity: 0;

  transition: opacity 0.3s;

  pointer-events: none;

}

main.cart #cart-selection .select-label:hover .tooltip, #section-cart #cart-selection .select-label:hover .tooltip {

  opacity: 1;

}

main.cart #cart-selection .no-options .select-trigger, #section-cart #cart-selection .no-options .select-trigger {

  pointer-events: none;

}

main.cart #cart-selection .no-options .select-trigger::after, #section-cart #cart-selection .no-options .select-trigger::after {

  display: none;

}

main.cart .box, #section-cart .box {

  background: var(--extralight-gray);

  padding: 15px 12px;

  border-radius: 4px;

  position: relative;

  color: var(--darker-gray);

  transition: opacity 0.3s;

  margin-bottom: 12px;

}

main.cart .box .image, #section-cart .box .image {

  position: absolute;

  opacity: 0.72;

  right: 12px;

  transition: width 0.3s, top 0.3s;

  width: 100px;

  top: 112px;

}

main.cart .box .image img, #section-cart .box .image img {

  vertical-align: top;

}

main.cart .box h4, #section-cart .box h4 {

  border-bottom: 1px solid var(--darker-gray);

  padding-bottom: 15px;

  margin-bottom: 15px;

  display: flex;

}

main.cart .box h4 .price-right, #section-cart .box h4 .price-right {

  opacity: 1;

}

main.cart .box .price-right, #section-cart .box .price-right {

  margin-left: auto;

  transition: opacity 0.3s;

  opacity: 0;

}

main.cart .box .price-right .amount, #section-cart .box .price-right .amount {

  width: 45px;

  display: inline-block;

  text-align: right;

}

main.cart .box .about, #section-cart .box .about {

  min-height: 20px;

  padding-bottom: 15px;

}

main.cart .box .subabout, #section-cart .box .subabout {

  margin-bottom: 20px;

  font-size: 10px;

  margin-top: -11px;

}

main.cart .box .radio-holder input, #section-cart .box .radio-holder input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

main.cart .box .radio-holder label, #section-cart .box .radio-holder label {

  display: inline-block;

  padding-left: 24px;

  position: relative;

  line-height: 22px;

  width: 100%;

  display: flex;

  opacity: 0.54;

  color: var(--black);

}

main.cart .box .radio-holder label:before, #section-cart .box .radio-holder label:before {

  content: "";

  width: 16px;

  height: 16px;

  border: 1px solid var(--black);

  display: inline-block;

  position: absolute;

  top: 2px;

  left: 0;

}

main.cart .box .radio-holder label:after, #section-cart .box .radio-holder label:after {

  content: "";

  width: 16px;

  height: 16px;

  display: inline-block;

  position: absolute;

  top: 2px;

  left: 0;

  background-image: url("/img/tick-black.svg");

  opacity: 0;

  transition: opacity 0.2s;

  cursor: pointer;

}

main.cart .box .radio-holder input:checked + label, #section-cart .box .radio-holder input:checked + label {

  opacity: 1;

}

main.cart .box .radio-holder input:checked + label:after, #section-cart .box .radio-holder input:checked + label:after {

  opacity: 1;

}

main.cart .box .radio-holder .table-holder, #section-cart .box .radio-holder .table-holder {

  color: var(--black);

  transition: height 0.3s, opacity 0.3s 0.3s;

}

main.cart .box .radio-holder .table-holder table, #section-cart .box .radio-holder .table-holder table {

  margin: 12px 0;

  width: 100%;

}

main.cart .box .radio-holder .table-holder table td, #section-cart .box .radio-holder .table-holder table td {

  width: 50%;

  padding: 0;

}

main.cart .box .radio-holder .table-holder table td:first-child, #section-cart .box .radio-holder .table-holder table td:first-child {

  padding: 0px 24px 0px 0;

}

main.cart .box .radio-holder input:not(:checked) ~ .table-holder, #section-cart .box .radio-holder input:not(:checked) ~ .table-holder {

  height: 0 !important;

  opacity: 0;

  transition-delay: 0s, 0s;

}

main.cart .box .radio-holder.two-part, main.cart .box .radio-holder .table-holder, #section-cart .box .radio-holder.two-part, #section-cart .box .radio-holder .table-holder {

  display: flex;

}

main.cart .box .radio-holder.two-part label, main.cart .box .radio-holder .table-holder label, #section-cart .box .radio-holder.two-part label, #section-cart .box .radio-holder .table-holder label {

  width: 50%;

}

main.cart .box .radio-holder.two-part .select-inline, main.cart .box .radio-holder .table-holder .select-inline, #section-cart .box .radio-holder.two-part .select-inline, #section-cart .box .radio-holder .table-holder .select-inline {

  width: 50%;

  position: relative;

  padding: 0;

  background-color: transparent;

  margin: 0;

}

main.cart .box .radio-holder.two-part .select-inline input, main.cart .box .radio-holder .table-holder .select-inline input, #section-cart .box .radio-holder.two-part .select-inline input, #section-cart .box .radio-holder .table-holder .select-inline input {

  opacity: 1;

}

main.cart .box .radio-holder.two-part .select-inline .select-label, main.cart .box .radio-holder .table-holder .select-inline .select-label, #section-cart .box .radio-holder.two-part .select-inline .select-label, #section-cart .box .radio-holder .table-holder .select-inline .select-label {

  position: absolute;

  left: 33.33333%;

  top: 0;

  pointer-events: none;

  line-height: 22px;

}

main.cart .box .radio-holder.two-part .select-inline .select-options .option:first-child, main.cart .box .radio-holder .table-holder .select-inline .select-options .option:first-child, #section-cart .box .radio-holder.two-part .select-inline .select-options .option:first-child, #section-cart .box .radio-holder .table-holder .select-inline .select-options .option:first-child {

  border: 0;

}

main.cart .box .radio-holder .table-holder .select-inline, #section-cart .box .radio-holder .table-holder .select-inline {

  width: 100%;

}

main.cart .box .radio-holder .table-holder .select-inline .select-trigger, main.cart .box .radio-holder .table-holder .select-inline .select-trigger input, main.cart .box .radio-holder .table-holder .select-inline .select-label, #section-cart .box .radio-holder .table-holder .select-inline .select-trigger, #section-cart .box .radio-holder .table-holder .select-inline .select-trigger input, #section-cart .box .radio-holder .table-holder .select-inline .select-label {

  color: var(--black);

}

main.cart .third-parts .subabout, #section-cart .third-parts .subabout {

  margin-top: 10px;

  max-width: 540px;

  padding-right: 60px;

  margin-bottom: 0;

}

main.cart .third-parts .image, #section-cart .third-parts .image {

  width: 70px;

  top: 70px;

}

main.cart .btn-holder, #section-cart .btn-holder {

  margin: 24px 0;

}

main.cart .cart-button, #section-cart .cart-button {

  width: 100%;

  font-size: 21px;

  border-radius: 4px;

  border: 0;

  cursor: pointer;

  padding: 6px 12px;

  transition: transform 0.3s;

  font-family: var(--font-regular);

}

main.cart .cart-button:hover, #section-cart .cart-button:hover {

  transform: scale(0.975);

}

main.cart #addToCart, #section-cart #addToCart {

  background-color: var(--black);

  color: var(--gray);

}

main.cart .part .pricing, #section-cart .part .pricing {

  font-size: 21px;

  line-height: 1.15em;

}

main.cart .part .pricing table, #section-cart .part .pricing table {

  width: 100%;

  margin-bottom: 6px;

}

main.cart .part .pricing table .discount, #section-cart .part .pricing table .discount {

  opacity: 0.36;

}

main.cart .part .pricing table td, #section-cart .part .pricing table td {

  padding: 0;

}

main.cart .part .pricing table td:last-child, #section-cart .part .pricing table td:last-child {

  text-align: right;

}

main.cart #cart-selection, #section-cart #cart-selection {

  transition: opacity 0.3s;

  position: relative;

}

main.cart #cart-selection .box, #section-cart #cart-selection .box {

  opacity: 0.63;

}

main.cart #cart-selection .box:hover, main.cart #cart-selection .box.selected, #section-cart #cart-selection .box:hover, #section-cart #cart-selection .box.selected {

  opacity: 1;

}

main.cart #cart-selection .box:hover.single .radio-holder .price-right, main.cart #cart-selection .box:hover.all-in-one .radio-holder .price-right, main.cart #cart-selection .box.selected.single .radio-holder .price-right, main.cart #cart-selection .box.selected.all-in-one .radio-holder .price-right, #section-cart #cart-selection .box:hover.single .radio-holder .price-right, #section-cart #cart-selection .box:hover.all-in-one .radio-holder .price-right, #section-cart #cart-selection .box.selected.single .radio-holder .price-right, #section-cart #cart-selection .box.selected.all-in-one .radio-holder .price-right {

  opacity: 1;

}

main.cart #cart-selection .box:hover.single .image, main.cart #cart-selection .box:hover.all-in-one .image, main.cart #cart-selection .box.selected.single .image, main.cart #cart-selection .box.selected.all-in-one .image, #section-cart #cart-selection .box:hover.single .image, #section-cart #cart-selection .box:hover.all-in-one .image, #section-cart #cart-selection .box.selected.single .image, #section-cart #cart-selection .box.selected.all-in-one .image {

  width: 45px;

  top: 60px;

}

main.cart #cart-selection .box:hover.single .select, main.cart #cart-selection .box:hover.all-in-one .select, main.cart #cart-selection .box.selected.single .select, main.cart #cart-selection .box.selected.all-in-one .select, #section-cart #cart-selection .box:hover.single .select, #section-cart #cart-selection .box:hover.all-in-one .select, #section-cart #cart-selection .box.selected.single .select, #section-cart #cart-selection .box.selected.all-in-one .select {

  pointer-events: auto;

  opacity: 1;

}

main.cart #cart-selection .box.single .select, #section-cart #cart-selection .box.single .select {

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.3s;

}

main.cart #cart-selection .pricing, main.cart #cart-selection #addToCart, #section-cart #cart-selection .pricing, #section-cart #cart-selection #addToCart {

  transition: transform 0.3s, opacity 0.3s;

}

main.cart #cart-selection .pricing.disabled, main.cart #cart-selection #addToCart.disabled, #section-cart #cart-selection .pricing.disabled, #section-cart #cart-selection #addToCart.disabled {

  opacity: 0.36;

  pointer-events: none;

}

main.cart #cart-buy .item, #section-cart #cart-buy .item {

  background-color: var(--light-blue);

  border-radius: 4px;

  margin-bottom: 12px;

  padding: 8px 12px;

}

main.cart #cart-buy .item.item-nothing, #section-cart #cart-buy .item.item-nothing {

  text-align: center;

  color: var(--blue);

  font-size: 45px;

  padding: 60px 30px;

  line-height: 1.05em;

}

main.cart #cart-buy .item header, #section-cart #cart-buy .item header {

  display: flex;

  font-size: 21px;

  margin-bottom: 24px;

}

main.cart #cart-buy .item header .remove, #section-cart #cart-buy .item header .remove {

  height: 20px;

  width: 20px;

  background-color: transparent;

  background-image: url("../img/cross-black.svg");

  margin: 6px 0 0 auto;

  font-size: 0;

  border: 0;

  transform: rotate(45deg);

  cursor: pointer;

}

main.cart #cart-buy .item .desc table, #section-cart #cart-buy .item .desc table {

  width: 100%;

}

main.cart #cart-buy .item .desc table td, #section-cart #cart-buy .item .desc table td {

  padding: 0 12px 0 0;

  width: 30%;

}

main.cart #cart-buy .item .desc table td:last-child, #section-cart #cart-buy .item .desc table td:last-child {

  padding-right: 0;

  width: 40%;

}

main.cart #cart-buy .item .pricing, #section-cart #cart-buy .item .pricing {

  margin-top: 24px;

  color: var(--blue);

}

main.cart #cart-buy .item .pricing table, #section-cart #cart-buy .item .pricing table {

  margin-bottom: 0;

}

main.cart #cart-buy .part > .pricing, #section-cart #cart-buy .part > .pricing {

  color: var(--red);

}

main.cart #cart-buy .cart-button, #section-cart #cart-buy .cart-button {

  background-color: var(--red);

  color: var(--white);

  margin-bottom: 15px;

}

main.cart #cart-buy .buy-information, #section-cart #cart-buy .buy-information {

  font-size: 10px;

}

main.cart #cart-buy.empty .part, #section-cart #cart-buy.empty .part {

  border-color: transparent;

}

main.cart #cart-buy.empty .total-pricing, #section-cart #cart-buy.empty .total-pricing {

  opacity: 0;

  pointer-events: none;

}

main.cart #cart-buy.empty .btn-holder, #section-cart #cart-buy.empty .btn-holder {

  opacity: 0;

  pointer-events: none;

}

main.cart #cart-buy:not(.empty) .part:first-child .part-title, #section-cart #cart-buy:not(.empty) .part:first-child .part-title {

  font-size: 30px;

}

main.cart .styles, #section-cart .styles {

  transition: opacity 0.3s;

}

main.cart .styles.disabled, #section-cart .styles.disabled {

  pointer-events: none;

  opacity: 0.36;

}

main.cart .styles:not(.disabled) .price-right, #section-cart .styles:not(.disabled) .price-right {

  opacity: 1;

  pointer-events: auto;

}

main.cart .styles:not(.disabled) .packs .desc, #section-cart .styles:not(.disabled) .packs .desc {

  opacity: 1;

}

main.cart .styles .packs .desc, #section-cart .styles .packs .desc {

  font-size: 10px;

  opacity: 0;

  transition: opacity 0.3s;

}

main.cart .styles .packs .price-right, #section-cart .styles .packs .price-right {

  text-align: right;

}

main.cart .styles .packs .price-right .original, #section-cart .styles .packs .price-right .original {

  display: block;

  opacity: 0.36;

  text-decoration: line-through;

}



#section-contact .contact-info .link {

  margin: 1em 0;

  color: var(--real-black);

}

#section-contact .contact-form-holder {

  margin-top: 30px;

}

#section-contact #contact-form {

  background-color: var(--light-blue);

  border-radius: 20px;

  padding: 30px;

  color: var(--blue);

}

#section-contact #contact-form a {

  color: var(--blue);

  opacity: 0.45;

}

#section-contact #contact-form a:hover {

  opacity: 1;

}

#section-contact #contact-form input:not([type=checkbox]), #section-contact #contact-form textarea {

  width: 100%;

  border: 0;

  background-color: transparent;

  font-size: 18px;

  color: var(--blue);

  padding: 3px 0;

  font-family: var(--font-regular);

  opacity: 0.45;

  transition: opacity 0.3s;

}

#section-contact #contact-form input:not([type=checkbox]) + label, #section-contact #contact-form textarea + label {

  position: absolute;

  bottom: -1px;

  left: 0;

  width: 0%;

  transition: width 0.5s;

  height: 100%;

  font-size: 0;

  border-bottom: 1px solid var(--blue);

  pointer-events: none;

  display: block;

}

#section-contact #contact-form input:not([type=checkbox]):not(:placeholder-shown), #section-contact #contact-form input:not([type=checkbox]):focus, #section-contact #contact-form textarea:not(:placeholder-shown), #section-contact #contact-form textarea:focus {

  opacity: 1;

}

#section-contact #contact-form input:not([type=checkbox]):not(:placeholder-shown) + label, #section-contact #contact-form input:not([type=checkbox]):focus + label, #section-contact #contact-form textarea:not(:placeholder-shown) + label, #section-contact #contact-form textarea:focus + label {

  width: 100%;

}

#section-contact #contact-form input:not([type=checkbox])::placeholder, #section-contact #contact-form textarea::placeholder {

  opacity: 1;

}

#section-contact #contact-form textarea {

  height: 10em;

  resize: none;

  line-height: 1.1em;

}

#section-contact #contact-form .select {

  margin-right: 0;

  width: 100%;

  background-color: transparent;

  padding: 3px 0;

  height: 31px;

  border-bottom: 1px solid var(--blue);

  border-radius: 0;

  margin-bottom: 20px;

}

#section-contact #contact-form .select .select-trigger {

  padding: 0;

}

#section-contact #contact-form .select .select-trigger:after {

  color: var(--blue);

}

#section-contact #contact-form .select .select-options {

  top: 30px;

  border-radius: 0 0 4px 4px;

}

#section-contact #contact-form .select .select-options .option {

  background-color: var(--blue);

  color: var(--light-blue);

  border-color: var(--light-blue);

}

#section-contact #contact-form .select .select-options .option:hover, #section-contact #contact-form .select .select-options .option.selected {

  background-color: var(--light-blue);

  color: var(--blue);

}

#section-contact #contact-form .form-footer .radio-holder {

  margin-bottom: 30px;

}

#section-contact #contact-form .form-footer .radio-holder input {

  visibility: hidden;

  position: absolute;

  left: -9999px;

}

#section-contact #contact-form .form-footer .radio-holder input + label {

  padding-left: 40px;

  position: relative;

  display: block;

}

#section-contact #contact-form .form-footer .radio-holder input + label:before {

  border: 1px solid var(--blue);

  border-radius: 4px;

  width: 28px;

  height: 28px;

  display: inline-block;

  position: absolute;

  left: 0;

  top: 3px;

  content: "";

}

#section-contact #contact-form .form-footer .radio-holder input + label:after {

  width: 28px;

  height: 28px;

  display: inline-block;

  position: absolute;

  left: 0;

  top: 3px;

  content: "";

  background-image: url("../img/tick-blue.svg");

  opacity: 0;

}

#section-contact #contact-form .form-footer .radio-holder input:checked + label:after {

  opacity: 1;

}

#section-contact .btn-submit {

  color: var(--blue);

  line-height: 28px;

  border-color: var(--blue);

  font-size: 13.5px;

}

#section-contact .btn-submit .hover {

  display: none;

}

#section-contact .btn-submit:hover .hover, #section-contact .btn-submit:focus .hover {

  display: inline;

  vertical-align: top;

}



.input-holder {

  border-bottom: 1px solid rgba(138, 162, 165, 0.45);

  margin-bottom: 20px;

  position: relative;

}



main.thanks {

  padding: 80px 0 30px;

}

main.thanks .title {

  font-size: 24px;

  margin-bottom: 1em;

}

main.thanks .subtitle {

  font-size: 18px;

  margin-bottom: 0.5em;

}

main.thanks .download-panel a {

  display: block;

  padding: 10px 55px 10px 15px;

  background-color: var(--light-blue);

  border-bottom: 1px solid var(--blue);

  color: #8aa2a5;

  background-image: url("../img/download.svg");

  background-position: right 15px top 10px;

  background-repeat: no-repeat;

  background-size: 18px;

}

main.thanks .download-panel a:last-child {

  border-bottom: 0;

}



.smiley {

  white-space: nowrap;

}



@media (min-width: 480px) and (max-width: 759.98px) {

  main.font .gallery .row {

    display: flex;

    flex-wrap: wrap;

  }

  main.font .gallery .row > * {

    width: 50%;

    display: inline-block;

  }

  main.font .gallery img {

    height: 200px;

  }

  #section-contact #contact-form .form-footer {

    display: flex;

  }

  #section-contact #contact-form .radio-holder {

    margin-bottom: 0 !important;

    margin-right: 30px;

  }

  #section-contact #contact-form .btn-submit {

    width: 150px;

    white-space: nowrap;

    justify-content: center;

  }

}

@media (min-width: 760px) {

  .container {

    padding: 0 24px;

  }

  .row {

    margin: 0 -12px;

    display: flex;

    flex-flow: wrap;

  }

  .row-reverse {

    flex-direction: row-reverse;

  }

  .col-1-2 {

    width: 50%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  .col-1-3 {

    width: 33.33333%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  .col-1-6 {

    width: 16.66666%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  .col-5-6 {

    width: 83.33333%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  .col-2-3 {

    width: 66.66666%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  .offset-1-3 {

    margin-left: 33.33333%;

  }

  .col-1-2-large, .col-1-3-large, .col-2-3-large {

    width: 100%;

    display: inline-block;

    vertical-align: top;

    padding: 0 12px;

  }

  #section-cart .part .col-1-2-large, #section-cart .part .col-1-3-large, #section-cart .part .col-2-3-large, main.cart .part .col-1-2-large, main.cart .part .col-1-3-large, main.cart .part .col-2-3-large {

    padding: 0 6px;

  }

  #footer {

    padding: 5px 0;

  }

  #footer #footer-top .col-1-2 {

    width: 100%;

  }

  #footer #footer-top ul {

    column-count: 1;

  }

  #footer #footer-top ul ul {

    padding-left: 15px;

  }

  #footer #footer-top .offset-1-3.col-2-3 {

    margin-left: 0;

    width: 100%;

  }

  #footer h2 {

    font-size: 66px;

    line-height: 90px;

    margin: 20px 0 10px;

    height: 100px;

  }

  #footer #footer-header {

    padding-left: 80px;

    background-size: 60px;

    background-position: 0 17px;

  }

  #footer #footer-header img {

    height: 100px;

  }

  #footer #footer-bottom .row {

    flex-direction: row-reverse;

  }

  body:not(.menu-opened) #header .first-menu, body:not(.menu-opened) #header .second-menu {

    pointer-events: auto;

    opacity: 1;

  }

  #header #menu-button {

    display: none;

  }

  #header .header-part-1 {

    position: static;

    width: 16.66666%;

    line-height: 30px;

  }

  #header .first-menu, #header .second-menu {

    padding: 0;

    position: relative;

  }

  #header .first-menu a, #header .second-menu a {

    font-size: 13.5px;

    display: inline-block;

    margin-right: 10px;

    vertical-align: top;

    line-height: 30px;

    transition: color 0.3s;

    color: var(--black);

  }

  #header #btnColorScheme {

    width: 16px;

    height: 16px;

    left: -30px;

    bottom: auto;

    top: 6px;

  }

  #header #btnColorScheme svg {

    fill: var(--black);

  }

  #header .btnBuyCart {

    right: 10px;

  }

  #header.dark-gray a:not(.btnBuyCart) {

    color: var(--dark-gray);

  }

  #header.dark-gray #btnColorScheme svg {

    fill: var(--dark-gray);

  }

  #header.white a {

    color: var(--white);

  }

  #header.white #btnColorScheme svg {

    fill: var(--white);

  }

  #header[data-color=black] a {

    color: var(--black);

  }

  main.font .about .last-column {

    display: flex;

    margin: 20px 0;

  }

  main.font .about .last-column .buttons {

    margin: 0 0 20px auto;

    flex: 0 0 200px;

  }

  main.font .about .last-column .buttons .btn {

    margin: 0 0 0 10px;

  }

  main.font .gallery {

    margin: 0;

  }

  main.font .gallery .gallery-wrapper {

    margin: 0 0 24px;

    height: 400px;

  }

  main.font .gallery .gallery-wrapper.img-height-big {

    height: 700px;

  }

  main.font .gallery .gallery-wrapper.img-height-small {

    height: 250px;

  }

  main.font section.technical #glyphTableHolder #glyphTable {

    justify-content: end;

  }

  .font-wrapper {

    border-right: 1px solid var(--light-gray);

  }

  .font-wrapper:nth-child(3n) {

    border-right-width: 0;

  }

  .font-wrapper:nth-child(2) .font-link, .font-wrapper:nth-child(3) .font-link {

    border-top: 1px solid var(--light-gray);

  }

  .font-link .content {

    height: 30vw;

  }

  .font-link .content .hover > span {

    font-size: 2.5vw;

  }

  .font-link .content.font-gauranga .front {

    font-size: 11vw;

  }

  .font-link .content.font-marc .front {

    font-size: 8vw;

  }

  .font-link .content.font-raghava-grotesk .front {

    font-size: 7.5vw;

  }

  .font-link .content.font-cakra .front {

    font-size: 13vw;

  }

  .font-link .content.font-uttara .front {

    font-size: 6vw;

  }

  .font-link .content.font-prabhupada-roman .front {

    font-size: 11vw;

  }

  .font-link .content.font-prabhupada-book .front {

    font-size: 11vw;

  }

  .font-link .content.font-uttara-grotesk .front {

    font-size: 7vw;

  }

  main.information section .section-header {

    margin: 0 -25px 25px;

    padding: 0 25px 10px;

    border-bottom: 0;

  }

  main.information section .section-header:after {

    position: absolute;

    left: 25px;

    bottom: 0;

    height: 100%;

    width: calc(100% - 50px);

    content: "";

    border-bottom: 1px solid var(--black);

    pointer-events: none;

  }

  main.homepage section.about .sticky-column {

    min-height: calc(100vh - 120px);

    position: sticky;

    top: 80px;

    display: flex;

    flex-direction: column;

  }

  main.homepage section.about .sticky-column .logo {

    margin-top: auto;

  }

  main.homepage section.retail-fonts, main.homepage section.custom-fonts, main.homepage section.black-hole {

    display: flex;

    flex-direction: column;

  }

  main.homepage section.retail-fonts .first-row, main.homepage section.custom-fonts .first-row, main.homepage section.black-hole .first-row {

    flex-direction: row-reverse;

  }

  main.homepage section.retail-fonts .last-row, main.homepage section.custom-fonts .last-row, main.homepage section.black-hole .last-row {

    margin-top: auto;

  }

  main.homepage section.retail-fonts .col-1-2:first-child .font-link, main.homepage section.custom-fonts .col-1-2:first-child .font-link, main.homepage section.black-hole .col-1-2:first-child .font-link {

    margin-bottom: 0px;

    padding-bottom: 30px;

  }

  main.information .download-button-holder {

    margin-top: 0;

    position: sticky;

    top: 124px;

  }

  main.information #section-service #article-bespoke-typography {

    padding-top: 60px;

  }

  main.information #section-service .black-hole-box {

    margin-top: 75px;

    position: sticky;

    top: 124px;

  }

  main.information #section-contact .contact-form-holder {

    margin-top: 0;

    margin-right: -30px;

  }

  main.information #section-contact .contact-form-holder #contact-form {

    border-radius: 20px 0 0 20px;

  }

  main.information #section-contact .info {

    display: flex;

    flex-direction: column;

    height: 100%;

  }

  main.information #section-contact .info .contact-info {

    margin-top: auto;

  }

  #black-hole-overlay {

    height: calc(100vh - 120px);

    position: absolute;

    top: 0;

    visibility: hidden;

  }

  #black-hole-overlay .black-hole-box {

    margin-top: 0;

    height: 100%;

    display: flex;

    flex-direction: column;

  }

  #black-hole-overlay .black-hole-box .bottom {

    height: 400px;

    margin-top: auto;

  }

  main.benefits .sub-header h3 {

    display: inline-block;

  }

  main.benefits .sub-header .toggle-buttons {

    display: inline-block;

  }

  main.benefits #article-glyphs-set .toggle-buttons {

    margin: 0 0 10px 15px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph {

    width: 8.33333%;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(6n) {

    border-right-width: 1px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(12n) {

    border-right-width: 0px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(7)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(8)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(9)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(10)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(11)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(12)::before {

    height: 1px;

  }

  main.benefits .blue-box {

    margin-top: 0;

  }

}

@media (min-width: 760px) and (max-width: 1199px) {

  main.font .about .row {

    flex-flow: wrap;

  }

  main.font .about .row > * {

    width: 33.33333%;

  }

  main.font .about .row .last-column {

    width: 100%;

  }

  main.homepage section.intro .carousel-cell .content > .row > .col-1-6 {

    width: 25%;

  }

  main.homepage section.intro .carousel-cell .content > .row > .col-1-3 {

    width: 50%;

  }

  main.homepage section.intro .carousel-cell .content > .row > .col-1-3:last-child {

    width: 100%;

  }

}

@media (min-width: 1200px) {

  .col-1-2-large {

    width: 50%;

  }

  .col-1-3-large {

    width: 33.33333%;

  }

  .col-2-3-large {

    width: 66.66666%;

  }

  #footer #footer-top {

    margin-bottom: 100px;

  }

  #footer #footer-top .col-1-2 {

    width: 50%;

  }

  #header .first-menu a {

    margin-right: 24px;

    transition: letter-spacing 0.3s, color 0.3s;

  }

  #header .first-menu a:hover, #header .first-menu a.active {

    letter-spacing: 2px;

  }

  #header .second-menu a {

    margin: 0 0 0 24px;

    transition: letter-spacing 0.3s, color 0.3s;

  }

  #header .second-menu a:hover, #header .second-menu a.active {

    letter-spacing: 2px;

  }

  #header #btnColorScheme {

    position: static;

    margin-top: 7px;

  }

  main.font .info {

    font-size: 21px;

    margin-bottom: 60px;

  }

  main.font .info h1 {

    font-size: 99px;

  }

  main.font .about {

    padding: 20px 0 10px;

  }

  main.font .about .last-column {

    margin-top: 0;

  }

  main.font .gallery .gallery-wrapper {

    height: 600px;

  }

  main.font .gallery .gallery-wrapper.img-height-big {

    height: 1000px;

  }

  main.font .gallery .gallery-wrapper.img-height-small {

    height: 400px;

  }

  main.font section.technical .font-styles h4 {

    font-size: 48px;

    line-height: 1;

  }

  main.font section.overview {

    padding-top: 100px;

  }

  main.font .characters-style {

    position: absolute;

    top: -40px;

    right: 0;

  }

  main.font .characters-style .select {

    margin-right: 0;

  }

  main.homepage section.about .hero {

    font-size: 42px;

  }

  main.homepage section.about .offer {

    margin-bottom: 80px;

  }

  main.homepage section.about .offer:first-child {

    margin-top: -10px;

  }

  main.information .text-reveal {

    margin-bottom: 200px;

  }

  main.information #legend .legend-buttons {

    margin-bottom: 6em;

  }

  main.information #legend .legend-buttons .change-founders {

    margin-bottom: 2em;

  }

  main.information section:not(#section-contact), main.benefits section:not(#section-contact) {

    padding: 0 0 240px;

  }

  main.information .hero, main.benefits .hero {

    font-size: 42px;

    max-width: 66%;

  }

  main.information #section-about-us .content, main.benefits #section-about-us .content {

    margin-bottom: 240px;

  }

  main.information #section-service article header, main.benefits #section-service article header {

    padding: 12px 0;

  }

  main.information #section-service article header h3, main.benefits #section-service article header h3 {

    font-size: 27px;

  }

  main.information #section-service article header .btn, main.benefits #section-service article header .btn {

    margin: 5px 0 5px auto;

  }

  main.information #section-contact #contact-form .form-footer, main.benefits #section-contact #contact-form .form-footer {

    display: flex;

  }

  main.information #section-contact #contact-form .form-footer .radio-holder, main.benefits #section-contact #contact-form .form-footer .radio-holder {

    margin-bottom: 0;

    margin-right: 30px;

  }

  main.information #section-contact #contact-form .form-footer .btn-submit, main.benefits #section-contact #contact-form .form-footer .btn-submit {

    white-space: nowrap;

  }

  #footer h2 {

    margin: 30px 0 20px;

  }

  #footer .newsletter {

    margin: 40px 0 0;

  }

  .main-carousel .content-wrapper {

    overflow: hidden;

  }

  .main-carousel .content-wrapper .row > *:not(:first-child) {

    transition: transform 0.5s;

  }

  .main-carousel.changing .content-wrapper .row > *:not(:first-child) {

    transform: translate(0, -100px);

  }

  #fonts-list {

    width: 50%;

  }

  .standards–square {

    width: 300px;

    height: 300px;

  }

  .standards–square .content {

    font-size: 240px;

  }

  .standards–square .line-top {

    top: 69px;

  }

  .standards–square .line-middle {

    top: 131px;

  }

  .standards–square .line-bottom {

    top: 238px;

  }

  #cart-buy {

    position: sticky;

    top: 70px;

  }

  .black-hole-box .content p {

    font-size: 42px;

    line-height: 1em;

    margin: 25px 0 0;

  }

  .black-hole-box .btn {

    padding: 5px 15px 8px 15px;

  }

  .black-hole-box .bottom {

    height: 400px;

    margin-top: 240px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph {

    width: 3.7037%;

    font-size: 28px;

    padding: 10px 2px;

    line-height: 1em;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(12n) {

    border-right-width: 1px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(27n) {

    border-right-width: 0px;

  }

  main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(13)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(14)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(15)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(16)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(17)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(18)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(19)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(20)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(21)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(22)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(23)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(24)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(25)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(26)::before, main.benefits #article-glyphs-set .glyph-set .glyph:nth-child(27)::before {

    height: 1px;

  }

}

@media (min-width: 1400px) {

  #footer #footer-top .offset-1-3.col-2-3 {

    margin-left: 33.33333%;

    width: 66.66666%;

  }

  .type-tester-header {

    display: flex;

  }

  .type-tester-header .part02 {

    margin-left: auto;

  }

  .col-1-2 .type-tester-header {

    display: block;

  }

}

/* Privacy Policy */

main.privacy-policy {

  padding: 60px 0 40px;

  font-size: 18px;

}

main.privacy-policy em {

  background-color: var(--light-blue);

  padding: 0px 10px 5px;

}

main.privacy-policy section .section-header {

  padding: 0 0 10px;

  line-height: 30px;

  font-size: 13.5px;

  border-bottom: 1px solid var(--black);

  margin-bottom: 25px;

}

main.privacy-policy .hero {

  font-size: 24px;

  line-height: 1.1em;

  margin-bottom: 1em;

}

main.privacy-policy article {

  margin-bottom: 60px;

}

main.privacy-policy article .article-header {

  padding: 15px 0;

  border-bottom: 1px solid var(--black);

  margin-bottom: 20px;

}

main.privacy-policy article .article-header .title {

  line-height: 1.2em;

  font-size: 24px;

}

main.privacy-policy article .item {

  margin-bottom: 50px;

}

main.privacy-policy article .item .title {

  line-height: 1.2em;

  font-size: 18px;

  margin-bottom: 15px;

}

main.privacy-policy article .item p {

  margin-bottom: 1em;

}

main.privacy-policy article .content p {

  margin-bottom: 1em;

}

main.privacy-policy article ul {

  margin-top: -1em;

  margin-bottom: 1em;

  padding-left: 24px;

}

main.privacy-policy article ul li {

  padding: 5px 0 0 10px;

  position: relative;

  font-size: 18px;

  line-height: 1.2em;

}

main.privacy-policy article ul li:after {

  content: "";

  display: block;

  background: url("../img/circle.svg");

  position: absolute;

  left: -24px;

  top: 5px;

  width: 24px;

  height: 24px;

  vertical-align: top;

  animation: rotate-n-pulse 10s linear infinite;

}



@media (min-width: 1200px) {

  main.privacy-policy .hero {

    font-size: 42px;

    max-width: 66%;

  }

  main.privacy-policy .intro-content {

    margin-bottom: 200px;

  }

  main.privacy-policy article {

    margin-bottom: 120px;

  }

  main.privacy-policy article .article-header .title {

    font-size: 27px;

  }

}

/* CountDown Overlay */

#countdown {

  position: fixed;

  width: 100%;

  height: 100vh;

  top: 0;

  left: 0;

  z-index: 1999;

  background-color: var(--black);

  color: var(--white);

  padding: 20px 0;

  font-size: 18px;

  line-height: 1em;

}

#countdown.removed {

  display: none;

}

#countdown a {

  color: var(--white);

}

#countdown small {

  font-size: 0.5em;

}

#countdown p {

  margin-bottom: 2em;

}

#countdown .container {

  height: 100%;

}

#countdown .content {

  display: flex;

  flex-direction: column;

  height: 100%;

}

#countdown .content .bottom {

  margin-top: auto;

}

#countdown .content .bottom img {

  height: 40px;

}

#countdown #countdown-timer {

  font-variant-numeric: tabular-nums;

}



@media (min-width: 760px) {

  #countdown {

    font-size: 45px;

    padding: 30px 0 20px;

  }

  #countdown .content .bottom img {

    height: 54px;

  }

}



/*# sourceMappingURL=style.css.map */



/* Hlasky formularu. Doposud nemely zadny styl, takze splyvaly s okolim

   a po odeslani nebylo poznat, jestli se neco stalo. */

.notice {

  display: block;

  margin: 15px 0;

  padding: 12px 15px;

  border: 1px solid var(--black);

  background-color: var(--light-blue);

  color: var(--black);

  line-height: 1.4;

}

.notice:focus {

  outline: 2px solid var(--black);

  outline-offset: 2px;

}

.notice.error {

  background-color: var(--red);

  color: var(--white);

  border-color: var(--red);

}

.notice.success {

  background-color: var(--blue);

  color: var(--white);

  border-color: var(--blue);

}



/* Turnstile se vklada do uzkeho vysouvaciho panelu, takze mu musime

   drzet sirku; jinak pretece pres pravou hranu. */

.cf-turnstile.antispam-widget {

  margin: 15px 0;

  max-width: 100%;

  overflow: hidden;

}

aside#trial-fonts .cf-turnstile.antispam-widget {

  margin: 10px 0 15px;

}



/* Dokud je otevreny panel Trial Fonts, stranka pod nim nescrolluje. */

body.trial-fonts-open {

  overflow: hidden;

}

/* Az panel doscrolluje na konec, nesmi scroll "pretect" na stranku. */

aside#trial-fonts .panel {

  overscroll-behavior: contain;

}