article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block
}

audio,
canvas,
video {
	display: inline-block
}

audio:not([controls]) {
	display: none;
	height: 0
}

[hidden] {
	display: none
}

body {
	margin: 0
}

a:focus {
	outline: thin dotted
}

a:active,
a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

b,
strong {
	font-weight: 700
}

dfn {
	font-style: italic
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0
}

mark {
	background: #ff0;
	color: #000
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em
}

pre {
	white-space: pre-wrap
}

q {
	quotes: "\201C""\201D""\2018""\2019"
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -.5em
}

sub {
	bottom: -.25em
}

img {
	border: 0
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 0
}

fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em
}

legend {
	border: 0;
	padding: 0
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0
}

button,
input {
	line-height: normal
}

button,
select {
	text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled],
html input[disabled] {
	cursor: default
}

input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0
}

input[type=search] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto;
	vertical-align: top
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

*,
::after,
::before {
	box-sizing: border-box
}

body {
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.right_header_button {
	pointer-events: auto;
	position: absolute;
	top: 0;
	right: 25px
}

header.stivky .right_header_button {
	right: 0
}

.menu_sign_up_before_login {
	text-align: left;
	line-height: 3
}

.menu_login {
	text-align: left;
	line-height: initial
}

.menu_sign_up_before_login h3 {
	text-transform: capitalize;
	font-family: Poppins-Medium;
	font-size: 24px
}

.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg)
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: .4;
	background: var(--color-link);
	animation: loaderAnim .7s linear infinite alternate forwards
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(.5, .5, 1)
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: 0;
	transition: color .2s
}

a:focus,
button:focus {
	outline: 0
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none
}

.icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
	margin-left: 10px
}

main {
	position: relative;
	width: 100%
}

.frame {
	position: relative;
	z-index: 199
}

.content {
	position: relative;
	z-index: 100
}

.background {
	perspective: 1000px
}

.background,
.background__copy {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../404.html);
	background-position: 50% 0;
	background-size: cover;
	z-index: 1
}

.background__copy {
	opacity: .3;
	transform: translate3d(0, 0, 0)
}

.codrops-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
	align-self: start
}

.codrops-header__title {
	font-size: 1rem;
	line-height: 1;
	font-weight: 400;
	margin: 0 1rem
}

.info {
	display: block;
	grid-area: info;
	margin: 1rem 0;
	justify-self: end;
	text-align: center
}

.github {
	display: block;
	margin: 1rem 0 0 0
}

.codrops-links {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	font-size: .85rem
}

.codrops-icon {
	display: inline-block;
	padding: .25em
}

.content__title {
	font-family: europa, Futura, Arial, serif;
	font-size: 14vw;
	font-weight: 400;
	mix-blend-mode: screen;
	line-height: .8;
	text-transform: lowercase;
	margin: 0;
	color: var(--color-title);
	z-index: 199;
	cursor: default
}

.content__tagline {
	color: var(--color-tagline);
	margin: 1rem 0 0 0;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .125rem;
	word-spacing: .25rem;
	text-transform: uppercase;
	text-align: center;
	z-index: 199;
	cursor: default
}

.action {
	background: 0 0;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0
}

.action--menu {
	pointer-events: auto;
	position: relative;
	top: 0;
	right: 0;
	z-index: 1000;
	font-family: Poppins-Regular;
	font-size: 16px
}

.menu--open .action--menu {
	pointer-events: none
}

.action--close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	z-index: 1000;
	opacity: 0;
	padding: 0 .5rem
}

.icon--menu {
	width: 2rem
}

.icon--close {
	width: 1rem
}

.menu {
	text-align: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	grid-template-columns: 100%;
	grid-template-rows: repeat(4, 25%);
	pointer-events: none
}

.menu--open {
	pointer-events: auto
}

.menu__item {
	width: 100%;
	position: relative;
	overflow: hidden
}

.menu__item-inner {
	overflow: hidden;
	transform: translate3d(100%, 0, 0);
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.menu__item--1 .menu__item-inner {
	background: #1a1818
}

.menu__item--2 .menu__item-inner {
	background: #f05815
}

.menu__item--3 .menu__item-inner {
	background: #1a1818
}

.menu__item--4 .menu__item-inner {
	background: #a4a4ac
}

.menu__item--5 .menu__item-inner {
	background: #000
}

.menu__item--4,
.menu__item--5 {
	display: block
}

.label {
	display: none
}

.mainmenu__item {
	opacity: 0
}

.mainmenu__item,
.sidemenu__item {
	position: relative;
	transition: color .1s;
	margin: .25rem 0;
	display: block
}

.sidemenu__item-inner {
	display: block;
	transform: rotate(-90deg);
	text-transform: capitalize;
	font-size: 24px;
	font-family: Poppins-Regular
}

.menu__item-map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../404.html) no-repeat 50% 50%;
	background-size: cover;
	transition: transform .8s cubic-bezier(.2, 1, .8, 1)
}

.menu__item-inner:hover .menu__item-map {
	transform: scale3d(1.1, 1.1, 1)
}

.menu__item-hoverlink {
	font-weight: 700;
	text-transform: capitalize;
	position: relative;
	z-index: 1000;
	display: block
}

.menu__item-hoverlink:hover {
	color: var(--color-link)
}

.quote {
	font-size: 1.5rem;
	padding: 1rem;
	text-align: center;
	max-width: 70%;
	color: var(--color-quote);
	font-family: europa, Futura, Arial, serif
}

.menu__item-link {
	text-align: left;
	align-self: flex-start;
	justify-self: start;
	font-size: 1.5rem;
	width: 100%;
	line-height: 1;
	padding: 2rem;
	margin: 3rem 0 auto;
	display: flex;
	flex-direction: column;
	height: calc(100% - 3rem)
}

.menu__item-link::after {
	content: '\27F6';
	display: block;
	margin-top: auto;
	font-size: .95rem
}

@media screen and (min-width:62em) {
	body {
		padding: 0
	}

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		min-height: auto;
		text-align: left
	}

	.frame {
		position: fixed;
		z-index: 199;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 1.5rem;
		pointer-events: none;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'codropsheader info''... ...''github ...'
	}

	.codrops-header {
		grid-area: codropsheader;
		padding: 0;
		justify-content: start
	}

	.codrops-links {
		margin: 0
	}

	.frame a {
		pointer-events: auto
	}

	.github {
		grid-area: github;
		justify-self: start
	}

	.info {
		margin: 0 6rem 0 0;
		color: var(--color-info)
	}

	.menu {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		grid-template-columns: 20% 30% 50%;
		grid-template-rows: 60% 40%;
		grid-template-areas: "item3 item2 item1""item4 item5 item1"
	}

	.menu__item {
		height: 100%
	}

	.menu__item--1 {
		grid-area: item1
	}

	.menu__item--2 {
		grid-area: item2
	}

	.menu__item--3 {
		grid-area: item3
	}

	.menu__item--4 {
		grid-area: item4
	}

	.menu__item--5 {
		grid-area: item5
	}

	.menu__item--4,
	.menu__item--5 {
		display: block
	}

	.menu__item-inner {
		align-items: center
	}

	.label {
		display: block;
		color: var(--color-item-alt);
		position: absolute;
		z-index: 1000;
		font-size: .85rem;
		font-weight: 700;
		margin: 0;
		white-space: nowrap
	}

	.label--topleft {
		top: 2rem;
		left: 2rem
	}

	.label--vert,
	.label--vert-mirror {
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl
	}

	.label--vert-mirror {
		transform: rotate(180deg)
	}

	.label--bottomright {
		bottom: 2rem;
		right: 2rem
	}

	.label::before {
		content: '------------- ';
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		letter-spacing: -1px;
		margin: 0 .75rem 0 0
	}

	.label--vert-mirror::before,
	.label--vert::before {
		margin: .75rem 0
	}

	.mainmenu,
	.sidemenu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.mainmenu {
		counter-reset: menuitem
	}

	.mainmenu__item {
		font-size: 35px;
		text-transform: capitalize;
		overflow: visible;
		margin: 0 0;
		padding: 0 .5rem;
		position: relative;
		transition: color .3s;
		font-weight: 500;
		line-height: 2.3;
		font-family: Poppins-Regular
	}

	.mainmenu__item:hover {
		color: var(--color-item-alt)
	}
/*
	.mainmenu__item::before {
		counter-increment: menuitem;
		content: counters(menuitem, "", decimal-leading-zero);
		position: absolute;
		font-size: 16px;
		top: 7%;
		left: -15px;
		color: #ffffff78
	}

	.mainmenu__item::after {
		content: '';
		width: 100%;
		top: 50%;
		height: 3px;
		background: var(--color-link-hover);
		position: absolute;
		left: 0;
		opacity: 0;
		transform: scale3d(0, 1, 1);
		transition: transform .3s, opacity .3s;
		transform-origin: 100% 50%
	}

*/	.mainmenu__item:hover::after {
		opacity: 1;
		transform: scale3d(1, 1, 1)
	}

	.sidemenu__item {
		text-transform: uppercase;
		letter-spacing: .15rem;
		font-size: 24px;
		font-family: Poppins-Regular
	}

	.menu__item-hoverlink {
		font-size: 1.25rem;
		text-transform: lowercase;
		border-bottom: 2px solid #fff;
		opacity: 0;
		transition: opacity .3s
	}

	.menu__item-inner:hover .menu__item-hoverlink {
		opacity: 1
	}
}