/* Fonts
=================================== */
@font-face{
	font-family: 'ABCDiatype-Light';
	src: url('../fonts/ABCDiatype-Light.woff2') format('woff2');
	font-style: normal;
	font-weight: 300;
	font-display: block;
	text-rendering: optimizeLegibility;
}
@font-face{
	font-family: 'ABCDiatype-Bold';
	src: url('../fonts/ABCDiatype-Bold.woff2') format('woff2');
	font-style: normal;
	font-weight: 700;
	font-display: block;
	text-rendering: optimizeLegibility;
}
@font-face{
	font-family: 'Siluett-SemiBold';
	src: url('../fonts/Siluett-SemiBold.woff2') format('woff2');
	font-style: normal;
	font-weight: 600;
	font-display: block;
	text-rendering: optimizeLegibility;
}

/* Colors
======================================== */
.txt-disabled{
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	color: var(--color-txt--disabled);
	pointer-events: none;
}
.txt-highlight{
	color: var(--color-txt--highlight);
}

/* Styles
======================================== */
i,
em{
	font-style: normal;
}

/* Serif
=================================== */
.txt-serif--small{
	font-family: var(--font-serif--600);
	font-size:   var(--font-serif--size-s);
	font-weight: 600;
	line-height: var(--font-serif--leading-s);
}
.txt-serif--medium{
	font-family: var(--font-serif--600);
	font-size:   var(--font-serif--size-m);
	font-weight: 600;
	line-height: var(--font-serif--leading-m);
}
.txt-serif--large{
	font-family: var(--font-serif--600);
	font-size:   var(--font-serif--size-l);
	font-weight: 600;
	line-height: var(--font-serif--leading-l);
}
.txt-serif--extra{
	font-family: var(--font-serif--600);
	font-size:   var(--font-serif--size-xl);
	font-weight: 600;
	line-height: var(--font-serif--leading-xl);
}

/* Vars
=================================== */
:root{

	/* Serif */
	--font-serif--600: 'Siluett-SemiBold', 'Times New Roman', Times, serif;

	/* Serif: small */
	--font-serif--size-s:    calc(100vw/(var(--scale)/12));
	--font-serif--leading-s: calc(100vw/(var(--scale)/15));
	--font-serif--mtop-s:    calc((100vw/(var(--scale)/2))*-1);
	--font-serif--mbottom-s: calc((100vw/(var(--scale)/4))*-1);
	--font-serif--mblock-s:  var(--font-serif--mtop-s) 0 var(--font-serif--mbottom-s);

	/* Serif: medium */
	--font-serif--size-m:    calc(100vw/(var(--scale)/15));
	--font-serif--leading-m: calc(100vw/(var(--scale)/20));
	--font-serif--mtop-m:    calc((100vw/(var(--scale)/3))*-1);
	--font-serif--mbottom-m: calc((100vw/(var(--scale)/5))*-1);
	--font-serif--mblock-m:  var(--font-serif--mtop-m) 0 var(--font-serif--mbottom-m);

	/* Serif: large */
	--font-serif--size-l:    calc(100vw/(var(--scale)/20));
	--font-serif--leading-l: calc(100vw/(var(--scale)/24));
	--font-serif--mtop-l:    calc((100vw/(var(--scale)/4))*-1);
	--font-serif--mbottom-l: calc((100vw/(var(--scale)/5))*-1);
	--font-serif--mblock-l:  var(--font-serif--mtop-l) 0 var(--font-serif--mbottom-l);

	/* Serif: extra */
	--font-serif--size-xl:    calc(100vw/(var(--scale)/39));
	--font-serif--leading-xl: calc(100vw/(var(--scale)/39));
	--font-serif--mtop-xl:    calc((100vw/(var(--scale)/3))*-1);
	--font-serif--mbottom-xl: calc((100vw/(var(--scale)/6))*-1);
	--font-serif--mblock-xl:  var(--font-serif--mtop-xl) 0 var(--font-serif--mbottom-xl);

}
@media (min-width: 376px) and (max-width: 1680px){
	:root{

		/* Serif: small */
		--font-serif--size-s:    12px;
		--font-serif--leading-s: 15px; /* -> 9px */
		--font-serif--mtop-s:    -2px;
		--font-serif--mbottom-s: -4px;

		/* Serif: medium */
		--font-serif--size-m:    15px;
		--font-serif--leading-m: 20px; /* -> 12px */
		--font-serif--mtop-m:    -3px;
		--font-serif--mbottom-m: -5px;

		/* Serif: large */
		--font-serif--size-l:    20px;
		--font-serif--leading-l: 24px; /* -> 15px */
		--font-serif--mtop-l:    -4px;
		--font-serif--mbottom-l: -5px;

		/* Serif: extra */
		--font-serif--size-xl:    39px;
		--font-serif--leading-xl: 39px; /* -> 30px */
		--font-serif--mtop-xl:    -3px;
		--font-serif--mbottom-xl: -6px;

	}
}
/* @media (max-width: 600px){
	:root{

		Serif: large
		--font-serif--size-l:    18px;
		--font-serif--leading-l: 21px;
		--font-serif--mtop-l:    -4px;
		--font-serif--mbottom-l: -5px;

	}
} */

/* Sans
=================================== */
.txt-sans--small{
	font-family: var(--font-sans--300);
	font-size:   var(--font-sans--size-s);
	font-weight: 300;
	line-height: var(--font-sans--leading-s);
}
.txt-sans--medium{
	font-family: var(--font-sans--300);
	font-size:   var(--font-sans--size-m);
	font-weight: 300;
	line-height: var(--font-sans--leading-m);
}
.txt-sans--extra{
	font-family: var(--font-sans--300);
	font-size:   var(--font-sans--size-xl);
	font-weight: 300;
	line-height: var(--font-sans--leading-xl);
}
.txt-sans--bold{
	font-family: var(--font-sans--700);
	font-weight: 700;
}

/* Vars
=================================== */
:root{

	/* Sans */
	--font-sans--300: 'ABCDiatype-Light', Helvetica, Arial, sans-serif;
	--font-sans--700: 'ABCDiatype-Bold', var(--font-sans--300);

	/* Sans: small */
	--font-sans--size-s:    var(--font-serif--size-s);
	--font-sans--leading-s: var(--font-serif--leading-s);
	--font-sans--mtop-s:    var(--font-serif--mtop-s);
	--font-sans--mbottom-s: var(--font-serif--mbottom-s);
	--font-sans--mblock-s:  var(--font-sans--mtop-s) 0 var(--font-sans--mbottom-s);

	/* Sans: medium */
	--font-sans--size-m:    var(--font-serif--size-m);
	--font-sans--leading-m: var(--font-serif--leading-m);
	--font-sans--mtop-m:    var(--font-serif--mtop-m);
	--font-sans--mbottom-m: var(--font-serif--mbottom-m);
	--font-sans--mblock-m:  var(--font-sans--mtop-m) 0 var(--font-sans--mbottom-m);

	/* Sans: extra */
	--font-sans--size-xl:    calc(100vw/(var(--scale)/38));
	--font-sans--leading-xl: calc(100vw/(var(--scale)/38));
	--font-sans--mtop-xl:    calc((100vw/(var(--scale)/3))*-1);
	--font-sans--mbottom-xl: calc((100vw/(var(--scale)/8))*-1);
	--font-sans--mblock-xl:  var(--font-sans--mtop-xl) 0 var(--font-sans--mbottom-xl);

}
@media (min-width: 601px) and (max-width: 1680px){
	:root{

		/* Sans: extra */
		--font-sans--size-xl:    38px;
		--font-sans--leading-xl: 38px; /* -> 27px */
		--font-sans--mtop-xl:    -3px;
		--font-sans--mbottom-xl: -8px;

	}
}
@media (min-width: 376px) and (max-width: 600px){
	:root{

		/* Sans: extra */
		--font-sans--size-xl:    20px;
		--font-sans--leading-xl: 24px; /* -> 14px !!! */
		--font-sans--mtop-xl:    -4px;
		--font-sans--mbottom-xl: -6px;

	}
}
@media (max-width: 375px){
	:root{

		/* Sans: extra */
		--font-sans--size-xl:    calc(100vw/(var(--scale)/20));
		--font-sans--leading-xl: calc(100vw/(var(--scale)/24));
		--font-sans--mtop-xl:    calc((100vw/(var(--scale)/4))*-1);
		--font-sans--mbottom-xl: calc((100vw/(var(--scale)/6))*-1);

	}
}