/* Off Canvas Menu CSS Document */
* {margin:0; padding:0;}
html, body {height:100%;}
@font-face {
	font-family: AddSpeedy;
	src: url(../fonts/AddSpeedy.ttf);
}

@font-face {
	font-family: aase;
	src:url(../fonts/AaseFont.otf);
}

@font-face {
	font-family: Raleway;
	src:url(../fonts/raleway-bold-webfont.ttf);
}

@font-face {
	font-family: addjazz;
	src:url(../fonts/AddJazz.ttf);
}

@font-face {
	font-family: Origin;
	src: url(../fonts/Origin-Regular.ttf);
}

.header {
	width: 100%;
	height: 3em;
	padding: 1.25em;
	background: #008080;
}
.container {
	width: 100%;
	height: 100%;
	padding-top: 1.25em;
	background: #008080;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

a.menu_sprite {
	float:right;
	margin:10px 1.5em 1em auto;
	display:block;
	width:60px;	/*50px;*/
	height:60px; /*55px;*/
	outline: none;
	background-image: url(../img/menu-burger_sprite.png);
	background-position: 0px 120px;	/*0px 120.5px*/
}

a.menu_sprite:hover {
	background-position: 0px 54px;	/*1px 54.5px*/ 
}

.text {
	color: #FFC551;
	text-align: center;
	padding-top: 1.25em;
}

.text h1 {font: 4em addjazz;}

.menu-toggle {
	display: block;
	color: #FBB220;
	font: 1.5em Origin;
	margin-top: 1.25em;
	text-decoration: none;
}

.menu-toggle:hover {color: #FFE; font-size: 1.53em;}
.clear {clear:both; line-height:1px;}

/* Navbar
============================*/
.navbar {
	position: fixed;
	height: 100%;
	width: 60%;
	top: 0;
	left: 0;
	background: #33A0A0;
	overflow: hidden;
	-webkit-transform: translate(-100%,0);
	-moz-transform: translate(-100%,0);
	-ms-transform: translate(-100%,0);
	-o-transform: translate(-100%,0);
	transform: translate(-100%,0);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.navbar h2 {
	color: #FFE;
	padding: 1.25em 0;
	text-align: center;
	font-family: aase, AddSpeedy;
}

nav a {
	color: #FFF;
	display: block;
	padding: 1.25em 5em; 
	text-decoration: none;
	border-bottom: 1px solid #FFE;
	font: 1.25em Arial, Helvetica, sans-serif;
}

nav a:visited {color: #FFE;} /*#C93*/
nav a:hover {background-color: #139696; color: #6FF;}
nav a:active {color: #FF0;}
nav a:last-child {border-bottom: none;}

/* =============================== MEDIA QUERIES =============================== */

@media screen and (min-width: 680px) and (max-width: 1400px) {
aside {display: none;}
a.menu_sprite {display: none;}
}