@charset "utf-8";
/* MASTER-CSS für www.ebensperger-pflasterarbeiten.at */

/* FARBEN
#fff200 - Gelb (Logo)
#58595b - Grau (Logo)
#d8d8d8 - Grau (Foot BG)
#231f20 - Text
#68696b - Schrift H3
#949597 - Grau (Footlinie)
*/

/* +++++++++++++++++++++++++++++++++++++++ FONTS +++++++++++++++++++++++++++++++++++++++ */
@font-face {
  font-family: 'FontAwesome'; font-weight: normal; font-style: normal;
  src: url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
	  url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), 
	  url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), 
	  url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), 
	  url('https://www.ebensperger-pflasterarbeiten.at/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
}

/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans'; font-style: normal; font-weight: 400;
  src: url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Work Sans'), local('WorkSans-Regular'),
       url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.ebensperger-pflasterarbeiten.at/fonts/work-sans-v3-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}
	
/* +++++++++++++++++++++++++++++++++++++++ GENERALLY FORMATTING +++++++++++++++++++++++++++++++++++++++ */
html						{ width: 100%; height: 100%; -webkit-tap-highlight-color: #000; }
body						{ width: 100%; height: 100%; position: relative; scrolling: auto; font-family: 'Work Sans', sans-serif;
								color: #231f20; font-size: 74%; background: #fff; -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4				{ font-family: 'Work Sans', sans-serif; }

#pageinfo					{ position: fixed; z-index: 99999; top: 1px; left: 1px; color: #000; background: #fff; padding: 3px; display: none; }
.boxlink:hover				{ cursor: pointer; }
.clear						{ clear: both; height: 0px; overflow: hidden; }
.rounded					{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.shadow						{ -moz-box-shadow: 1px 1px 5px #a7a6a6; -webkit-box-shadow: 1px 1px 5px #a7a6a6; box-shadow: 1px 1px 5px #a7a6a6; }
.shadow_box					{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
								-mox-box-shadow: 1px 1px 5px #a7a6a6; -webkit-box-shadow: 1px 1px 5px #a7a6a6; box-shadow: 1px 1px 5px #a7a6a6; }
.border-box, div, section, aside, article, nav, main, header, footer, nav, a, li, ul, button, h1, h2, h3, h4, p, label, input, select, textarea, table, td, tr, span, picture
							{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behaviour: url(../boxsizing.htc); }
.transition_all				{ transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }

/* +++++++++++++++++++++++++++++++++++++++ COLORS +++++++++++++++++++++++++++++++++++++++ */
.green						{ color: #6eaa39; }

/* +++++++++++++++++++++++++++++++++++++++ LINKS +++++++++++++++++++++++++++++++++++++++ */
a:hover, a:active 			{ outline: none; } /* for screenreaders */
a:link, a:active, a:visited
							{ color: #231f20; text-decoration: underline; }
a:hover						{ color: #67605b; text-decoration: underline; }
a:before					{ text-decoration: none !important; }

a.noline			{ color: #231f20; text-decoration: none; }
a.noline:hover		{ color: #6eaa39; text-decoration: underline; }

a.next			{ position: relative; display: block; padding: 0 0 0 1.5em;
					transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
a.next:before		{ position: absolute; top: 1px; left: 0; content: "\f061"; font-family: 'FontAwesome'; color: #231f20; font-size: 16px; line-height: 1; font-weight: normal; }
a.next:hover		{ text-decoration: underline !important; }
a.next:hover:before	{ color: #67605b; }

a.back			{ position: relative; display: block; padding: 0.2em 0 0 1.4em; }
a.back:before		{ position: absolute; top: 0; left: 0; content: "\f100"; font-family: 'FontAwesome'; font-size: 24px; line-height: 1; font-weight: normal; color: #67605b; }

a.email				{ position: relative; display: block; padding: 0.1em 0 0 1.8em; }
a.email:before			{ position: absolute; top: 6px; left: 0.1em; content: "\f0e0"; font-family: 'FontAwesome'; color: #67605b; font-size: 18px; line-height: 1; }
a.email:hover			{ text-decoration: underline !important; }
a.email:hover:before	{ color: #67605b; }

.phone				{ position: relative; display: block; padding: 0.1em 0 0 1.8em; }
.phone:before			{ position: absolute; top: 4px; left: 0.1em; content: "\f098"; font-family: 'FontAwesome'; color: #67605b; font-size: 21px; line-height: 1; }
.phone:hover			{ text-decoration: underline !important; }
.phone:hover:before		{ color: #67605b; }

.url				{ position: relative; display: block; padding: 0.1em 0 0 1.8em; }
.url:before				{ position: absolute; top: 2px; left: 0.1em; content: "\f0ac"; font-family: 'FontAwesome'; color: #67605b; font-size: 21px; line-height: 1; }
.url:hover				{ text-decoration: underline !important; }
.url:hover:before		{ color: #67605b; }

a.download					{ position: relative; padding: 0.2em 0 0 1.6em; }
a.download:before 			{ position: absolute; top: 0; left: 0; content: "\f016"; font-family: 'FontAwesome'; font-size: 20px; color: #67605b; }
a.download span.fileinfo	{ font-size: 0.8em; white-space: nowrap; }
a.download.pdf:before		{ content: "\f1c1"; }
a.download.zip:before, a.download.rar:before		{ content: "\f1c6"; }
a.download.doc:before, a.download.docx:before		{ content: "\f1c2"; }
a.download.xls:before, a.download.xlsx:before		{ content: "\f1c3"; }
a.download.jpg:before, a.download.jpeg:before, a.download.tif:before, a.download.bmp:before		{ content: "\f1c5"; }

a.arrow_back	{ position: absolute; right: 1em; z-index: 50; display: block; color: #7f7f7f; font-size: 0.9em; padding: 0.3em 0.5em 0.2em 3em; border: 1px solid #d7d7d7; text-decoration: none; }
a.arrow_back:hover	{ background: rgba(255,243,13,0.5); }
a.arrow_back:before	{ position: absolute; top: 2px; left: 5px; content: "\f100"; font-family: 'FontAwesome'; color: #7f7f7f; font-size: 36px; font-weight: normal; }
a.arrow_back:hover:before	{ color: #67605b; }
a.arrow_back.top	{ top: 0; }
a.arrow_back.bottom	{ bottom: 10em; }

/* +++++++++++++++++++++++++++++++++++++++ PLUGINS +++++++++++++++++++++++++++++++++++++++ */
#lightbox span.lb-caption	{ color: #fff; }

/* +++++++++++++++++++++++++++++++++++++++ PAGE +++++++++++++++++++++++++++++++++++++++ */
#page			{ position: relative; width: 100%; height: auto; min-width: 300px; font-size: 1.1em; line-height: 1.4; }

	.container	{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1em 1em 1em; }

	/* +++++++++++++++++++++++++++++++++++++++ HEADER +++++++++++++++++++++++++++++++++++++++ */
	header		{ width: 100%; height: auto; }
		
		/* BREADCRUMB */
		#breadcrumb	{ display: none; }
				
		/* HEADSLIDER */
		#headslider	{ position: relative; float: left; width: 100%; }
		body.home #headslider	{ height: 300px; }
		body.site #headslider	{ height: 250px; }
		
			/* LOGO */
			#logo_wrapper	{ position: absolute; bottom: 1.2em; left: 0; z-index: 101; width: 100%; height: 60px; background: #fff30d; border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
						
				#logo_wrapper div.container { position: relative; }
					#logo { position: absolute; top: -1.5em; left: 1em; display: block; width: 230px; height: 90px; background-image: url(../images/logo_300x117.png); 
							background-repeat: no-repeat; background-size: 230px auto; }
					@media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
					#logo { background-image: url(../images/logo_600x235.png) !important; }
					}
					@media screen and (min-width: 450px) and (max-width: 649px) and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
					#logo { background-image: url(../images/logo_600x235.png) !important; }
					}
					@media screen and (min-width: 650px) and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
					#logo { background-image: url(../images/logo_1200x469.png) !important; }
					}
					
				/* HOTLINE */
				div.hotline	{ display: none; }
				
				/* NAVBAR */
				#navbar	{ float: right; color: #58595b; cursor: pointer; }
				#navbar.active	{ color: #77787b; }
				#navbar span	{ display: none; }
				#navbar:after	{ position: absolute; top: 10px; right: 10px; content: "\f0c9"; font-family: 'FontAwesome'; font-size: 36px; line-height: 1; font-weight: bold; }
				#navbar.active:after { top: 8px; right: 10px; content: "\f00d"; font-size: 36px; }
				
				
			/* SLIDER */
			#headslider_pics	{ position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; overflow: hidden; }
			#headslider_pics div	{ float: left; width: 100%; height: 100%; background-repeat: none; background-position: center; background-size: cover; }
			
			#headslider_pics .slick-prev, #headslider .slick-next { z-index: 23; height: 40px; width: 40px; top: 40%; visibility: hidden; }
			#headslider_pics button.slick-prev	{ left: 5px; }
			#headslider_pics button.slick-prev:before	{ content: "\f053"; font-family: 'FontAwesome'; font-size: 40px; }
			#headslider_pics button.slick-next	{ right: 5px; }
			#headslider_pics button.slick-next:before	{ content: "\f054"; font-family: 'FontAwesome'; font-size: 40px; }
		
			/* NAVIGATION - mobile Version */
			@media screen and (max-width: 980px) {
			#navigation	{ position: absolute; bottom: 2.8em; left: 0; z-index: 100; width: 100%; }
				#navigation nav#main { position: absolute; top: 0; left: 0; width: 100%; background: rgba(216,216,216,0.95); }
					#navigation nav#main ul { display: block; list-style: none; margin: 3em 0 0.2em 0; }
					#navigation nav#main ul li { display: block; }
					#navigation nav#main ul li a { color: #58595b; font-size: 2.1em; text-decoration: none; text-transform: uppercase; }
					#navigation nav#main > ul > li > a	{ position: relative; padding: 0 0 0 0.9em; }
					#navigation nav#main ul li a:before	{ position: absolute; top: 0.1em; left: 0; content: "\f054"; font-family: 'FontAwesome'; font-size: 0.8em; color: #58595b;
																	transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; }
					#navigation nav#main ul li.active > a, #navigation nav#main ul li.active > a:before	{ color: #2b2b2c; }
					#navigation nav#main > ul > li.sub.active > a:before	{ top: 0.1em; left: -0.1em; content: "\f078"; }
					
					#navigation nav#main ul li ul	{ display: none; margin: 0.4em 0 0 2.2em;
														transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; }
					#navigation nav#main ul li ul li a	{ position: relative; display: block; padding: 0 0 0.4em 0.7em; font-size: 1.6em; line-height: 1.1; }	
					#navigation nav#main ul li ul li a:before	{ top: 0.2em; font-size: 0.7em; }
					#navigation nav#main ul li.active ul { display: block; }
					
					#navigation nav#main ul#footnav { display: block; margin-top: 0.8em; padding-top: 0.8em; border-top: 1px solid #fff; }
					#navigation nav#main ul#footnav li a	{ font-size: 1.8em; }	
					#navigation nav#main ul#footnav li a:before	{ content: ""; }									
			}
				
				
	/* +++++++++++++++++++++++++++++++++++++++ MAIN +++++++++++++++++++++++++++++++++++++++ */
	main	{ position: relative; width: 100%; height: auto; min-height: 500px; }		

		#content	{ position: relative; margin: 2.4em auto 2em auto; }
		@media (min-width: 900px) {
		body.tp0 #content	{ padding-right: 12em; }
		body.tp0.home #content	{ padding-right: 8em; }
		}
		@media (min-width: 1100px) {
		body.tp0 #content	{ padding-right: 26em; }
		body.tp0.home #content	{ padding-right: 20em; }
		}
		
			#content > h1		{ color: #58595b; font-size: 2.1em; line-height: 1.1; margin-bottom: 0.2em; }
			#content > h2 		{ color: #595a5c; font-size: 1.5em; line-height: 1.1; font-weight: normal; }			
			#content.widthbacklink	h1, #content.widthbacklink	h2 { padding-right: 4em; }
			#content strong 		{ color: #67605b; }
		
			#content a.zoom:hover 	{ cursor: url(../images/zoom.png), pointer; }
			#content a.download		{ display: inline-block; margin: 1.5% 0 0 0; }
			
			/* CMS article */
			#content > article	{ position: relative; margin: 1.8em 0 0.3em 0; font-size: 1.2em; line-height: 1.3; }
			#content > article.first	{ margin: 1.4em 0 0.3em 0; }
			#content > article > h3	{ color: #595a5c; font-size: 1.3em; margin: 0 0 0.2em 0; }
			#content > article > p	{ max-width: 900px; }
			#content > article ul	{ list-style: none; margin: 0.8em 0 1em 0; }
			#content > article ul li	{ position: relative; padding: 0.1em 0 0 1.6em; margin-bottom: 0.4em; }
			#content > article ul li:before	{ position: absolute; top: 0.35em; left: 0.1em; width: 0.7em; height: 0.7em; content: ""; background: #fff200; border: 0.1em solid #6d6e70;
												 -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
			
			/* CMA article - Spalten */			
			#content > article div.column_left		{ float: left; clear: left; width: 100%; margin: 1% 0 1% 0; }
			#content > article div.column_left img.logo	{ width: 240px; }
			#content > article div.column_right 	{ float: left; width: 100%; margin: 1% 0 2% 0; }
			#content > article div.column_left > p, #content article div.column_right > p 	{ padding-top: 3px; }
			@media (min-width: 550px) {
			#content > article div.column_left		{ width: 50%; margin: 1% 0 0 0; }
			#content > article div.column_right 	{ width: 50%; margin: 1% 0 0 0; }
			}
			
			/* CMS article - Bildformatierungen */
			#content > article img.left, #content > article picture.left	{ float: left; margin: 0.2em 1em 0.5em 0; }
			#content > article img.right, #content > article picture.right	{ float: right; margin: 0.3em 0 0.5em 1em; }
			#content > article img.pic1, #content > article picture.pic1	{ float: left; }
			#content > article img.pic2, #content > article picture.pic2	{ float: right; }
			#content > article img.top, #content > article picture.top		{ margin: 0.5% 0 2% 0; }
			#content > article img.bottom, #content > article picture.bottom	{ margin-top: 2%; }
			#content > article picture img	{ float: left; width: 100%; height: auto; }
			#content > article picture div.copyright	{ float: right; text-align: right; padding: 0.2em 0.1em 0 0; font-size: 0.74em; font-style: italic; }
			div.lightbox span.lb-caption > span			{ font-size: 0.8em; font-weight: normal; font-style: italic; }
			
			#content > article img.left, #content > article picture.left, #content > article img.right, #content > article picture.right { min-width: 45% !important; }
			@media (min-width: 520px) {
			#content > article img.left, #content > article picture.left, #content > article img.right, #content > article picture.right { min-width: 5% !important; }
			}
			
			#content .signatur	{ position: relative; display: block; width: 280px; height: 115px; padding-top: 48px;
									background-image: url(../images/je.png); background-repeat: no-repeat; background-size: 250px 97px; background-position: 30px 5px; }
			@media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
			#content .signatur	{ background-image: url(../images/je@2.png); }
			}
			#content .signatur:before	{ position: absolute; bottom: 0; left: 55px; content: "Jorst Ebensperger"; }
			
			/* CMS article - Single Picture */
			#content > article.singlepic	{ display: block; overflow: hidden; margin-bottom: 0.1em; }
				#content > article.singlepic img	{ display: block; width: 100%; height: auto; }
				#content > article.singlepic div.copyright	{ float: right; text-align: right; padding: 0.2em 0.1em 0 0; font-size: 0.74em; font-style: italic; color: #595a5c; }
				
			/* CMS article - iFrame */
			#content > article.iframe	{ }
				#content > article.iframe div.iframe_wrapper { position: relative; height: 0; overflow: hidden; margin: 1.2em 0 1.0em 0; }
				#content > article.iframe div.iframe_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
				/* Datenschutz - Piwik-iFrame */
				@media (max-width: 550px) {
				body#sid18 div.iframe_wrapper { padding-bottom: 130% !important; }
				}
				@media (min-width: 551px) AND (max-width: 1100px) {
				body#sid18 div.iframe_wrapper { padding-bottom: 50% !important; }
				}
			
			/* CMS article - Zitat */
			#content > article.quote	{ display: block; margin: 2.5em 0 1.6em 0; }
			#content > article.quote.first	{ margin: 1.2em 0 1.2em 0; }
				#content > article.quote p	{ font-family: 'Nothing You Could Do', cursive; font-size: 1.8em; line-height: 1.2; color: #6e6a6b; text-align: center; }
				#content > article.quote div	{ width: 100%; padding-top: 0.1em; text-align: right; font-size: 0.75em; line-height: 1; color: #595a5c; }
		 
			/* CMS article - Topic-Slider */
			#content > article.topic		{ display: block; clear: left; width: 100%; margin: 1em 0 0.2em 0; }
			#content > article.topic.first	{ margin-top: 1.2em; }
				#content > article.topic h3		{ position: relative; width: 100%; background: rgba(235,235,235,0.5); padding: 0.4em 3em 0.3em 0.5em; margin: 0 !important; font-size: 1.4em; color: #595a5c;
													border-bottom: 2px solid #fff200; cursor: pointer; }
				#content > article.topic h3:after	{ content: "\f078"; position: absolute; top: -1px; right: 8px; z-index: 29; font-family: 'FontAwesome'; font-size: 34px; color: #595a5c; }
				#content > article.topic.active h3:after	{ content: "\f077"; color: #858686; }
				#content > article.topic:hover h3	{ background: rgba(235,235,235,0.9) !important; }
				#content > article.topic h3 > a	{ text-decoration: none !important; }
				#content > article.topic div.text	{ padding: 0.5em 0.7em; }
				#content > article.topic div.text img	{ float: right; width: 40%; margin: 0.2em 0 0.2em 1em; }
				#content > article.topic div.text a.next	{ display: block; font-size: 1.0em; margin: 0.2em 0 0 0; }
				#content > article.topic div.text a.next:before	{ left: 2px; }
				#content > article.topic div.text a.download	{  }
				@media (min-width: 600px) {
				#content > article.topic div.text img	{ width: 30%; }
				}
				
			/* CMS article - Teaser */
			#content > article.teaser	{ position: relative; clear: left; width: 100%; margin-bottom: 1.5em; }
				#content > article.teaser a.link { position: relative; display: block; color: #8f8c8c; text-decoration: none; overflow: hidden; }
				#content > article.teaser h3 { position: absolute; bottom: 0; left: 0; z-index: 29; display: block; width: 100%; padding: 0.4em 3em 0.3em 0.5em !important; margin-bottom: 0 !important;
												font-size: 1.4em; color: #595a5c; background: rgba(235,235,235,0.9); border-bottom: 2px solid #fff200; }
				#content > article.teaser.nopic h3 { position: relative; bottom: auto; left: auto; }
				#content > article.teaser:hover h3 { background: rgba(235,235,235,0.9); }
				#content > article.teaser img	{ float: left; width: 100%; height: auto; }
				#content > article.teaser div.text	{ float: left; width: 100%; padding: 0.4em 0 0.4em 0.5em; }
				#content > article.teaser a.next { margin: 5px 0 3px 0; }
				@media (min-width: 600px) {
				#content > article.teaser a.link { display: inline; }
				#content > article.teaser h3 { position: relative; bottom: auto; left: auto; background: rgba(235,235,235,0.5); padding: 0.3em 0.2em 0.3em 0.5em; }
				#content > article.teaser img	{ float: left; width: 30%; height: auto; }
				#content > article.teaser div.text	{ width: 70%; padding: 0.6em 0.6em 0.6em 0.7em; }
				#content > article.teaser.nopic div.text	{ width: 100%; padding: 0.6em 0.6em 0.6em 0.7em; }
				}				
		
			/* CMS article - Gallery */
			#content > article.gallery	{ display: block; clear: left; }
			#content > article.gallery h3	{  }
			#content > article.gallery div.gallery_thumbs { position: relative; float: left; width: 100%; height: auto; overflow: hidden; }
			#content > article.gallery div.gallery_thumbs.with_text { margin-top: 0.6em; }
			#content > article.gallery div.gallery_thumbs a	{ position: relative; float: left; width: 50%; margin: 0; }			
			#content > article.gallery div.gallery_thumbs a img	{ float: left; width: 100%; }
			#content > article.gallery div.gallery_thumbs a.zoom img:hover	{ opacity: 0.7; }
			@media (min-width: 375px) and (max-width: 440px) {
			#content > article.gallery div.gallery_thumbs a	{ width: 49.3%; margin: 0 1.3% 1% 0; }
			#content > article.gallery div.gallery_thumbs a:nth-child(2n+0) { margin-right: 0; }
			}
			@media (min-width: 441px) and (max-width: 900px) {
			#content > article.gallery div.gallery_thumbs a	{ width: 32.8%; margin: 0 0.8% 0.8% 0; }
			#content > article.gallery div.gallery_thumbs a:nth-child(3n+0) { margin-right: 0; }
			}
			@media (min-width: 901px) {
			#content > article.gallery div.gallery_thumbs a	{ width: 24.25%; margin: 0 1% 1% 0; }
			#content > article.gallery div.gallery_thumbs a:nth-child(4n+0) { margin-right: 0; }
			}		
			#content > article.gallery div.gallery_sliding { position: relative; width: 100%; height: auto; }
			#content > article.gallery div.gallery_sliding a	{ position: relative; float: left; width: 100%; margin: 0; }
			#content > article.gallery div.gallery_sliding a span { float: left; width: 100%; text-align: center; font-size: 0.8em; padding-top: 0.3em; text-decoration: none; }
			#content > article.gallery div.gallery_sliding ul.slick-dots	{ margin: 0.3em auto; }
			#content > article.gallery div.gallery_sliding ul.slick-dots li	{ padding: 0; margin: 0 0.1em; }
			#content > article.gallery div.gallery_sliding ul.slick-dots li:before	{ content: ""; background: none; border: none; }
			
			/* CMS Modul Gallery */
			#content > article	{ position: relative; margin: 1.8em 0 0.3em 0; font-size: 1.2em; }
			#content > article.first	{ margin: 1.2em 0 0.3em 0; }
			
			#content > article.module_gallery	{ float: left; width: 100%; height: auto; margin: 1.2em 0 0.6em 0; }
			#content > article.module_gallery.first	{ margin: 1.2em 0 0.6em 0; }
				#content > article.module_gallery > div	{ position: relative; z-index: 11; float: left; width: 100%; height: 250px; margin: 0 0 5% 0; overflow: hidden; cursor: pointer;
															background-repeat: no-repeat; background-size: cover; background-position: center; }
				
				#content > article.module_gallery > div > div { position: absolute; bottom: -4%; left: 0; width: 100%; font-size: 1em; padding: 0.6em 0.5em; background: rgba(255,255,255,0); opacity: 0; }
				#content > article.module_gallery > div:hover > div, #content > article.module_gallery > div.touch > div { bottom: 0; width: 100%; background: rgba(255,255,255,0.9); opacity: 1; }
				#content > article.module_gallery > div > div > h3 { line-height: 1.15; }
				#content > article.module_gallery > div > div > h3 > a { font-size: 1.1em; line-height: 1; color: #595a5c; text-decoration: none; }
				#content > article.module_gallery > div > div > p { font-size: 0.9em; line-height: 1.2; padding: 0.2em 0 0.1em 0; }
				@media (min-width: 450px) {
				#content > article.module_gallery > div	{ height: 270px; }
				}
				@media (min-width: 600px) and (max-width: 900px) {
				#content > article.module_gallery > div	{ width: 48.5%; height: 250px; margin: 0 3% 3% 0; }
				#content > article.module_gallery > div:nth-child(2n+0) { margin: 0 0 3% 0; }
				}
				@media (min-width: 901px) {
				#content > article.module_gallery > div	{ width: 32%; height: 260px; margin: 0 2% 2% 0; }
				#content > article.module_gallery > div:nth-child(3n+0) { margin: 0 0 2% 0; }
				}
			
		
	/* +++++++++++++++++++++++++++++++++++++++ FOOTER +++++++++++++++++++++++++++++++++++++++ */
	footer		{ position: relative; width: 100%; height: auto; font-size: 0.9em; padding: 1.4em 0; border-top: 1px solid #949597; background: #ebebeb; }
	
		footer section#adressdata	{ float: left; width: 100%; }
			footer section#adressdata article	{ position: relative; float: left; line-height: 1.5; }
			footer section#adressdata article:first-child	{ width: 100%; margin: 0 0 1em 0; }
			footer section#adressdata article h3	{ color: #58595b; }
			footer section#adressdata article a	{ font-size: 1.1em; text-decoration: none; }
			footer section#adressdata article a.phone:before	{ color: #858686; }
			footer section#adressdata article a.email:link	{ text-decoration: none; }
			footer section#adressdata article a.email:before	{ color: #858686; }
			footer section#adressdata article a.url		{ display: none; text-decoration: none; }
			footer section#adressdata article a.url:before		{ color: #858686; }
			
			footer section#adressdata article.werkstatt	{ width: 100%; padding-left: 5em; }
			footer section#adressdata article.werkstatt:before	{ position: absolute; top: 0.2em; left: 0; content: "\f085"; font-family: 'FontAwesome'; font-size: 50px; line-height: 1; color: #858686; }
			footer section#adressdata article span.street	{ display: block; }
		
		footer section#footnavi	{ float: left; width: 100%; }
		
			footer section#footnavi nav	{ float: right; width: auto; margin-top: 0.2em; }
				footer section#footnavi nav ul	{ list-style: none; }
				footer section#footnavi nav ul li	{ position: relative; float: left; }
				footer section#footnavi nav ul li:before	{ position: absolute; top: 0; left: 0; content: "|"; font-size: 18px; line-height: 1; color: #858686; }
				footer section#footnavi nav ul li:first-child:before	{ content: ""; }
				footer section#footnavi nav ul li a	{ float: left; padding: 0 0.8em 0.1em 1em; text-decoration: none; }
				footer section#footnavi nav ul li:first-child a	{ padding-left: 0; }
				footer section#footnavi nav ul li:last-child a	{ padding-right: 0; }
				footer section#footnavi nav ul li a:hover	{ text-decoration: underline; }
				footer section#footnavi nav ul li.active a	{ text-decoration: underline; }	
			
			footer a#feinkonzept_notice	{ float: left; width: 100%; margin-top: 2.2em; color: #696969; font-size: 0.9em; text-align: center; text-decoration: none; }
			footer a#feinkonzept_notice:hover	{ color: #231f20; text-decoration: underline; }
	
	
/* +++++++++++++++++++++++++++++++++++++++ Scroll to Top +++++++++++++++++++++++++++++++++++++++ */
#scroll_to_top			{ position: fixed; z-index: 100; bottom: 45px; right: 0; opacity: 0.7; width: 50px; height: 50px; background: rgba(255,255,255,0.6);
							border-top: 1px solid #595a5c; border-left: 1px solid #595a5c; border-bottom: 1px solid #595a5c;
							-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;
								-o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#scroll_to_top:before	{ font-family: 'FontAwesome'; content: "\f077"; display: block; height: 24px; width: 24px; font-size: 34px; color: #595a5c; margin: 4px 0 0 9px; }
#scroll_to_top:hover	{ opacity: 1; cursor: pointer; background: #fff200; }

/* +++++++++++++++++++++++++++++++++++++++ MATOMO OPT-OUT +++++++++++++++++++++++++++++++++++++++ */
#matomo	{ margin-bottom: 3em; }
	#matomo-opt-out	{ font-family: inherit !important; font-size: inherit !important; color: inherit !important; background-color: transparent !important; }
	#matomo-opt-out label { position: relative; display: inline-block; margin-top: 0.2em; padding: 0.2em 0 0 1.8em; }
	#matomo-opt-out label::before { position: absolute; top: 0; left: 0; content: "\f0c8" !important; font-family: 'Font Awesome 5 Free'; font-weight: 400; color: #58595b !important; font-size: 24px !important; line-height: 1 !important; }
		#matomo-opt-out input[type="checkbox"] { display: none !important; }
		#matomo-opt-out input[type="checkbox"]:checked + label::before { content: "\f14a" !important; color: #58595b !important; }

/* +++++++++++++++++++++++++++++++++++++++ COOKIE BANNER +++++++++++++++++++++++++++++++++++++++ */
#cookiebanner 	{ position: fixed; z-index: 300; bottom: -600px; left: 0; opacity: 0; background: rgba(247,247,247,0.9); width: 100%; font-size: 1.3em; line-height: 1.1; border-top: 1px solid #fff200; display: block; }
#cookiebanner:hover	{ background: rgba(247,247,247,1); }
#cookiebanner.hover	{ background: #f7f5c9; }
	#cookiebanner > div 	{ max-width: 1280px; margin: 0px auto; padding: 1em 1em 1.1em 1em; overflow: hidden; }
	#cookiebanner > div strong	{ display: block; margin-bottom: 0.2em; font-size: 1.1em; color: #58595b; }
	#cookiebanner > div p 	{ float: left; width: 100%; margin-bottom: 0.8em; }
	#cookiebanner > div form div { text-align: center; }
	#cookiebanner > div button { display: block; margin: 0px auto; padding: 0.6em 2.5em; background: #fff200; border: 1px solid #fff200; color: #58595b; font-weight: bold; font-size: 14px; text-decoration: none; text-transform: uppercase; cursor: pointer; }
	#cookiebanner > div button:hover { background: #fff; color: #58595b; }
	#cookiebanner > div form div a { display: inline-block; margin-top: 0.5em; text-decoration: none; }
@media (min-width: 660px) {	
	#cookiebanner > div p 	{ width: 70%; margin-bottom: 0; }
	#cookiebanner > div form div { float: right; padding: 0.1em 1em; }
	#cookiebanner > div button { padding: 0.6em 2em; }
}
@media (min-width: 850px) {	
	#cookiebanner > div p 	{ width: 75%; }
	#cookiebanner > div form div { margin-left: 0.5em; padding: 0.1em 1em; }
}
@media (min-width: 1200px) {	
	#cookiebanner > div p 	{ width: 80%; }
	#cookiebanner > div button { padding: 0.6em 2.6em; }
}
@media print {
	#cookiebanner	{ display: none; }
}


/* ################################################ MEDIA QUERY: >= 375 (iPhone 6/7) ################################################ */
@media (min-width: 375px) {
#page	{ }
	
	header	{ }
		#logo_wrapper	{ bottom: 1.1em; height: 78px; border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
				#logo { top: -1.7em; width: 280px; height: 109px; background-image: url(../images/logo_300x117.png); background-size: 280px auto; }
				#navbar:after	{ top: 18px; right: 12px; }
				#navbar.active:after { top: 18px; right: 10px; }
			
	footer { font-size: 1em; }
}

/* ################################################ MEDIA QUERY: >= 400 ################################################ */
@media (min-width: 400px) {
#page	{ }
	
	header	{ }
		#logo_wrapper	{ bottom: 1.5em; height: 80px; border-top: 5px solid #fff; border-bottom: 5px solid #fff; }
				#logo { top: -1.9em; width: 300px; height: 117px; background-image: url(../images/logo_300x117.png); background-size: 300px auto; }
				#navbar:after	{ top: 18px; right: 12px; }
				#navbar.active:after { top: 18px; right: 10px; }
}

/* ################################################ MEDIA QUERY: >= 500 ################################################ */
@media (min-width: 500px) {
#page	{ background: url(../images/logo_symbol.png) no-repeat; background-size: 60% auto; }
	body.home #page	{ background-position: right 500px; }
	body.site #page	{ background-position: right 380px; }
	
	header	{ }
	
		#headslider {}
		body.home #headslider	{ height: 400px; }
		body.site #headslider	{ height: 350px; }		
			#headslider_pics .slick-prev, #headslider .slick-next { visibility: visible; }
			
		#logo_wrapper	{  }		
				#navbar	{ padding-top: 2.1em; }
				#navbar span { display: block; position: relative; padding-right: 1.5em; font-size: 2em; line-height: 1.6; font-weight: bold; color: #58595b; }
				#navbar:after	{ top: 27px; right: 12px; }
				#navbar.active:after { top: 27px; right: 12px; }
	
	main	{}
		#content	{}
			#content > h1		{ font-size: 2.5em; }
			#content > h2 		{ font-size: 1.8em; }
			
			#content > article	{ font-size: 1.2em; }
			#content > article > h3	{ font-size: 1.5em; }
		
#scroll_to_top		{ bottom: 20px; }
}

/* ################################################ MEDIA QUERY: >= 550 ################################################ */
@media (min-width: 550px) {
#page	{ }
	
	footer { }
	footer.fixed		{ position: fixed; bottom: 0; left: 0; z-index: 30; }
		footer section#adressdata article:first-child	{ width: auto; margin: 0 10% 0 0; }
		footer section#adressdata article.werkstatt		{ width: auto; }
}

/* ################################################ MEDIA QUERY: >= 690 ################################################ */
@media (min-width: 690px) {
#page	{ }
	
	header	{ }
		#logo_wrapper	{ bottom: 2.8em; height: 120px; border-top: 8px solid #fff; border-bottom: 8px solid #fff; }
				#logo { top: -3.8em; width: 500px; height: 195px; background-image: url(../images/logo_500x195.png); background-size: 500px auto; }			
				#navbar	{ padding-top: 4.1em; }
				#navbar span { padding-right: 1.7em; font-size: 2.1em; }
				#navbar:after	{ top: 52px; font-size: 38px; }
				#navbar.active:after { top: 53px; right: 15px; }
		
		/* BREADCRUMB */
		#breadcrumb	{ display: block; width: 100%; height: 30px; background: #fff; }
			#breadcrumb nav	{ float: right; width: auto; padding-top: 0.3em; }
				#breadcrumb nav > span	{ float: left; padding: 0.2em 0 0 0; }
				#breadcrumb nav ul		{ float: left; list-style: none; }
				#breadcrumb a			{ text-decoration: none; }
				#breadcrumb a:hover		{ text-decoration: underline !important; }
				#breadcrumb nav ul li		{ display: inline; }
				#breadcrumb nav ul li a		{ position: relative; float: left; padding: 0.2em 0.5em 0 1.2em; }
				#breadcrumb nav ul li.active a	{ color: #3c3c3d; text-decoration: underline; }
				#breadcrumb nav ul li a:before	{ position: absolute; top: 2px; left: 2px; content: "\f105"; font-family: 'FontAwesome'; font-size: 18px; line-height: 1; color: #595a5c; }
				#breadcrumb nav ul li:first-child a	{ padding-left: 0.5em; }
				#breadcrumb nav ul li:first-child a:before { content: ""; }	
				#breadcrumb nav ul:after	{ float: left; content: "|"; font-size: 17px; line-height: 1; color: #595a5c; margin: 0.1em 0.9em 0 0.5em; }
				#breadcrumb nav a.print	{ position: relative; float: left; padding: 0.2em 0 0 1.7em; }
				#breadcrumb nav a.print:before { position: absolute; top: 0.1em; left: 0; content: "\f02f"; font-family: 'FontAwesome'; font-size: 18px; line-height: 1; color: #595a5c; }
}

/* ################################################ MEDIA QUERY: >= 980 (Change of Navigation) ################################################ */
@media screen and (min-width: 980px) {
#page	{ }
	body.home #page	{ background-position: right 650px; }
	body.site #page	{ background-position: right 550px; }
	
	header	{ }
		body.home #headslider	{ height: 600px; }
		body.site #headslider	{ height: 500px; }
	
		#logo_wrapper	{ top: 1.8em; height: 150px; }
					#logo { top: -4.2em; left: 1em; width: 600px; height: 235px; background-image: url(../images/logo_600x235.png); background-size: 600px auto; }
					
				/* HOTLINE */
				div.hotline	{ display: block; float: right; margin-top: 4.9em; padding-left: 4.6em; background: url(../images/phone.png) no-repeat; background-size: auto 50px; }
					div.hotline p	{ text-align: center; color: #58595b; }
					div.hotline p:nth-child(1)	{ font-size: 1.2em; line-height: 1; }
					div.hotline p:nth-child(2)	{ font-size: 2em; line-height: 1.5; font-weight: bold; }
					div.hotline p:nth-child(2) a:link	{ font-size: 1em; line-height: 1.5; font-weight: bold; color: #58595b; text-decoration: none; }
					
			#navbar	{ display: none; }
			
			#headslider_pics .slick-prev, #headslider .slick-next { top: 50%; }
		
		/* NAVIGATION - Desktop Version */
		#navigation	{ position: absolute; bottom: 1em; left: 0; z-index: 103; width: 100%; height: auto; background: rgba(255,255,255,0.8); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
			#navigation:after { position: absolute; top: 100%; left: 0; z-index: -1; width: 100%; height: 1px; content: ""; border-bottom: 1em solid #fff200; }
			
				#navigation ul	{ float: left; list-style: none; }
				#navigation ul li, #navigation ul li a, #navigation ul > li > ul { transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; 
													-moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }	
				#navigation > nav > ul > li	{ position: relative; float: left; margin-left: 0.6em; }
				#navigation > nav > ul > li:first-child	{ margin-left: 0; }
				#navigation ul li a	{ text-decoration: none; text-transform: uppercase; }
				#navigation > nav > ul > li > a	{ float: left; color: #58595b; font-size: 2em; line-height: 1; padding: 0.8em 0.5em 0.7em 0.5em; }
				#navigation > nav > ul > li:hover, #navigation > nav > ul > li.active	{ color: #3c3c3d; background: rgba(255,243,13,0.5); }			
				
				#navigation ul > li > ul	{ position: absolute; top: 100%; bottom: auto; left: 0; width: 0; height: auto; z-index: -1; background: rgba(255,255,255,0.9); opacity: 0; overflow: hidden; }
				body.home #navigation ul > li > ul	{ top: auto; bottom: 100%; }
				#navigation ul > li:hover > ul	{ display: block; z-index: inherit; width: auto; padding: 0.8em 0 0.6em 0; opacity: 1; }
				#navigation ul > li > ul > li	{ display: block; width: auto; }
				#navigation ul > li > ul > li a	{ position: relative; display: block; color: #58595b; font-size: 1.6em; line-height: 1; padding: 0.4em 0.7em 0.3em 0.7em; white-space: nowrap; }
				#navigation ul > li > ul > li:hover a, #navigation ul > li > ul > li.active a { padding-left: 1.5em; }
				#navigation ul > li > ul > li a:before { position: absolute; top: 0.6em; left: 1em; content: "\f054"; font-family: 'FontAwesome'; font-size: 16px; color: #a2a1a1; opacity: 0;
												transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; }
				#navigation ul > li > ul > li:hover a:before, #navigation ul > li > ul > li.active a:before { opacity: 1; }
				
			#navigation.scrollmode	{ position: fixed; top: 0; left: 0; z-index: 103; background: rgba(255,255,255,0.9); }
			#navigation.scrollmode:after { border-bottom: 0.2em solid #fff200; }				
				#navigation.scrollmode ul > li > ul	{ top: 100%; bottom: auto; left: 0; background: rgba(255,255,255,0.9); }
				
	main	{}
		#content	{}
			#content > h1		{ font-size: 2.6em; }
			#content > h2 		{ font-size: 1.9em; }
				
			
	footer	{ font-size: 1.1em; }
		footer section#adressdata	{ float: left; width: 65%; }
		footer section#footnavi		{ width: 35%; text-align: right; }
			footer a#feinkonzept_notice	{ text-align: right; }
			
#scroll_to_top		{ bottom: 130px; }
}

/* ################################################ MEDIA QUERY: >= 1025 ################################################ */
@media screen and (min-width: 1025px) {
#page	{ background-size: 50% auto; }
	body.home #page	{ background-position: right 700px; }
	body.site #page	{ background-position: right 500px; }
}

/* ################################################ MEDIA QUERY: >= 1240 ################################################ */
@media screen and (min-width: 1240px) {
#page	{ background-size: 60% auto; }	

	header	{ }
		#navigation	{}
				#navigation > nav > ul > li > a	{ font-size: 2.2em; padding: 1em 1em 0.9em 1em; }
				#navigation > nav > ul > li > a	{ font-size: 1.9em\9; padding: 1em 0.8em 0.9em 0.8em\9; } /*Hack IE9 */
				#navigation ul > li > ul > li a	{ padding: 0.4em 1.4em 0.3em 1.4em; }
				#navigation ul > li > ul > li:hover a, #navigation ul > li > ul > li.active a { padding-left: 2.3em; }
				#navigation ul > li > ul > li a:before { left: 1.9em; }		
}


/* +++++++++++++++++++++++++++++++++++++++ DRUCKVERSION +++++++++++++++++++++++++++++++++++++++ */
@media print {
	#pageinfo { display: none !important; }
	body	{ font-size: 62.5%; background: #fff; color: #000; }
	
	#breadcrumb, #headslider, #logo_wrapper, footer section#footnavi, #scroll_to_top, a.arrow_back, a#feinkonzept_notice	{ display: none !important; }
	
	#page	{ background: none; }
	.container	{ padding: 0 0 1em 0; }
	main	{}
		#content	{ padding-bottom: 2em !important; }
	footer	{ padding-left: 1em; }	
	footer.fixed		{ position: relative; bottom: auto; left: auto; }
			footer section#adressdata article span.phone:before { font-size: 16px; }
			footer section#adressdata article a.email:before { top: 3px; font-size: 14px; }
			footer section#adressdata article a.url		{ display: block; }
			footer section#adressdata article a.url:before	{ font-size: 16px; }
			footer section#adressdata article.werkstatt	{ padding-left: 5.5em; }
			footer section#adressdata article.werkstatt:before	{ font-size: 46px; }
}