@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700|Josefin+Sans:700&display=swap');

:root
{
	--jose: 'Josefin Sans', sans-serif;
	--comf: 'Comfortaa', cursive;
}

h1, h2
{
	font-family: var(--jose);
	letter-spacing: -0.0625em;
}

h1
{
	font-size: 3rem;
}

h2
{
	font-size: 2rem;
}

body
{
	font-family: var(--comf);
}

@media only screen
{
	header
	{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 10;
	}
	
	nav
	{
		padding: 0px 2rem;
		color: var(--w);
		font-weight: 700;
	}
	
	header > nav > ul > li
	{
		display: inline-block;
	}
	
	header > nav > ul > li > a
	{
		display: inherit;
		line-height: 6rem;
		padding: 0px 1rem;
		overflow: hidden;
	}
	
	nav > ul > li > a::after
	{
		content: "";
		position: absolute;
		top: 4rem;
		left: 0px;
		width: 0px;
		height: 0.125rem;
		-webkit-border-radius: 1rem;
		border-radius: 1rem;
		background-color: var(--w);
	}
	
	nav > ul > li > a:hover::after
	{
		width: 100%;
		left: 100%;
		-webkit-transition: all 0.48s ease;
		transition: all 0.48s ease;
	}
	
	.clg
	{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100vh;
	}
	
	.me
	{
		line-height: 100vh;
		text-align: center;
	}
	
	.stgrad
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.stgrad::before
	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		-webkit-clip-path: polygon(0% 0%, 66% 0%, 34% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 66% 0%, 34% 100%, 0% 100%);
	}
	
	.clg_w.finished .stgrad::before
	{
		-webkit-clip-path: polygon(66% 0%, 100% 0%, 100% 100%, 34% 100%);
		clip-path: polygon(66% 0%, 100% 0%, 100% 100%, 34% 100%);
	}
	
	.me
	{
		z-index: 2;
	}
	
	.me > img
	{
		width: 13vw;
		height: 13vw;
		border: 1rem solid var(--w);
		-webkit-border-radius: 50%;
		border-radius: 50%;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	.me.musky > img
	{
		-webkit-mask-image: url('../imx/power.png');
		mask-image: url('../imx/power.png');
		-webkit-mask-size: 13vw 13vw;
		mask-size: 13vw 13vw;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
	}
	
	.dlx
	{
		position: absolute;
		bottom: 2vw;
		right: 2vw;
		padding: 2rem;
	}
	
	.dlx > h1
	{
		font-size: 6vw;
		padding: 0rem;
	}
	
	.dlx > h1:first-letter
	{
		color: var(--c1);
	}
	
	.opart
	{
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 2.4vw;
		margin: auto;
		padding: 2rem;
		width: calc(30vw + 4rem);
		height: calc(100vh - 4rem);
		-webkit-perspective: 40rem;
		perspective: 40rem;
	}
	
	.opart > div
	{
		position: absolute;
		top: 50%;
		-webkit-transform-origin: right center;
		transform-origin: right center;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.opart > div:first-child
	{
		width: 30vw;
	}
	
	.opart > div > h1
	{
		padding: 1rem 0rem;
		color: var(--c1);
	}

    .opart > div > h2, .opart > div > h3, .opart > .opertop
    {
        padding: 1rem 0rem;
    }
	
	.opart > div > p
	{
		padding: 1rem 0rem;
		text-indent: 1.5rem;
		font-weight: 700;
		line-height: 1.64rem;
	}
	
	.opart > div > p > a
	{
		color: var(--c1);
	}
	
	.opart > div:nth-child(n+2)
	{
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
		opacity: 0;
	}
	
	.opart > div > iframe
	{
		width: calc(30vw + 4rem);
		height: calc(16.875vw + 2.25rem);
	}
	
	.zX
	{
		z-index: 3;
	}
	
	.cfxc
	{
		width: 80%;
		min-width: 25rem;
	}
	
	.cfx
	{
		display: block;
		width: 100%;
	}
	
	.cfx > div > input, .cfx > div > textarea
	{
		border-bottom: 0.125rem solid var(--b);
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	.cfx > div > textarea:focus, .cfx > div > textarea:not(:placeholder-shown)
	{
		border-left: 0.125rem solid var(--c1);
		border-right: 0.125rem solid var(--c1);
	}
	
	.cfx > div > input, .cfx > div > textarea, .cfx > div > input ~ label, .cfx > div > textarea ~ label
	{
		width: calc(100% - 1rem);
		margin-top: 1.5rem;
		padding: 0.5rem;
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	.cfx > div > textarea
	{
		width: calc(100% - 1.25rem);
		border-left: 0.125rem solid var(--b);
		border-right: 0.125rem solid var(--b);
		-webkit-border-radius: 0px 0px 0.25rem 0.25rem;
		border-radius: 0px 0px 0.25rem 0.25rem;
	}
	
	.cfx > div > input ~ label, .cfx > div > textarea ~ label
	{
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: -1;
	}
	
	.cfx > div > input:focus, .cfx > div > input:not(:placeholder-shown), .cfx > div > textarea:focus, .cfx > div > textarea:not(:placeholder-shown)
	{
		border-bottom: 0.125rem solid var(--c1);
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	.cfx > div > input:focus ~ label, .cfx > div > input:not(:placeholder-shown) ~ label, .cfx > div > textarea:focus ~ label, .cfx > div > textarea:not(:placeholder-shown) ~ label
	{
		margin-top: 0.5rem;
		padding: 0rem 0.5rem;
		font-size: 0.75rem;
		color: var(--c1);
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	.cfx > div > input[type=submit]
	{
		width: 12rem;
		color: var(--b);
		border: 0.125rem solid var(--c1);
		-webkit-border-radius: 0.25rem;
		border-radius: 0.25rem;
	}
	
	.cfx > div > input[type=submit]:hover
	{
		color: var(--c1);
		border: 0.125rem solid var(--b);
	}
	
	.cfx > div > input[type=submit][disabled]
	{
		color: var(--b);
		border: 0.125rem solid var(--b);
		opacity: 0.5;
	}
	
	.projlogo
	{
		height: 4.5rem;
	}
	
	footer
	{
		position: absolute;
		top: 50%;
		left: calc(50% + 6.5vw + 7rem);
		color: var(--w);
		font-weight: 700;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		opacity: 0;
		z-index: 2;
		visibility: hidden;
		-webkit-filter: blur(0.5rem);
		filter: blur(0.5rem);
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	footer img
	{
		height: 2rem;
		vertical-align: middle;
		-webkit-filter: invert(1);
		filter: invert(1);
	}
	
	footer.show
	{
		left: calc(50% + 6.5vw + 4rem);
		opacity: 1;
		visibility: visible;
		-webkit-filter: none;
		filter: none;
	}

    .eua
    {
        margin-bottom: 0.5rem;
    }
}

@media only screen and (min-width: 1000px)
{
	.mob
	{
		display: none !important;
	}
}

@media only screen and (max-width: 999px)
{
	h1
	{
		font-size: 2.4rem;
	}
	
	header
	{
		position: fixed;
		left: unset;
		top: 0.5rem;
		right: 1rem;
		text-align: right;
	}
	
	nav
	{
		color: var(--c1);
		padding: 0px;
	}
	
	nav::before
	{
		content: "";
		position: absolute;
		top: 100%;
		right: 0px;
		width: 0.125rem;
		height: 0rem; /* 2.5rem * 4 Navigations minus half of one */
		background-color: var(--c1);
		z-index: 1;
		opacity: 0;
		-webkit-border-radius: 0.125rem;
		border-radius: 0.125rem;
		-webkit-transition: all 0.24s ease;
		transition: all 0.24s ease;
	}
	
	nav.show::before
	{
		height: 11.5rem;
		opacity: 1;
	}
	
	nav > a
	{
		display: inline-block;
		width: 2.5rem;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 1.24rem;
		-webkit-border-radius: 0.25rem;
		border-radius: 0.25rem;
	}
	
	nav > ul
	{
		position: absolute;
		top: 100%;
		right: 0px;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0s ease 0.42s;
		transition: all 0s ease 0.42s;
	}
	
	nav.show > ul
	{
		opacity: 1;
		visibility: visible;
		-webkit-transition: none;
		transition: none;
	}
	
	header > nav > ul > li
	{
		display: list-item;
	}
	
	header > nav > ul > li > a
	{
		line-height: 2.5rem;
		height: 2.5rem;
		overflow: visible;
		right: -0.875rem;
		opacity: 0;
		visibility: hidden;
		background-color: var(--w);
	}
	
	header > nav.show > ul > li > a
	{
		opacity: 1;
		visibility: visible;
		right: 0px;
	}
	
	nav > ul > li:first-child > a
	{
		-webkit-border-radius: 0.25rem 0rem 0rem;
		border-radius: 0.25rem 0rem 0rem;
		-webkit-transition: all 0.24s ease 0.24s;
		transition: all 0.24s ease 0.24s;
	}
	
	nav.show > ul > li:first-child > a
	{
		-webkit-transition: all 0.24s ease 0s;
		transition: all 0.24s ease 0s;
	}
	
	nav > ul > li:nth-child(2) > a
	{
		-webkit-transition: all 0.24s ease 0.18s;
		transition: all 0.24s ease 0.18s;
	}
	
	nav.show > ul > li:nth-child(2) > a
	{
		-webkit-transition: all 0.24s ease 0.06s;
		transition: all 0.24s ease 0.06s;
	}
	
	nav > ul > li:nth-child(3) > a
	{
		-webkit-transition: all 0.24s ease 0.12s;
		transition: all 0.24s ease 0.12s;
	}
	
	nav.show > ul > li:nth-child(3) > a
	{
		-webkit-transition: all 0.24s ease 0.12s;
		transition: all 0.24s ease 0.12s;
	}
	
	nav > ul > li:nth-child(4) > a
	{
		-webkit-transition: all 0.24s ease 0.06s;
		transition: all 0.24s ease 0.06s;
	}
	
	nav.show > ul > li:nth-child(4) > a
	{
		-webkit-transition: all 0.24s ease 0.18s;
		transition: all 0.24s ease 0.18s;
	}
	
	nav > ul > li:nth-child(5) > a
	{
		-webkit-border-radius: 0rem 0rem 0.25rem 0.25rem;
		border-radius: 0rem 0rem 0.25rem 0.25rem;
		-webkit-transition: all 0.24s ease 0s;
		transition: all 0.24s ease 0s;
	}
	
	nav.show > ul > li:nth-child(5) > a
	{
		-webkit-transition: all 0.24s ease 0.24s;
		transition: all 0.24s ease 0.24s;
	}
	
	header > ul > li > a::after
	{
		content: normal;
	}
	
	header > nav > ul > li > a::before
	{
		content: "";
		position: absolute;
		top: 1.125rem;
		right: -0.125rem;
		width: 0.375rem;
		height: 0.375rem;
		background-color: var(--c1);
		-webkit-border-radius: 0.375rem;
		border-radius: 0.375rem;
	}
	
	.clg
	{
		position: relative;
	}
	
	.stgrad::before
	{
		-webkit-animation: beam 1.24s 0s ease-in-out infinite alternate;
		-moz-animation: beam 1.24s 0s ease-in-out infinite alternate;
		-o-animation: beam 1.24s 0s ease-in-out infinite alternate;
		-ms-animation: beam 1.24s 0s ease-in-out infinite alternate;
		animation: beam 1.84s 0s ease-in-out infinite alternate;
	}
	
	@-moz-keyframes beam
	{
		0%{-webkit-clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
		100%{-webkit-clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
	}
	
	@-webkit-keyframes beam
	{
		0%{-webkit-clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
		100%{-webkit-clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
	}
	
	@-o-keyframes beam
	{
		0%{-webkit-clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
		100%{-webkit-clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
	}
	
	@-ms-keyframes beam
	{
		0%{-webkit-clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
		100%{-webkit-clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
	}
	
	@keyframes beam
	{
		0%{-webkit-clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 20% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 50%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
		100%{-webkit-clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));
		clip-path: polygon(0% 0%, 30% 0%, calc(50% + 5rem) 50%, 50% calc(50% + 6rem), 0% 45%, 0% calc(100% - 2rem), 10% calc(100% - 1rem), 40% 100%, 100% 100%, 100% calc(100% - 2rem),80% calc(50% + 16rem), 40% calc(50% + 14rem), 0% calc(50% + 11rem));}
	}
	
	.me > img
	{
		width: 10rem;
		height: 10rem;
	}
	
	.dlx
	{
		bottom: unset;
		right: unset;
		top: calc(50% + 6rem);
		left: 0px;
		width: calc(100% - 4rem);
		text-align: center;
		z-index: 1;
		text-shadow: 0.125rem 0.125rem 0px var(--w), -0.125rem -0.125rem 0px var(--w), 0.125rem -0.125rem 0px var(--w), -0.125rem 0.125rem 0px var(--w), -0.125rem 0px 0px var(--w), 0.125rem 0px 0px var(--w), 0px -0.125rem 0px var(--w), 0px 0.125rem 0px var(--w), -0.0625rem 0.125rem 0px var(--w), 0.0625rem 0.125rem 0px var(--w), -0.0625rem -0.125rem 0px var(--w), 0.0625rem -0.125rem 0px var(--w), -0.125rem 0.0625rem 0px var(--w), -0.125rem -0.0625rem 0px var(--w), 0.125rem -0.0625rem 0px var(--w), 0.125rem 0.0625rem 0px var(--w);
	}
	
	.dlx > h1
	{
		display: inline-block;
		font-size: 2.4rem;
		padding: 0px 0.25rem;
	}
	
	.opart
	{
		position: relative;
		height: unset;
		width: unset;
		left: 0px;
		top: unset;
		bottom: unset;
		padding: 2rem 0rem;
	}
	
	.opart > div
	{
		padding: 0px 2rem;
	}
	
	.opart > div:first-child
	{
		width: unset;
	}
	
	.opart > div:not(:last-child)
	{
		padding-bottom: 2rem;
		border-bottom: 0.125rem dotted var(--c1);
	}
	
	.opart > div, .opart > div:nth-child(n+2)
	{
		position: relative;
		top: 0px;
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	
	.opart > div > h1, .opart > div > h2, .opart > div > h3, .opart > .opertop
	{
		padding: 2rem 0px 1rem;
	}
	
	.opart > div > iframe
	{
		width: calc(100vw - 4rem);
		height: calc(56.25vw - 2.25rem);
		max-height: calc(100vh - 1rem);
	}
	
	.cfxc
	{
		width: unset;
		min-width: unset;
	}
	
	.cfx > div > textarea
	{
		height: 6rem;
	}
	
	footer
	{
		position: relative;
		top: 0px;
		left: 0px;
		padding: 2rem 1rem 0.25rem;
		text-align: center;
		opacity: 1;
		visibility: visible;
		-webkit-filter: none;
		filter: none;
		-webkit-transform: none;
		transform: none;
	}
	
	footer::before
	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		-webkit-clip-path: polygon(0px 0px, 25% 1rem, 85% 0.25rem, 100% 1rem, 100% 100%, 0% 100%);
		clip-path: polygon(0px 0px, 25% 1rem, 85% 0.25rem, 100% 1rem, 100% 100%, 0% 100%);
	}
}