@charset "utf-8";

@media screen and (max-width: 960px)
{
	main
	{
		width: 100%;
		margin: 0;
	}

	nav 
	{
		width: auto;
		left: 30px;
		right: 30px;
		-webkit-transform: none;
		transform: none;
	}

	nav > ul > li:first-child
	{
		display: none;
	}

	nav > ul > li:first-child + li
	{
		display: block;
	}

	nav > ul > li:not(:first-child) > a
	{
		padding: 25px 10px;
	}

	nav > ul > li:not(:first-child) > a::before
	{
		left: 5px;
	}

	nav > ul > li:not(:first-child) > a::after
	{
		right: 5px;
	}
}

@media screen and (max-width: 780px)
{
	nav > ul > li:not(:first-child) > a
	{
		font-size: 12pt;
	}
}

@media screen and (max-width: 600px)
{
	main
	{
		padding-top: 125px !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	nav
	{
		position: fixed;
		text-align: right;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.35);
		z-index: 1000;
		overflow: hidden;
		height: 80px;
		-webkit-transition: height .35s ease-out, background .35s ease;
		transition: height .35s ease-out, background .35s ease;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	nav > button
	{
		display: inline-block !important;
	}

	nav.open
	{
		background: rgba(0,0,0,.75);
		height: 100vh !important;
	}

	nav > ul
	{
		text-align: left;
		border: none;
		flex-direction: column;
		visibility: hidden;
		-webkit-transition: visible .35s ease;
		transition: visible .35s ease;
	}
	
	nav.open > ul
	{
		visibility: visible;
	}

	nav > ul > li:not(:first-child)
	{
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
		opacity: 0;
		-webkit-transition: opacity .5s ease, -webkit-transform .35s ease-out;
		transition: opacity .5s ease, -webkit-transform .35s ease-out;
		transition: transform .35s ease-out, opacity .5s ease;
		transition: transform .35s ease-out, opacity .5s ease, -webkit-transform .35s ease-out;
	}

	nav > ul > li:not(:first-child):nth-child(2)
	{
		-webkit-transition-delay: 0.0s;
		transition-delay: 0.0s;
	}

	nav > ul > li:not(:first-child):nth-child(3)
	{
		-webkit-transition-delay: 0.05s;
		transition-delay: 0.05s;
	}

	nav > ul > li:not(:first-child):nth-child(4)
	{
		-webkit-transition-delay: 0.1s;
		transition-delay: 0.1s;
	}

	nav > ul > li:not(:first-child):nth-child(5)
	{
		-webkit-transition-delay: 0.15s;
		transition-delay: 0.15s;
	}

	nav > ul > li:not(:first-child):nth-child(6)
	{
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
	}

	nav > ul > li:not(:first-child):nth-child(7)
	{
		-webkit-transition-delay: 0.25s;
		transition-delay: 0.25s;
	}

	nav.open > ul > li:not(:first-child)
	{
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	nav > ul > li:not(:first-child) > a
	{
		padding: 25px 50px;
		font-size: 16pt;
		text-align: left;
		-webkit-transition: background .35s ease, color .35s ease;
		transition: background .35s ease, color .35s ease;
	}

	nav > ul > li:not(:first-child) > a::before,
	nav > ul > li:not(:first-child) > a::after
	{
		display: none;
	}

	nav > ul > li.active > a,
	nav > ul > li > a:hover
	{
		font-weight: 300;
		background: #fff;
		color: #000;
	}
}

@media screen and (max-width: 550px)
{
	main 
	{
		padding: 0 15px 50px;
	}

	main h2
	{
		font-size: 40pt;
	}
}