@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|PT+Serif:400,400i');

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

/* Box model */

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

/* CSS reset */

* {margin:0; padding:0; list-style-type:none;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; margin:0;}

/* General Styles */

body {font:400 16px 'PT Serif', Georgia, serif; background:#000; color:#fff;}
a {color:#333; text-decoration:none;}
.clearfix:after {content:''; display:table; clear:both;} /* CSS Tricks */

/* Black top bar */

.top {position:fixed; width:100%; z-index:9999; background:#000; opacity:0.9; font:normal 11px/24px sans-serif; text-transform:uppercase; -moz-box-shadow:1px 0px 2px #000; -webkit-box-shadow:1px 0px 2px #000; box-shadow:1px 0px 2px #000;}
.top a {display:block; float:left; padding:0px 10px; letter-spacing:1px; color:#ddd;}
.top a:first-child {margin-left:15px;}
.top a.grey {color:#666;}
.top a:hover {color:#fff;}
.top span.right {float:right;}
.top span.right a {float:none; display:inline;}
.top span.right a.current {font-weight:700; color:#fff;}

/* Header with Madhouse name (h1) and tag line (h2) */

header {position:fixed; padding:0; margin:3em 0em 1.25em 1.75em; z-index:160;}
header h1.long, 
header h1.short {position:relative; width:100%; padding:0; margin:0; font:400 2.25em dineng, sans-serif; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
header h1.short {display:none;}
header h1.long span {display:inline-block;}
header h2 {width:240px; margin:.5em 0; font:italic 1.125em 'PT Serif', serif; color:#f8f8f8; text-shadow:1px 1px 1px rgba(0,0,0,0.6);}

/* Main navigation links, with hover effect */

nav {position:fixed; margin:12em 0 0 20px; z-index:1000; display:block;}
nav a,
nav a:active,
nav span.current {position:relative; display:block; float:left; margin:0 8px; color:rgba(255,255,255,.8);
		font:normal 1.5em dineng, sans-serif; letter-spacing:1px; text-shadow:1px 1px 1px rgba(0,0,0,0.3);
      }
nav a {overflow:hidden; height:1em; padding:0 4px 0 0; cursor:pointer;}
nav span.current {color:#fff; border-bottom:3px solid #fff; padding:0 0 5px 0; margin-right:12px;}
nav a:hover, nav a:focus {outline:none;}
nav a span {position:relative; display:inline-block; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; -o-transition:transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s;}
nav a span::before {position:absolute; top:100%; content:attr(data-hover); color:#d94f5c; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
nav a:hover span {-webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%);}

/* Media queries */

@media screen and (max-width: 760px) {
	header {padding:0; margin:2.5em 20px 10px 20px;}
	header h1.long, header h1.short {font:400 30px/30px dineng, sans-serif;}
	header h2 {display:none;}
	nav {right:.5em; margin:2.5em 0 0 0;}
	}
@media screen and (max-width: 460px) {
	header h1.long {display:none;}
	header h1.short {display:block;}
	}
@media screen and (max-width: 320px) {
	header {width:100%; margin:2.5em auto 0; padding:0; text-align:center;}
	header h1.long {display:block;} header h1.short {display:none;}
	nav {width:190px; margin:5em auto 0; left:0; right:0; display:block; text-align:center;} 
	nav a, nav a:active, nav a:focus, nav span.current {font:400 1em sans-serif;}
	nav span.current {border-bottom:2px solid #fff;}
	nav a span::before {font-weight:600;}
	}