@font-face {
	font-family:						crayon;
	src:								url(../fonts/CrayonE.ttf);
}

@font-face {
	font-family:						futura;
	src:								url(../fonts/Futura-Light.otf);
}

@font-face {
	font-family:						moon;
	src:								url(../fonts/Moon.ttf);
}

@font-face {
	font-family:						moonbold;
	src:								url(../fonts/MoonBold.ttf);
}

* {
	box-sizing:							border-box;
}

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

::-webkit-scrollbar {
	width:								3px;
	height:								3px;
}

::-webkit-scrollbar-thumb {
	background:							#aaaaaa;
}

::-webkit-scrollbar-track {
	background:							#eeeeee;
}

a {
	color:								#ffffff;
	font-family:						'futura', serif;
	font-size:							13px;
}

body {
	background-color:					#595959;
}

.wrapper {
	position:							fixed;

	width:								100%;
	height:								100vh;
	text-align:							center;
}

.wrapper > .container {
	position:							fixed;
	overflow-y:							auto;
	-webkit-overflow-scrolling:			touch;

	width:								100%;
	height:								100vh;

	-webkit-box-shadow:					0px 0px 28px 1px rgba(0, 0, 0, 0.14);
	-moz-box-shadow:					0px 0px 28px 1px rgba(0, 0, 0, 0.14);
	box-shadow:							0px 0px 28px 1px rgba(0, 0, 0, 0.14);
}

.wrapper > .container > .page {
	display:							none;
	position:							absolute;

	width:								100%;
	height:								1500px;
	padding-top:						100px;

	background-color:					#fcfcfc;
	background-image:					url('../img/main-bg-2.png');
	background-size: 250px 250px;
}

.wrapper > .container > .active {
	display:							block;
}

.wrapper > .container > .page > .wrap-in {
	display:							inline-block;

	width:								80%;
	padding-bottom:						50px;

	background-color:					#ffffff;

	-webkit-box-shadow:					0px 0px 8px 1px rgba(0, 0, 0, 0.04);
	-moz-box-shadow:					0px 0px 8px 1px rgba(0, 0, 0, 0.04);
	box-shadow:							0px 0px 8px 1px rgba(0, 0, 0, 0.04);
}

.wrapper > .container > .page > .wrap-in-blocks {
	display:							inline-block;

	width:								80%;
	padding-top:						2px;
	padding-bottom:						2px;

	font-size:							0;

	background-color:					#ffffff;

	-webkit-box-shadow:					0px 0px 8px 1px rgba(0, 0, 0, 0.04);
	-moz-box-shadow:					0px 0px 8px 1px rgba(0, 0, 0, 0.04);
	box-shadow:							0px 0px 8px 1px rgba(0, 0, 0, 0.04);
}

.wrapper > .container > .page > .wrap-in-blocks > .element {
	display:							inline-block;
	vertical-align:						top;

	width:								calc( (100% - 10px) / 4);
	height:								calc( (80vw - 10px) / 4);
	margin-left:						2px;
}

.wrapper > .container > .page > .wrap-in-blocks > .element > .inner-wrap {
	width:								100%;
	height:								100%;

	background-position:				50% 50%;
	background-size:					cover;
}

.wrapper > .container > .page > .wrap-in-blocks > .element > .e-1 {
	border-color:						#6d8ca3;

	background-image:					url(../img/card-1.png);
}

.wrapper > .container > .page > .wrap-in-blocks > .element > .e-2 {
	border-color:						#e9e9e9;

	background-image:					url(../img/card-2.png);
}

.wrapper > .container > .page > .wrap-in-blocks > .element > .e-3 {
	border-color:						#fdff60;

	background-image:					url(../img/card-1.png);
}

.wrapper > .container > .page > .wrap-in-blocks > .element > .e-4 {
	border-color:						#f6a23e;

	background-image:					url(../img/card-2.png);

}

.svg-wrap {
	width:								330px;
	margin-left:						calc( (100% - 330px) / 2);
	margin-right:						calc( (100% - 330px) / 2);
}

.svg-wrap > svg {
	width:								100%;
	height:								auto;
}

.path-1 {
	stroke-dasharray:					180;
	stroke-dashoffset:					180;

	animation:							dash-1 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.path-2 {
	transform-origin:					50% 50%;

	animation:							reduce 3.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.e-01 {
	display:							flex;
	flex-direction:						column;

	width:								330px;
	height:								130px;
	margin-left:						calc( (100% - 330px) / 2);
	margin-right:						calc( (100% - 330px) / 2);
	padding:							8px 8px 8px 8px;

	background-color:					#000000;
}

.e-01 > .wrap {
	display:							flex;
	flex-direction:						column;

	width:								314px;
	height:								124px;
	border-color:						#fff;
	border-style:						solid;
	border-width:						2px;

	background-color:					#000000;
	padding:							8px 8px 8px 8px;
}

.e-01 > .wrap > h1 {
	display:							block;

	margin:								auto;
	color:								#fff;
	font-family:						'futura', serif;
	font-size:							17px;
	font-weight:						800;
	letter-spacing:						1px;
	text-align:							center;
	text-transform:						uppercase;
}

.e-01 > .wrap > p {
	display:							block;

	margin:								auto;
	color:								#fff;
	font-family:						'futura', serif;
	font-size:							12px;
	letter-spacing:						1px;
	text-align:							center;
}

.e-01 > .wrap > p > a {
	color:								#fff;
	font-family:						'futura', serif;
	font-size:							12px;
	letter-spacing:						1px;
}