﻿h1 {
	padding: 60px 0px;
	background-color: #b4252d;

	position: fixed;
	z-index: 2;
	top: 50%;
	left: 0px;
	width: 100%;

	-webkit-transform: translate(0px, -50%);
	-moz-transform: translate(0px, -50%);
	-ms-transform: translate(0px, -50%);
	-o-transform: translate(0px, -50%);
	transform: translate(0px, -50%);

	-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);

	text-align: center;
	font-family: Roboto, sans-serif;
	font-size: 0px;
	color: #fff !important;

	white-space: nowrap;
}

h1 * {
	display: inline-block;
	height: 150px;
	line-height: 150px;
	vertical-align: middle;
}

h1 span {
	font-weight: 300;
	font-size: 100px;
	text-align: center;
	letter-spacing: 6px;
}

h1 em {
	font-style: normal;
	font-weight: bold;
	font-size: 125px;
}

h1 a { color: #fff; }
h1 a:hover { text-decoration: none; }

nav {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: 135px;
	font-size: 0px;

	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);

	white-space: nowrap;
}

.dropdown {
	width: 510px;
	height: 80px;
	line-height: 80px;

	border: 0px;
	background-color: #fff;

	text-align: center;
	font-family: Roboto Condensed, sans-serif;
	font-weight: bold;
	font-size: 31px;
	color: #b4252d;
}

.dropdown.open { color: #c35157; }

.dropdown label {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.dropdown label span:last-child { height: 100%; }
.dropdown label span:first-child {
	width: 80px;
	height: 100%;
}

.dropdown label span:first-child::before { display: none; }
.dropdown label span:first-child::after {
	content: '\BB';
	border: 0px;
	margin: 0px;
	
	line-height: normal;
	display: inline-block;
	width: 40px;
	height: 40px;

	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.dropdown_menu {
	border: 0px;
	font-family: Roboto Condensed,sans-serif;
	font-weight: normal;
	font-size: 21px;
}

.dropdown_menu li {
	border: 0px;
	line-height: 50px;
	height: 50px;
}

.dropdown_menu li.option { display: none; }

nav a {
	display: inline-block;
	width: 170px;
	height: 80px;
	line-height: 80px;
	vertical-align: top;

	background-color: #fff;
		
	text-align: center;
	text-transform: uppercase;
	font-family: Roboto Condensed, sans-serif;
	font-weight: bold;
	font-size: 30px;
	color: #b4252d;

	-webkit-box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);

	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;

	-webkit-transition-property: -webkit-box-shadow, background-color, color;
	-moz-transition-property: -moz-box-shadow, background-color, color;
	-ms-transition-property: box-shadow, background-color, color;
	-o-transition-property: box-shadow, background-color, color;
	transition-property: box-shadow, background-color, color;

	-webkit-touch-action: manipulation;
	-moz-touch-action: manipulation;
	-ms-touch-action: manipulation;
	-o-touch-action: manipulation;
	touch-action: manipulation;
}

.nologin { z-index: 2; }
nav.nologin a { width: 255px; }

nav a:first-child {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

  nav a:hover
, nav a:focus
, nav a:focus-within
, nav a:focus-visible
, nav a:active {
	-webkit-box-shadow: inset -20px 0px 20px -20px rgba(0, 0, 0, 0.4), inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset -20px 0px 20px -20px rgba(0, 0, 0, 0.4), inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	box-shadow: inset 20px 0px -20px -20px rgba(0, 0, 0, 0.4), inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);

	background-color: #b4252d;
	text-decoration: none;
	color: #fff;
}

  nav a:first-child:hover
, nav a:first-child:focus
, nav a:first-child:focus-within
, nav a:first-child:focus-visible
, nav a:first-child:active {
	-webkit-box-shadow: inset -20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset -20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	box-shadow: inset 20px 0px -20px -20px rgba(0, 0, 0, 0.4);
}

  nav a:last-child:hover
, nav a:last-child:focus
, nav a:last-child:focus-within
, nav a:last-child:focus-visible
, nav a:last-child:active {
	-webkit-box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
	box-shadow: inset 20px 0px 20px -20px rgba(0, 0, 0, 0.4);
}

  nav a:hover + a
, nav a:focus + a
, nav a:focus-within + a
, nav a:focus-visible + a
, nav a:active + a {
	-webkiit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.logo {
	display: block;
	height: 150px;
	width: 450px;

	position: fixed;
	bottom: 50%;
	right: 50%;
	margin-bottom: 135px;

	background-color: #fff;

	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}

.logo span {
	display: block;
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;

	background: no-repeat center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

@media only screen and (max-width: 1024px) {
	nav {
		right: 0px;
		left: auto;
	}
}

@media only screen and (max-width: 900px) {
	.logo {
		left: 0px;
		right: auto;
	}

	h1 {
		padding: 51px 0px;
		margin-top: -15px;
	}

	h1 * {
		height: 139px;
		line-height: 130px;
	}
	h1 span { font-size: 90px; }
	h1 em { font-size: 114px; }
	nav { margin-top: 105px; }
}

@media only screen and (max-width: 850px) {
	h1 {
		padding: 44px 0px;
		margin-top: -28px;
	}

	h1 * {
		height: 126px;
		line-height: 126px;
	}
	h1 span { font-size: 82px; }
	h1 em { font-size: 104px; }
	nav { margin-top: 79px; }
}

@media only screen and (max-width: 800px) {
	h1 {
		padding: 37px 0px;
		margin-top: -42px;
	}

	h1 * {
		height: 113px;
		height: 113px;
	}
	h1 span { font-size: 76px; }
	h1 em { font-size: 94px; }
	nav { margin-top: 51px; }
}

@media only screen and (max-width: 768px) {
	body > * { min-width: 640px; }

	.logo {
		right: 0px;
		width: 100%;
		height: 85px;
		margin-bottom: 200px;
	}

	h1 {
		padding: 30px 0px;
		margin-top: -120px;

		-webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3333);
		-moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3333);
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3333);
	}

	h1 * {
		height: 100px;
		line-height: 100px;
	}
	h1 span { font-size: 64px; }
	h1 em {   font-size: 80px; }

	nav {
		width: 100%;
		left: 0px;
		margin-top: -40px;
	}

	.dropdown { width: 100%; }
	.dropdown_menu { width: 100% !important; }

	nav a {
		width: 33.3333%;
		font-size: 36px;
	}

	nav.nologin a { width: 50%; }
}