/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset
2.0 - Defaults
3.0 - Typography
4.0 - Links
	4.1 - Common
	4.2 - Drawer Menu
	4.3 - Sections
5.0 - Sections
6.0 - Menu
	6.1 - Drawer Menu
	6.2 - Site Menu 
7.0 - Swiper
8.0 - Aspect Ratio Grid System
9.0 - Articles
	10.1 - Welcome
	10.2 - Contact
	10.3 - Site-Info
10.0 - Google Maps
11.0 - Comics Strip
15.0 - Media Queries
	15.1 - Media Queries Landscape
	15.2 - Media Queries Portrait
	15.3 - Media Queries <= SM Portrait
	15.4 - Media Queries <= SM Landscape
	15.5 - Media Queries > SM
	15.6 - Media Queries > MD
	15.7 - Media Queries > LG
	
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 - Reset
--------------------------------------------------------------*/
/* reset already done in bootstrap */

/*--------------------------------------------------------------
2.0 - Defaults
--------------------------------------------------------------*/
body {
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0.1rem;
	display: block;
}
			
/*--------------------------------------------------------------
3.0 - Typography
--------------------------------------------------------------*/		
h1 {
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: 700;
	font-style: italic;
}
h3 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	color: #fff;
}
.navbar-top-brand {
	font-size: 14px; 
	font-size: 1.4rem; 
	vertical-align: middle;
	line-height: 40px;
}
section.section-colophon .site-info {
	font-weight: 300;
	font-size: 80%;
}

/*--------------------------------------------------------------
4.0 - Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
4.1 - Links / Common
--------------------------------------------------------------*/		
a, 
a:hover, a:active, 
a:visited, a:focus {
	font-weight: 600;
	color: #dadada;
	text-decoration: none
	border: none;
}
a:hover {
	color: #D71F26;
	text-decoration: none;
	border-bottom: 1px dotted #D71F26;
}
a.shortlink,
a.shortlink:hover, a.shortlink:active,
a.shortlink:focus, a.shortlink:visited { 
	font-size: 16px; 
	font-size: 1.6rem; 
	font-weight: 300; 
	line-height: 18px; 
	line-height: 1.8rem; 
	color: #fff; 
	background-color: #767675;
	padding: 5px 10px; 
	border-radius: 5px; 
	border-bottom: 0 none;
	margin: 5px 0 10px 0;
	display: inline-block;
}
a.shortlink:after {
	font-family: FontAwesome;
	content: "\f105";
	padding-left: 10px; 
	color: #ffffff;
}


/*--------------------------------------------------------------
4.2 - Links / Drawer Menu
--------------------------------------------------------------*/		
.drawer-default .drawer-brand a,
.drawer-default .drawer-brand a:hover, .drawer-default .drawer-brand a:active,
.drawer-default .drawer-brand a:visited, .drawer-default .drawer-brand a:focus {
	font-size: 16px; 1.6rem;
	font-weight: 400;
	color: #fff; 
	padding: 8px 15px 15px 20px;
}
.drawer-default .drawer-brand a:hover { color: #d81f27; text-decoration: none; border: none; }

/*--------------------------------------------------------------
4.3 - Links / Sections
--------------------------------------------------------------*/		
section.section-welcome a,
section.section-welcome a:hover, section.section-welcome a:active,
section.section-welcome a:visited, section.section-welcome a:focus {
	font-weight: 400;
	color: #fff; 
}
section.section-welcome a:hover { color: #d81f27; }
section.section-contact a,
section.section-contact a:hover, section.section-contact a:active,
section.section-contact a:visited, section.section-contact a:focus {
	color: #706f6f; 
}
section.section-contact a:hover { color: #d81f27; }
section.section-colophon a,
section.section-colophon a:hover, section.section-colophon a:active,
section.section-colophon a:visited, section.section-colophon a:focus { font-weight: 300; }
section.section-colophon a:hover { border: 0 none; }
a.link-nextsection,
a.link-nextsection:hover, a.link-nextsection:active,
a.link-nextsection:visited, a.link-nextsection:focus { border: 0 none; outline: none; }
			
/*--------------------------------------------------------------
5.0 - Sections
--------------------------------------------------------------*/		
section { 
	width: 100%; 
	margin: 0; 
	padding: 50px 0 50px 0; 
	border: 0; 
}
.section-vfixh, 	/* section with fixed height set. set all bootstrap child elements to 100% height. */
section.section-vfixh,
section.section-vfixh > div.container,
section.section-vfixh > div.container > div.row,
section.section-vfixh > div.container > div.row > div[class*='col-'],
section.section-vfixh > div.section-wrapper,
section.section-vfixh > div.section-wrapper > div.container,
section.section-vfixh > div.section-wrapper > div.container > div.row,
section.section-vfixh > div.section-wrapper > div.container > div.row > div[class*='col-'] { 
	height: 100%; }
.section-wrapper { position: relative; width: 100%; }
section.section-has-footer {
	padding-bottom: 70px; 
}
.section-footer { 
	position: absolute; 
	width: 100%; 
	height: 40px; 
	left: 0px; 
	bottom: -70px; 
	z-index: 100;
	text-align: center;
}
			
/* 
section:nth-child(3n+1) {
	background-color: #3c3c3b;
	color: #ffffff;
}
section:nth-child(3n+2) {
	background-color: #706f6f;
	color: #ffffff;
}
section:nth-child(3n+3) {
	background-color: #ffffff;
	color: #000000;
}
 */
			
section.section-welcome		{ height: 100vh; background-color: #3c3c3b; color: #fff; }
section.section-comics		{ height: 100vh; background-color: #706f6f; color: #fff; }
section.section-contact		{ background-color: #ededed; color: #000; }
section.section-map			{ background-color: #e3e6d7; color: #000; }
section.section-colophon	{ background-color: #3c3c3b; color: #ededed; padding: 15px 0 20px 0; text-align: center; }

/*--------------------------------------------------------------
6.0 - Menu
--------------------------------------------------------------*/		

/*--------------------------------------------------------------
6.1 - Drawer Menu
--------------------------------------------------------------*/		
.drawer-main {
	width: 250px;
}
.drawer-right.drawer-open .drawer-hamburger {
  -webkit-transform: translateX(-250px) translateY(0px);
	  -ms-transform: translateX(-250px) translateY(0px);
	   -o-transform: translateX(-250px) translateY(0px);
		  transform: translateX(-250px) translateY(0px); 
}
.drawer-hamburger {
	background-color: #000;
	opacity: 0.8;
	height: 40px;
	width: 50px;
	padding: 0 20px 0 10px;
	top: -5px;
}
.drawer-hamburger-icon::before, .drawer-hamburger-icon::after {
	content: " ";
	left: 0;
	position: absolute;
	top: -6px;
}
.drawer-hamburger-icon::after {
	top: 6px;
}
			
/*--------------------------------------------------------------
6.2 - Site Menu
--------------------------------------------------------------*/		
#menu-site {
	width: 100%
}
#menu-site.navbar-nav > li {
	float: none;
}
#menu-site a, 
#menu-site a:hover, #menu-site a:active, 
#menu-site a:visited, #menu-site a:focus {
	padding-left: 20px;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 20px;
	line-height: 2.0rem;
	font-weight: 600;
	color: #ededed;
	text-decoration: none
	border: none;
	border-bottom: 1px solid #dadada;
}
#menu-site a:hover {
	background-color: #ededed;
	color: #000;
}
#menu-site a.mPS2id-highlight, #menu-site a:active {
	background-color: #706f6f;
	color: #000;
}
nav#navbar-main {
	height: 40px;
	background-color: #000;
	opacity: 0.8;
}
			
/*--------------------------------------------------------------
7.0 - Swiper
--------------------------------------------------------------*/		
.swiper-container {
	width: 100%;
	height: 100%;	
	}
.swiper-container-cf {
	width: 100%;	
	overflow: hidden;
	background-color: #ffffff;
	padding: 0 10px 0 10px;
}
.swiper-slide-cf {
	width: 80vmin; height: 80vmin;
	padding: 10px;
}			
.swiper-slide-cf img {
	height: auto; width: 100%;
}
.slide-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------------
8.0 - Aspect Ratio Grid System (by element width)
--------------------------------------------------------------*/			
div[class*='aspectratio-'] {
	position: relative;
}
div[class*='aspectratio-']:before {
	content: "";
	display: block;
}
.aspectratio-11:before	{ padding-top: 100%; }		/* initial ratio of 1:1*/
.aspectratio-21:before	{ padding-top: 50%;	}		/* initial ratio of 2:1*/
.aspectratio-12:before	{ padding-top: 200%; }		/* initial ratio of 1:2*/
.aspectratio-43:before	{ padding-top: 75%;	}		/* initial ratio of 4:3*/
.aspectratio-169:before	{ padding-top: 56.29%; }	/* initial ratio of 16:9*/
.aspectratio-32:before	{ padding-top: 66.66%; }	/* initial ratio of 3:2*/
.aspectratio-23:before	{ padding-top: 150%; }		/* initial ratio of 2:3*/
.ar-content { position:  absolute; top: 0; left: 0; bottom: 0; right: 0; }
	/* demo settings */
	.aspectratio-11		{ width: 100px; }		/* desired width in px or % */
	.aspectratio-21		{ width: 200px;	}		/* desired width in px or % */
	.aspectratio-12		{ width: 100px; }		/* desired width in px or % */
	.aspectratio-43		{ width: 250px; }		/* desired width in px or % */
	.aspectratio-169	{ width: 250px; }		/* desired width in px or % */
	.aspectratio-32		{ width: 250px; }		/* desired width in px or % */
	.aspectratio-23		{ width: 200px; }		/* desired width in px or % */
	/* end demo settings */
	#section-5 div[class*='aspectratio-'] {
		margin:30px;
		float: left
	}
				
/*--------------------------------------------------------------
9.0 - Articles
--------------------------------------------------------------*/	

/*--------------------------------------------------------------
9.1 - Articles - Welcome
--------------------------------------------------------------*/			
article#article-welcome {
	height: 70vh;
	height:calc( 75vh - 60px); 
	display: table; 
	width: 100%;
}
.welcome-title { text-align: center; }
.welcome-title h1 {
	font-size: 25px;
	font-size: 2.5rem;
}
.welcome-address { text-align: center; padding: 10px 0 30px 0;}
.welcome-logo { text-align: center; }
span.address-divider { display: none; padding: 0 10px;}
span.address-line1,
span.address-line2 {
	display: block;
}
			
/*--------------------------------------------------------------
9.2 - Articles - Contact
--------------------------------------------------------------*/			
article#article-contact { margin-top: 30px; margin-bottom: 30px; }
article#article-oeffnungszeiten { margin-top: 30px; }
.kontakt-wrapper span,
.open-wrapper span {
	display: block;
}
span.kontakt-line3,
span.open-line3 {
	margin-top: 5px;
}

/*--------------------------------------------------------------
9.3 - Articles - Site Info
--------------------------------------------------------------*/			
span.site-info-copyright,
span.site-info-webdesign { display: block; margin-top: 5px; }
span.site-info-divider { display: none; padding: 0 10px; }
			
/*--------------------------------------------------------------
10.0 - Google Maps
--------------------------------------------------------------*/			
div.gm-style div.gm-style-cc div a,
div.gm-style div.gm-style-cc div a:hover, div.gm-style div.gm-style-cc div a:active,
div.gm-style div.gm-style-cc div a:focus, div.gm-style div.gm-style-cc div a:visited,
div.gmnoprint.gm-style-cc div a,
div.gmnoprint.gm-style-cc div a:hover, div.gmnoprint.gm-style-cc div a:active,
div.gmnoprint.gm-style-cc div a:focus, div.gmnoprint.gm-style-cc div a:visited { 
	color: #575756!important; 
	text-decoration: none!important;
	border: none!important;
	font-weight: 400!important;
}

/*--------------------------------------------------------------
11.0 - Comics Strip
--------------------------------------------------------------*/			
.swiper-slide {
	background-color: #fff;
}
.swiper-button-prev, .swiper-button-next {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-top: -30px;
	background-repeat: no-repeat;
	background-position: center center; 
	background-size: 40px 40px;
	background: rgba(255, 255, 255); /* Fallback */
	background-color: rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.4);
}			
.swiper-button-prev {
	background-image: url("/img/arrow-prev.png");
}
.swiper-button-next {
	background-image: url("/img/arrow-next.png");
}
.comics-strip-page {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
div.comics-strip-gallery figure img {
	width: 30%;
	height: auto;
	float: left;
}
			
		
/*--------------------------------------------------------------
15.0 - Media Queries
--------------------------------------------------------------*/			

/*--------------------------------------------------------------
15.1 - Media Queries Landscape (common)
--------------------------------------------------------------*/			
@media only screen 
and (orientation : landscape) { 
	div.comics-strip-gallery figure img {
		width: 33%;
		float: left;
		border: 0; padding: 0; margin: 0;
	}
	.swiper-slide-cf {
		width: 80vmin; height: 80vmin;
		padding: 10px;
	}			
}

/*--------------------------------------------------------------
15.2 - Media Queries Portrait (common)
--------------------------------------------------------------*/			
@media only screen 
and (orientation : portrait) { 
	div.comics-strip-gallery figure img {
		width: 50%;
		height: auto;
		float: left;
	}
	.swiper-slide-cf {
		width: 60vmin; height: 60vmin;
		padding: 10px;
	}			
}
			
/*--------------------------------------------------------------
15.3 - Media Queries  <= SM Portrait
--------------------------------------------------------------*/			
/* Small devices (smartphones, up to 568px) | = iPhone portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
	section.section-comics	{ height: 100vmin; background-color: #fff; color: #000; }
}

/*--------------------------------------------------------------
15.4 - Media Queries <= SM Landscape
--------------------------------------------------------------*/			
/* Small devices (smartphones, up to 568px) | = iPhone landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
	span.address-line1,
	span.address-line2 { display: inline-block; }
	span.address-divider { display: inline; }
	span.site-info-copyright { display: inline-block; }
	span.site-info-divider { display: inline; }
	span.site-info-webdesign { display: inline-block; }
	section.section-comics	{ height: 100vh; background-color: #fff; color: #000; }
}

/*--------------------------------------------------------------
15.5 - Media Queries > SM
--------------------------------------------------------------*/			
/* Small devices (tablets, 768px and up) | > sm */
@media (min-width: 768px) {
	.welcome-title h1 { font-size: 35px; font-size: 3.5rem; }
	span.address-line1,
	span.address-line2 { display: inline-block; }
	span.address-divider { display: inline; }
	span.site-info-copyright { display: inline-block; }
	span.site-info-divider { display: inline; }
	span.site-info-webdesign { display: inline-block; }
	span.site-info-divider { display: inline; }
}

/*--------------------------------------------------------------
15.6 - Media Queries > MD
--------------------------------------------------------------*/			
/* Medium devices (desktops, 992px and up) | > md */
@media (min-width: 992px) {
	.welcome-title h1 { font-size: 40px; font-size: 4rem; }
}
			
/*--------------------------------------------------------------
15.7 - Media Queries > LG
--------------------------------------------------------------*/			
/* Large devices (large desktops, 1200px and up) | > lg */
@media (min-width: 1200px) {
}