@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0; }

html,body {
	margin:0;
	padding:0; }

table {
	border-collapse:collapse;
	border-spacing:0; }
	
fieldset,img { 
	border:0; }

body {
	background: #fff;
	color: #000;
	font-family: 'Lato', Arial, sans-serif; }

html, 
body, 
.container, 
.content-wrap {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

body {
	overflow-x: hidden; }

.container {
	background: #fff; }

.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch; }

.content {
	position: relative;
	background: #fff; }

.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
	transition: opacity 0.4s, transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1); }


.metanav {
	position: absolute;
	height: 100%;
	top: 90%; }


/* Menu Button */
.menu-button {
	position: fixed;
	z-index: 900;
	margin: 1em;
	padding: 0;
	width: 2.5em;
	height: 2.25em;
	border: none;
	text-indent: 2.5em;
	font-size: 1.5em;
	color: transparent;
	background: transparent; }

.menu-button::before {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	background: linear-gradient(#940715 20%, transparent 20%, transparent 40%, #940715 40%, #940715 60%, transparent 60%, transparent 80%, #940715 80%);
	content: ''; }

.menu-button:hover { opacity: 0.6;}

.close-button {
	width: 2em;
	height: 2em;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 1em;
	font-size: 0.75em;
	border: none;
	background: transparent;
	color: transparent;}

.close-button::before,
.close-button::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #fff; }

.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg); }

.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg); }

.menu-wrap {
	position: absolute;
	z-index: 1000;
	width: 300px;
	height: 100%;
	background: #940715;
	padding: 2.5em 1.5em 0;
	font-size: 1.15em;
	-webkit-transform: translate3d(-320px,0,0);
	transform: translate3d(-320px,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1); }

.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1); }

.show-menu .icon-list,
.show-menu .icon-list a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1); }

.show-menu .content::before {
	opacity: 1;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); }



/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 1 , iPhone 2-4S 320 x 480 px,  Anpassungen Design 320 x 480 px */ 
/* 	-------------------------------------------------------------------------------------------------- */

@media 	screen and (device-width: 320px) and (device-height: 480px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 320px) and (height: 480px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 320px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }
	
@media 	screen and (device-width: 320px) and (device-height: 480px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 480px) and (height: 320px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 480px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }

/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 2 , iPhone 5 320 x 568 px,  Anpassungen Design 320 x 568 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 320px) and (device-height: 568px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 320px) and (height: 568px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 320px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }	

@media 	screen and (device-width: 320px) and (device-height: 568px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 568px) and (height: 320px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 568px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }

/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 3 , iPhone 6 375 x 667 px,  Anpassungen Design 375 x 667 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 375px) and (device-height: 667px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 375px) and (height: 667px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 375px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }	
		
@media 	screen and (device-width: 375px) and (device-height: 667px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 667px) and (height: 375px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 667px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }
    		
/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 4 , iPhone 6Plus 414 x 736 px,  Anpassungen Design 414 x 736 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 414px) and (device-height: 736px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 414px) and (height: 736px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 414px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }	
					
@media 	screen and (device-width: 414px) and (device-height: 736px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 736px) and (height: 414px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 736px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }
    		
/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 5 , z. B. Samsung Galaxy S3 320x640,  Anpassungen Design 320 x 640 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 320px) and (device-height: 640px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 320px) and (height: 640px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 320px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }
		
@media 	screen and (device-width: 320px) and (device-height: 640px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 640px) and (height: 320px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 640px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }

/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 6 , Samsung Galaxy S5, Sony xperia Z3 360x640,  Anpassungen Design 360 x 640 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 360px) and (height: 640px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 360px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }
		
@media 	screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio:3) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 640px) and (height: 360px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 640px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }

/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 7 , Samsung Galaxy S2, ASUS WIN-PHONE 320 x 533 px,  Anpassungen Design 320 x 533 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 320px) and (device-height: 533px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 320px) and (height: 533px) { 
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 320px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }
			
@media 	screen and (device-width: 320px) and (device-height: 533px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 533px) and (height: 320px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 533px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }	
    		
/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 8 , Blackberry 8300 320 x 240 px,  Anpassungen Design 320 x 533 px */ 
/* 	-------------------------------------------------------------------------------------------------- */
	
@media 	screen and (device-width: 320px) and (device-height: 240px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 320px) and (height: 240px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 320px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 160px; -webkit-transform: translate3d(-160px,0,0); transform: translate3d(-160px,0,0); }
    		.menu img 									{ 	width: 90px; height: auto; }
    		.metanav 									{ 	display: none; } }

			
@media 	screen and (device-width: 320px) and (device-height: 240px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 240px) and (height: 320px) { 	
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 240px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }		


/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Fucking-Android-Bug */ 
/* 	-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1080px) and (-webkit-device-pixel-ratio:3) and (orientation : portrait) {
			html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 360px; height: 100%; }
			.topmetanav 								{ 	display: none; }
    		.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; -webkit-transform: translate3d(-220px,0,0); transform: translate3d(-220px,0,0); }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; } }
		
@media only screen and (max-width: 1920px) and (-webkit-device-pixel-ratio:3) and (orientation : landscape) {	
						html, body, .container, .content-wrap 		{ 	overflow-x: hidden; width: 640px; height: 100%; }
			.topmetanav 								{ 	display: none; }
   			.menu-button 								{ 	margin: 0.5em; }
    		.menu-wrap 									{ 	width: 220px; }
    		.menu img 									{ 	width: 140px; height: auto; }
    		.metanav 									{ 	display: none; }
    		.menu-wrap 									{ 	padding: 1.5em 1.5em 0; } }