@charset "UTF-8";

/* CSS Document LAYOUT		Website Schernus Malermeister

Start: 							17.01.2018
Aktualisiert:		

FARB-SCHEMA	
		
	#000000		=		schwarz	
	#F6F6F6		=		Weiß mit 5 % schwarz	= Schriftfarbe
	#999999		=		Hellgrau
	#66CC00		=		Grün								*/

/* -------------------------------------------------------------------- *
 *                           Styles der BASISVERSION                    *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"     *
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/             *
 * << apply a natural box layout model to all elements >>               *
 * -------------------------------------------------------------------- */
 
html {
/*	font-size: 100%;
	 padding: 0 5% 10px;  WOFÜR IST DAS ??? */
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

*	{
	margin: 0em;
	border: 0em;
	padding: 0em;
}


/* -------------------------------------------------------------------- * 
 *                     START COOKIE - HINWEIS                           *
 * -------------------------------------------------------------------- */

#mbmcookie {
	position: fixed;
	top: 0;
	left: 85%;
	right: 0;
	background: #f6f6f6;
	padding: 1.0em;
	z-index: 1500;
}

#mbmcookie a.close {
	cursor: pointer;
	background: #f6f6f6;
	padding: 0.5em 2.0em;
	margin-left: 0.5em;
	font-weight: lighter;
	font-size: 1.6em;
	color: #666;
	float: right;
}
	
#mbmcookie a.close:hover {
	background-color: #aaa;
	border-bottom: none;
}

#mbmcookie p.cookiemessage {
	font-size: 1.2em;
	text-align: left;
	color: #666;
	display: block;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------------- * 
 *                     START SEITENBESCHREIBUNG                         *
 * -------------------------------------------------------------------- */

#page-wrapper {
	width: 100%;
	margin-top: 2.0em;
	margin-bottom: 2.0em;
}

header {padding-bottom: 0.6em;}

#branding {margin: 2.0em auto 1.4em auto;}

#sub-branding	{margin: 2.0em 0 1.0em 0;}	

main {
	width: 1200px;
	height: auto;
	overflow: hidden;
	margin: 0px auto 0px auto;
}

#gallery {
	position: relative; 
	border: none;
}

#gallery figure {
	position: absolute;
	top: 0em;
	left: 0em;
	z-index: 2;
	-webkit-animation: wechseln 15s infinite;
	animation: wechseln 15s infinite;
}

#gallery figcaption {
	position: absolute;
	left: 1em;
	bottom: 0.5em;
	z-index: 2;
} 

@keyframes wechseln {
	0% {opacity: 1;}
	25% {opacity: 1;}
	40% {opacity: 0;}
	92% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes wechseln {
	0% {opacity: 1;}
	25% {opacity: 1;}
	40% {opacity: 0;}
	92% {opacity: 0;}
	100% {opacity: 1;}
}

#gallery figure:nth-of-type(2) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

#gallery figure:nth-of-type(1) {
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
}

#mainContent	{
	height: auto;
	margin-top: 24.0em;
	z-index: 10;
}

section#intro {
	padding: 3.0em 0px 3.0em 0px;
	margin-bottom: 2.0em;
}

section.info {
	padding: 3.0em 0px 3.0em 0px;
	margin-bottom: 2.0em;
}

section.info-chield {
	padding: 3.0em 0px 1.0em 0px;
	margin-bottom: 1.0em;
}
section.info-lastchield {
	padding: 3.0em 0px 3.0em 0px;
	margin-bottom: 3.0em;
}

figure.column {
	padding: 2.0em 2.0em 2.0em 2.0em;
}



/* -------------------------------------------------------------------- * 
 *                     START FOOTER                                     *
 * -------------------------------------------------------------------- */


footer	{width: 100%;}

div.column-footer {
	width: 100%;
	margin: 2.0em auto 2.0em auto;
}

div.column-footernav {
	width: 100%;
	padding-top: 1.0em;
}

section.footer {
	width: 100%;
	margin: 1.0em auto 2.0em auto;
}

div.address-qrcode	{padding-top: 2.0em;}


/* -------------------------------------------------------------------- * 
 *                     START MEDIA QUERIES				                *
 *   			  	START  min-width: (750 px) 46.875em 			    *
 * -------------------------------------------------------------------- */

@media only screen and (min-width: 46.875em)	{	/* 750px */
	
	#sub-branding	{
		margin-left: 3.0em;
		margin-right: 3.0em;
	}
	
	h4 {padding-left: 0px !important;}
	
	h4.footer {padding-left: 0px !important;}
	
	article	{overflow: hidden;}
	
	footer	{overflow: hidden;}

	div.column-footer { 		/* ab hier wird der Footer 3spaltig */
		width: 33.333333% !important;
		padding: 2.0em 0em 2.0em 0em !important;
	}
	
	div.address-footer	{padding-left: 15px !important;}
	
	h2.footer {padding-left: 15px;}
	
	p.footer-icon	{margin-top: 1.7em !important;}
	
	p.footer-address	{padding-left: 35px !important;}
		
	div.address-qrcode	{/*padding-left: 2.0em;*/}
		
	div.column-footernav {
		width: 33.3333333% !important;
		border: none;
		padding: 6.0em 0em 2.0em 70px;
	} 

	#footer-navigation ul {width: 15.0em;}

	#footer-navigation  ul li, #footer-navigation ul li.last-chield {
		border-bottom: 0.1em solid #66CC00;
		padding: 1.0em 1.5em 1.0em 0em;
		display: block !important;
		text-align: left !important;
	} 

	#footer-navigation ul li a	{
		padding-left: 1.5em;
		padding-bottom: 0em;
		border-bottom: none;
		border-left: 0.2em solid #66CC00;
	}
	
	section.footer {
		padding-top: 1.0em;
		padding-left: 2.0em !important;
		border-top: 0.4em solid #66CC00;
	}

}

/* ---------------------------------------------------------------------- * 
 *   			  	START  min-width: (1024 px) 64em 			          *
 * ---------------------------------------------------------------------- */

@media only screen and (min-width: 64em)	{	/* 1024px */

	#page-wrapper {margin: 5.0em auto 5.0em auto;}

	section.footer {padding-left: 0.0em !important;}	
	
	div.address-footer {padding-left: 2.0em !important;}	
		
	h2.footer {padding-left: 1.0em;}
	
	h2.sub {padding-left: 2.0em;}

	h4 {padding-left: 2.0em !important;}
	
	h4.footer {padding-left: 2.0em !important;}
	
	p.branding	{font-size: 2.0em;}
	
	p.footer	{
		text-align: center;
		/*padding-right: 10px !important;
		margin-top: 1.5em !important;*/
		vertical-align: bottom;
	}

	p.small	{padding-left: 2.0em !important}

	img.qr-code	{
		/*margin-left: 35%;
		margin-right: 40%;
		margin-top: 1.5em;
		margin-bottom: 1.5em;*/
		text-align: center !important;
	}

	#footer-navigation ul {	width: 25em;}

}

/* -------------------------------------------------------------------- * 
 *     	START  min-width: (320 px) 20.0em 	                            *
 * -------------------------------------------------------------------- */

@media only screen and (min-width: 20.0em) 	{	/* 320px */
		
	main	{width: 100%;}
	
	#mainContent	{margin-top: 15em !important;}
	
		
	section#intro	{
		padding-left: 2.5em;
		padding-right: 2.5em;
	}
	
	section.info, section.info-chield, section.info-lastchield	{
		padding-left: 2.5em;
		padding-right: 2.5em;
	}
	
	section.info	{margin-top: 1.0em;}
	
	h1.first-chield	{
		margin-top: 1.0em;
		line-height: 1.2em;
	}
	
	#mbmcookie {left: 55%;}
	
	#mbmcookie a.close {
		padding: 0.2em 0.5em 0.2em 0.5em;
		margin-left: 0.2em;
	}
}
		
	@media only screen and (min-width: 20.0em) and (max-width: 26.2em)  { 	/* 320px bis 420px */
	
		img.column	{width: 70%;}
	
		p.intro-quote	{font-size: 2.0em;}
		
		p.info, p.info-list	{font-size: 1.5em;}
		
		img.footer-iconhome	{display: none;} /* footer-icon home wird ausgeblendet */
	}
		
	@media only screen and (min-width: 26.25em)  { 	/* 420px */

		#sub-branding	{overflow: hidden;}
	
		.sub-branding-right	{	/* ab hier springt das Sub-Branding in eine Zeile */
			width: 50%;
			float: right;
			text-align: right;
			padding-right: 2.0em;
		}
	
		.sub-branding-left	{
			width: 50%;
			float: left;
			text-align: left;
			padding-left: 2.0em;
		}
		
		figure.column { /* ab hier springen die Hauptbilder in eine Zeile */
			width: 33.333333%;
			float: left;
		}
		
		h3.site-menu	{font-size: 1.0em; line-height: 1.2em;}
		
		a.site-menu	{font-size: 1.0em; line-height: 1.2em;}
		
		
		
		nav#navigation	{overflow: hidden;}
	
		#navigation ul li a	{line-height: 2.0em;}
		
		#mainContent	{margin-top: 13em !important;}
	
		p.footer-icon	{
			margin-top: 0.8em;
			text-align: center;
		}

		p.footer-address	{text-align: center;	}
	
		#footer-navigation ul li {padding-right: 1.0em;}
		
		#footer-navigation ul li a	{line-height: 2.4em;}
		
		img.gallery	{
			width: 1200px;
			height: 160px;
		}
	}	
	
	
	@media only screen and (min-width: 30.0em) {	/* 480px */

		
		h3.site-menu	{font-size: 1.1em; line-height: 1.2em;}
		
		a.site-menu	{font-size: 1.1em; line-height: 1.2em;}
		
		
		div.column-footer {	/* ab hier wird der Footer 2-spaltig */
			width: 50%;
			padding-left: 2.0em;
			padding-right: 1.4em;
			float: left;
			text-align: left;
		}
	
		div.address-qrcode	{
			border-top: none;
			padding-top: 1.0em;
			text-align: center;
		}	
	
		div.column-footernav {
			width: 100%;
			padding-top: 1.0em;
			float: left;
		} 
	
		section.footer {
			float: left;
			text-align: left;
			padding-left: 2.0em;
			margin: 1.0em auto 2.0em auto;
		}	
		
		p.footer-icon	{text-align: left;}
			
		p.footer-address	{text-align: left;}
			
		p.footer	{font-size: 0.9em;}
		
		img.footer-iconhome	{display: none;}
	
	
	
	@media only screen and (min-width: 32.5em) {	/* 520px */
	
		div.column-footer {	
			padding-left: 1.3em;
			padding-right: 1.3em;
		}
		
		section.footer {
			padding-left: 1.3em;
			padding-right: 1.3em;
		}	
		
		img.footer-iconhome	{display: inline;}
	
		p.footer-address	{padding-left: 30px;}
	
	}

	@media only screen and (min-width: 38.75em) {	/* 620px */
	
		#mbmcookie {left: 75%;}
		
		#mbmcookie a.close {
			padding: 0.2em 0.5em 0.2em 0.5em;
			margin-left: 0.2em;
		}
	
		#mainContent	{margin-top: 20.5em !important;}
		
		
		h3.site-menu	{font-size: 1.2em; line-height: 1.2em;}
		
		a.site-menu	{font-size: 1.2em; line-height: 1.2em;}
		
		div.column-footer {padding-left: 3.0em;}
		
		section.footer {padding-left: 3.0em;}
		
		p.footer	{
			font-size: 1.3em;
			padding-top: 0.6em;}
		
		img.gallery	{
			width: 100%;
			height: auto;
		}	
	} 
	}

	
	
	@media only screen and (min-width: 48.75em)	{	/* 780px */

		#mbmcookie {left: 80%;}
		
		#mbmcookie a.close {
			padding: 0.2em 0.5em 0.2em 0.5em;
			margin-left: 0.2em;
		}
	
		#mainContent	{margin-top: 26em !important;}
		
			
	 		@media only screen and (min-width: 64em)	{	/* 1024px */
	
				#mbmcookie {left: 82%; right: 4%;}
		
				#mbmcookie a.close {
					padding: 0.2em 0.5em 0.2em 0.5em;
					margin-left: 0.2em;
				}
				
				#mainContent	{margin-top: 28.0em !important;}
				
				
				h3.site-menu	{font-size: 1.3em; line-height: 1.2em;}
				
				a.site-menu	{font-size: 1.3em; line-height: 1.2em;}
		
		
					@media only screen and (min-width: 78em)	{	/* 1248px */
	
						#mbmcookie {left: 80%; right: 10%;}
		
						#mbmcookie a.close {
							padding: 0.2em 0.5em 0.2em 0.5em;
							margin-left: 0.2em;
						}
						
						body	{width: 100%;}
						
						#page-wrapper {max-width: 1200px !important;}
						
						#sub-branding	{
							margin-left: 2.0em;
							margin-right: 2.0em;
						}
	
						.sub-branding-right	{padding-right: 0.0em;}
					
						.sub-branding-left	{padding-left: 0.0em;		}
					
						#mainContent	{margin-top: 33.0em !important;}
											
						div.column-footernav	{
							padding-left: 13.0em;
							padding-right: 2.0em;
						}
							
					}
			}
	}