/*
Author: Marvin Petker
Template Name: Zum Fegerer - Wirtshaus
Description: Custom Template für das Wirtshaus zum Fegerer. Nur Menü und Mulitlang support.
*/
@font-face{
	font-family: "Geosans Light";
	src: url('css/geosanslight-webfont.eot') format('embedded-opentype'), /* IE6-IE8 */ url('css/geosanslight-webfont.woff') format('woff'), /* Moderne Browser */ url('css/geosanslight-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('css/geosanslight-webfont.svg') format('svg'); /* Ältere iOS-Geräte */
}

/*** GENERAL STYLES ***/
@media screen{
	html, body{
		width: 100%;
		height: 100%;
		background-color: #171715;
		/*font-size: 16px;*/
		font-family: "Geosans Light";
		color: #d9d8d9;
		font-size: 16px;
	}
	
	body{
		overflow-x: hidden;
		position: absolute;
	}
	
	h1{
		font-size: 4em;
		margin-bottom: 1em;
		margin-top: 0;
	}
	
	h3{
		font-size: 3em;
	}
	
	h4{
		font-size: 2em;
		margin-top: 1em;
		margin-bottom: 0.2em;
	}
	
	p{
		font-size: 1.6em;
		line-height: 1.6em;
	}
	
	a, a:link, a:visited,
	a:hover, a:active{
		color: #a50646;
	}
	
	a{
		font-size: 1.5em;
	}
	
	a:link, a:visited{
		text-decoration: none;
	}
	
	a:hover, a:active{
		text-decoration: underline;
	}
	
	.clear{
		clear: both;
	}
	
	/*** END GENERAL STYLES ***/
	#call{
		display: none;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}
	
	.notice{
		padding: 10px 20px;
		background: #a50646;
		text-align: center;
	}
	
	/*** LANGUAGE SELCTOR */
	.oc-container{
		width: 158px;
		height: 40px;
		overflow: hidden;
		float: right;
		margin-top: 25px;
	}
	
	#lang-nav{
		width: 158px;
		min-height: 40px;
		position: relative;
		right: 0px;
		z-index: 3000;
		
	}
	
	#lang-nav a{
		display: inline-block;
		margin-right: 13px;
		opacity: 0.25;
		transition: opacity 0.3s ease;
	}
	
	#lang-nav a:hover{
		opacity: 1;
	}
	
	#lang-nav a:last-child{
		margin-right: 14px;
		margin-left: -2px;
	}
	
	#lang-nav a.selected{
		opacity: 1;
		text-decoration: underline;
	}
	
	/* JS LOADER */
	.sub-wrapper{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		display: none;
	}
	
	#loader-overlay{
		width: 100%;
		height: 100%;
		min-height: 100%;
		min-width: 100%;
		background-color: #1d1d1c;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 99999;
	}
	
	#loader-overlay img{
		display: block;
		width: 77px;
		height: 92px;
		margin: 0 auto;
		position: relative;
		top: 50%;
		margin-top: -46px;
	}
	
	/* FALLBACK */
	.noscript #loader-overlay{
		display: none;
	}
	
	.noscript .sub-wrapper{
		display: block;
	}
	
	
	#header{
		height: 100%;
		position: relative;
		-webkit-overflow-scrolling: none;
	}
	
	@-webkit-keyframes zoom{
		to{
			-webkit-transform: scale(1.05);
			-ms-transform: scale(1.05);
			transform: scale(1.05);
			margin: 0 -2.5%;
		}
	}
	@keyframes zoom{
		to{
			-webkit-transform: scale(1.05);
			-ms-transform: scale(1.05);
			transform: scale(1.05);
			
		}
	}
	
	#zoom-img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-right: -2.6%;
		max-width: 100%;
		border: 1px solid transparent;
		overflow: hidden;
		background: url(img/back.jpg) no-repeat center center;
		background-size: cover;
		
		-webkit-overflow-scrolling: none;
		
		-webkit-animation: zoom 5s linear 1.29s;
		animation: zoom 5s linear 1.29s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	
	
	/* RESPONSIVE IMG CENTERING */
	.dummy{
		padding-top: 73%;
	}
	
	.img-wrapper{
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
		text-align: center;
		font: 0/0 a;
	}
	
	.img-wrapper:before{
		content: " ";
		display: inline-block;
		vertical-align: middle;
		height: 73%;
	}
	
	.img-wrapper img{
		vertical-align: middle;
		display: inline-block;
		position: relative;
		z-index: 2000;
	}
	
	/*** STYLES FOR INFORMATION ***/
	#information, #history{
		background-color: #171715;
	}
	
	#information p:first-child{
		padding-top: 3em;
	}
	
	#information p:last-child{
		padding-bottom: 3em;
	}
	
	#information p:only-child{
		padding: 3em 0;
	}
	
	#information p{
		position: relative;
		z-index: 9999;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	#history{
		padding: 60px 0;
	}
	
	#history p{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		margin-bottom: 1em;
	}
	
	/*** END INFORMATION STYLES ***/
	/*** STYLES FOR IMAGE GALLERY ***/
	#gallery{
		height: 100%;
		max-height: 602px;
	}
	
	/* no-js fallback */
	.noscript #gallery{
		height: auto;
	}
	
	.noscript #gallery .swiper-slide{
		width: 25%;
		float: left;
	}
	
	.noscript #gallery .swiper-slide:after{
		content: " ";
		clear: both;
	}
	
	.noscript #gallery img{
		width: 100%;
		max-width: 900px;
		height: auto;
	}
	
	
	#menu-information{
		background: #2f3034;
		padding: 4em 0;
	}
	
	#menu-information h3{
		font-size: 2.5em;
		margin-top: 0.5em;
	}
	
	#openings{
		padding: 4em 0;
		background: #2f3034;
	}
	
	.colored-info{
		color: #089f2e;
		margin: 1.5em 0;
	}
	
	.opening-info{
		margin-bottom: 1.5em;
		color: #a4a4a4;
	}
	
	.time{
		color: #fff;
	}
	
	#location{
		display: inline-block;
	}
	
	#location #map{
		display: block;
		width: 100%;
		height: 500px;
	}
	
	#map-tooltip{
		width: 300px;
		color: #505050;
	}
	
	#map-tooltip p{
		padding: 0 5px;
		font-size: 1.4em;
	}
	
	/*** FOOTER STYLES ***/
	#footer{
		background: #171715;
		padding: 4em 0;
		text-align: left;
		color: #d9d8d9;
	}
	
	#footer p{
		padding: 0;
		margin-left: 0;
	}
	
	#footer p a{
		font-size: 1.3em;
	}
	
	#left-column{
		float: left;
		margin-left: 12.6%;
		text-align: left;
	}
	
	#left-column img{
		display: block;
		width: 200px;
		height: auto;
		margin-left: -5px;
	}
	
	#left-column a:link,
	#left-column a:visited{
		color: #d9d8d9;
		font-size: 1.8em;
	}
	
	#right-column{
		float: right;
		margin-right: 12.6%;
		text-align: left;
	}
	
	#right-column a:link,
	#right-column a:visited{
		color: #a50646;
	}
	
	.contact-label{
		display: inline-block;
		width: 100px;
	}
	
	#top-link-wrapper{
		width: 100px;
		height: 70px;
		position: fixed;
		bottom: 15px;
		right: 0px;
		z-index: 9999;
		overflow: hidden;
	}
	
	#top-link{
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 15px;
		right: -65px;
	}
	
	#footer{
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}
	
	#center-column img{
		margin: 0px;
	}
	
	#right-column,
	#left-column{
		float: none;
	}
	
	@media (max-width: 1200px){
		#left-column{
			margin-left: 20px;
		}
		
		#right-column{
			margin-right: 20px;
		}
	}
	
	@media (max-width: 900px){
		#footer{
			display: block !important;
			text-align: center;
		}
		
		#footer > div{
			margin: 0px auto 20px auto;
		}
		
		#right-column{
			padding-top: 0px;
		}
	}
	
	/*** AJAX LOADED CONTENT ***/
	.ajax-content{
		display: none;
		position: fixed;
		top: 6%;
		left: 50%;
		width: 100%;
		max-width: 900px;
		height: auto;
		max-height: 500px;
		overflow-y: scroll;
		min-height: 400px;
		margin: 0 auto;
		margin-left: -450px;
		padding: 4em;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9999;
		
	}
	
	.ajax-content h1{
		margin-bottom: 1em;
	}
	
	.ajax-content h3{
		margin-bottom: 0.7em;
	}
	
	#law-note{
		display: block;
		margin-top: 1em;
		font-size: 1.6em;
	}
	
	.close-link{
		display: block;
		width: 100%;
		max-width: 900px;
		font-size: 2em;
		text-align: right;
		color: #fff;
		-webkit-transition: all 0.5s;
		position: fixed;
	}
	
	.close-link:link, .close-link:visited{
		color: #fff;
	}
	
	.close-link:hover{
		text-decoration: none;
		-moz-text-shadow: 0 0 20px rgba(255, 255, 255, .7);
		-webkit-text-shadow: 0 0 20px rgba(255, 255, 255, .7);
		text-shadow: 0 0 20px rgba(255, 255, 255, .7);
		color: #a50646;
	}
	
	.maxwidth{
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.d-flex{
		display: flex;
		align-items: center;
	}
	
	@media(max-width: 1200px){
		.d-flex{
			display: block;
		}
		
		.d-flex > div{
			padding-bottom: 30px;
			margin-bottom: 0px;
		}
	}
	
	/*** NOSCRIPT STYLE ***/
	noscript{
		display: block;
		width: 100%;
		height: 500px;
		background-color: rgb(240, 40, 40);
		background-color: rgba(240, 40, 40, 0.9);
		text-align: center;
	}
	
	noscript p{
		color: #fff;
		font-size: 3em;
		line-height: 500px;
	}
}

/*** MOBILE OPTIMIZATION ***/
@media screen and (max-width: 950px){
	#top-link-wrapper{
		display: block;
	}
}

@media screen and (max-width: 900px){
	h1{
		font-size: 3.5em;
	}
	
	h3{
		font-size: 2.5em;
	}
	
	#call{
		display: block;
		width: 100%;
		height: 2em;
		text-align: center;
		color: #fff;
		line-height: 2em;
		background-color: #a50646;
		z-index: 9000;
		-webkit-transition: box-shadow .3s ease-in-out;
		-moz-transition: box-shadow .3s ease-in-out;
		transition: box-shadow .3s ease-in-out;
	}
	
	#call:link,
	#call:visited{
		text-decoration: none;
	}
	
	#call:hover,
	#call:active{
		-webkit-box-shadow: 0 0 0.5em #fff inset;
		-moz-box-shadow: 0 0 0.5em #fff inset;
		box-shadow: 0 0 0.5em #fff inset;
	}
	
	#footer > div{
		display: block;
		text-align: center;
		float: none;
		margin: 1em 0;
	}
	
	#copy{
		margin-right: 0;
	}
	
	#footer img{
		margin: 0 auto 20px auto;
	}
	
	.img-wrapper img{
		width: 80%;
		min-width: 80%;
	}
	
	noscript p{
		font-size: 2em;
		padding: 2em;
		line-height: 1.7em;
	}
	
	#menu-information h3{
		margin-bottom: 0.8em;
	}
	
	#menu-information h3:last-of-type{
		margin-top: 1em;
	}
	
	/*
.menu{
width: 100%;

}
.menu .menu-item{
display: block;
width: 100%;
text-align: center;
margin: 3px 0;
}*/
	#menu-information.sub-wrapper a{
		display: block;
		margin: 5px 0;
		text-align: center;
	}
	
	.ajax-content{
		text-align: center;
		display: block;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.close-link{
		position: relative
	}
	
}

@media screen and (max-width: 550px){
	h1{
		font-size: 2em;
	}
	
	h3{
		font-size: 1.6em;
	}
	
	body .sub-wrapper p{
		padding: inherit 0;
	}
	
	body .sub-wrapper h1{
		font-size: 2.3em;
	}
	
	body .sub-wrapper h2{
		font-size: 1.8em;
	}
	
	body .sub-wrapper p,
	body .sub-wrapper a{
		font-size: 1.2em;
	}
	
}