@font-face {
    font-family: 'CT';
    src:url('ChairmanTextL-Regular.woff2') format('woff2'),
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'CI';
    src:url('ChairmanTextL-RegularItalic.woff2') format('woff2'),
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'CD';
    src:url('ChairmanDisplayL-Heavy.woff2') format('woff2'),
    font-weight: 800;
    font-style: normal;
}

:root{
	--txt: #333333;
	--red: #c81e1e;
	--w: #fafafa;
	--sh: #bbbbbb;
	--sh2: #666666;
	--high: #ffadad;
	font-size: 120%;
	line-height: 1.5em;
	--pro: 1.5rem;
	--pro-po: .75rem;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

html{
	font-size: 120%;
	line-height: 1.5em;
	scroll-behavior: smooth;
}

body{
	margin: 0;
	padding: 0;
	color: var(--txt);
	background-color: var(--w);
	text-rendering: optimizeLegibility !important;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5em;
	font-feature-settings: 'kern' 1;
	font-family: 'CT', sans-serif;
}

*, *:before, *:after, div, h1, h2, h3, h4, h5, h6, p, a, ol, dl, ul, span, input {box-sizing:  border-box !important;}

strong, b{font-weight:700;}
em{font-style:italic;}
.c2c{
	font-feature-settings: 'c2sc' 1, 'smcp' 1;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 700;
	float: left; position: relative;
	margin: 0;
	font-feature-settings: 'ss02', 'ss03';
}

a, a:link, a:visited{
	text-decoration: underline;
	text-decoration-color: var(--sh);
	text-decoration-thickness: .075em;
	text-underline-offset: 0.125em;
	color: var(--txt);
	transition: color 1s ease-in-out, text-decoration-color 1s ease-in-out;
}
a:hover, a:active{
	color: var(--red);
	text-decoration-color: transparent;
	transition: color .25s ease-in-out, text-decoration-color .25s ease-in-out;
}

p{
	width: 100%;
	float: left; position: relative;
	margin: 0;
}
p+p{
	text-indent: calc(var(--pro) * 2);
}

body{
	animation: fadein ease-in-out 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* HEADER ----------------------------- */

header, main, footer{
	width: 100%;
	float: left; position: relative;
	padding: var(--pro-po);
}

header{
	width: calc(100% / 9 * 7);
	margin: 0 calc(100% / 9);
	padding: calc(var(--pro) * 2) var(--pro-po) 0;
}
header h1, header p.logo{
	font-family: 'CD', sans-serif;
	width: calc(100% / 9 * 6);
	margin: 0 calc(100% / 9) 0 0;
	float: left; position: relative;
	font-size: 3rem;
	line-height: calc(var(--pro) * 2.5);
	letter-spacing: -.01em;
	font-weight: 800;
	text-transform: lowercase;
	padding: var(--pro-po) var(--pro-po) 0 var(--pro-po);
	font-feature-settings: 'ss02', 'ss03';
	
	text-indent: 99999rem;
	overflow: hidden;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position:	var(--pro-po)		calc(var(--pro-po) * 1.6), 
							calc(30rem * .365) 	calc(var(--pro-po) * 1.6);
	background-size: 		auto 				calc(30rem * .125);
}
header a, header a:link, header a:visited, header a, header a:link, header a:visited{
	text-decoration: none;
	color: var(--txt);
	transition: color 1s ease-in-out;
}
header a:hover, header a:active, header a:hover, header a:active{
	text-decoration: none;
	color: var(--red);
	transition: color .25s ease-in-out;
}
header a.mail{
	width: calc(100% / 9 * 2);
	padding: calc(var(--pro) * 1.75) var(--pro-po) var(--pro);
	float: left; position: relative;
}
header a.mail:link, header a.mail:visited{
	color: var(--red);
	transition: color 1s ease-in-out;
}
header a.mail:hover, header a.mail:active{
	color: var(--sh);
	transition: color .25s ease-in-out;
}

/* MAIN ----------------------------- */


main{
	width: calc(100% / 9 * 7);
	margin: 0 calc(100% / 9);
	min-height: calc(100vh - (var(--pro) * 11));
}

main a{font-family: 'CI';font-style:italic;}

section{
	width: 100%;
	float: left; position: relative;
}

section h2{
	width: 100%;
	font-size: 1rem;
	line-height: var(--pro);
	margin: var(--pro-po) 0 0 0;
	padding: 0 var(--pro-po);
	font-weight: 400;
}

section.about{
	width: calc(100% / 9 * 6);
	margin: 0 calc(100% / 9) 0 0;
	float: left; position: relative;
	padding: calc(var(--pro) * 2) var(--pro-po);
}

.about p{
	width: 100%;
	float: left; position: relative;
	margin: 0;
	letter-spacing: .01em;
}

.about p + p{
	text-indent: 0;
	padding-top: calc(var(--pro) * .625);
}

/* ASIDE ---------- */
aside{
	width: calc(100% / 9 * 2);
	margin: 0;
	float: left;
	padding: calc(var(--pro) * 2) var(--pro-po);
}
aside ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
aside li:first-of-type{
	border-bottom: .075rem solid var(--sh);
}
aside li:nth-of-type(2){
	padding-top: calc(var(--pro) * 1);
}
aside li+li{
	padding-top: calc(var(--pro) / 4);
}
aside a, aside a:link, aside a:visited{
	color: var(--red);
	text-decoration: none;
	font-style: normal;
	font-family: 'CT', sans-serif;
}
aside a:hover, aside a:active{
	color: var(--sh);
	text-decoration: none;
}


/* FOOTER ----------------------------- */

footer{
	width: 100%;
	padding: var(--pro-po);
	font-size: .5rem;
	line-height: .666em;
	font-weight: 500;
	color: var(--sh2);
	text-shadow: none;
}

nav.logos{
	width: 100%;
	margin: 0;
	float: left; position: relative;
	padding: var(--pro) var(--pro-po) calc(var(--pro) * 2);
	shape-rendering: auto;
	image-rendering: smooth;
}
.logos ul{
	width: 100%;
	float: left; position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}
.logos ul li{
	width: calc(100% / 7);
	height: calc(var(--pro) * 4);
	padding: 0;
	margin: 0;
	float: left; position: relative;
}
.logos ul li + li{
	margin-top: 0;
}
.logos a, .logos a:link, .logos a:visited{
	width: 100% !important;
	max-width: 10rem;
	margin: 0 calc(50% - 5rem);
	height: calc(var(--pro) * 4.25);
	/*float: left; position: relative;*/
	position: absolute;
	left:50%; top:0;
	transform: translate(-50%,0);
	margin:0;
	padding: var(--pro) 0;
	text-indent: 9999em;
	overflow: hidden;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	white-space: nowrap;
	opacity: .75;
	transition: opacity 1s ease-in-out;
}
.logos a:hover, .logos a:active{
	opacity: .25;
	transition: opacity .25s ease-in-out;
}
a.tptq{
	background-image: url('tptq.svg');
}
a.devetka{
	background-image: url('devetka.svg');
}
.logos a.gj{
	background-image: url('gj.svg');
	background-size: 50% 50%;
}
.logos a.dvk{
	background-image: url('dvk.svg');
	background-size: 57.5% 57.5%;
}
.logos a.posters{
	background-image: url('tipoplakat.svg');
	background-size: 62.5% 62.5%;
}
.logos a.teiller{
	background-image: url('teiller_.svg');
	background-size: 45% 45%;
}
.logos a.vibration{
	background-image: url('vibration.svg');
	background-size: 125% 125%;
}
.logos a.typonine{
	background-image: url('typonine.svg');
	background-size: 57% 57%;
	background-position-y: bottom;
}

footer p{
	width: calc(100% / 9 * 7);
	padding: 0 var(--pro-po);
	margin: 0 calc(100% / 9);
	text-align: center;
}

/* GRID ----------------------------- */

.grid{
	width: calc(100% / 9 * 7);
	margin: 0 calc(100% / 9);
	height: 100vh;
	position: fixed;
	padding: var(--pro-po);
	opacity: .25;
	pointer-events: none;
	user-select: none;
	display: none;
}
.col{
	width: calc(100% / 12 - var(--pro));
	height: 100vh;
	float: left; position: relative;
	margin: var(--pro-po);
	background: var(--red);
}

@media only screen and (min-width: 1920px) {
	header h1, header p.logo{
		width: calc(100% / 9 * 4);
		margin: 0 calc(100% / 9) 0 calc(100% / 9);
	}
	section.about{
		width: calc(100% / 9 * 4);
		margin: 0 calc(100% / 9) 0 calc(100% / 9);
	}
	aside, header a.mail{
		width: calc(100% / 9 * 3);
		margin: 0;
	}
}

@media only screen and (max-width: 1150px) {
	main,header{width: 100%;margin:0;}
	header h1, header p.logo{
		width: calc(100% / 9 * 6);
		margin: 0;
	}
	section.about{
		width: calc(100% / 9 * 6);
		margin: 0;
	}
	aside, header a.mail{
		width: calc(100% / 9 * 3);
		margin: 0;
	}
	.logos ul li {
		width: calc(100% / 4);
	}
}

@media only screen and (max-width: 800px) {
	main,header{width: 100%;margin:0;}
	header h1, header p.logo{
		width: 100%;
		margin: 0;
	}
	section.about{
		width: 100%;
		margin: 0;
	}
	aside, header a.mail{
		width: 100%;
		margin: 0;
		padding-top: 0;
	}
	.logos ul li {
		width: calc(100% / 2);
	}
}

@media only screen and (max-width: 455px) {
	header h1, header p.logo{
		background-position:	var(--pro-po)					calc(var(--pro-po) * 1.6), 
								calc(var(--pro-po) - .05em) 	calc(var(--pro-po) * 5.6);
		height: calc(var(--pro) * 5);
	}
}
@media only screen and (max-width: 450px) {
	header h1, header p.logo{
		background-position:	var(--pro-po)					calc(var(--pro-po) * 1.6), 
								calc(var(--pro-po) - .05em) 	calc(var(--pro-po) * 5.6);
		height: calc(var(--pro) * 5);
	}
	.logos ul li {
		width: 100%;
	}
}


::selection{color:var(--text);background:var(--high);}::-moz-selection{color:var(--text);background:var(--high);}