body {
	background-color:#f5edeb;
}

.fill {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#canvas {
	opacity:0;
	transition:opacity 2s ease;
}

#logo {
	position:absolute;
	left:1rem;
	top:1rem;
	z-index:20;
	opacity:0;
	transition:opacity 3s ease;
}

.wf-xants-n4-active #logo {
	opacity:1;
}

#logo p {
	position: absolute;
	margin: 0;
	color: #232323;
	transition:all 2s ease;
}

#logo-a {
	position: absolute;
	font-size: 4rem;
	margin: 0;
	left: 1rem;
	top: 0rem;
}

#logo-ndrei {
	position: absolute;
	margin: 0;
	font-size: 1.5rem;
	top: 2.45rem;
	left: 3.8rem;
}

#logo-y {
	position: absolute;
	margin: 0;
	top: 3rem;
	font-size: 4rem;
	left: 2.2rem;
}

#logo-agoubov {
	left: 4.1rem;
	font-size: 1.5rem;
	top: 5.45rem;
}

#menu {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 1169px;
	width: 100%;
	max-width:600px;
	z-index: 9;
	transition:all 2s ease;
	margin-bottom:0;
	margin-bottom:-100px;
	transform:scale(0.9);
}

@keyframes glow {
    from {box-shadow: 0px 0px 0px #fff;}
    to {box-shadow: 0px 0px 20px #fff;}
}

#menu.compact {
	margin-bottom: -200px;
	margin-right: -70px;
	transform:scale(0.7);
}

#menu.expanded {
	z-index:11;
}

#menu-button {
	position:absolute;
	font-size:2rem;
	color:#454545;
	opacity:1.0;
	bottom:1rem;
	right:1rem;
	margin:0;
	text-align: right;
	display:none;
	z-index:6;
	cursor:pointer;
	transition:opacity 0.5s ease;
}

#menu-button:hover {
	opacity:0.4;
}

#menu div {
	position: absolute;
	height: 2px;
	background-color: #eedefe;
	width:0;
}

#menu.compact div {
	background-color: #232323;
}

#menu span {
	position:absolute;
	transform:rotate(45deg);
	width: 8.4rem;
	height: 8.4rem;
	opacity:0;
	transition:all 2s ease;
}

#menu p {
	position: absolute;
	width: 5rem;
	color: #eedefe;
	font-size: 2rem;
	opacity:0;
	transition: all 1s ease, opacity 3s ease;
	cursor:pointer;
}

#menu.compact p {
	color: #232323;
}

#menu-background-impressum {
	bottom: 17.9%;
	right: 29%;
	background-color:#dbce12;
}

#menu-background-projects {
	bottom: 26.1%;
	right: 13.1%;
	background-color:#646763;
}

#menu-background-graphics {
	bottom: 26.1%;
	right: 44.7%;
	background-color:#ce2334;
}

#menu-background-web {
	bottom: 34.1%;
	right: 29%;
	background-color:#1223de;
}

#menu-impressum {
	bottom: 14.3rem;
	right: 14.4rem;
}

#menu #menu-impressum:hover {
	color:#dbce12;
}

#menu-projects {
	bottom: 20.3rem;
	right: 6rem;
}

#menu #menu-projects:hover {
	color:#646763;
}

#menu-graphics {
	bottom: 26.3rem;
	right: 22.5rem;
}

#menu #menu-graphics:hover {
	color:#ce2334;
}

#menu.compact #menu-graphics {
	bottom: 20.3rem;
	right: 18.8rem;
}

#menu-web {
	bottom: 32.3rem;
	right: 18.9rem;
}

#menu.compact #menu-web {
	bottom:26.3rem;
	right:13.8rem;
}

#menu #menu-web:hover {
	color:#1223de;
}

#menu-line-1 {
	right: 40%;
	bottom: 0;
	transform: rotate(90deg);
	transform-origin: 100% 0%;
	transition: all 0.4s linear;
}

#menu-line-1.expanded {
	width:30%;
}

#menu-line-2 {
	right: 40.2%;
	bottom: 15.4%;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	transition: all 0.3s linear;
}

#menu.compact #menu-line-2.expanded {
	width: 45%;
}

#menu-line-2.expanded {
	width:22.5%;
}

#menu-line-3 {
	right: 40.2%;
	bottom: 15.6%;
	transform: rotate(135deg);
	transform-origin: 100% 100%;
	transition: all 0.3s linear;
}

#menu.compact #menu-line-3.expanded {
	width:44.7%;
}

#menu-line-3.expanded {
	width:22.5%;
}

#menu-line-4 {
	right: 24.3%;
	bottom: 23.6%;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	transition: all 0.9s linear;
}

#menu-line-4.expanded {
	width:67.5%;
}

#menu.compact #menu-line-4.expanded {
	width: 45%;
}

#menu-line-5 {
	right: 40.4%;
	bottom: 31.9%;
	transform: rotate(135deg);
	transform-origin: 100% 100%;
	transition: all 0.3s linear;
}

#menu-line-5.expanded {
	width:22.5%;
}

#menu-line-6 {
	right: 24.4%;
	bottom: 40.0%;
	transform: rotate(-135deg);
	transform-origin: 100% 100%;
	transition: all 0.3s linear;
}

#menu.compact #menu-line-6.expanded {
	right: 40.1%;
	width: 45%;
	bottom: 48.1%;
}

#menu-line-6.expanded {
	width:22.5%;
}

#menu-line-7 {
	position: absolute;
	height: 2px;
	right: 55.9%;
	background-color: #eedefe;
	bottom: 39.9%;
	transform: rotate(-45deg);
	transform-origin: 100% 100%;
	transition: all 0.6s linear;
}

#menu-line-7.expanded {
	width:45%;
}

#menu.compact #menu-line-7.expanded {
	right: 40.1%;
	width: 22.5%;
	bottom: 31.8%;
}

#menu-line-8 {
	right: 56.2%;
	bottom: 40%;
	transform: rotate(135deg);
	transform-origin: 100% 100%;
	transition: all 0.6s linear;
}

#menu-line-8.expanded {
	width:45%;
}

#menu.compact #menu-line-8.expanded {
	width: 45%;
	bottom: 31.8%;
	right: 72%;
}

#construction {
	position:absolute;
	left:12rem;
	bottom:calc(100vh - 21.5rem);
	color:#eedefe;
	font-size:1.2rem;
	line-height:1.8rem;
	visibility:hidden;
	opacity:0;
	transition:all 3s ease;
	z-index:30;
	height:11.5rem;
}

#construction hr {
	height:1px;
	margin:0.6rem;
	background-color:#eedefe;
}

#construction hr:nth-of-type(2) {
	margin-top:1.4rem;
}

#construction span {
	color:#ce2334;
	margin-left:1rem;
}

#construction a {
	color:#dbce12;
	margin-left:2rem;
	text-decoration: none;
}

@media (max-width:1024px) {
	#construction {
		bottom:1rem;
		left:1rem;
	}
}

@media (max-width:640px) {
	#construction {
		bottom:-3rem;
		left:1rem;
	}
}

@media (max-width:600px) {
	#menu {
		display:none;
	}

	#construction {
		bottom:3rem;
	}

	#menu p {
		font-size:5vw;
		width:25vw;
	}

	#menu-impressum {
		bottom: 38.8vw;
		right: 25.6vw;
	}

	#menu-projects {
		bottom: 54.5vw;
		right: 4.0vw;
	}

	#menu-graphics {
		bottom: 70.7vw;
		right: 48vw;
	}

	#menu-web {
		bottom: 86.1vw;
		right: 37.9vw;
	}

	#menu-line-2 {
		bottom: 30.0vw;
	}

	#menu-line-3 {
		bottom: 30.4vw;
	}

	#menu-line-4 {
		bottom:45.9vw;
	}

	#menu-line-5 {
		bottom:62.1vw;
	}

	#menu-line-6 {
		bottom:78vw;
	}

	#menu-line-7 {
		bottom:78vw;
	}

	#menu-line-8 {
		bottom:78.2vw;
	}

	#menu.compact #menu-graphics {
		bottom: 52.8vw;
		right: 39.5vw;
	}

	#menu.compact #menu-web {
		bottom: 68.4vw;
		right: 25.7vw;
	}

	#menu.compact #menu-line-6.expanded {
		bottom:93.7vw;
	}

	#menu.compact #menu-line-7.expanded {
		bottom:61.7vw;
	}

	#menu.compact #menu-line-8.expanded {
		bottom:62vw;
	}

	#menu span {
		width: 22.4vw;
		height: 22.4vw;
	}

	#menu-background-impressum {
		bottom: 35vw;
	}

	#menu-background-projects {
		bottom: 50.5vw;
	}

	#menu-background-graphics {
		bottom: 51vw;
	}

	#menu-background-web {
		bottom: 66.5vw;
	}
}

@media (max-height:580px) {
	#menu {
		display:none;
		margin:0;
	}

	#construction {
		bottom:3rem;
	}

	#menu p {
		width:9rem;
		display:list-item;
		list-style-type: circle;
		right: 4rem;
		text-align: right;
		direction: rtl;
	}

	#menu.compact p {
		margin-right:5%;
	}

	#menu div {
		display:none;
	}

	#menu-impressum, #menu.compact #menu-impressum {
		bottom: 1rem;
		right:4rem;
	}

	#menu-projects, #menu.compact #menu-projects {
		bottom: 5rem;
		right:4rem;
	}

	#menu-graphics, #menu.compact #menu-graphics {
		bottom: 9rem;
		right:4rem;
	}

	#menu-web, #menu.compact #menu-web {
		bottom: 13rem;
		right:4rem;
	}

	#menu-background-impressum {
		display: none;
	}

	#menu-background-projects {
		display: none;
	}

	#menu-background-graphics {
		display: none;
	}

	#menu-background-web {
		display: none;
	}
}

#enter {
	position: absolute;
	font-size: 2.5vw;
	color: #e3e3e3;
	width: 27vw;
	height: 27vw;
	line-height:27vw;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity:0;
	text-align:center;
	transition:all 1s ease;
	cursor:pointer;
	z-index:10;
}

#enter:hover {
	font-size:2.8vw;
	color:#f3f3f3;
}

.wf-carlmarx-n4-active #enter, .wf-carlmarx-n7-active #enter {
	opacity:1;
}

#skip {
	position: absolute;
	font-size: 1.2rem;
	color: #898989;
	width: 10rem;
	height: 2rem;
	right: 1rem;
	bottom: 0.1rem;
	opacity:0;
	text-align:right;
	transition:all 1s ease;
	cursor:pointer;
	z-index:10;
}

#skip:hover {
	color:#c0c0c0;
}

#webdesign {
	position: absolute;
	font-size: 3vw;
	color: #080804;
	width: 20%;
	transform: translateZ(200px) rotateY(37deg);
	height: 3.5vw;
	margin: auto;
	left: -10%;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	transition: opacity 1s ease;
}

#webdesign-pointer {
	position: absolute;
	height: 2vw;
	width: 2vw;
	left: 70%;
	opacity:0;
	top: 55%;
	margin-top: -1vw;
	transition:all 0.5s ease;
	overflow:visible;
}

#webdesign-circle-1 {
	transform: scale(0.01);
	transform-origin-x: 40%;
	opacity:1;
	transition:all 0.5s ease;
}

#webdesign-circle-2 {
	transform: scale(0.01);
	transform-origin-x: 40%;
	opacity:1;
	transition:all 0.5s ease;
}

#software {
	position: absolute;
	font-size: 2.5vw;
	color: #ececec;
	width: 18%;
	height: 6vw;
	margin: auto;
	left: 50%;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	transition: opacity 1s ease;
}

#software-code-wrapper {
	position:absolute;
	left:30.3%;
	top:50%;
	margin-top:-9vw;
	height:17.9vw;
	width:17.9vw;
	overflow:hidden;
	visibility: hidden;
}

#software-code {
	position:absolute;
	font-size:0.4vw;
	left:3%;
	top:1vw;
	transition:opacity 1s ease, top 4s linear;
	opacity:0;
}

#software-code strong {
	color:#1e17ce;
}

#software-code strong .thin {
	font-weight:400;
}

#software-code em {
	font-weight:400;
	font-style: normal;
	color:#0c621c;
}

#software-code q {
	color:#95530f;
}

#graphics {
	position: absolute;
	font-size: 4vw;
	color: #232323;
	width: 20%;
	height: 5vw;
	margin: auto;
	left: 0rem;
	right: 0;
	top: 0rem;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	transition: opacity 1s ease;
}

#graphics-animation {
	position: absolute;
	top: 50%;
	width: 41.2%;
	left: 29.4%;
	height: 41.2vw;
	margin-top:-20.6vw;
	opacity:0;
	visibility:hidden;
	transition:all 1s ease;
}

#graphics-animation div {
	position:absolute;
	background-color:#121212;
}

#graphics-animation div:nth-of-type(odd) {
	width:1px;
	height: 0vw;
	transition:all 0.2s linear;
}

#graphics-animation div:nth-of-type(even) {
	height:1px;
	top: 50%;
	width:0vw;
	transition:all 0.1s linear;
}

#graphics-1 {
	left: 36%;
	top: 50%;
	margin-top: -2.5vw;
}

#graphics-2 {
	margin-top: 2.5vw;
	left: 36%;
}

#graphics-3 {
	left: 40.1%;
	bottom: 50%;
	margin-bottom: -2.5vw;
}

#graphics-4 {
	margin-top: -2.5vw;
	left: 40.1%;
}

#graphics-5 {
	left: 43.6%;
	top: 50%;
	margin-top: -2.5vw;
}

#graphics-6 {
	margin-top: 2.5vw;
	left: 43.6%;
}

#graphics-7 {
	left: 47.1%;
	bottom: 50%;
	margin-bottom: -2.5vw;
}

#graphics-8 {
	margin-top: -2.5vw;
	left: 47.1%;
}

#graphics-9 {
	left: 50.9%;
	top: 50%;
	margin-top: -2.5vw;
}

#graphics-10 {
	margin-top: 2.5vw;
	left: 50.9%;
}

#graphics-11 {
	left: 54.8%;
	bottom: 50%;
	margin-bottom: -2.5vw;
}

#graphics-12 {
	margin-top: -2.5vw;
	left: 54.8%;
}

#graphics-13 {
	left: 56.7%;
	top: 50%;
	margin-top: -2.5vw;
}

#graphics-14 {
	margin-top: 2.5vw;
	left: 56.7%;
}

#graphics-15 {
	left: 60.2%;
	bottom: 50%;
	margin-bottom: -2.5vw;
}

#graphics-16 {
	margin-top: -2.5vw;
	left: 60.2%;
}

#graphics-17 {
	left: 63.7%;
	top: 50%;
	margin-top: -2.5vw;
}

#graphics-animation #graphics-line-1 {
	left: 36%;
	top: 58%;
	height:2px;
	background-color:#dbce12;
	transition:all 2s linear;
}

#graphics-animation #graphics-line-2 {
	left: 36%;
	top: 59%;
	height:2px;
	background-color:#ce2334;
	transition:all 2s linear;
}

#graphics-animation #graphics-line-3 {
	left: 36%;
	top: 60%;
	height:2px;
	background-color:#1223de;
	transition:all 2s linear;
}

#main {
	opacity:0;
	visility:hidden;
	transition:all 2s ease;
}

#header-container {
	position: absolute;
	top: 4rem;
	right: 0rem;
	width:28rem;
	height: 5rem;
	overflow: visible;
	font-size: 2.5rem;
	font-weight: 100;
	color: #343434;
	z-index:13;
}

#header-container-inner {
	position: absolute;
	top: 0rem;
	left: 0%;
	width:100%;
	height: 100%;
	overflow: hidden;
}

#header {
	position: absolute;
	margin-top:-20rem;
	transition:all 1s ease;
}

#header h2 {
	margin:0;
	height:5rem;
	line-height:5rem;
}

#header-line-1 {
	position: absolute;
	height: 2px;
	left: 0%;
	width: 30rem;
	background-color: #565656;
	top: 5rem;
	margin-left: -14rem;
}

#header-line-2 {
	position: absolute;
	height: 10rem;
	left: 0%;
	width: 2px;
	background-color: #565656;
	top: 3rem;
	margin-left: -5rem;
	transition:all 1s ease;
}

#header-line-3 {
	position: absolute;
	height: 2px;
	left: 0%;
	width: 27rem;
	background-color: #565656;
	top: 0rem;
	margin-left: -3rem;
	transition:all 1s ease;
}

#header-line-4 {
	position: absolute;
	height: 2px;
	left: 20%;
	width: 25%;
	background-color: #565656;
	bottom: 2rem;
	transition:all 1s ease;
}

.content-1 {
	position: absolute;
	font-size: 1.4rem;
	line-height: 1.8;
	padding-right:1rem;
	color: #232323;
	opacity:0;
	overflow:auto;
	transition:opacity 1s ease;
	text-align: justify;
}

.content-2 {
	position: absolute;
	left: 0%;
	width: 60%;
	top: 7rem;
	max-height: 60%;
	margin-left: -2rem;
	font-size: 1.0rem;
	line-height: 1.8;
	opacity:0;
	color: #676767;
	transition:opacity 1s ease;
}

.content-2 a {
	color: #1223de;
}

#cutoff-impressum {
	position: absolute;
	width: 100rem;
	transform-origin: 0%;
	transform: rotate(-30deg);
	height: 20rem;
	background-color: rgb(245, 237, 235);
	z-index: 12;
	top: 0rem;
	left: 0rem;
	margin-left: -10rem;
	margin-top: -1rem;
	display:none;
	border-bottom-color: #646763;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	box-shadow:rgb(170, 170, 170) 10px 10px 30px -10px;
}

#content-impressum-1 {
	left: 10%;
	width: 30%;
	bottom: 5rem;
	max-height: calc(100% - 5rem);
}

#content-impressum-1 h3:first-child {
	margin-top:8rem;
}

h3 {
	color: #232323;
	margin-left:4rem;
	margin-bottom:1.5rem;
}

h3:first-child {
	margin-top:0;
}

h3:nth-of-type(even) {
	left:auto;
	right:0;
	margin-right:4rem;
	margin-left:0;
	text-align:right;
}

hr {
	position:relative;
	margin: 0;
	border-style: none;
	height: 2px;
	width: 70%;
	margin-left:2rem;
}

hr:nth-of-type(even) {
	left:30%;
	margin-left:-2rem;
}

#content-impressum-1 hr {
	background-color: #dbce12;
}

#content-impressum-2 a {
	color: #1223de;
}

#cutoff-projects-1 {
	position: absolute;
	width: 100rem;
	transform-origin: 100%;
	transform: rotate(20deg);
	height: 20rem;
	background-color: #f5edebab;
	z-index: 12;
	top: 8rem;
	right: 33rem;
	margin-right: -10rem;
	margin-top: -7rem;
	display:none;
	border-bottom-color: #646763;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

#cutoff-projects-2 {
	position: absolute;
	width: 100rem;
	transform-origin: 100%;
	transform: rotate(24deg);
	height: 20rem;
	background-color: #f5edebab;
	z-index: 12;
	top: 8rem;
	right: 33rem;
	margin-right: -10rem;
	margin-top: -7rem;
	display:none;
	border-bottom-color: #646763;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

#cutoff-projects-3 {
	position: absolute;
	width: 100rem;
	transform-origin: 100%;
	transform: rotate(28deg);
	height: 20rem;
	background-color: #f5edeb;
	z-index: 12;
	top: 8rem;
	right: 33rem;
	margin-right: -10rem;
	margin-top: -7rem;
	display:none;
	border-bottom-color: #646763;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

#content-projects-1 {
	left: 15%;
	width: 50%;
	bottom: 5rem;
	max-height: calc(100% - 5rem);
}

#content-projects-1 h3:first-child {
	margin-top:13rem;
}

#content-projects-1 hr {
	background-color: #646763;
}

#content-projects-1 img {
	width:50%;
	float:right;
	margin-top:2rem;
	margin-left:2rem;
	margin-bottom:1rem;
	box-shadow: -5px 5px 20px -10px #413334;
}

#content-projects-1 img:nth-of-type(even) {
	float:left;
	margin-right:2rem;
	margin-left:0;
	box-shadow: 5px 5px 20px -10px #413334;
}

#content-projects-1 a {
	color: #1223de;
	margin-left:1rem;
}

#content-projects-1 a:nth-of-type(even) {
	right:0;
	text-align:right;
	margin-right:1rem;
	display:block;
}

#content-graphics-1 {
	left: 5%;
	width: 35%;
	bottom: 5%;
	max-height: 67%;
}

#content-graphics-1 hr {
	background-color: #ce2334;
}

#content-graphics-2 a {
	color: #1223de;
}

#content-web-1 {
	left: 15%;
	width: 20%;
	bottom: 15%;
	max-height: 67%;
}

#content-web-1 hr {
	background-color: #1223de;
}

@media(max-width:1200px) {
	#menu-button {
		display:block;
	}

	#menu.compact {
		margin-right:-110%;
		background-color: #f5edeb;
		border-style: solid;
		border-width: 2px;
		border-color: #232323;
	}

	#menu.compact.expanded {
		margin-right:-5%;
	}

	.content-1 {
		font-size: 1.2rem;
	}

	h3 {
		margin-left:2rem;
	}

	h3:nth-of-type(even) {
		margin-right:2rem;
	}
}

@media(max-width:768px) {
	#main {
		overflow:auto;
		top:10rem;
	}

	#menu-button {
		top:1.5rem;
		bottom:auto;
	}

	#header-container {
		top: 0rem;
		left: 20%;
		width:50%;
		font-size:1.8rem;
	}

	#header-line-1 {
		left: 20%;
		top: 5rem;
	}

	#header-line-2 {
		left: 20%;
		top: 3rem;
	}

	#header-line-3 {
		left: 20%;
		top: 0rem;
	}

	#header-line-4 {
		display:none;
	}

	.content-1 {
		overflow: visible;
		height: auto;
		max-height: none;
		left:10%;
		width: 80%;
		top: 6rem;
	}

	.content-2 {
		display:none;
	}
}