/* ##### color globals RGB ##### */

/* ##### generals ##### */

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
       url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
       url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('../fonts/lato-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */
}

html {
	height:100%;
}

body {
    margin:0;
    padding:0;
    background-color:rgb(230,235,240);
    text-align:center;
	font-size:10px;
	height:100%;
	overflow-y:scroll;
}

* {
	font-family: 'Lato', sans-serif;
    text-decoration:none;
    line-height:1.5em;
    padding:0;
    margin:0;
    border:0;
    text-align:left;
	font-weight:400;
}

table, tbody, th, tr, td {
	border:0;
	padding:0;
	margin:0;
	border-collapse:collapse;
}

a {
    outline:none;
}

img {
    display:block;
}

main {
	display:block;
}

strong {
  font-weight:700;
}

/* ##### layout basics ##### */

div.wrap-page {
	width:100%;
	position:relative;
}

div.wrap-page header.main {
	width:220px;
	background-color:rgb(255,255,255);
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:10;
	display:block;
}

div.wrap-page header.main.scroll {
	position:absolute;
	left:0;
	top:0;
}

div.wrap-page header.main.scroll-stop {
	position:fixed;
	left:0;
	bottom:0;
	top:auto;
}

div.wrap-page header.main img.logo {
	width:180px;
	height:50px;
	margin:20px 0 20px 15px;
}

div.wrap-page header.main nav.main {
	width:220px;
}

div.wrap-page header.main nav.main ul li {
	position:relative;
	font-size:1.4em;
	list-style-type:none;
}

div.wrap-page header.main nav.main ul li a {
	width:160px;
	height:42px;
	display:block;
	color:rgb(0,50,100);
	font-weight:400;
	font-size:1em;
	padding:24px 40px 0 20px;
	border-bottom:1px solid;
	border-top:1px solid;	
	border-color:rgb(204,204,204);	
	text-transform:uppercase;
	margin:0 20px 0 0;
}

div.wrap-page header.main nav.main ul li.active a {
	background-color:rgb(0,50,100);
	color:rgb(255,255,255);	
	border-color:rgb(255,255,255);	
	z-index:20;
	position:relative;
	padding:24px 30px 0 30px;	
}

div.wrap-page header.main nav.main ul li a:hover {
	background-color:rgb(0,50,100);
	color:rgb(255,255,255);	
	border-color:rgb(255,255,255);	
	z-index:20;
	position:relative;
	padding:24px 40px 0 20px;	
}

div.wrap-page header.main nav.main ul li.active a:hover {
	padding:24px 30px 0 30px;
}

div.wrap-page header.main nav.main ul li a span {
	background-image:url('../../img/bg-menu-main.png');
	background-position:right center;
	background-repeat:no-repeat;
	position:absolute;
	right:-20px;
	top:0;
	display:none;
	width:20px;
	height:66px;
}

div.wrap-page header.main nav.main ul li.active a span {
	display:block;
}

div.wrap-page header.main div.testimonials {
	position:absolute;
	bottom:40px;
	left:9px;
	width:200px;
}

div.wrap-page header.main div.testimonials span.intro {
	color:rgb(0,50,100);	
	font-size:1em;
	text-transform:uppercase;
	font-weight:400;
	position:relative;
	left:4px;
}

div.wrap-page header.main div.testimonials span.logo {
	color:rgb(155,155,155);	
	font-size:3.1em;
	font-style:italic;
	font-family:'Arial', sans-serif;
	font-weight:bold;
	text-align:center;
	display:block;
	line-height:1em;
	position:relative;
	top:6px;	
}

div.wrap-page header.main div.testimonials span.title {
	color:rgb(155,155,155);	
	font-size:0.9em;
	font-weight:normal;
	font-family:'Arial', sans-serif;
	display:block;
	text-align:center;
	line-height:1em;
	position:relative;
	top:-3px;	
}

div.wrap-page header.main div.testimonials span.url {
	color:rgb(155,155,155);	
	font-size:1.35em;
	font-weight:normal;
	font-family:'Arial', sans-serif;
	display:block;
	text-align:center;
	line-height:1em;
}

div.wrap-page header.main div.testimonials a:hover span {
	color:rgb(85,85,85);	
}

/* ##### layout content ##### */

div.wrap-page main {
	display:block;
	padding:0 400px 0 220px;

}

div.wrap-page main section.full-image {
	background-image:url('../../img/top-placeholder.jpg');
	background-position:center center;
	background-size:cover;
	height:465px;
	width:100%;
}

div.wrap-page main section.gmaps {
	height:465px;
	width:100%;
  background-color:rgb(255,255,255);	
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps {
	width:100%;
  height:100%;
  background-image:url('../../img/anon_map.jpg');
  background-size:cover;
  text-align:center;
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps p {
  text-align:center;
	font-size:1.5em;
	font-weight:300;
	line-height:1.5em;
	color:rgb(85,85,85);	
  margin-bottom:15px;
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps p:first-child {
  padding-top:80px;
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps p strong {
	font-weight:400;
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps a {
	font-size:1em;
	text-decoration:none;
	font-weight:300;
	color:rgb(0,50,100);	  
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps a:hover {
	color:rgb(85,85,85);	  
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps a.theme-button {
	background-color:rgb(0,50,100);	 
	display:inline-block;
	height:25px;
	padding:5px 15px 0 15px;
	font-size:1.3em;
	font-weight:400;
	line-height:1.5em;
  color:rgb(255,255,255);	
  cursor:pointer;
}

div.wrap-page main section.gmaps #dsgvo-compliance-maps a:hover.theme-button {
	background-color:rgba(0,50,100,0.8);	 
}

div.wrap-page main section.content {
	padding:40px 60px 60px 60px;
	max-width:900px;
	overflow:hidden;
}

div.wrap-page main section.content div.column.left {
	width:50%;
	float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right:50px;
}

div.wrap-page main section.content div.column.right {
	float:left;
	width:50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	padding-left:50px;	
}

div.wrap-page main section.content h1 {
	font-size:6em;
	font-weight:300;
	line-height:1.5em;
	color:rgb(50,50,50);	
	text-transform:uppercase;
}

div.wrap-page main section.content h2 {
	font-size:3.4em;
	font-weight:700;
	line-height:1.2em;
	color:rgb(185,185,185);	
	text-transform:uppercase;
	margin:0 0 30px 0;
}

div.wrap-page main section.content h3 {
	font-size:2.4em;
	font-weight:400;
	line-height:1.2em;
	color:rgb(50,50,50);	
	margin:0 0 30px 0;
}

div.wrap-page main section.content h4 {
	font-size:2.1em;
	font-weight:400;
	line-height:1.2em;
	color:rgb(50,50,50);	
	margin:0 0 30px 0;
}


div.wrap-page main section.content p {
	font-size:1.5em;
	font-weight:300;
	line-height:1.3em;
	color:rgb(85,85,85);	
	margin:0 0 30px 0;
}

div.wrap-page main section.content p.teaser {
	font-size:2.4em;
	font-weight:400;
	line-height:1.2em;
	color:rgb(50,50,50);	
	margin:0 0 30px 0;
}

div.wrap-page main section.content p a,
div.wrap-page main section.content ul li a {
	font-size:1em;
	font-weight:300;
	color:rgb(0,50,100);	
}

div.wrap-page main section.content p a:hover,
div.wrap-page main section.content ul li a:hover {
	font-size:1em;
	color:rgb(85,85,85);	
}

div.wrap-page main section.content p.teaser a {
	font-size:1em;
	color:rgb(50,50,50);	
}

div.wrap-page main section.content p.teaser a:hover {
	font-size:1em;
	color:rgb(85,85,85);	
}

div.wrap-page main section.content ul li {
	font-size:1.5em;
	font-weight:300;
	line-height:1.3em;
	color:rgb(85,85,85);	
	margin:0 0 10px 0;
}

	
div.wrap-page section.sidebar {
	width:400px;
	background-color:rgb(255,255,255);
	height:100%;
	position:fixed;
	right:0;
	top:0;
	z-index:10;	
	overflow:hidden;
}

div.wrap-page section.sidebar div.quarter {
	width:100%;
	height:33%;
	overflow:hidden;
	background-position:center center;
	background-size:cover;
	border-left:1px solid;
	border-bottom:1px solid;
	border-color:rgb(255,255,255);
}

/* ##### layout portfolio ##### */

main article.portfolio {
	width:100%;
	background-color:rgb(85,85,85);
	background-position:center center;
	background-size:cover;	
	min-height:280px;
	position:relative;
	border-bottom:1px solid rgb(255,255,255);
}

main article.portfolio a.overlay {
	width:100%;
	height:100%;
	min-height:280px;
	background-color:rgba(0,0,0,0.5);
	display:block;
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
}

main article.portfolio a.overlay.active,
main article.portfolio a:hover.overlay {
	background-color:transparent;
}

main article.portfolio a.overlay div.overlay-content {
	width:280px;
	height:100%;
	background-color:rgb(0,50,100);
	float:right;
	position:relative;
}

main article.portfolio a.overlay div.overlay-content.variant {
	margin:0 280px 0 0;
}

main article.portfolio a.overlay div.overlay-content h2 {
	font-size:1.6em;
	font-weight:400;
	line-height:1.2em;
	color:rgb(255,255,255);	
	text-transform:uppercase;
	padding:40px 40px 40px 40px;
}

main article.portfolio a.overlay div.overlay-content p {
	color:rgb(255,255,255);
	font-size:1.6em;
	font-weight:400;
	line-height:1.2em;	
	position:absolute;
	left:40px;
	bottom:40px;
	
}

main article.portfolio a.overlay div.overlay-content p i {
	margin-right:10px;
}

main article.portfolio div.content {
	width:100%;
	height:100%;
	min-height:280px;
	background-color:rgba(255,255,255,0.85);
	display:none;
}

main article.portfolio div.content div.wrap-content {
	padding-right:80px;
}

main article.portfolio div.content p {
	color:rgb(0,50,100);
	font-size:1.3em;
	font-weight:300;
	line-height:1.5em;	
	padding:0 280px 0 80px;
	margin:0 0 20px 0;
	text-transform:uppercase;	
}

main article.portfolio div.content ul {
	padding:0 280px 0 80px;	
	margin:0 0 15px 0;	
}

main article.portfolio div.content ul li {
	color:rgb(0,50,100);
	font-size:1.5em;
	font-weight:300;
	line-height:1.2em;
	margin:0 0 5px 0;
}



/* ####################### */
/*** smaller resolutions ***/
/* ####################### */

@media only screen and (max-width: 1450px) {

	div.wrap-page section.sidebar {
		width:280px;
	}
	
	div.wrap-page main {
		display:block;
		padding:0 280px 0 220px;
	}	
	
	main article.portfolio a.overlay div.overlay-content.variant {
		
	}	
	
}

@media only screen and (max-width: 1270px) {

	div.wrap-page section.sidebar {
		display:none;
	}

	div.wrap-page main {
		display:block;
		padding:0 0 0 220px;
	}	
	
	div.wrap-page main section.content div.column.left,
	div.wrap-page main section.content div.column.right {
		float:none;
		width:auto;
		padding:0;
	}
	
	div.wrap-page main section.content div.column.left {
		margin-bottom:40px;
	}
	
}

/* ######################## */
/*** smartphone landscape ***/
/* ######################## */

@media only screen and (max-height: 700px) {

	div.wrap-page main section.full-image {
		height:221px;
	}	
	
	div.wrap-page main section.gmaps {
		height:221px;
	}	
	
	main article.portfolio a.overlay div.overlay-content.variant {

	}
	
	main article.portfolio div.content p {
		font-size:1.1em;
	}

	main article.portfolio div.content ul li {
		font-size:1.3em;
	}	
	
}

/* ############ */
/*** live css ***/
/* ############ */

.live-css-normal {
	font-weight:400 !important;
}

.live-css-bold {
	font-weight:700 !important;
}

.live-css-hidden {
	display:none !important;
}