@media all {
	/* dev 
	html {background: url(../images/folgeseite.png) 50% -488px;}
	body {opacity: 0.6}
	.col1 {background-color: #55ffff55}
	.col2 {background-color: #ff55ff55}
	*/
	
	body{margin:0;font-family:'Roboto', sans-serif;font-weight: 300; font-size:22px; color:#999999;background-color: white;}
	
	h1 {font-weight: 600;font-size: 1.63em;line-height: 1.3em;color:black}
	h2 {font-weight: 600;font-size: 2.2em;line-height: 1.3em;}
	h3 {font-weight: 600;font-size: 1em}
	h4 {font-weight: 600;font-size: 0.95em}
	p {line-height: 1.25em;}
	a {color:#999999;text-decoration: none;}
	a.underline {text-decoration: underline; }
	a:focus {text-decoration: underline;}
    ul {}
    ol { list-style-type: none;padding:0;margin-left: 1.6em;}
    ol li {counter-increment: item;font-weight: 400;text-indent: -1.6em;}
    ol li:before { content: counter(item, decimal-leading-zero) ". "; color: #999999; font-weight: 300;}

	form {font-size: 1em;width: 100%}
	fieldset {border:none;margin:0 0 20px;padding:0}
	input {
		font-family: 'Roboto';
		font-size:1.0em;
		padding: 1em 1em 1em;
		background-color:rgba(255, 255, 255, 1);
		color:#26A259;
		border:1px solid #aaa;
		width:100%;
		outline:none;
		margin-top: 0.3em;
        box-sizing: border-box;
		font-weight: 300;
		border-radius: 0px;
	}
	textarea {
		font-family: 'Roboto';
		font-size:1.0em;
		padding: 1em;
		background-color:rgba(255, 255, 255, 1);
		color:#26A259;
		border:1px solid #aaa;
		width:100%;
		height:6em;
        min-width: 100%;
        max-width: 100%;
        margin-top: 0.3em;
        box-sizing: border-box;
		margin-bottom: -3px;
		font-weight: 300;
		border-radius: 0px;
	}
	input[type=submit] {
		color: white;
		cursor:pointer;
		background-color: #26A259;
		border-color: #26A259;
		text-align:center;
		width:100%;
		float: right;
		font-weight: 400;
	}
	header input[type=submit] {width:auto;float: right;}

	label.error {color:white;background: red;font-size: 90%;font-weight: 700; text-transform: uppercase;display: inline-block;position: relative;width: 100%;padding: 0 0.57em;transform: scaleY(0.7);transform-origin: top; box-sizing: border-box;}
	p.error {color:red;}
	p.success {color:lightgreen;}
	input:focus {outline:none;border-color: #aaa;}
	textarea:focus {outline:none;border-color: #aaa;}
    ::-webkit-input-placeholder { /* WebKit browsers */
        color:#26A259;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color:    #26A259;
       opacity:  1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:    #26A259;
       opacity:  1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
       color:    #26A259;
    }

    .one-col {margin-bottom: 40px;position: relative;}
    .one-col > .column {width:100%;display: inline-block;vertical-align: text-top;box-sizing: border-box;}
    .one-col .col1 {padding:0em;margin: 0px}

	.two-cols {margin-bottom: 40px;position: relative;display:flex;flex-direction: row;justify-content: space-between;}
    .header-right .two-cols {flex-direction: row-reverse}
    .two-cols > .column {width:calc(50% - 20px);display: inline-block;vertical-align: text-top;box-sizing: border-box;align-self: stretch;}
    .two-cols .col1 {padding:0px;}
    .colored-header .two-cols .col1 {padding:0 30px;}
     header.colored-header .two-cols .col1 {padding:20px 30px;}
    .two-cols .col2 {padding-left:0;}
    .two-cols.w40-60 .col1 {width:calc(45% - 20px)}
    .two-cols.w40-60 .col2 {width:calc(55% - 20px)}

    .three-cols {margin-bottom: 20px;position: relative;display:flex;flex-direction: row;justify-content: space-between;}
    .three-cols > .column {width:calc(33% - 20px);display: inline-block;vertical-align: text-top;box-sizing: border-box;}
    .three-cols .col1 {padding-right:0;margin: 0px}
    .three-cols .col2 {padding-left:0;margin-left:0px;}
	
	section {position: relative;opacity: 1;overflow: hidden;}
	section.scrollDummy {height:100vh}
	.fullheight {height:100vh;}
	.container {position: relative;width:100%;max-width: 1000px; padding:40px 1em 40px;box-sizing: border-box;margin:0 auto}
	.fullheight .container {height:100vh;padding:0 ;}
	.container.swiper-slide {max-width: 100%;margin-top:8.3em; max-height:774px;min-height:550px;height:calc(100vh - 8.3em)}
    header.pinned .container.swiper-slide {margin-top:6em;}
	#navbar .container {height:auto;padding: 0 1em}
	.fullheight .overlay {position: absolute;top:0;width:100%;padding:6vh 4vw;box-sizing: border-box;z-index: 1}
	.fullheight .underlay {position: absolute;top:0;width:100%;height:100vh;padding:6vh 4vw;box-sizing: border-box;z-index: -1}
	.background {position: absolute;width: 100%;height:100%;top:0px;left:0;overflow: hidden;}
	.background img, .background video {position: relative; min-height: 100%;min-width: 100%;top:50%;left:50%;transform: translate(-50%, -50%);}
	.content {position: relative; margin: 0 auto;}
	.content img {display:inline-block !important;max-width:88vw}
	.content .logo {margin-bottom: 4em; animation-delay: 0.5s}
	.content .logo svg{width:30%;min-width: 200px}
	.content .text {animation-delay: 1s;}
    /*
	.text :first-child, .caption :first-child, .column :first-child {margin-top: 0;}
	.text :last-child, .caption :last-child, .column :last-child {margin-bottom: 0;}
    */
	.fullheight .caption, .fullheight .text {position: absolute;}
	.fullheight .iframe360 {position: absolute;height:90vh;}
	.fullheight .iframe360 iframe {height:90vh;width:90vh;position: relative;z-index: 5000;}
	.fullheight .viewer360 {position: absolute;height:90vh;}
	.fullheight .viewer360 .viewer {height:90vh;width:90vh;top:44vh;position: absolute;z-index: 5000;transform: translate(0, -50%);}
	.fullheight .video {position: absolute;height:90vh;}
	.fullheight .video video {height:90vh}
	.fullheight .video.fit-in {position: absolute;left:50%;transform: translate(-50%, -50%);}
	.fullheight .video.fit-in video {width:100%;height: auto}
	.fullheight .background img, .background video {top:50vh;}
	
	.top-left, .left {left:0;top:0;text-align: left;}
	.middle-left {left:0;top:44vh;text-align: left;transform: translateY(-50%);}
	.bottom-left {left:0;top:88vh;text-align: left;transform: translateY(-100%);}
	.top-center, .center {left:0;top:0;right:0;text-align: center;}
	.middle-center {left:0;top:44vh;right:0;text-align: center;transform: translateY(-50%);}
	.bottom-center {left:0;top:88vh;right:0;text-align: center;transform: translateY(-100%);}
	.top-right, .right {right:0;top:0;text-align: right;}
	.middle-right {right:0;top:44vh;text-align: right;transform: translateY(-50%);}
	.bottom-right {right:0;top:88vh;text-align: right;transform: translateY(-100%);}
	.caption h1 {margin-bottom: -0.5em;}
	.caption h2 {margin-bottom: -0.5em;}
	
	.text-shadow {text-shadow: 0 0 1px black}
	.bluring {-webkit-filter: blur(0px);filter: blur(0px);}
	.hidden {opacity:0}
	.visible {opacity:1}
	.big {font-size: 1.25em}
	.small {font-size: 0.85em}
    .bold {font-weight: 600}
    .author {text-align: right;font-size: 0.7em;display:block;}
	.inverse {background-color:#26A259;color:white;}
	.inverse a {color:white;}
	.grey {background-color:#dadada;}
	.table-header {display: inline-block;font-weight: 400;width:120px}
	.table-content {display: inline-block;vertical-align: top;width:300px;margin-bottom: 1em}
    .data span {display:inline-block;width: 4em}
    .bg-color-1 {background-color: #22ABDA;color:white}
    .bg-color-2 {background-color: #B0C952;color:white}
    .bg-color-3 {background-color: #8860B4;color:white}
    .bg-color-1 h1 {background-color: #22ABDA;color:white}
    .bg-color-2 h1 {background-color: #B0C952;color:white}
    .bg-color-3 h1 {background-color: #8860B4;color:white}
	
	#navbar {position: fixed;height:auto;width:100%;background-color: white; z-index: 99000;transition: all 0.3s ease-out 0s;overflow: hidden}
	#navbar .logo {position: relative;;transition: all 0.3s ease-out 0s;width:20em}
	#navbar .logo img {width:auto;transition: all 0.3s ease-out 0s;margin:1em 0 0}
	#navbar .nav {position: relative;transition: all 0.3s ease-out 0s;display: inline-block;margin:1em 0}
	#navbar .com {position: relative;transition: all 0.3s ease-out 0s;display: inline-block;;float: right;margin: 1em 0;}
	#navbar .nav ul, #navbar .com ul {list-style-type: none;margin:0;padding:0;font-size: 0.82em;}
    #navbar .nav li {display: inline-block;padding:0.5em 1.3em; margin: 0 0.2em;}
    #navbar .nav li:first-child {margin-left: 0;}
    #navbar .nav li:last-child {margin-right: 0;}
    #navbar .com li.phone {position: relative;margin-right:1.7em}
	#navbar .com li.phone a {color:#26A259;}
	#navbar .com li.phone a:before {content:url(../images/telefon-header.png);margin-right:2em;display: inline-block;width: 1em;vertical-align:middle;top: -5px;position: absolute}
    #navbar .com li.phone a span {margin-left: 3.0em;position: relative;top:0.3em}
	#navbar .com li.phone .subtitle {position: absolute; top:-0.7em;left:2.4em;font-size: 0.7em;white-space: nowrap}
    #navbar .com li.close {position: relative;margin-right: 2em}
	#navbar .com li.close a {color:#26A259;}
	#navbar .com li.close a:before {content:url(../images/close.svg);display: inline-block;width: 1.2em;vertical-align:middle;top: 0px;position: absolute;background-color:#26A259;padding:0.6em 0.5em 0.2em}
    #navbar .nav li.active {background-color: #26A259;}
    #navbar .nav li.active a {color: white;}

	body.pinned #navbar {height:auto;box-shadow: 0px 2px 5px rgba(0,0,0,0.2);}
	body.pinned #navbar .logo {display:none}
	body.pinned #navbar .logo img {}
	body.pinned #navbar .nav {margin:0}
	body.pinned #navbar .com {margin: 0.5em 0em 0 2em;}
	body.pinned #navbar .com li.phone a:before {vertical-align:middle;transform:scale(0.7);transform-origin: 0% 20%}
    body.pinned #navbar .com li.phone a span {margin-left: 2.5em;top:0em}
	body.pinned #navbar .com li.phone .subtitle {display:none}
	body.pinned #navbar .com li.close a:before {vertical-align:middle;transform:scale(1);transform-origin: 0% 20%;top:-0.6em}

	
	header {min-height: 8.3em}
	header .content {max-width: 1000px;padding: 0 1em;box-sizing: border-box}
	header .content .text {margin:10vh 0em 2em 0px;position: relative;color:white;}
    header .col1 {background-color: #26A259;color:white}
    header .headline {font-weight: 600;font-size: 1.63em;line-height: 1.3em;}
    header .author {font-weight: 600;margin-top:2em;font-size: 0.82em;}
	
    .swiper-container {}
	.swiper-pagination-bullet {width: 20px;height: 20px; border:#26A259 1px solid;border-radius: 0%;background: white;opacity: 1;}
	.swiper-pagination-bullet-active {background: #26A259;}
    
    .col1 h2 {word-spacing: 50px}
    .col1 h2.klein { word-spacing: normal; font-size: 1.8em; }
    h1.kleiner { font-weight: 400;}
	
		
    #leistungen .icon {height:90px;width:108px;background-image: url("../images/01-i-leistungen-badran.png");display:inline-block}
    #leistungen h1 {margin-top:0}
    
    #fuer-unternehmer {}
     
    #fuer-unternehmer .icon {height:90px;width:108px;background-image: url("../images/02-i-unternehmer-badran.png");display:inline-block;margin:40px 0 0 40px}
    #fuer-unternehmer .col1 {background-color: #22ABDA;color:white}
    #fuer-unternehmer ol li {color: #22ABDA}
	
    #fuer-freiberufler .icon {height:90px;width:108px;background-image: url("../images/03-i-freiberufler-badran.png");display:inline-block;margin:40px 0 0 40px}
    #fuer-freiberufler .col1 {background-color: #B0C952;color:white}
    #fuer-freiberufler ol li {color: #B0C952}
	
    #fuer-privatpersonen.karriere .icon {height:90px;width:108px;background-image: url("../images/01-i-leistungen-badran.png");display:inline-block;margin:40px 0 0 40px}
    #fuer-privatpersonen .col1 {background-color: #8860B4;color:white}
    #fuer-privatpersonen ol li {color: #8860B4}
    
    #zitate {}
    #zitate .container {padding:0 1em}
    #zitate .zitat p {font-size: 2.2em;line-height: 1.35em;color:#333333;margin:0}
    
    #footer-image {}
    #footer-image .container{padding:0;max-width: inherit}
    #footer-image .container img {position: relative;margin-bottom: -10px}
    
    #kontakt {}
    #kontakt .phone{font-size: 1.82em}
    #kontakt .phone:before {content:url(../images/telefon.svg);margin:0 0.5em 0 0;display: inline-block;width: 1em;vertical-align:bottom;}
    #kontakt .mail{font-size: 1.82em}
    #kontakt .mail:before {content:url(../images/mail.svg);margin:0 0.5em 0 0;display: inline-block;width: 1em;vertical-align:bottom;}
    #kontakt p {line-height: 1.5em}
    #kontakt ul {list-style-type: none;padding:0;margin-left:1.4em}
    #kontakt li {margin-bottom: 0em;line-height: 1.5em;text-indent:-0.7em}
    #kontakt li:before {content:url(../images/pfeil.svg);display: inline-block;width: 0.7em;vertical-align:bottom;}
    
    #map {height:400px}
    
	footer {padding: 0}	
    footer .container {padding:10px 1em}
    footer .three-cols {margin-bottom: 0}
    footer ul {list-style-type: none;padding:0}
    footer li:before {content:url(../images/pfeil.svg);margin:0 0.5em 0 0;display: inline-block;width: 0.7em;vertical-align:bottom;}
    footer .icon-top {display: inline-block;width:3em;height: 3em;background-image: url(../images/top.svg)}
    footer .col3 {text-align: right;}
    
    #impressum, #haftungsausschuss, #peter-branding {color:black;font-size: 0.8em}
    #impressum .container, #haftungsausschuss .container {padding-bottom: 0}
    #impressum a, #haftungsausschuss a, #peter-branding a {color:black}
    #peter-branding .logo-pb {width: 50%}
    
    .cookiebar {position: fixed;left: 0;top:0;width: 100%;background: #26A259;color: #fff;padding: 10px 0 10px 0;border-bottom: 1px solid #fff;font-size: 0.7em;text-align: center;z-index: 100000;}
    .cookiebar_text {width: 100%;margin: 0 auto;max-width: 900px;display: inline-block;vertical-align: middle;text-align: left;padding: 0 1em;box-sizing: border-box}
    .cookiebar a {text-decoration: underline;color: #fff;margin-left: 5px;}
    .cookiebar .button {margin: 0 0 0 10px;color: #26A259;background-color: white;vertical-align: middle;display: inline-block;padding: 10px 25px;font-size: 1.3em;text-transform: uppercase;border: 0;box-shadow: 2px 2px 2px rgba(0,0,0,0.3)}
    
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.75s ease-out;
  -moz-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
@media (hover:hover),(-moz-touch-enabled: 0) {
    a:hover {text-decoration: underline;}
    #navbar .nav li:hover {background-color: #26A259;transition: all 0.3s ease-out 0s;}
    #navbar .nav li:hover a {color: white;text-decoration: none}
    
}

@media screen and (max-width: 800px) {
    header .headline {font-size: 1.3em;}
	h1 {font-size: 1.3em;}
	h2 {font-size: 1.63em;}
	h3 {font-size: 0.8em}
    #zitate .zitat p {font-size: 1.63em;}
    #footer-image .container img {width:130%}
    #kontakt {font-size: 0.75em}
}
@media screen and (max-width: 690px) {
    body  {font-size: 18px}
    #footer-image .container img {width:130%}

}
@media screen and (max-width: 610px) {

    h3 {font-size: 1em}
    
    header {    min-height: 9em;}

    #navbar {box-shadow: 0px 2px 5px rgba(0,0,0,0.2);}
    #navbar .container {padding: 0;}
	#navbar .nav {margin:1em 0 0 0;}
    #navbar .logo {width: 100%; padding:0 1em;box-sizing: border-box}
    #navbar .com {margin: 0 0.16em 2em 0;}
    #navbar .com li.phone {margin-right: 2em}
    #navbar .com li.phone a span {display:none}
	#navbar .com li.phone .subtitle {display:none}
 	#navbar .com li.phone a:before {content:url(../images/telefon.svg);margin-right:0em;width: 1.4em;top: 0px;background-color: #26A259;padding:0.4em 0.4em 0.2em}
    body.pinned #navbar .com li.phone a:before {vertical-align:middle;transform:scale(1);transform-origin: 0% 0%;top: -7px;padding:0.4em 0.4em 0.2em}
    body.pinned #navbar .com li.close a:before {top: -7px;}
    
    body.pinned #navbar .com {margin: 0.4em 0.16em 0 0;}
	
	.mfp-content {vertical-align: bottom}
    
    .two-cols {flex-direction: column;}
    .header-right .two-cols {flex-direction:column}
    .two-cols .column {width: 100%;}
    .two-cols.w40-60 .column {width: 100%;}
    .three-cols {flex-direction: column;}
    .three-cols .column {width: 100%;}
    .col1 h2 {word-spacing:normal}
    
	.swiper-container {display: none}



    #zitate .zitat p {font-size: 1.3em;}

    #kontakt {font-size: 1em}
    #kontakt .phone {font-size: 1.6em}
    #kontakt .mail {font-size: 1.6em}
    #kontakt li { margin-bottom: 0.5em;}
    
    #peter-branding .two-cols {flex-direction:column-reverse}

}

@media screen and (max-height: 510px) {
	
	.mfp-fade.mfp-wrap.mfp-ready .mfp-content {	height: 50vh;}
	
}