/* ====================================================================
   Sauerland-Design
   Projekt: gutachten-reichel.de
   Dokument: stylesheets.css
   Autor: Pascal Vorsmann
   erstellt: 2017-04-06
   bearbeitet: 
===================================================================== */

/* Weitere CSS-Dateien */
@import url('reset.css');
@import url('icon.css');
@import url('grid.css');
@import url('baloon.css');
@import url('../js/fancybox/jquery.fancybox.css');
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,900,900i,700i');

#debug{ /*display:none;*/ position:fixed; top:10px; left:10px; border:2px solid red; padding:5px 10px; z-index:999999; }
.googlemap{ border:0; width:95%; height:745px; }

*{ font-family: 'Lato', sans-serif; }
body { background:#1d1d1b; }
	
h1{ display:inline-block; color:white; letter-spacing:2.5px; text-transform:uppercase; font-weight:900; font-size:30pt; padding:0 0 20px 0; }
h2{ display:inline-block; color:white; letter-spacing:1px; font-weight:400; font-style:italic; font-size:23pt; padding:0 0 30px 0; }
h2:after{ content: ""; padding: 60px 0 0 0; width: 25%; display:block; margin: 0 auto; border-bottom:1px solid white; }
h3{ display:inline-block; letter-spacing:1px; font-style:italic; font-size:18pt; padding:0 0 25px 0; }
h4{ letter-spacing:1px; font-style:italic; font-size:16pt; padding:0 0 5px 0; color:white; }
h5{ display:inline-block; color:white; letter-spacing:1px; font-weight:400; font-style:italic; font-size:23pt; padding:0 0 30px 0; }
h6{ display:inline-block; color:#646567; letter-spacing:2px; font-weight:400; font-style:italic; font-size:18pt; padding:0 0 30px 0; }
p{ letter-spacing:1px; font-size:11.7pt; padding:0 0 30px 0; line-height:16pt; font-weight:400; font-style:italic; }

.pageWidth{ width:1280px; position:relative; margin:0 auto; box-sizing: border-box; }
.p30{ display:inline-block; width:28%; box-sizing: border-box; vertical-align:top; }
.p50{ display:inline-block; width:48%; box-sizing: border-box; vertical-align:top; }
.green{ color:#00917f; }
a.green:hover{ text-decoration:underline; }

header{ top:expression(auto); height:255px; background:#1d1d1b; padding:35px 0 30px 0; box-sizing: border-box; }
	header .logo{ position:fixed; left:50%; margin:0 0 0 -260px; width:520px; height:137px; background:transparent url(../images/logo-reichel.jpg) center center no-repeat; background-size:cover; }
	header .hinweis{ position:absolute; right:60px; width:165px; height:164px; background:transparent url(../images/teaser-24-std.jpg) center center no-repeat; }
	header.fixed-navi { top:0px; position:fixed; border-bottom:1px solid #c5c5c5; z-index:1000; width:100%; }
		* html .fixed-navi { top:expression(documentElement.scrollTop); }
		header.fixed-navi .hinweis{ display:none; }
		header.fixed-navi .logo{ display:none; }
		header.fixed-navi{ padding:0 0 10px 0; height:90px; } 
		header.fixed-navi nav{ top:50px; } 
header nav{ position:absolute; top:180px; left:0px; width:98%; }
	header nav ul {width:100%; display:table}
	header nav li{ list-style: none; display:table-cell; padding:0 0 0 32px; list-style-type:none; }
	header nav li.first{ text-align:left; }
	header nav li.normal{ text-align:center; }
	header nav li.last{ text-align:right; }
		header nav li a{ display:inline-block; font-weight:400; font-style:normal; font-size:14.7pt; color:#b7b8b9; text-transform:uppercase; -webkit-transition: border 1000ms ease-out; -moz-transition: border 1000ms ease-out; -o-transition: border 1000ms ease-out; }
		header nav li a:after { content: ""; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; border-bottom:2px solid #b7b8b9; padding:2px 0 0 0; width:0%; display:block; margin:0 auto; }
		header nav li a:hover,
		header nav li a.active{ color:#0c9382; }
		header nav li a:hover:after,
		header nav li a.active:after{ border-bottom:2px solid #0c9382;width:100%;  }

.moodimage{ position:relative; width:100%; background:#1d1d1b; }
.moodimage .image{ position:relative; width:100%; z-index:1; }
	/*#moodimage .text{ position:absolute; z-index:2; top: 50%; left: 50%; transform: translate(-50%, -50%); }*/
	.moodimage img{ width:100%; height:auto; margin:0 auto;  }


#schadenmanager{ padding:55px 0 0 0; min-height:200px; background-image: linear-gradient(to top, #71b9ae 5%, #448b81 90%); }
	#schadenmanager .spacer{ padding:20px 0 115px 0; }
	#schadenmanager .p50 p{ color:white; padding:0 40px 30px 0; }
	#schadenmanager .p50.leftRow{ padding:0 80px 0 0; }
	#schadenmanager .p50.rightRow{ padding:0 0 0 80px; }

#leistungen{ padding:55px 0 0 0; min-height:200px; background:transparent  url(../images/hg-leistungen.jpg) center center no-repeat; background-size:cover; }
	#leistungen h1, #leistungen h2, #leistungen h5 { color:#646567; }
	#leistungen h2:after{ border-bottom:1px solid #646567; }
	#leistungen h2{ margin:0 0 50px 0;}
	#leistungen .spacer{ padding:20px 0 65px 0; }
	#leistungen .container *{ font-size:13pt; }
	#leistungen .container.pb{ padding-bottom:60px; }
	#leistungen .circle{ display:inline-block; cursor:pointer; width: 130px; height: 130px; text-align: center; border-radius: 65px; }
	#leistungen .circle.small{ width: 100px; height: 100px; border-radius: 50px; margin:20px 0 3px 0; }
	#leistungen .circle.ps1{ background:#0c9382 url(../images/piktogramm-1.svg) center center no-repeat; background-size: 500% auto; }
	#leistungen .circle.ps2{ background:#0c9382 url(../images/piktogramm-2.svg) center center no-repeat; background-size: 500% auto; }
	#leistungen .circle.ps3{ background:#0c9382 url(../images/piktogramm-3.svg) center center no-repeat; background-size: 500% auto; }
	#leistungen .circle.psmall1{ background:#0c9382 url(../images/piktogramm-small-1.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall2{ background:#0c9382 url(../images/piktogramm-small-2.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall3{ background:#0c9382 url(../images/piktogramm-small-3.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall4{ background:#0c9382 url(../images/piktogramm-small-4.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall5{ background:#0c9382 url(../images/piktogramm-small-5.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall6{ background:#0c9382 url(../images/piktogramm-small-6.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall7{ background:#0c9382 url(../images/piktogramm-small-7.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall8{ background:#0c9382 url(../images/piktogramm-small-8.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall9{ background:#0c9382 url(../images/piktogramm-small-9.svg) center center no-repeat; background-size: 700% auto; }
	#leistungen .circle.psmall10{ background:#0c9382 url(../images/piktogramm-small-10.svg) center center no-repeat; background-size: 700% auto; }

#wichtiges{ padding:55px 0 0 0; min-height:200px; background:white; }
#wichtiges .leftRow{ padding:0 50px 0 0; }
	#wichtiges .rightRow{ padding:0 0 0 80px; }
	#wichtiges h1, #wichtiges h2{ color:#646567; }
	#wichtiges h2:after{ border-bottom:1px solid #646567; }
	#wichtiges h2{ margin:0 0 50px 0;}
	#wichtiges .spacer{ padding:20px 0 65px 0; }
	#wichtiges .question{ margin:0 0 25px 0; }
	#wichtiges .more{ cursor:pointer; }
	#wichtiges .morecontent{ padding:10px 0 20px 0; }
		#wichtiges .morecontent p{ font-size:12px; }
	#wichtiges ul{ padding:20px 0 0 0; }
	#wichtiges ul li{ list-style-type:none; background:transparent url(../images/liste.jpg) left 5px no-repeat; padding:10px 0 0 55px; height:40px; }

	
#kontakt{ padding:55px 0 55px 0; min-height:200px; background:#0c9382 url(../images/portrait.png) right bottom no-repeat; }
#kontakt h1, #kontakt h2{ color:white; }
	#kontakt h2:after{ border-bottom:1px solid white; margin:0 0 0 0; }
	#kontakt h2{ margin:0 0 50px 0;}
	#kontakt div.contact{ color:white; letter-spacing:2.5px; font-weight:900; font-style:italic; padding:0 0 20px 0; font-size:20pt; text-transform:normal !important; }
	#kontakt *{ color:white; }

#footer{ padding:28px 0; }
	#footer div{ vertical-align:top; }
	#footer .logo{ width:33%; display:inline-block; }
		#footer .logo img{ width:80%; height:auto; }
	#footer .allgemein{ width:33%; display:inline-block; }
	#footer .siegel{ width:33%; display:inline-block; }
	#footer p,
	#footer a{ line-height:32px; letter-spacing:1px; color:white; text-transform:uppercase; -webkit-transition: color 500ms ease-out; -moz-transition: color 500ms ease-out; -o-transition: color 500ms ease-out; }
	#footer a:hover{ color:#00917f; } 
	#footer ul{ padding:0 0 0 20%; }
	#footer ul li{ list-style-type:none; }

/* mobile Navigation */
#mobilebtn{ position:fixed; right:10px; top:20px; z-index:5000; display:none; }
#mobilenav{ background:white; position:fixed; z-index:5000; padding:10px; margin-left:-300px }
#mobilenav .close:after { content: 'X'; color: #565656; font: 14px/100% arial, sans-serif; position: absolute; right: 5px; text-decoration: none; text-shadow: 0 1px 0 #fff; top: 5px; cursor:pointer; }
	#mobilenav ul li{ list-style-type:none; border-top:1px solid #565656; margin:0 0 15px 0; padding:10px 0 0 0; }
	#mobilenav ul li:first-child{ border-top:none; }
			#mobilenav ul li a{ font-size:16px; text-transform:uppercase; display:inline-block; padding:0 0 5px 0; }
			#mobilenav ul li ul li,
			#mobilenav ul li ul li:first-child{ border:none; margin:0 0 0 0; padding: 0 0 3px 0; }
			#mobilenav ul li ul li a{ font-size:14px; text-transform:none; padding:0 0 0 0; }
			#mobilenav ul li ul li a:hover,
			#mobilenav ul li ul li a.active{ font-style:italic; }
			
			
@media all and (max-width: 1280px) {
	.pageWidth{ width:100%; }

}

@media all and (max-width: 1200px) {
	#mobilebtn{ display:block; }
	header{ height:100px; }
	header .hinweis, header nav{ display:none; }
	header .logo,header.fixed-navi .logo{ display:block; position:fixed; left:20px; top:-20px; margin:0px; width:250px; height:60; background-size:contain; }
}

@media all and (max-width: 1000px) {
	#schadenmanager .p50.leftRow{ padding:0 10px 0 0; }
	#schadenmanager .p50.rightRow{ padding:0 0 0 10px; }
	/*#kontakt{ background-image:none; }*/
	#kontakt{ background-size: 30%; }
	.googlemap{ height:500px; }
	h1{ font-size:25pt; }
	h2{font-size:18px; }
	h3{ font-size:16pt; }
}

@media all and (max-width: 700px) {
	.p50, .p50, .half{ width:100%; padding:20px; box-sizing: border-box; }
	#schadenmanager .p50 p{ padding:0 0 30px 0; }
	#schadenmanager .p50.leftRow{ padding:20px; }
	#schadenmanager .p50.rightRow{ padding:20px; }
	#wichtiges .leftRow{ padding:20px; }
	#wichtiges .rightRow{ padding:20px;}
	.third{ width:100%; }
	#leistungen .circle{ margin-top:20px; }
}

@media all and (max-width: 700px) { 
	#footer .logo, #footer .allgemein{ width:100%; text-align:center; }
	#footer .logo{ margin:0 0 20px 0; }
	#footer .siegel{ display:none; }
	#footer ul{ padding:0 0 0 0; }
}

@media all and (max-width: 450px) {
	h1{ font-size:18pt; }
	h2{font-size:14pt; }
	h3{ font-size:12pt; }
	.googlemap{ height:350px; }
	#kontakt div.contact{ font-size:14pt }
}