@font-face {
	font-family	: 'Arial';
	font-style	: normal;
	font-weight	: 900;
	src			: url('fonts/Arial-Black.eot');
	src			: url('fonts/Arial-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Arial-Black.woff') format('woff'), url('fonts/Arial-Black.ttf') format('truetype');
}


html, body { height: 100%; }
body {
	background	: url('../i/main-bg.png');
	margin		: 0;
}
body, input, textarea {
	font-family	: sans-serif;
	font-size	: 1.75vw;
}

#rotate-mobile {
	background	: url('../i/main-bg.png');
	bottom		: 0;
	display		: none;
	font-size	: 6.5vw;
	left		: 0;
	opacity		: 0;
	position	: fixed;
	right		: 0;
	top			: 0;
	z-index		: 1;
}
#rotate-mobile > p {
	position	: relative;
	text-align	: center;
	top			: 50%;
	transform	: translateY(-50%);
}
#rotate-mobile img {
	-webkit-animation	: spin 4s linear infinite;
    -moz-animation		: spin 4s linear infinite;
    animation			: spin 4s linear infinite;
	height				: 80px;
	margin-top			: 2vh;
	width				: 80px;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



a {
	color			: orange;
	text-decoration	: none;
	transition		: color .25s;
}
a:hover { color: #5b5b5b; }


#body-container {
	min-height	: 100%;
	opacity		: 0;
	overflow	: hidden; /* Otherwise the footer won't stick to the bottom */
	position	: relative;
	text-align	: center;
}
/*
#left-curl, #right-curl {
	animation-duration	: 2s;
	background			: url('../i/long-curl.png') no-repeat center 15vh;
	background-size		: contain;
	display				: block;
	padding-top			: 100%;
	position			: absolute;
	transition			: transform .5s ease-in-out; // cubic-bezier(0.175, 0.885, 0.32, 1.275)
	width				: 12.5vw;
	z-index				: -1;
}
#left-curl {
	left				: 1.5vw;
	transform			: rotate(90deg);
	transform-origin	: -50% 0;
}
#right-curl {
	right				: 1.5vw;
	transform			: rotate(-90deg) scaleX(-1);
	filter				: FlipH;
	-ms-filter			: 'FlipH';
	transform-origin	: 50% 0;
}
@keyframes bounceLeftCurl {
	0%   { transform: rotate(90deg); }
    30%  { transform: rotate(-15deg); }
    60%  { transform: rotate(25deg); }
    90% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes bounceRightCurl {
	0%   { transform: rotate(-90deg) scaleX(-1); }
    40%  { transform: rotate(15deg) scaleX(-1); }
    70%  { transform: rotate(-25deg) scaleX(-1); }
    90% { transform: rotate(5deg) scaleX(-1); }
    100% { transform: rotate(0deg) scaleX(-1); }
}
*/

header > nav {
	position	: absolute;
	top			: 0;
	width		: 100%;
}
header > nav ul, #main-submenu {
	font-family	: Arial;
	font-weight	: 900;
	margin-top	: -40vh;
	padding		: 0;
}
header > nav li, #main-submenu li {
	display			: inline-block;
	padding			: 1vh .9vw;
	vertical-align	: middle;
}
header > nav a, #main-submenu a {
	color			: #000;
	display			: block;
	font-size		: 1.9vw;
	font-weight		: bold;
	text-decoration	: none;
	text-transform	: lowercase;
	transition		: color .25s, transform .25s;
}
header > nav a img {
	background		: url('../i/home-icon.png') no-repeat left center;
	background-size	: cover;
	height			: 2.85vw;
	width			: 2.85vw;
}

header > nav a:hover, #main-submenu a:hover { color: red; }
header > nav a:hover img { background-position: right center; }


h1 {
	font-family		: Arial;
	font-size		: 6.5vw;
	font-weight		: 900;
	margin			: 0;
	opacity			: 0;
	padding			: 11vh 0 2vh;
	text-transform	: uppercase;
	width			: 100%;
}

#main-submenu {	margin: -3vh 0 3vh; }
#main-submenu a:before {
	content		: '\203A';
	display		: inline-block;
	margin-right: 1vw;
	transition	: all .33s;
}
#main-submenu a:hover, #main-submenu a.selected { opacity: .5; }
#main-submenu a:hover:before { margin-right: .5vw; }


.panel {
	background		: #fff;
	border			: gray solid;
	border-width	: .4vw;
	border-radius	: 2vw;
	box-sizing		: border-box;
	margin			: 0 auto;
	margin-bottom	: 52vh;
	opacity			: 0;
	padding			: 1.75vw;
	text-align		: left;
	width			: 80%;
}
.panel h2 {
	font-size		: 2.5vw;
	margin			: 0;
	padding-bottom	: 1vh;
}
.panel p:first-of-type { margin: 0; }
.panel p > img { margin-right: 1.75vw; }

.clear { clear: both; }


footer {
	background		: url('../i/footer-bg.png') no-repeat center top;
	background-size	: cover;
	bottom			: 0;
	color			: #5b5b5b;
	font-size		: 1.5vw;
	left			: 50%;
	/*max-width		: 720px;*/
	opacity			: 0;
	padding-top		: 50vh;
	position		: absolute;
	transform		: translateX(-50%);
	width			: 100%;
}
footer > p {
	bottom		: 2vh;
	margin		: 0;
	position	: absolute;
	right		: 2vw;
}