/*
LUZI TYPE Stylesheet
1. TRANSITIONS & FONTS (Global)
2. USER SELECT
3. BORDERS
4. OVERFLOW
5. HEIGHT ZERO ELEMENTS
6. TEXT ALIGN
7. MENU LAYOUT
8. WIDTH 100%
9. POINTER EVENTS
10. HEIGHT AUTO
11. APPEARANCE
12. BASE TYPOGRAPHY
13. COLORS
14. VF INPUTS
15. OUTLINE RESET
16. CURSOR
17. ANIMATIONS
18. FONT FAMILIES
19. LAYOUT GRID
20. HTML & BODY
21. THEME SWITCHER
22. SCROLLBAR
23. SERIF STYLES
24. TABLES
25. LISTS
26. MOBILE MENU
27. MENU STYLES
28. SPACING
29. TYPE TESTER CONTROLS
30. SVG CIRCLE LINKS
31. LET SECTION
32. NUMBERS & STYLES
33. CHECKBOXES
34. OTF FEATURES
35. THEME TOGGLE BUTTON
36. FOOTER LINKS
37. FORMS
39. TIME DISPLAY
40. WEIGHT OVERVIEW
41. VIDEO PLAYER
42. BLOG
43. VF CONTROLS
44. DATE & BLOG ENTRIES
45. ASSEMBLY
46. BLOG ENTRIES
47. RSS & BLOG SHOW
48. CONTACT FORM
49. STYLE CHANGER
50. Z-INDEX STACKING
51. GLYPHS
52. FOOTER
53. LANGUAGE SUPPORT
54. CHECK INPUTS
55. TERMS AGREEMENT
57. VIDEO ANIMATIONS
58. LAYOUT EDITOR
*/

/* * * * * * * * * * 1. TRANSITIONS & FONTS (Global) * * * * * * * * * */

a,
body {
transition: color .5s
}

#them-switcher,
body {
font-family: YetsonSans, Arial, sans-serif !important
}

/* * * * * * * * * * 2. USER SELECT * * * * * * * * * */

#let,
#tff,
#them-switcher,
.TypeTester\/Controller,
.arrow-otf,
.footer,
.rss-link,
.wnumer {
user-select: none
}

/* * * * * * * * * * 3. BORDERS * * * * * * * * * */

#let-line-down,
#let-line-up,
#menu1,
#navborder,
.borders,
.expline,
.otf-show:last-child,
.underline {
border-bottom: 1.5px solid var(--text)
}

.expline {
margin-bottom: 8vw;
}

/* * * * * * * * * * 4. OVERFLOW * * * * * * * * * */

#menu1,
#menu2 {
overflow: hidden
}

/* * * * * * * * * * 5. HEIGHT ZERO ELEMENTS * * * * * * * * * */

#menu,
#menul,
#menur,
#menut {
height: 0
}

/* * * * * * * * * * 6. TEXT ALIGN * * * * * * * * * */

#menut,
#them-switcher {
text-align: center
}

/* * * * * * * * * * 7. MENU LAYOUT * * * * * * * * * */

#menu2,
#menubkg {
margin-left: -40px;
width: 100%;
}

#menu,
#menubkg {
position: fixed
}

.dark-theme svg path {
fill: #fff !important;
}

#menubkg a {
color: #fff;
}

.dark-theme #menubkg a {
color: #000 !important;
}


/* * * * * * * * * * 8. WIDTH 100% * * * * * * * * * */

.TypeTester\/Controller\/List__selector,
.span_12_of_12,
img,
svg {
width: 100%
}

/* * * * * * * * * * 9. POINTER EVENTS * * * * * * * * * */

#menut,
.arrow-otf {
pointer-events: none
}

/* * * * * * * * * * 10. HEIGHT AUTO * * * * * * * * * */

#blog-group,
#menu2,
img,
video {
height: auto
}

a img {
border-radius: 10px;
}

/* * * * * * * * * * 11. APPEARANCE * * * * * * * * * */

#myselection,
input[type=range] {
-webkit-appearance: none;
-webkit-appearance: none
}

select.hilightselect {
color: var(--text) !important;
border: 1.5px solid var(--text) !important;
}

/* * * * * * * * * * 12. BASE TYPOGRAPHY * * * * * * * * * */

body,
p {
font-size: 16px
}

h1 {
font-size: 17px;
text-decoration: underline;
text-decoration-thickness: auto;
text-underline-offset: 5px;
text-decoration-thickness: 1.5px;
}

h4 {
font-size: 18px;
font-weight: normal;
text-decoration: underline;
text-decoration-thickness: auto;
text-underline-offset: 5px;
text-decoration-thickness: 1.5px;
}

h1 a {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
color: var(--text);
text-decoration-color: var(--text);
transition: color .5s, text-decoration-color .5s;
}

h1 a:hover {
color: var(--hover) !important;
text-decoration-color: var(--hover);
transition: color .5s, text-decoration-color .5s;
}

.contact-form-mail h1,
#faq-1 h6 {
text-decoration: none;
}

p {
line-height: 1.3;
}
.logofooter svg,
h1,
p {
cursor: default
}

#copyrightfooter {
color: var(--darkgrey);
font-size: 16px;
margin-top: 60px;
font-style: italic;
}

/* * * * * * * * * * 13. COLORS * * * * * * * * * */

#languselct option:hover,
#set button,
.TypeTester\/Controller\/Dropdown:hover .TypeTester\/Controller\/Dropdown__button,
.TypeTester\/Controller\/List__selector.\--selected,
.TypeTester\/Controller\/List__selector:hover,
.faq p,
.time,
a,
body {
color: var(--text)
}

#faq-1 div a:hover,
.TypeTester\/Controller\/Dropdown button:hover,
.altggreen:hover,
.col.span_3_of_12 .highlight:hover,
.faq a:hover,
.faq>ul>li h2:focus,
.faq>ul>li h2:hover,
.faq>ul>li.is-active h2,
.faq>ul>li:target h2,
.is-active div a:hover,
.links-faq a:hover,
.mailit a:hover,
a.sendmail:hover {
color: var(--hover) !important
}

.navl,
.navr {
word-spacing: 7px
}

.hilimg,
.hilimg-g,
a,
a h1,
a h6 {
cursor: pointer
}

.quoat {
font-size: 24px
}

#let,
.mailit a,
a span.highlight,
a.sendmail,
em {
color: var(--text) !important
}

#menu2 a,
img {
color: var(--bkg)
}

#let,
#tff {
line-height: .8
}

#logosvg,
.link-titel,
svg textPath {
fill: var(--text);
user-select: none
}

#faq-1 a,
.faq h6,
.nach-faq a,
.nach-faq p {
cursor: help;
pointer-events: all !important
}

/* * * * * * * * * * 14. VF INPUTS * * * * * * * * * */

input#font-xheightsize,
input#font-opticalsize,
input#font-weight,
input#font-width {
margin-top: -22px !important;
display: flex !important
}

/* * * * * * * * * * 15. OUTLINE RESET * * * * * * * * * */

.col,
.col:first-child,
.section,
:focus,
input:focus {
outline: 0 !important
}

/* * * * * * * * * * 16. CURSOR * * * * * * * * * */

#myselection,
#myselection select {
cursor: s-resize !important
}

/* * * * * * * * * * 17. ANIMATIONS * * * * * * * * * */

#tff,
.TypeTester\/Preview,
.smalertext,
.subtitel {
animation: 1s fadein;
}

.smalertext {
hyphens: auto;
}

.subtitel {
white-space: nowrap
}

@keyframes fadein {0%, 50% {opacity: 0} 100% {opacity: 1}}

.lozad[data-src]:not(.no-fade) {
transition: opacity .5s;
opacity: 0
}

.lozad[data-src]:not(.no-fade)[data-fully-loaded=true] {
opacity: 1
}

/* * * * * * * * * * 18. FONT FAMILIES * * * * * * * * * */
/* Preview: allow inline font-family (set by the app) to win; keep Loading only as fallback */
.TypeTester\/Preview { font-family: inherit; }

/* Weight overview uses the Loading font as a deliberate placeholder */
.weightoverview {
font-family: inherit;
animation: fadein 1s;
}

@font-face {
font-family: "Loading";
src: url("/tf/Loading.woff2?v=16") format("woff2");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "YetsonSans";
src: url("/tf/Please_Respect_Copyright-u.woff2?v=16") format("woff2");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "YetsonSans";
src: url("/tf/Please_Respect_Copyright-i.woff2?v=16") format("woff2");
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: "YetsonMono";
src: url("/tf/Please_Respect_Copyright-m.woff2?v=16") format("woff2");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "YetsonSerif";
src: url("/tf/Please_Respect_Copyright-serif-u.woff2?v=16") format("woff2");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "YetsonSerif";
src: url("/tf/Please_Respect_Copyright-serif-i.woff2?v=16") format("woff2");
font-weight: 400;
font-style: italic;
}

/* * * * * * * * * * 19. LAYOUT GRID * * * * * * * * * */

.group:after,
.section {
clear: both
}

.section {
padding: 0;
margin: 0
}

.group:after,
.group:before {
content: "";
display: table
}

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
position: relative
}

.col:first-child,
.faq li,
.numbers-style-ratio input {
margin-left: 0
}

.span_11_of_12 {
width: 91.53%
}

.span_10_of_12 {
width: 83.06%
}

.span_9_of_12 {
width: 74.6%
}

.span_8_of_12 {
width: 66.13%
}

.span_7_of_12 {
width: 57.66%
}

.span_6_of_12 {
width: 49.2%
}

.span_5_of_12 {
width: 40.73%
}

.span_4_of_12 {
width: 32.26%
}

.span_3_of_12 {
width: 23.8%
}

.span_2_of_12 {
width: 15.33%
}

.span_1_of_12 {
width: 6.86%
}

/* * * * * * * * * * 20. HTML & BODY * * * * * * * * * */

html {
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: none !important;
scrollbar-width: thin !important;
scroll-behavior: smooth !important;
}

.dark-theme {
background-color: #000;
}

.TypeTester\/Preview {
overflow: hidden !important;
}

body {
min-height: 100vh;
overflow-x: hidden !important;
overflow-y: auto !important;
--green: #68ea6c;
--error: #ff4700;
--text: #000;
--darkgrey: #ccc;
--select: #fec1c1;
--bkg: #fff;
--second: #ddd;
--filter-grayscale: 100%;
--hover: #ccc9c6;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0;
padding: 30px 17px;
font-feature-settings: "kern" !important;
text-rendering: optimiseLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
-webkit-text-size-adjust: 100% !important;
background-color: var(--bkg);
transition: color .5s;
}
.dark-theme,
.dark-theme body {
color-scheme: dark;
transition: none;
--text: #fff !important;
--darkgrey: #444 !important;
--select: #ff4700 !important;
--bkg: #000 !important;
--second: #333 !important;
--filter-grayscale: 0% !important;
--hover: #444 !important;
}


.dark-theme #OverLayIndexSample{
  display:none !important;
  opacity:0 !important;
}

body[data-theme-lock] .btn-toggle,
html[data-theme-lock] .btn-toggle,
.btn-toggle[aria-disabled="true"] {
display: none !important;
}

p {
letter-spacing: 0.005em;
}

#menul a {
font-feature-settings: "ss05" !important;
}

b,
h1,
h2,
h3,
h6,
th {
font-weight: 400
}

#faq-1 a,
.contact-message a,
.mailit a,
.myDiv a,
.tlink,
em,
p a {
font-style: italic
}

.hidden {
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
font-size: 0px !important
}

.gimg {
filter: grayscale(var(--filter-grayscale)) contrast(0.97)
}

h2 {
font-size: 3.4vw;
line-height: calc(1.15em - .1vw)
}

#no-js {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
font-size: clamp(16px, 2vw, 40px);
color: #ff4700;
background: var(--bkg);
padding: 1vw 0vw 1vw 0vw;
width: 100%;
z-index: 999999999999999;
text-align: center;
}

.contact-form-mail button,
.serif,
.vf-controls,
em,
input#submit_button {
font-weight: 400 !important
}

h1,
h3,
p {
max-width: 740px
}

a {
text-decoration: none
}

#let-check-con p:hover,
.fonttitel:hover,
a:hover {
color: var(--hover);
transition: color .5s;
cursor: pointer
}

::selection {
background: 0 0 !important;
color: var(--second) !important;
text-shadow: none !important;
box-shadow: none !important;
outline: 0 !important
}

.ui-stiling::selection,
.TypeTester\/Preview::selection {
background: 0 0 !important;
color: var(--second) !important;
text-shadow: none !important;
box-shadow: none !important;
outline: 0 !important
}

.TypeTester\/Controller:nth-child(3) button {
font-feature-settings: "ss06";
}

#menu1,
#them-switcher,
.smalertext .TypeTester\/Controller\/Dropdown__button,
select#languselct option {
background: var(--bkg);
transition: none;
width: 100%;
}


/* * * * * * * * * * 21. THEME SWITCHER * * * * * * * * * */

#them-switcher {
float: right;
font-size: 25px;
color: var(--text);
border-radius: 50%;
transform: rotate(-45deg);
transition: color .6s;
cursor: pointer;
width: 25px;
height: 25px;
line-height: .7
}


#weights {
padding-top:30px;
margin-top:-30px;
}
.weightsover {
padding-left: 20px;
}

.allweights {
padding-left: 16px;
}

.dark-theme #them-switcher {
transform: rotate(45deg);
background: var(--bkg);
}

#them-switcher:hover,
.faq input:hover,
.stylechanger button:hover {
color: var(--hover);
transition: .5s
}

#them-switcher:active {
color: var(--text);
transition: .5s
}

/* * * * * * * * * * 22. SCROLLBAR * * * * * * * * * */

::-webkit-scrollbar {
border-radius: 20px !important;
width: 6px !important;
background: var(--text) !important;
transition: background .5s !important
}

::-webkit-scrollbar-track {
border-radius: 20px !important;
background: var(--bkg) !important
}

::-webkit-scrollbar-thumb {
border-radius: 20px !important;
background: var(--text) !important;
transition: background .5s;
cursor: pointer !important
}

::-webkit-scrollbar-thumb:hover {
border-radius: 20px !important;
background: var(--text) !important;
transition: background .5s !important
}

/* * * * * * * * * * 23. SERIF STYLES * * * * * * * * * */

.serif a,
.serif .italic,
.serif {
font-family: YetsonSerif, serif !important;
font-size: 18px;
font-style: normal !important;
line-height: 1.35em !important;
font-feature-settings: "liga", "dlig", "calt", "onum" !important;
}

.serif a {
font-style: italic !important;
}

.italic {
font-style: italic !important
}

.underline {
padding-bottom: 2px
}

/* * * * * * * * * * 24. TABLES * * * * * * * * * */

td,
tr {
vertical-align: top;
padding-right: 30px;
padding-bottom: 13px;
width: auto
}

/* * * * * * * * * * 25. LISTS * * * * * * * * * */

ul {
list-style-type: none
}

.dashed li {
margin-left: -15px
}

.dashed li:before {
content: "— ";
margin-left: -23px
}

/* * * * * * * * * * 26. MOBILE MENU * * * * * * * * * */

#menu2m,
#menub,
#menutm {
display: none
}

#menu2 {
background: linear-gradient(180deg, var(--bkg) 40%, transparent 100%);
min-height: 100px
}

#menu {
z-index: 999999993;
right: 0px;
left: 50px;
}

#menut::before {
color: var(--bkg) !important;
background: var(--text) !important;
}

@media only screen and (max-width:900px) {
#menut::before {
display: none
}

#menu2 {
background: linear-gradient(180deg, var(--bkg) 80%, transparent 100%);
}

#menub,
#menubkg {
height: 46px !important
}

#menu2 a {
font-size: 16px !important

}

.weightsover {
padding-left: 0px;
}
}

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

#menub,
#menubkg {
height: 40px !important
}
}

@media only screen and (max-width:800px) {
.col {
margin: 1% 0;
outline: 0 !important
}

.span_10_of_12,
.span_11_of_12,
.span_12_of_12,
.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12 {
width: 100%;
margin-top: 0 !important
}

h2 {
font-size: 26px !important;
line-height: calc(1.3em)
}

h3 {
font-size: 18px !important;
line-height:1.2em
}

#menub {
display: block;
background: var(--bkg);
position: fixed;
left: 0;
right: 0;
top: 0;
height: 43px;
z-index: 65
}
}

/* * * * * * * * * * 27. MENU STYLES * * * * * * * * * */

#menu1 {
height: 32px;
margin-top: -50px;
position: relative;
z-index: 999999992;
padding-top: 20px;
right: 25px;
}

#menu2 {
transition: transform .4s !important;
position: relative;
z-index: 9999991;
height: auto;
margin-left: 0px;
padding: 16px 2px 0px;
top: -106px;
margin-left: -27px
}

#menul {
text-align: left;
position: relative
}

#menur {
text-align: right;
}

#menur a {
margin-left: 1.2%
}

#menubkg {
width: 110%;
background: var(--bkg);
height: 40px;
top: 0;
z-index: 999
}

#menu2boder {
border-bottom: 1.5px solid var(--text) !important;
margin-bottom: -10px;
margin-top: 10px
}

#menu1:hover+#menu2,
#menu2:hover {
transform: translateY(104px) !important;
transition: transform .4s !important;
}

.mmw {
padding-right: 15%;
padding-bottom: 8px;
}

@media only screen and (max-width: 1350px) {
.mmw {
padding-right: 0%;
}
}

@media only screen and (min-width: 1750px) {
.mmw {
padding-right: 0%;
}

#menu2 {
height: 32px !important
}
}

#menu2 a {
font-size: 14px;
transition: background .4s;
background: var(--text);
padding: 1px 8px;
border-radius: 16px;
margin-bottom: 8px;
display: inline-block;
margin-right: 3px
}

#language-support-all p,
#set button {
font-size: 38px;
height: 50px;
width: 53px;
}

#set {
margin-top: -12px;
animation: fadein 1s;
}

#set button:hover {
color: var(--hover) !important;
}

#menu2 a:hover {
background: var(--hover)
}

#menu2m a {
background: #ccc !important;
color: #000 !important
}

#menu2m a:hover {
background: #ccc !important;
color: #000 !important
}

.dark-theme #menu2m a {
background: #f9f6f3 !important;
color: #000 !important
}

.dark-theme #menu2m a:hover {
background: #ccc !important;
color: #000 !important
}

@media (hover: none) and (pointer: coarse) {

/* Styles for touchscreen devices */
#menutm {
content: url("/image/menu_b.svg");
text-align: center;
height: 16px;
padding-left: 47%;
padding-top: 4px;
margin-bottom: -20px;
}

.dark-theme #menutm {
content: url("/image/menu_w.svg") !important
}

#menutm,
div#menu2m {
display: block !important
}

#menur {
display: none;
}

#menut {
text-align: right !important
}

#menu2 a {
font-size: 13px !important;
margin-bottom: 4px !important;
margin-right: 2px !important;
}
}

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

#menutm,
div#menu2m {
display: block
}

#menu2 {
font-size: 12px;
top: -135px;
width: 100%
}

#menutm {
content: url("/image/menu_b.svg");
text-align: center;
height: 16px;
padding-left: 47%;
padding-top: 4px;
margin-bottom: -20px;
}

.dark-theme #menutm {
content: url("/image/menu_w.svg") !important
}

#menu1:hover+#menu2,
#menu2:hover {
transform: translateY(135px) !important;
transition: .4s
}

#menur {
display: none
}

#menut {
text-align: right
}

.TypeTester\/Controller\/Dropdown {
float: left;
text-align: left
}
}

@media only screen and (max-width:990px) {
#menu2 {
top: -184px
}

#menu1:hover+#menu2,
#menu2:hover {
transform: translateY(174px) !important;
transition: .4s
}
}

@media only screen and (max-width:702px) {
#menu2 {
top: -278px
}

#menu1:hover+#menu2,
#menu2:hover {
transform: translateY(278px) !important;
transition: .4s
}
}

@media only screen and (max-width:450px) {
#menu2 {
top: -376px
}

#menu1:hover+#menu2,
#menu2:hover {
transform: translateY(374px) !important;
transition: .4s
}
}

/* * * * * * * * * * 28. SPACING * * * * * * * * * */

.vsep {
height: 4vw
}

.vseps {
height: 6vw;
min-height: 60px !important
}

#topsample {
aspect-ratio: 750 / 1821;
width: 100%;
max-width: 2600px;
height: auto;
animation: 1s fadein;
pointer-events: none;
inset: 0;
margin: 3vw 0vw 5vw 0vw;
}

@media (max-width: 1100px) {
#topsample {
aspect-ratio: auto;
}
}

#navborder {
margin-top: 20px;
margin-bottom: -15px;
margin-right: 76px
}

.bottomblog {
max-width: 600px;
}

/* * * * * * * * * * 29. TYPE TESTER CONTROLS * * * * * * * * * */

.smalertext .TypeTester\/Controller\/Range {
margin-top: 0px !important;
}

label {
transition: .5s
}

.subtitel .TypeTester\/Controller\/Range\/Input-horizontal {
margin: 2px 0 0
}

.wrapper-of-TypeTester {
padding: 0 0 30px
}

.TypeTester\/Controller\/Range:hover>.TypeTester\/Controller\/Range__label,
.vf-font-in:hover>label {
color: var(--text) !important;
transition: .5s
}

img.hilimg,
img.hilimg:hover,
img.hilimgb,
img.hilimgb:hover {
transition: .4s !important
}

.TypeTester\/Controller\/Range__label {
font-size: 16px
}


.TypeTesterTracking {
  width: 100%;
}

.TypeTesterTracking__range {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.TypeTester\/Controller\/Range__label.TypeTesterTracking__label {
    font-size: 13px;
    margin: -10px -9px -13px -37px;
}

.TypeTester\/Controller\/Range__input.TypeTester\/Controller\/Range\/Input.TypeTesterTracking__input {
    margin-left: 20px;
}

.TypeTesterTracking__label {
  margin-right: 20px;
}

.TypeTesterTracking__input {
  width: 50%;
}

.TypeTesterTracking__slider {
  width: 100%;
}


.allweights {
padding-top: 24px
}

.smalertext .wrapper-of-TypeTester {
padding-top: 30px;
padding-bottom: 45px
}

a.allFontsShowtype {
z-index: 99999999;
font-size: 15px;
background: var(--text);
color: var(--bkg);
display: block;
position: fixed;
bottom: 20px;
right: 56px;
padding: 1px 8px 2px 8px;
border-radius: 20px;
opacity: 0;
visibility: hidden;
transition: all .7s;
pointer-events: none;
}

a.allFontsShowtype.allFontsShowtypeshow {
opacity: 1;
visibility: visible;
transition: all .7s ease;
pointer-events: auto;
}

#noteslinks {
z-index: 99999999;
font-size: 15px;
display: block;
position: fixed;
bottom: 22px;
right: 20px;
}

#noteslinks a {
background: var(--text);
color: var(--bkg);
padding: 2px 8px 3px 8px;
margin-left: 3px;
border-radius: 20px;
white-space: nowrap;
transition: all .6s;
}

a.gotonotes:hover,
a.gotofont:hover {
transition: all .6s;
background: var(--hover) !important;
}

button#tt-toggle {
font-family: YetsonSans, Arial, sans-serif !important;
z-index: 9999999;
font-size: 15px;
background: var(--text);
color: var(--bkg);
display: block;
position: fixed;
bottom: 20px;
right: 56px;
padding: 1px 10px 2px 10px;
border-radius: 20px;
border: none;
border-radius: 20px;
transition: opacity .7s;
opacity: 0;
pointer-events: none;
}

a.allFontsShowtype:hover,
button#tt-toggle:hover {
background: var(--hover) !important;
transition: all 1s;
}

a.allFontsShowtype:hover {
background: var(--hover);
transition: all 1s;
}

body:not(.dark-theme) a.allFontsShowtype:hover {
background: #555 !important;
}

body:not(.dark-theme) #them-switcher:hover {
color: #555 !important;
}

.support-titel,
h2 {
letter-spacing: -.03vw
}

h3 {
font-size: 24px;
margin-bottom: 15px;
line-height: 1.2em;
letter-spacing: -.005em
}

#tff {
letter-spacing: -.04em;
font-size: 15vw;
cursor: default
}

.weightoverview {
letter-spacing: -.015em
}

.TypeTester\/Preview {
letter-spacing: -.01em;
font-variant-ligatures: none;
min-height: 80px;
position: relative;
line-height: 1.1em !important;
padding-bottom: 1vw;
padding-top: 0.2em;
margin-top: -0.4em;
padding-left: 10px;
font-size: 3.4vw
}

.smalertext .TypeTester\/Preview {
letter-spacing: 0;
line-height: 1.24em !important;
padding-bottom: 3vw
}

@media only screen and (max-width:1400px) {
.navc.fonttitel {
margin-left: 14vw
}

.subtitel .TypeTester\/Preview {
font-size: 7.3vw !important
}
}

.subtitel .TypeTester\/Preview {
font-size: 7.7vw;
padding-bottom: 2vw;
line-height: 1.1em !important;
padding-bottom: 1vw;
padding-top: 0.2em;
margin-top: -0.2em;
letter-spacing: -.03em;
}

.wrapper-of-TypeTester.indextitel {
border-top: 1.5px solid var(--text);
padding: 60px 0 20px !important
}

@media only screen and (max-width:1100px) {
.typefaces .navc {
width: 80%
}

.typefaces {
text-align: left !important
}

.indextitel .TypeTester\/Preview {
font-size: 7.5vw !important
}

.TypeTester\/Controller_tracking,
.fontinfo {
display: none
}
}

.indextitel .TypeTester\/Preview {
padding-top: 14px !important;
font-size: 9vw !important
}

.TypeTester\/Controller_tracking {
width: 180px;
padding: 0px 0px 12px 0px;
}

.smalertext {
  container-type: inline-size;
}

@container (max-width: 600px) {
  .TypeTester\/Controller.TypeTesterTracking {
    display: none;
  }
}

.TypeTester\/Controller:nth-child(4) {
width: 160px
}

.vf-cont-index input[type="range"] {
height: 0px !important;
padding: 0px 14px 21px 14px !important;
margin-top: 10px !important;
}

.TypeTester\/Controller_tracking input[type="range"] {
height: 21px !important;
padding: 0px 10px 10px 76px !important;
z-index: 2;
position: relative;
}

/* Safari 16+ only */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
.vf-cont-index input[type="range"] {
height: 8px !important;
padding: 0px 14px 18px 14px !important;
margin-top: 10px !important;
}

.TypeTester\/Controller_tracking input[type="range"] {
padding: 11px 10px 11px 76px !important;
z-index: 2;
position: relative;
}
}

.TypeTester\/Controller\/Range__label_tracking {
font-family: YetsonSans, Arial, sans-serif !important;
margin: -1px 10px -22px 14px;
font-size: 13px;
z-index: 2;
position: relative;
line-height: 1;
z-index: 3;
position: relative;
pointer-events: none;
transition: all .5s;
}

@media not all and (max-height: 899px) and (min-resolution: .1dpi) {
@supports (-webkit-touch-callout: none) {
.TypeTester\/Controller_tracking input[type="range"] {
padding: 10px 15px 10px 80px !important;
}

.TypeTester\/Controller\/Range {
padding: 8px 10px 10px 70px !important;
}
}
}

input[type="range"]::-webkit-slider-thumb {
height: 18px !important;
width: 18px !important;
margin-top: -8px !important;
}

input[type="range"]:hover::-webkit-slider-thumb {
transition: all .5s
}

/* Slider fix Firefox */
@-moz-document url-prefix() {
.TypeTester\/Controller_tracking input[type="range"] {
height: 22px !important;
padding: 10px 10px 10px 76px !important;
z-index: 2;
position: relative;
}

.vf-cont-index input[type="range"]::-moz-range-thumb,
.TypeTester\/Controller_tracking input[type="range"]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 16px;
background: var(--text);
border: 3px solid #f9f6f3;
box-sizing: border-box;
}
}

span.TypeTester\/Controller\/Dropdown__label {
background: #f9f6f3;
padding: 2px 12px 2px 12px;
border-radius: 20px;
font-size: 13px;
font-feature-settings: normal;
}

.dark-theme span.TypeTester\/Controller\/Dropdown__label {
background: #151515;
}

span.TypeTester\/Controller\/Dropdown__ico {
display: none;
}

.TypeTester\/Controller_tracking {
width: 160px;
padding: 8px 0px 0px 20px;
}

.TypeTester .TypeTester\/Preview,
.TypeTester .ui-stiling {
opacity: 1;
}

.TypeTester.is-loading .TypeTester\/Preview,
.TypeTester.is-loading .ui-stiling {
opacity: 0;
}

.ui-stiling {
animation: fadein 1s;
}

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

h2,
h3 {
letter-spacing: 0 !important
}

.support-titel {
letter-spacing: -.02em !important
}

.TypeTester\/Preview,
.subtitel .TypeTester\/Preview {
font-size: 11vw !important;
}

.leadtext .TypeTester\/Preview {
font-size: 7vw !important
}

.smalertext {
margin-bottom: -20px !important;
margin-top: -20px !important
}

.smalertext .TypeTester {
min-height: 0 !important
}

.smalertext .TypeTester\/Preview {
font-size: 16px !important
}

.border-bottom:first-child,
.border-bottom:nth-child(2) {
border-bottom: none !important
}
}

.TypeTester div .TypeTester\/Controller\/Dropdown__list {
margin-left: 5px;
padding: 0 4px;
min-width: 165px;
}

#indextitel {
margin-bottom: 400px
}

.assembly-last .TypeTester {
border-bottom: none
}

.smalertext {
margin-bottom: -72px;
margin-top: -42px
}

.smalertext .TypeTester {
border: none !important
}

button:disabled,
button:disabled:hover {
color: var(--text);
cursor: not-allowed
}

img.hilimg:hover {
cursor: pointer;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%)
}

img.hilimg {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%)
}

img.hilimgb:hover {
cursor: pointer;
-webkit-filter: invert(10%) !important;
-moz-filter: invert(10%) !important;
filter: invert(10%) !important
}

img.hilimgb {
-webkit-filter: invert(0%) !important;
-moz-filter: invert(0%) !important;
filter: invert(0%) !important
}

.TypeTester\/Controller+.TypeTester\/Controller {
z-index: 2;
cursor: default;
}

.TypeTester\/Controller:last-child {
margin: 4px 0px 0px 0px;
}

.TypeTester\/Controller\/Range__label {
-webkit-touch-callout: none !important;
-webkit-user-select: none;
user-select: none !important;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
margin-right: 16px;
transition: .4s
}

.arrow-otf,
.container,
.rss-link,
.wnumer,
img {
-webkit-user-select: none
}

img {
max-width: 100%;
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.max420 {
max-width: 420px
}

.vf-font-in,
svg {
max-width: 200px
}

input[type="range"] {
height: 10px !important;
background: none !important;
padding: 0px 10px 11px 10px !important;
border-radius: 15px !important;
}

.TypeTester\/Controller\/Range__label {
font-size: 13px;
margin: -5px -10px -11px -37px;
}

.TypeTester\/Controller\/Range {
background: none;
padding: 12px 10px 10px 50px !important;
border-radius: 20px;
}

input[type=range] {
background: var(--text);
transition: .4s;
cursor: ew-resize
}

.TypeTester\/Controller\/Range\/Input-handle,
div#vfinput input[type=range]::-webkit-slider-thumb {
background: var(--text);
transition: .4s;
cursor: ew-resize
}

.TypeTester\/Controller\/Range\/Input-handle:hover,
div#vfinput:hover input[type=range]::-webkit-slider-thumb {
background: var(--hover);
transition: .4s
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1.5px;
cursor: pointer;
background: var(--text);
border-radius: 0;
border: none
}

input[type=range]::-webkit-slider-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 12px;
background: var(--text);
border: 3px solid var(--bkg);
cursor: ew-resize !important;
-webkit-appearance: none;
margin-top: -7.5px
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: var(--text)
}

input[type=range]::-moz-range-track {
width: 100%;
height: 1.5px !important;
cursor: ew-resize !important;
background: var(--text);
border-radius: 0;
border: none
}

input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 12px;
background: var(--text);
transition: .4s
}

.TypeTester\/wrapper-of-Controller {
font-size: 16px !important
}

.subtitel .TypeTester\/wrapper-of-Controller {
margin-left: -15px !important
}

/* removed: Loading default for TypeTester preview */

#vfinput,
.TypeTester\/Controller\/List__selector,
.arrow-otf,
.blog-show label,
.contact-form-mail textarea,
.vf-controls,
.wnumer,
[class*=" ckin-"],
[class^=ckin-],
svg,
svg textPath {
font-family: YetsonSans, Arial, sans-serif !important
}

.TypeTester\/Controller\/Dropdown__button,
.TypeTester\/Controller\/Range__label {
font-family: YetsonSans, Arial, sans-serif !important;
line-height: 16px;
color: var(--text)
}

.TypeTester\/Preview:empty:before {
content: "";
position: absolute;
left: 0;
top: 0;
font-size: inherit;
line-height: inherit;
font-family: inherit;
color: var(--text);
pointer-events: none
}

.TypeTester\/Preview:focus,
input[type=range]:focus {
outline: 0
}

.TypeTester\/Controller\/Range {
display: inline-block;
align-items: center
}

.TypeTester\/Controller\/Range\/Input-base {
position: relative;
width: 100%;
height: 100%
}

.TypeTester\/Controller\/Range\/Input-target {
background-color: var(--text)
}

.TypeTester\/Controller\/Range\/Input-horizontal {
width: 100px;
height: 1.5px;
margin-top: 2px;
}

.TypeTester\/Controller\/Range\/Input-connects {
width: 100%;
height: 100%;
position: absolute
}

.TypeTester\/Controller\/Range\/Input-connect,
.TypeTester\/Controller\/Range\/Input-origin {
will-change: transform;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform-style: flat;
transform-style: flat
}

.TypeTester\/Controller\/Range\/Input-origin {
height: 0;
left: auto;
right: 0
}

.TypeTester\/Controller\/Range\/Input-handle {
cursor: ew-resize;
left: auto;
right: -8px;
top: -8px;
outline: 0;
width: 18px;
height: 18px;
background: var(--text);
border: 3px solid var(--bkg);
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
transition: background .4s;
}

.TypeTester\/Controller\/Dropdown__button,
.TypeTester\/Controller\/List__selector {
list-style-type: none;
right: 0;
bottom: 0;
letter-spacing: 0;
border: none;
white-space: nowrap;
left: 0;
font-style: normal;
font-weight: 400;
text-align: left
}

.TypeTester\/Controller\/Dropdown,
.ckin__overlay {
position: relative
}

.TypeTester\/Controller\/Dropdown__button {
z-index: 1 !important;
margin: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: auto;
height: 32px;
cursor: s-resize;
background: 0 0;
transition: color .4s
}

.TypeTester\/Controller\/Dropdown__list {
border-radius: 10px !important;
background-image: linear-gradient(180deg, var(--bkg), #f9f6f3);
position: absolute;
top: 30px;
left: 0;
width: auto;
min-width: 100%;
height: 157px;
overflow: auto
}

.dark-theme .TypeTester\/Controller\/Dropdown__list {
background-image: linear-gradient(180deg, var(--bkg), #151515);
}

.TypeTester\/Controller\/List,
.TypeTester\/Controller\/List__element {
margin: 0;
padding: 0 !important;
list-style-type: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden !important;
}

button.TypeTester\/Controller\/List__selector.altg.altggreen {
font-feature-settings: normal !important;
}

.TypeTester\/Controller\/List__element button {
font-size: 13px !important;
}


@media only screen and (max-width:600px){
.TypeTester\/Controller\/List__element button,
span.TypeTester\/Controller\/Dropdown__label {
font-size: 15px!important;
}
.TypeTester\/Controller\/List__element:last-child .TypeTester\/Controller\/List__selector {
margin-bottom:30px!important;
}
}

.TypeTester\/Controller\/List__element:last-child .TypeTester\/Controller\/List__selector {
margin-bottom:10px;
}


.TypeTester\/Controller\/List__selector {
margin: 2px;
padding: 0;
top: 0;
line-height: 1.3;
cursor: pointer;
color: #999;
background: 0 0;
transition: .4s
}

.custom-tooltip {
position: fixed;
left: 0;
top: 0;
opacity: 0;
max-width: 200px;
min-width: 80px;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 9999999999999999;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);

}

#let,
#set button,
.date-blog,
.link-titel,
.time {
text-align: center
}

.\--multi .TypeTester\/Controller\/List__selector {
display: flex;
align-items: center
}

.\--multi .TypeTester\/Controller\/List__selector:before {
border: 1.5px solid var(--text);
transition: background .4s;
display: block;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px
}

.\--multi .TypeTester\/Controller\/List__selector.\--selected:before {
background: var(--text) !important;
transition: background .4s
}

.TypeTester {
position: relative;
box-sizing: border-box
}

.TypeTester+.TypeTester {
margin-top: 15px
}

.TypeTester *,
.TypeTester:after,
.TypeTester:before {
box-sizing: inherit
}

.TypeTester\/wrapper-of-Controller {
position: relative;
z-index: 2;
display: inline-flex;
}

.container,
.container input:checked~.checkmark:after,
.faq input {
display: block
}

.TypeTester\/Controller {
padding: 0px 0px 10px 0px;
width: auto;
}
.smalertext .TypeTester\/Controller {
padding: 0px 0px 10px 5px;
}

.smalertext .TypeTester\/Controller_tracking {
display: none;
}

.TypeTester\/Controller:first-child {
min-width: auto !important;
margin-left: 10px;
}

.smalertext .TypeTester\/Controller\/Range {
margin-top: 5px;
}

.smalertext .TypeTester\/Controller\/Range\/Input-horizontal {
width: 70px;
height: 1.5px;
}

@media only screen and (max-width:1300px) {
.smalertext .TypeTester\/Controller\/Dropdown__button {
padding: 0 !important
}

.smalertext .TypeTester\/Controller\/Range {
display: none;
}
}

.TypeTester:hover .TypeTester\/Controller {
color: var(--text)
}

.TypeTester\/Controller\/List__element {
padding-left: 10px !important
}

.TypeTester\/Controller\/List__element:last-child {
border-bottom: none !important;
margin-bottom: 5px !important
}

.TypeTester\/Controller\/List__element:first-child {
margin-top: 7px !important
}

.vf-anmiation .TypeTester\/Controller:first-child,
.vf-preview-text .TypeTester\/Controller:first-child {
pointer-events: none !important;
}

.vf-anmiation .TypeTester\/Controller:first-child span.TypeTester\/Controller\/Dropdown__label {
color: #999;
}

@media only screen and (max-width:800px) {
#tff {
font-size: 42vw !important;
line-height: 1.2;
margin-top: 14vw;
}

.error {
font-size: 40px !important
}

.col.span_2_of_12.circel {
width: 100% !important;
margin: 20px 0 !important;
text-align: center !important
}

.col.span_3_of_12.border {
border: none !important
}
}

/* * * * * * * * * * 30. SVG CIRCLE LINKS * * * * * * * * * */

.svglink-circle {
display: flex;
justify-content: center;
align-items: center;
}

.svglink-rotate {
animation: svglink-spin 30s linear infinite;
transform-origin: 250px 250px;
}

@keyframes svglink-spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.svglink-svg text,
.svglink-svg textPath {
font-family: YetsonSans, Arial, sans-serif;
fill: var(--text);
}

.svglink-svg textPath {
font-size: 44px;
word-spacing: 4px;
}

textPath.circleone {
letter-spacing: 0.26em;
}

textPath.circletwo {
letter-spacing: 0.21em;
}

textPath.circlethree {
letter-spacing: 0.24em;
}

.svglink-center {
font-size: 55px;
letter-spacing: 0em;
}

.svglink-circle a {
text-decoration: none;
transition: .5s fill;
}

.col.span_2_of_12.circel {
width: 15%;
}

.svglink-circle a .svglink-svg text,
.svglink-circle a .svglink-svg textPath {
transition: .5s fill;
}

.svglink-circle a:hover .svglink-svg text,
.svglink-circle a:hover .svglink-svg textPath {
fill: var(--hover);
transition: .5s fill;
}

.col.span_3_of_12.border {
border-right: 1.5px solid var(--text);
margin-top: -1vw;
}

.col.span_3_of_12.border h1 {
padding-top: 2vw;
}

.border p {
width: 90%
}

#set button {
user-select: none;
float: left;
cursor: pointer !important;
transition: .4s;
border: none !important;
background: none !important;
}

.contact-message label:hover,
.numbers-style-ratio label:hover {
color: var(--hover)
}

.message-legend {
color: var(--second) !important;
max-width: 590px !important;
margin-bottom: 20px;
font-style: italic
}

.message-legend a {
color: var(--second) !important;
font-style: normal
}

/* * * * * * * * * * 31. LET SECTION * * * * * * * * * */

#let {
font-size: 26vw;
padding-top: 2vw;
padding-bottom: 8vw;
user-select: all
}

#let-check-con input {
margin: 4px 0 0
}

input#let-check {
position: absolute;
cursor: pointer
}

#let-check-con p {
padding-left: 23px;
font-family: YetsonSans !important
}

#let-line-up {
margin-bottom: 140px
}

#let-line-down {
padding-top: 40px;
user-select: none
}

#let.uppercase,
button.altg.altggreen,
button.uppercase {
font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05", "ss06" !important
}

/* * * * * * * * * * 32. NUMBERS & STYLES * * * * * * * * * */

#myselection,
.contact-form-mail button,
.numbers-style-ratio,
.stylechanger button {
font-family: YetsonSans, Arial, sans-serif !important;
font-size: 16px
}

.numbers-style-ratio div {
margin-bottom: 5px
}

.default-num,
.default-num button {
font-variant-numeric: normal !important
}

.tabular-nums,
.tabular-nums button {
font-variant-numeric: tabular-nums !important
}

.oldstyle-nums,
.oldstyle-nums button {
font-variant-numeric: oldstyle-nums !important
}

.lining-nums,
.lining-nums button {
font-variant-numeric: lining-nums !important
}

/* * * * * * * * * * 33. CHECKBOXES * * * * * * * * * */

.container {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
cursor: pointer;
font-size: 16px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: .5s
}

.container input {
position: absolute;
opacity: 0;
cursor: pointer
}

#language-support-all p,
.eula-download a:hover,
.mailit a,
a.sendmail {
cursor: pointer !important
}

.checkmark {
position: absolute;
top: 3px;
left: 0;
height: 12px;
width: 12px;
border: 2px solid var(--text);
border-radius: 50%
}

.container input:checked~.checkmark,
.container:hover input~.checkmark {
background-color: var(--text);
transition: .5s
}

.checkmark:after {
content: "";
position: absolute;
display: none
}

/* * * * * * * * * * 34. OTF FEATURES * * * * * * * * * */

.footer .section:first-child,
.otf-show {
border-top: 1.5px solid var(--text);
border-top: 1.5px solid var(--text)
}

.otf-show {
padding: 15px 0
}

.otf-show:first-child {
border-top: none !important;
}

.otf-show:last-child {
border-bottom: none !important;
}

#faq,
.footer {
padding-top: 100px
}

.cha-set {
animation:1s fadein;
font-size: 34px;
font-feature-settings: "calt" 0, "liga" 0, "dlig" 0 !important
}

.glyps-numr,
.numr {
font-feature-settings: "numr"
}

.glyps-dnom {
font-feature-settings: "dnom"
}

#glyps-alt {
font-feature-settings: "ss01", "ss02", "ss03"
}

.glyps-liga,
.glyps-liga button {
font-feature-settings: "liga", "dlig" !important
}

.glyps-oldstyle button,
.onum {
font-feature-settings: "onum"
}

.glyps-tabular button,
.tnum {
font-feature-settings: "tnum"
}

.arrow-otf {
color: var(--text);
font-size: 22px;
vertical-align: 4px
}

.ss01 {
font-feature-settings: "ss01" on, "ss02" on, "ss03" on, "ss04" on, "ss05" on, "ss06" on, "ss07" on !important;}

.liga {
font-feature-settings: "liga", "dlig"
}

.case {
font-feature-settings: "case"
}

.calt {
font-feature-settings: "calt"
}

.otf-frac {
font-feature-settings: "frac" !important
}

.zero {
font-feature-settings: "zero"
}

.subs {
font-feature-settings: "subs"
}

.smallcaps {
font-feature-settings: "smcp"
}

.lnum {
font-feature-settings: "lnum" !important
}

.tnum,
.tlnum {
font-feature-settings: "tnum" !important
}

span.onum,
span.ss01,
span.liga,
span.case,
span.calt,
span.otf-frac,
span.zero,
span.subs,
span.smallcaps,
span.lnum,
span.tlnum {
cursor: help;
}

#weightoutput,
.date-blog,
.time-inner {
font-feature-settings: "tnum"
}

svg textPath {
font-size: 74px;
letter-spacing: 4px
}

/* * * * * * * * * * 35. THEME TOGGLE BUTTON * * * * * * * * * */

button.btn-toggle {
position: fixed;
bottom: 12px;
right: 10px;
height: 40px;
width: 40px;
z-index: 999999;
background: none !important;
border: none;
cursor: pointer;
transition: all 1s !important;
-webkit-tap-highlight-color: transparent;
transform: rotate(-45deg)
}

button.btn-toggle:hover {
opacity: 0.7;
}

.dark-theme button.btn-toggle {
filter: invert(1);
transform: rotate(45deg);
right: 12px;
}

.dark-theme .btn-toggle-color {
opacity: 0 !important;
pointer-events: none !important;
}

#overlayindexsample {
pointer-events: none !important;
}

.btn-toggle-color {
position: fixed;
bottom: 14px;
width: 41px;
right: 47px;
z-index: 999999;
background: none;
border: none;
cursor: pointer;
opacity: 0;
filter: grayscale(1);
-webkit-tap-highlight-color: transparent;
transition: grayscale 1s !important;
animation: fadein 1s;
}

@keyframes fadein {

0%,50%  {
opacity: 0
}
100% {
opacity: 1 !important
}
}


.btn-toggle-color:hover {
filter: grayscale(0);
transition: all 1s !important;
}

#circ-them {
height: 30px;
width: 30px;
border-radius: 50%;
z-index: 2222 !important;
right: 20px;
bottom: 20px;
position: absolute;
transition: .5s
}

#circ-them:hover {
background: var(--hover) !important;
cursor: pointer;
transition: .5s
}

/* * * * * * * * * * 36. FOOTER LINKS * * * * * * * * * */

.link-titel {
font-size: 57px;
transition: fill .5s !important;
letter-spacing: 5px !important
}

.logo-titel,
textPath.link-titel {
stroke-dashoffset: 0 !important;
animation: 1s linear infinite turnlogo
}

.link-titel.last {
letter-spacing: 1px !important;
word-spacing: 9px !important
}

.link-titel.center,
.wnumer {
letter-spacing: 0 !important
}

.footer {
font-size: 19px;
z-index: 30;
position: relative
}

.footer .section:first-child {
padding-top: 16px
}

.footer p {
color: var(--text);
padding-bottom: 10px
}

svg#buy:hover .link-titel,
svg#spezimen:hover .link-titel,
svg#trial:hover .link-titel {
fill: var(--hover) !important;
transition: .5s !important
}

@media (max-width:875px) {
.explorimg {
margin-top: 20px !important;
margin-bottom: 20px !important
}

.col .explorimg {
margin: auto
}

.logofooter svg {
float: right;
width: 100%
}

.otf-show.deletline {
border: none
}

#vf-anmiation .TypeTester\/Controller,
.toosmall {
display: none
}
}

/* * * * * * * * * * 37. FORMS * * * * * * * * * */

input,
input[type=search] {
border-radius: 0 !important
}

p.bu,
p.bu em {
margin-top: 10px;
max-width: 1200px;
color: var(--text) !important
}


/* * * * * * * * * * 39. TIME DISPLAY * * * * * * * * * */

.time {
font-size: 26px;
height: 160px;
width: 160px;
vertical-align: middle;
line-height: 1.1;
border: 1.5px solid;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-top: 10px;
margin-bottom: 30px;
display: block !important;
position: relative
}

.time-inner {
padding-top: 18%
}

#blog-group,
.custom-file-upload,
form.contact-form-mail div {
display: inline-block
}

.fixme {
position: fixed !important;
top: 40px;
z-index: 1
}

.overbg {
background: var(--bkg) !important;
height: 600px;
margin-bottom: -700px;
z-index: 3
}

#vfinput,
.vf-controls {
z-index: 9
}

/* * * * * * * * * * 40. WEIGHT OVERVIEW * * * * * * * * * */

.weightoverview {
float: left;
font-size: 4vw;
margin: 0 2.5vw 0 0;
}

.spezia-weights .weightoverview {
font-size: 3.5vw !important;
}

.spezia-weights-serif .weightoverview {
font-size: 2vw !important;
}

.spezia-weights-serif .wnumer {
display: none;
}

.spezia-weights h1 {
padding-bottom: 12px
}

.spezia-weights .i .wnumer {
padding-right: 4px !important
}

.col.span_12_of_12.spezia-weights {
padding-top: 20px
}

.wnumer {
float: left;
font-size: 16px;
padding-top: 10px;
padding-right: 5px;
color: var(--text)
}

.i .wnumer {
padding-right: 0 !important
}

/* * * * * * * * * * 41. VIDEO PLAYER * * * * * * * * * */

[class*=" ckin-"],
[class^=ckin-] {
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1
}

.default__button--big,
.default__button.volume {
outline: 0;
cursor: pointer;
line-height: 2.1em;
opacity: 1
}

.ckin-play {
animation: 1s fadein
}

.ckin-play:before {
content: "\25B6";
font-size: 75px;
margin-top: 0px;
display: block;
}

.ckin-volume-high:before {
content: "\ea26"
}

.ckin-volume-medium:before {
content: "\1F50A"
}

.ckin-volume-low:before {
content: "\1F509"
}

.ckin-volume-mute:before {
content: "\1F507"
}

video {
width: 100%;
cursor: pointer
}

.default {
position: relative;
font-size: 0;
overflow: hidden;
cursor: pointer
}

.default__button {
background: 0;
border: 0;
cursor: pointer;
width: 30px;
font-size: 20px
}

.default__button i {
margin-left: -4px;
color: #000;
font-size: 24px;
}

.default__button--big {
left: 50%;
top: 50%;
border: 0;
color: #000;
position: absolute;
visibility: visible;
bottom: -25px !important;
right: 6% !important;
transform: translate(-50%, -50%) scale(1);
font-size: 50px;
border-radius: 50%;
height: 100px;
width: 100px;
padding: 2px 0px 0px 9px !important;
box-shadow: 0 0 4px 4px rgba(0, 0, 0, .2);
-webkit-transition: color .8s;
transition: color .8s;
background: #fff
}

.default__button--big:hover {
color: var(--hover) !important;
animation-name: none !important;
-webkit-transition: color .6s;
transition: color .6s
}

@media only screen and (max-width:600px) {
body {
padding: 25px 10px 10px !important
}

.section {
overflow: hidden !important
}

.vsep {
height: 5vw !important;
min-height: 100px !important
}

#completweight {
width: 80% !important
}

.submenumobil {
display: block
}

.fonttitel,
.navl a:first-child {
font-size: 16px !important
}

.navr {
display: none !important
}

.TypeTester\/Preview,
.subtitel .TypeTester\/Preview {
padding: 0 0 20px !important
}

.TypeTester\/wrapper-of-Controller {
margin-left: -15px !important
}

.indextitel .TypeTester\/Preview {
font-size: 10vw !important
}

.default__button--big .default__button.volume {
visibility: hidden !important
}
}

.default__button.volume {
box-shadow: 0 0 4px 4px rgba(0, 0, 0, .2);
background: #fff;
border: 0;
color: #000;
position: absolute;
visibility: visible;
right: 22px;
bottom: 20px;
font-size: 16px;
border-radius: 50%;
height: 30px;
width: 30px;
padding-left: 9px;
margin-right: 7px;
transition: color .5s
}

.indextitel .TypeTester,
.rss {
border: none
}

.default__controls {
position: absolute;
bottom: 0;
right: 0;
float: right;
padding: 20px
}

.default.is-playing:before {
opacity: 0;
visibility: hidden;
-ms-transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.3)
}

.default.is-playing .default__button--big {
opacity: 0;
visibility: hidden
}

.default__button.fullscreen,
.default__button.toggle,
.progress {
display: none;
visibility: hidden
}

img.ui-draggable.ui-draggable-handle {
margin-top: 50px
}

img.ranimag {
filter: drop-shadow(-7px 7px 0px var(--bkg)) !important;
cursor: grab !important;
transition: opacity .8s;
max-width: 400px !important;
position: absolute
}

/* * * * * * * * * * 42. BLOG * * * * * * * * * */

.blog-show {
display: inline-block;
font-variant-numeric: normal !important
}

.blog-show label {
margin-bottom: 50px;
display: inline-block;
}

#go-language .blog-show label{
font-variant-numeric: tabular-nums lining-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

.pause-vf-animation {
animation-play-state: paused !important;
-webkit-animation-play-state: paused !important
}

.blog-show input[type="radio"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}


/* * * * * * * * * * 43. VF CONTROLS * * * * * * * * * */

.vf-cont-index {
float: left;
width: 100%;
display: flex;
font-size: 13px !important;
transition: .5s !important
}

.vf-font-in {
width: 100%;
height: 20px;
padding-right: 100px;
margin-top: -80px;
margin-left: 12px;
transition: .5s !important
}

.vf-font-in:hover input[type=range]::-webkit-slider-thumb {
background: var(--hover) !important;
transition: .5s
}

.vf-controls input#font-xheightsize,
.vf-controls input#font-opticalsize,
.vf-controls input#font-weight,
.vf-controls input#font-width {
margin: 1px 0 0 15px !important
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm) {
.vf-controls input#font-weight {
margin: 6px 0 0 15px !important
}
}

.vf-controls {
opacity: 0;
transition: .4s;
color: var(--text);
font-style: normal !important;
letter-spacing: .01em !important;
line-height: 1.35 !important;
display: contents
}

@media only screen and (max-width:700px) {
#menu {
right: -7px;
left: 43px;
top: 37px;
}

.navr a:nth-child(3) {
display: none !important
}

.vf-controls-in {
display: grid !important
}

input#font-xheightsize,
input#font-opticalsize,
input#font-weight,
input#font-width {
max-width: 400px !important;
width: 100% !important
}
}

input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 30px;
cursor: pointer;
background: var(--text)
}

::-webkit-slider-thumb:hover {
background: var(--hover) !important
}

::-moz-range-thumb:hover {
background: var(--hover) !important
}

input#font-weight {
height: 30px;
margin-left: 64px;
position: relative;
background: 0 0
}

input#font-width {
height: 30px;
margin-left: 58px;
position: relative;
background: 0 0
}

input#font-opticalsize {
height: 30px;
margin-left: 102px;
position: relative;
background: 0 0
}

input#font-xheightsize {
height: 30px;
margin: -24px 0 0px 88px;
position: relative;
background: 0 0;
display: block;
}

.vf-anmiation {
padding-bottom: 70px
}

label[for=font-xheightsize],
label[for=font-opticalsize],
label[for=font-weight],
label[for=font-width] {
color: var(--text) !important
}

input#font-weight:hover {
opacity: 1;
transition: opacity .2s ease-in-out
}

div#vfinput input#font-weight {
width: 100%;
margin-left: 76px
}

div#vfinput label {
margin: 3px 0 0;
position: absolute;
color: var(--text)
}

#vfinput {
padding-right: 15%;
float: left;
width: 36%;
max-width: 260px;
position: relative;
margin-top: -4px
}

@media only screen and (min-width:1600px) {
.faq__notfound.is-visible {
margin: 2px 20vw 10px 180px
}
}

input[type=range] {
width: 100%;
margin: 5.4px 0
}

@media only screen and (max-width:985px) {
p {
min-width: 100px !important
}
}

#vf-anmiation .TypeTester\/wrapper-of-Controller {
width: 50%
}

/* * * * * * * * * * 44. DATE & BLOG ENTRIES * * * * * * * * * */

.date-blog {
border: 1.5px solid var(--text);
line-height: 1;
height: 80px;
width: 80px;
border-radius: 50%;
margin-top: 48px
}

.date-blog:hover {
border: 2px solid var(--hover)
}

/* * * * * * * * * * 45. ASSEMBLY * * * * * * * * * */

.assembly .TypeTester {
border-bottom: none !important
}

.assembly .TypeTester\/Preview {
padding-bottom: 50px !important;
float: left !important;
padding-top: 40px
}

.assembly img {
margin: -20px 0 -80px;
padding-bottom: 80px;
max-width: 102px
}

.wrapper-of-TypeTester.indextitel.assembly {
padding-bottom: 10vw
}

.imginvert {
filter: invert(0)
}

.dark-theme .imginvert {
filter: invert()
}

.explorimg img,
video {
filter: drop-shadow(3px 6px 6px rgb(0, 0, 0, 0.2)) grayscale(1);
transition: filter .5s
}

.explorimg img:hover {
filter: drop-shadow(3px 6px 6px rgb(0, 0, 0, 0.2)) grayscale(0);
transition: filter .5s
}

.dark-theme .explorimg img,
.dark-theme video {
filter: drop-shadow(3px 6px 6px rgb(0, 0, 0, 0.2)) grayscale(0);
transition: filter .5s
}

.dark-theme .starter img {
filter: invert(1)
}

.dark-theme .assembly img.imginvert {
filter: invert(0) !important
}

.dark-theme video.assembly-video.imginvert {
filter: contrast(101%) invert(0)
}

.dark-theme video.spezia-video.imginvert {
filter: contrast(93%) invert(0) !important
}

video.spezia-video.imginvert {
filter: contrast(96%) invert(1) !important
}

.assembly img.imginvert,
video.imginvert {
filter: invert(0) !important
}

.dark-theme .assembly-video.imginvert {
filter: contrast(99%) !important
}

img.aterliertopdistance {
padding-top: 13vw
}

#faq {
margin-top: -100px
}

/* * * * * * * * * * 46. BLOG ENTRIES * * * * * * * * * */

.blog-entery {
width: 21.5%;
float: left;
min-height: 400px;
height: 26vw;
margin-right: 3.5%;
pointer-events: all;
position: relative;
z-index: 33;
padding-top: 30px
}

@media only screen and (min-width:1900px) {
.blog-entery {
width: 17%;
height: 17vw;
margin-right: 3%;
}
}

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

.smalertext .TypeTester\/Preview {
letter-spacing: 0 !important
}

.spezia-weights-serif .weightoverview,
.spezia-weights .weightoverview {
font-size: 30px !important
}

#links-faq,
.rss-link {
display: none !important
}
}

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

#links-faq,
.TypeTester\/Controller\/Range,
.overbg,
.spezia-weights .wnumer {
display: none !important
}

.support-titel {
font-size: 20vw !important
}

.spezia-weights .weightoverview {
float: left !important;
letter-spacing: 0 !important;
font-size: 30px !important;
padding-right: 20px !important;
width: auto !important
}

.spezia-weights-serif .weightoverview {
float: left !important;
letter-spacing: 0 !important;
font-size: 20px !important;
padding-right: 8px !important;
width: auto !important
}

.spezia-weights-serif {
margin-bottom: 30px;
}

.wnumer {
padding-top: 10px
}

.weightoverview {
font-size: 9vw !important;
width: auto
}

#vfinput {
width: 40%
}

.assembly {
pointer-events: none
}

.assemblygrit .col.span_1_of_12 {
width: 25%
}

.borders.asemblypage,
.rss-link{
display: none
}

img.aterliertopdistance {
padding-top: 0
}

.blog-entery {
width: 100%;
margin-right: 0;
margin-bottom: 20vw
}

.blog-show label {
display: table;
margin-bottom: 10px;
float: left
}

.blog-show {
margin-top: 30px
}
}

/* * * * * * * * * * 47. RSS & BLOG SHOW * * * * * * * * * */

.rss-link {
float: right;
margin-top: -4px
}

.fullstoryread,
.blog-show label,
.rss {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
box-sizing: border-box;
cursor: pointer;
background: transparent;
font-family: YetsonSans, Arial, sans-serif !important;
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 1;
letter-spacing: normal;
text-decoration: none;
padding: 4px 9px;
border: 1.5px solid var(--darkgrey) !important;
border-radius: 20px;
color: var(--darkgrey);
margin: 0 5px 0 0;
user-select: none;
-webkit-user-select: none;
transition: color .5s, border-color .5s, background-color .5s, opacity .5s;
margin-bottom: 10px;
}

.fullstoryread:hover,
.blog-show label:hover,
.rss:hover {
transition: .5s;
border: 1.5px solid var(--text) !important;
color: var(--text) !important;
}

.blog-show input[type=radio]:checked+label {
border: 1.5px solid var(--text) !important;
color: var(--text) !important;
outline: 0 !important;
border-radius: 20px
}

.hilb {
border: 1.5px solid var(--text) !important;
color: var(--text)
}

.form-sent {
visibility: hidden
}

.contactMe .title {
color: var(--second)
}

/* * * * * * * * * * 48. CONTACT FORM * * * * * * * * * */

.contact-form-mail Subject_Manual input,
.contact-form-mail input {
width: 100%;
max-width: 370px;
background: 0 0;
font-family: YetsonSans, Arial, sans-serif !important;
font-size: 15px;
border: 1.5px solid var(--second);
padding: 9px 14px;
margin-bottom: 18px;
margin-top: 10px;
color: var(--text);
margin-right: 30px
}

.contact-form-mail textarea {
min-height: 100px;
overflow-y: hidden;
border-radius: 0;
width: 94% !important;
max-width: 900px;
background: 0 0;
font-size: 15px;
border: 1.5px solid var(--text);
padding: 18px 20px;
margin-bottom: 24px;
color: var(--text);
cursor: default
}

#myselection,
.contact-form-mail input#submit_button {
border: 1.5px solid var(--text);
color: var(--text);
transition: .5s
}

.contact-form-mail input#submit_button {
cursor: pointer;
max-width: 120px !important;
min-width: 120px !important;
width: 120px !important;
font-weight: 400 !important
}

.contact-form-mail label[for=topic] {
display: inline-flex !important;
width: 100%
}

#submit_button:hover,
.contact-form-mail button:hover {
transition: all .5s;
border: 1.5px solid var(--hover) !important;
color: var(--hover) !important
}

#myselection {
margin-top: 10px;
width: 110%;
max-width: 400px;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 -5 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23444444' stroke='%23444444' stroke-width='2'/></g></svg>") right 10px center/22px no-repeat;
padding: 9px 12px;
appearance: none;
-webkit-border-radius: 0;
border-radius: 23px;
margin-bottom: 26px;
transition: color .5s, border .5s;
}

#myselection:hover,
.custom-file-upload:hover {
border-color: var(--hover) !important;
color: var(--hover) !important;
transition: color .5s, border .5s !important;
}

#myselection option {
color: #000;
position: absolute;
display: block
}

.myDiv {
display: none;
margin-bottom: 30px;
max-width: 590px
}

div#discount1,
div#discount2 {
margin-top: 20px;
display: block
}

.contact-message {
max-width: 640px;
padding-bottom: 20px
}

.contact-form-mail button,
.custom-file-upload {
transition: all .5s;
padding: 6px 14px 6px;
color: var(--text);
cursor: pointer;
border: 1.5px solid var(--text);
border-radius: 23px
}

#languselct,
.custom-file-upload {
color: var(--darkgrey);
border: 1.5px solid var(--darkgrey)
}

.custom-file-upload {
cursor: copy
}

label.custom-file-upload.selected {
color: var(--text) !important;
border: 1.5px solid var(--text) !important
}

textarea#result-discount {
height: auto;
border: none;
overflow: hidden;
padding: 0 0 20px;
resize: none
}

.contact-form-mail input[type=radio] {
width: 20px;
min-width: 20px;
padding: 0;
margin-right: 3px;
margin-bottom: 0;
margin-left: -3px;
cursor: pointer
}

.contact-message label {
cursor: pointer;
margin: 40px 40px 0 0
}

.contact-message .desc,
.sf-list {
margin-top: 20px
}

.sf-file-item.sf-upload-success {
height: 30px
}

.sf-wrapper {
margin-top: -60px
}

.simple-files {
margin: 0 0 80px
}

.contact-form-mail button {
background: 0 0
}

label.hoverlabel:hover {
color: var(--hover);
cursor: pointer
}

.contact-form-mail input::-webkit-inner-spin-button,
.contact-form-mail input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}

.contact-form-mail input[type=number] {
-moz-appearance: textfield
}

input.math-solver {
text-align: left;
max-width: 161px;
margin-bottom: 25px
}

.simple-captcha-wrapper::before {
content: "Please solve the Captcha*" !important;
text-align: left;
margin-top: -23px;
position: absolute
}

select:invalid {
color: var(--text) !important
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
border: 1.5px solid var(--text);
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0 1000px var(--bkg) inset;
transition: background-color 5000s ease-in-out;
font-family: YetsonSans, Arial, sans-serif !important
}

::placeholder {
color: var(--text) !important;
font-style: italic !important
}

textarea::placeholder {
font-style: normal !important
}

input.math-solver::placeholder {
font-style: normal !important;
color: var(--text) !important
}

span.sf-closer.sf-item-cancel svg:hover {
fill: var(--hover) !important
}

#go-contact {
padding-top: 60px
}

/* * * * * * * * * * 49. STYLE CHANGER * * * * * * * * * */

.stylechanger {
margin: -87px 0 0px 370px;
position: absolute
}

.stylechanger button {
margin-bottom:14px;
}

@media only screen and (max-width:600px) {
.stylechanger {
display: none
}

.contact-form-mail {
width: 85%
}
}

#NormalButton {
color: var(--text);
}

.stylechanger button {
border: none;
color: #999;
transition: .5s;
cursor: pointer;
background: #f9f6f3;
font-size: 13px;
padding: 2px 12px 3px 12px;
border-radius: 14px;
margin-right: 5px;
}

.dark-theme .stylechanger button {
color:#fff;
background:#151515;
}

#NormalButton:hover,
.stylechanger button:hover {
color: var(--text) !important;
}

.dark-theme .stylechanger button {
background: #151515;
}

.explorimg {
min-height: 100px
}

/* * * * * * * * * * 50. Z-INDEX STACKING * * * * * * * * * */

.TypeTester:first-child {
z-index: 20 !important
}

.TypeTester:nth-child(2) {
z-index: 19 !important
}

.TypeTester:nth-child(3) {
z-index: 18 !important
}

.TypeTester:nth-child(4) {
z-index: 17 !important
}

.TypeTester:nth-child(5) {
z-index: 16 !important
}

.TypeTester:nth-child(6) {
z-index: 15 !important
}

.TypeTester:nth-child(7) {
z-index: 14 !important
}

.TypeTester:nth-child(8) {
z-index: 13 !important
}

.TypeTester:nth-child(9) {
z-index: 12 !important
}

.TypeTester:nth-child(10) {
z-index: 11 !important
}

.TypeTester:nth-child(11) {
z-index: 10 !important
}

.TypeTester:nth-child(12) {
z-index: 9 !important
}

.TypeTester:nth-child(13) {
z-index: 8 !important
}

.TypeTester:nth-child(14) {
z-index: 7 !important
}

.TypeTester:nth-child(15) {
z-index: 6 !important
}

.TypeTester:nth-child(16) {
z-index: 5 !important
}

.smalertext {
z-index: 1
}

#MonoSlider,
#font-xheightsize,
#font-opticalsize,
#font-weight,
#font-width,
.stylechanger {
z-index: 30
}

.TypeTester\/wrapper-of-Controller,
.stylechanger {
opacity: 0;
transition: .7s
}

.TypeTester:hover .TypeTester\/wrapper-of-Controller,
.span_12_of_12:hover .stylechanger,
.stylechanger:hover .TypeTester\/wrapper-of-Controller {
opacity: 1;
transition: .7s
}

/* * * * * * * * * * 51. GLYPHS * * * * * * * * * */

#glyphei {
font-size: 22px;
font-family: YetsonMono, monospace;
font-feature-settings: "ss01";
padding: 30px 0 10px
}

.mono {
font-feature-settings: "ss01";
}

#opticalsizeoutput,
#italicoutput,
#languselct,
#monooutput,
#xheightoutput,
#opszoutput,
#weightoutput,
#widthtoutput {
font-family: YetsonSans, Arial, sans-serif !important;
font-size: 13px
}

@keyframes turnlogo {
0% {
transform: rotate(0)
}

100% {
transform: rotate(360deg)
}
}

#opticalsizeoutput,
#weightoutput {
margin: 20px 0 0 -47px;
position: absolute;
background: 0 0;
color: var(--text);
border: none
}

#italicoutput,
#monooutput,
#xheightoutput,
#opszoutput,
#widthtoutput {
margin: 20px 0 0 -40px !important;
position: absolute;
background: 0 0;
color: var(--text);
border: none;
font-feature-settings: "tnum"
}

#xheightoutput {
margin: 20px 0 0 -61px !important;
}

#opticalsizeoutput {
margin: 20px 0 0 -84px;
}

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

.blog-show {
margin-top: -40px;
min-height: 100px
}

.TypeTester\/Preview {
font-size: 12.1vw !important;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
padding-top: 0.3em!important;
margin-top: -0.3em!important;
}

.ui-stiling {
padding-left: 4px;
}
.smalertext .TypeTester\/Preview {
white-space: normal
}

.subtitel .TypeTester\/Preview {
font-size: 48vw !important;
padding-top: 0.3em!important;
margin-top: -0.3em!important;
}

.TypeTester+.TypeTester {
margin-top: -10px !important
}

/* desktop stays as it is */
input#font-weight,
input#font-xheightsize,
input#font-width,
input#font-italic,
input#font-opticalsize {
  margin: -26px 0 0 80px !important;
  right: 0 !important;
}

.vf-cont-index .vf-font-in > label {
  display: inline-block;
  transform: translateY(-6px);
  padding-right: 10px;
}

.vf-font-in.terminal {
  display: block !important;
  margin-top: 10px;
}

.vf-font-in.italic {
  display: block !important;
  margin-top: 40px;
}

.vf-font-in:last-child {
  margin-left: 12px !important;
}

.TypeTester.vf-anmiation {
margin-top: 40px;
}
#italicoutput,
#monooutput,
#xheightoutput,
#opszoutput,
#weightoutput,
#widthtoutput,
input#italicoutput {
display: none;
}
input#font-weight,
input#font-xheightsize,
input#font-width,
input#font-italic,
input#font-opticalsize {
  margin: -26px 0px 0px 80px !important;
  right: 0px !important;
}
.vf-cont-index .vf-font-in > label {
  display: inline-block;
  transform: translateY(-6px);
  padding-right: 10px;
}
.vf-font-in {
padding-right: 0px !important;
}
.vf-font-in.terminal {
  display: block !important;
  margin-top: 10px;
}
.vf-font-in.italic {
  display: block !important;
  margin-top: 40px;
}
.vf-font-in:last-child {
  margin-left: 12px !important;
}
.TypeTester.vf-anmiation .TypeTester\/Preview {
font-size: 32vw !important;
}
.TypeTester.vf-anmiation .TypeTester\/Preview {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.vf-cont-index {
position: relative;
margin-top: 40px !important;
display: inline-block
}
input[type="range"]#font-weight,
input[type="range"]#font-xheightsize,
input[type="range"]#font-width,
input[type="range"]#font-italic,
input[type="range"]#font-opticalsize {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
input[type="range"]#font-weight::-webkit-slider-thumb,
input[type="range"]#font-xheightsize::-webkit-slider-thumb,
input[type="range"]#font-width::-webkit-slider-thumb,
input[type="range"]#font-italic::-webkit-slider-thumb,
input[type="range"]#font-opticalsize::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px !important;
height: 22px !important;
margin-top:-11px !important;
border-radius: 50%;
background: var(--text);
border: 3px solid var(--bkg);
box-shadow: 0 0 0 transparent;
}
input[type="range"]#font-weight::-webkit-slider-runnable-track,
input[type="range"]#font-xheightsize::-webkit-slider-runnable-track,
input[type="range"]#font-width::-webkit-slider-runnable-track,
input[type="range"]#font-italic::-webkit-slider-runnable-track,
input[type="range"]#font-opticalsize::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
}

/* * * * * * * * * * 52. FOOTER * * * * * * * * * */

.footer p {
max-width: 100%;
color: var(--second) !important
}

/* * * * * * * * * * 53. LANGUAGE SUPPORT * * * * * * * * * */

#language-support-basic {
padding-bottom: 24px;
display: inline-block
}

#language-support-all {
margin-top: 15px;
min-height: 50px;
margin-bottom: 47px;
display: inline-block;
float: left;
width: 100%;
border-radius: 10px;
outline: 5px solid #f9f6f3;
background: #f9f6f3;
padding: 4px 0 6px 0px;
}

.dark-theme #language-support-all {
outline: 5px solid #151515;
background: #151515;
}

#set .blog-show label {
margin-bottom: 15px !important;
display: inline-block !important
}

#language-support-all p {
user-select: none;
float: left;
transition: .4s;
}

#language-support-all button {
border: none !important;
}

select.hilightselect,
#set .blog-show input[type=radio]:checked+label {
border: solid 1.5px var(--text);
color: var(--text);
}

#languselct {
background: var(--bkg);
min-width: 200px;
padding: 2px 9px 3px;
font-size: 15px;
margin-left: 4px;
cursor: s-resize;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 -5 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23444444' stroke='%23444444' stroke-width='2'/></g></svg>") right 10px center/22px no-repeat;
appearance: none;
transition: .5s;
border-radius: 20px
}

select#languselct {
position: absolute
}

#fontselct {
background: var(--bkg);
color: var(--text);
min-width: 200px;
border: 1.5px solid var(--text);
border-radius: 0px;
padding: 4px 8px 5px 12px;
font-family: YetsonSans, Arial, sans-serif !important;
font-size: 16px;
margin-top: 20px;
margin-left: 10px;
cursor: s-resize;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 -5 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23444444' stroke='%23444444' stroke-width='2'/></g></svg>") right 10px center/22px no-repeat;
appearance: none;
transition: all 0.5s;
border-radius: 20px;
}

#fontselct:hover {
background: var(--hover);
color: var(--hover);
border: 1.5px solid var(--hover);
background: url("data:image/svg+xml;utf8,<svg viewBox='0 -5 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23444444' stroke='%23444444' stroke-width='2'/></g></svg>") right 10px center/22px no-repeat;
}

/* * * * * * * * * * 54. CHECK INPUTS * * * * * * * * * */

.check input[type="checkbox"] {position: absolute;opacity: 1;cursor: pointer;}

.check label {
display: inline-block;
padding-left: 24px;
margin-left: 0px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* FF only */
@-moz-document url-prefix() {

input#font-opticalsize,
input#font-weight,
input#font-width {
height: 30px;
margin: -24px 0 0px 88px;
position: relative;
background: 0 0;
display: block;
line-height: 3 !important;
padding: 6px 13px 8px 10px !important;
}
}

/* Safari 7.1+ */
_::-webkit-full-page-media,
_:future,
:root input#font-xheightsize,
input#font-opticalsize,
input#font-weight,
input#font-width {
height: 30px;
margin: -24px 0 0px 68px;
position: relative;
background: 0 0;
display: block;
line-height: 3 !important;
padding: 6px 13px 4px 10px !important;
}


/* * * * * * * * * * 55. TERMS AGREEMENT * * * * * * * * * */

.terms-agreement input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}

.terms-agreement label {
display: inline-block;
padding-left: 24px;
margin-left: 0px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.terms-agreement label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--text);
background-color: var(--bkg);
border-radius: 10px;
position: absolute;
left: 0;
top: 18px;
transition: all .5s;
}

.terms-agreement label:hover:before,
.terms-agreement input[type="checkbox"]:hover+label:before {
border: 2px solid var(--text);
background-color: var(--text);
transition: all .5s;
}

.terms-agreement input[type="checkbox"]:checked+label:before {
background-color: var(--text);
border: 2px solid var(--text);
transition: all .5s;
}


/* * * * * * * * * * 57. VIDEO ANIMATIONS * * * * * * * * * */

.default__button--big,
.default__button.volume {
animation: 2s fadein;
}

.video-container {
position: relative
}

#loading {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border: 10px solid rgba(255, 255, 255, .2);
border-radius: 50%;
border-top-color: #fff;
position: absolute;
z-index: 11;
animation: 1s linear infinite spin;
margin-top: -45px;
margin-left: -45px
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0)
}

100% {
-webkit-transform: rotate(360deg)
}
}

.default__button--big {
z-index: 12 !important
}

video {
width: 100%;
display: block
}

/* * * * * * * * * * 58. LAYOUT EDITOR * * * * * * * * * */

.drag-handle {
position: absolute;
top: 6px;
right: 6px;
cursor: grab;
user-select: none;
background: rgba(0, 0, 0, .6);
color: #fff;
border: 0;
border-radius: 6px;
padding: 4px 6px;
font: 12px/1 system-ui;
z-index: 2;
touch-action: none;
display: none;
}

.TypeTester {
position: relative;
background: none;
background: none;
border-radius: 15px;
transition: background 2s
}

.TypeTester.tt-dragging {
box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.TypeTester.tt-dragging .drag-handle,
.TypeTester.tt-selected {
cursor: grabbing;
background: #a79c9217;
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);
border-radius: 15px;
transition: background 2s;
}

.dark-theme .TypeTester.tt-dragging .drag-handle,
.dark-theme .TypeTester.tt-selected {
background: #d4c7bb1c;
}

@media only screen and (max-width: 1200px) {
#tt-toggle {
display: none !important
}
}

#tt-toggle.visible {
opacity: 1;
pointer-events: auto;
}

body.tt-edit-mode #tt-toggle::after {
content: "";
}

.is-layout-edit .TypeTester\/Controller_tracking,
.is-layout-edit .TypeTester\/Controller:nth-child(3) {
visibility: hidden !important;
opacity: 0 !important;
}

.is-layout-edit .TypeTester\/Controller\/Range {
margin-left: -90px;
}

.is-layout-edit .TypeTester\/wrapper-of-Controller {
transform: translateY(10px);
}

button.tt-scale-handle,
button.tt-delete-handle,
button.drag-handle {
font-size: 30px !important;
color: var(--text) !important;
background: none !important;
transition: all .5s;
}

button.tt-rotate-handle:hover,
button.tt-scale-handle:hover,
button.tt-delete-handle:hover,
button.drag-handle:hover {
color: var(--hover) !important;
}

button.drag-handle:active,
button.drag-handle:focus,
button.drag-handle:hover {
transform: scale(1.2);
transition: all .5s;
}

button.tt-delete-handle {
font-size: 21px !important;
}

button.tt-scale-handle {
font-size: 26px !important;
}

button.tt-delete-handle,
button.tt-rotate-handle,
button.tt-scale-handle {
cursor: pointer;
}

button.tt-rotate-handle {
background: none;
border: none;
color: var(--text);
font-size: 26px;
font-family: YetsonSans, Arial, sans-serif !important;
margin-left: 5px;
}

button.tt-delete-handle {
margin-top: 5px;
margin-right: -6px;
}

.TypeTester.is-layout-edit {
min-width: 350px !important;
min-height: 150px !important;
max-height: 1000px !important;
cursor: default;
}

.TypeTester.is-layout-edit > .TypeTester\/wrapper-of-Controller {
  container-type: inline-size;
  container-name: typetester;
  width: 100%;
}
@container typetester (max-width: 659px) {
.TypeTester\/Controller\/Range,
.TypeTesterTracking {
display: none;
}
}

.drag-handle,
.tt-delete-handle,
.tt-scale-handle {
font-family: YetsonSans, Arial, sans-serif !important;
font-size: 12px;
line-height: 1;
z-index: 2;
touch-action: none;
}

.drag-handle {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
border: 0;
border-radius: 6px;
padding: 4px 6px;
cursor: grab;
display: none;
}

.tt-delete-handle {
position: absolute;
top: 6px;
right: 38px;
background: rgba(220, 53, 69, 0.9);
color: #fff;
border: 0;
border-radius: 6px;
padding: 4px 6px;
cursor: pointer;
display: none;
}

.tt-scale-handle {
position: absolute;
right: 6px;
bottom: 6px;
width: 22px;
height: 22px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
border: 0;
border-radius: 6px;
cursor: nwse-resize;
display: none;
padding: 0px 30px 30px 0px;
}

#tt-toggle {
position: fixed;
bottom: 12px;
right: 12px;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-family: sans-serif;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}

#tt-toggle.visible {
opacity: 1;
pointer-events: all !important;
transition: all .5s;
}

#tt-toggle:disabled {
opacity: 0;
display: none;
transition: all .5s;
}