* {
	margin:  0px;
	padding: 0px;
	word-wrap: break-word;
}

body {
	font-size: 1em;  /*1em =16px*/
	font-family: Heebo, sans-serif;
	color:#152b4c;
	font-weight: normal;
	background-color:whitesmoke;
}

/*================*/
/* Text and Icons */
/*================*/

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1.2em 0;
	font-family: 'Enriqueta', serif;
	color: #152b4c; 
}

h1 {
	margin: 0.8em 0 0 0;        
	font-size: 2em;
}

h2 {
	margin: 0.8em 0;
	font-size: 1.5em;
	background-color: lightgrey;	/*text-align: center; geht im IE nicht im Chrome sollte so gehen>>> besser h2 einhüllen mit div im html*/
}

h4 {                            /*für footer*/
	margin: 0.7em 0;
	font-size: 1.2em;
}

h6 {                            /*für Logo*/
	margin: 0 0 0 0em;
	font-size: 3em;
	line-height: 1.3em;
}

p {
	margin-bottom: 1em;
	font-weight: normal;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}
.right{
	text-align: right;
}

.grey {		                 /*für Kundenbeispiele*/
	font-weight: bolder
}

.comment {
	font-size: small; 
	font-style: italic;
	color: #366dbf;
}

/* Runde Ikons nicht verwendet
.round-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	border: 8px solid #366dbf;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
}

.round-icon i {
	color: #366dbf;
	line-height: 104px;
	font-size: 3em;
}
*/

.button {
	display: inline-block;
	margin: 0.25em 0;   
	padding: 0.4em 0.8em;
	background-color: #366dbf;
	border-radius: 4px;
	box-sizing: border-box;
	color:#fbfcfd;
	text-decoration: none;
	font-weight: bold;
}

.button:hover {
	background-color: #576273;
}

img {
	padding: 4px;
	margin-bottom: 1em; 
	border: 6px groove #eee;
	border-radius: 6px;	
	box-sizing: border-box;
}

.portrait {
	width: 80%;
}
/* folgende Elemente sind Formularelemente

input,
textarea {
	width: 90%;
	padding: 4px 6px;
	border: 1px solid #576273;
	border-radius: 2px;
	font-family: Heebo, sans-serif; 
	font-size: 1.2em;
}

button { 
	border: none;
	font-family: Heebo, sans-serif; schon im body definiert? Nein, da Button  nicht vom body erbt.
	font-size: 1.2em;
} */

/*==========*/
/* Sections */
/*==========*/

.header {
	height: 360px;
	width:  100%;
	background-image: url("../img/header.jpg"); /* In Anführungszeichen,damit für alle Engines kompatibel*/
	transition: background-image 1.5s ease-in-out;
	-webkit-transition: background-image 1.5s ease-in-out;
	-moz-transition: background-image 1.5s ease-in-out;
	-o-transition: background-image 1.5s ease-in-out;
	background-position: center;
	background-repeat: no-repeat;
}

.header:hover{
	background-image: url("../img/header2.jpg"); 
}

.footer {
	margin-top: 0.8em;
	padding-bottom: 1em;
	color:#fbfcfd;
	background: #152b4c;
	font-size: 0.8em;
}

.footer h4 {
	color:#fbfcfd;
}

.footer p {
	font-weight: lighter;
}

.footer a {
	color:#fbfcfd;
	text-decoration: none;
} 

/*======*/
/* Logo */
/*======*/

.logo {
	position: absolute;
	margin-top: 20px;
	margin-left: 12px;
	text-align: right;
}

/*.logo h6 {
	text-align: left;	standardmässig rechts
}*/

.logo a {
	color:#576273;
	text-shadow: 2px 2px 3px black;
    font-weight: bold;
	font-family: 'Wire One', sans-serif;
	text-decoration: none;
}
.logo p {
	color:#fbfcfd;
	font-size: 0.7em;
}

/*================*/
/* Top-Navigation */
/*================*/

.nav-top {
	float: left;    
	margin-top: 360px;
	margin-left: 12px;
}

.nav-top ul {
	list-style: none;
	padding: 10px 0;
	/*background-color: powderblue;   Hinterbalken Menuliste*/
	line-height: 15px;
}

.nav-top ul li {
	display: inline;
	font-weight: bolder; 
}

.nav-top ul li a {
	padding: 4px 15px; /*15px lassen, sonst überläuft Menuzeile*/
	color: #152b4c;
	text-decoration: none;
}

.nav-top ul li a:hover,
.nav-top a:active,
.nav-top a:focus {
	color: #366dbf;
	border-bottom: 4px solid #366dbf;
	background-color: lightgrey;
}

.nav-top ul li a.selected {
	color: #366dbf;
	border-bottom: 4px solid #366dbf;
	background-color: lightgrey;
}

/*=============*/
/* Grid-System */
/*=============*/

.container {
	width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1em;
	padding-bottom: 1em;    
}

.header .container {
	padding: 0;
}

.column-1-1,
.column-1-2,
.column-2-2,
.column-1-3,
.column-2-3,
.column-3-3,
.column-1-4,
.column-2-4,
.column-3-4,
.column-4-4 {
	padding: 12px;
	box-sizing: border-box;
}

.column-1-1 {
	width: 100%;
}

.column-1-2 {
	float: left;
	width: 570px;
}

.column-2-2 {
	float: left;
	width: 570px;
}

.column-1-3,
.column-2-3,
.column-3-3 {
	float: left;
	width: 380px;
}

.column-1-4,
.column-2-4,
.column-3-4,
.column-4-4 {
	float: left;
	width: 273px;  /*musste von 285 mind. 12px abziehen wegen padding*/
}

div.clearfix {
	clear: both;
}

/*=============*/
/* Mobile-Menu */
/*=============*/

.mobile-menu {
	display: none;
	height: 38px;
	width: 100%;
	color:#fbfcfd;
	background-color: #152b4c;
}

.mobile-menu-button {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	font-size: 1.5em;
	color:#fbfcfd;
}

#openMenu {
	font-size: 20px;
	color: #152b4c;
	text-decoration: none;
	background-color:#fbfcfd;
	border-radius: 0px;
}

.mobile-menu-dialog {
	position: fixed;
	top: 40px;
	right: 0;
	bottom: 0;
	left: 0;
	background: #152b4c;
	z-index: 57627399;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	/* Do not remove next line! */
	pointer-events: none;
}

.mobile-menu-dialog:target {
	opacity: 1;
	/* Do not remove next line! */
	pointer-events: auto;
}

.mobile-menu-dialog ul {
	background:#fbfcfd;
}

.mobile-menu-dialog ul li {
	list-style-type:none;
}

.mobile-menu-dialog ul li a {
	padding: 6px 12px;
	display: block;
	color: #152b4c;
	text-decoration: none;
}

.mobile-menu-dialog ul li a.selected {
	font-weight: bold;
}

.mobile-menu-dialog ul li a:hover {
	background-color: #366dbf;
	color:papayawhip;
}

/*================*/
/* @media-queries */
/*================*/

@media (max-width: 1200px) {
	.container {
		width: 960px;
	}

	.column-1-2 {
		width: 480px;
	}

	.column-2-2 {
		width: 480px;
	}

	.column-1-3,
	.column-2-3,
	.column-3-3 {
		width: 320px;
	}

	.column-1-4,
	.column-2-4,
	.column-3-4,
	.column-4-4 {
		width: 228px;
	}                     /*musste von 240 mind. 12px abziehen wegen padding*/
}

@media (max-width: 992px) {	

	.container {
		width: 744px;
	}

	.header {
	height: 260px;
	background-position: -870px -112px;
	}

	.logo {
	margin-top: 10px;
	}

	.logo a {
	color: #576273;
	text-shadow: 1px 1px 1px black;
	}

	.logo p {
	font-size: 0.7em;
	color: #fbfcfd;
	}

	.nav-top {
	float: left;
	margin-top: 248px;
	}

	.column-1-2 {
		width: 372px;
	}

	.column-2-2 {
		width: 372px;
	}

	.column-1-3,
	.column-2-3,
	.column-3-3 {
		width: 248px;
	}

	.column-1-4,
	.column-2-4,
	.column-3-4,
	.column-4-4 {        
		width: 174px;
	}                  /*musste von 186 mind. 12px abziehen wegen padding*/
}

@media (max-width: 768px) {

	.header {
		height: 310px;
		background-position: -1100px -50px;
	}

	.mobile-menu {
		display: block;
	}
	
	.logo {
		float: left;
		margin-top: -60px;
		margin-left: 50px;
	}

	.logo a {
		color: #fbfcfd;
		font-size: 0.6em;
		font-weight: lighter;
	}

	.logo p {
		color:#576273
	}

	.nav-top {
		display: none;
	}
	
	.container {
		width: 100%;
	}

	h1{
		font-size: 1.5em;
	}

	.column-1-2 {
		float: none;
		width: 100%
	}

	.column-2-2 {
		float: none;
		width: 100%;
	}

	.column-1-3,
	.column-2-3,
	.column-3-3 {
		float: none;
		width: 100%;
	}

	.column-1-4,
	.column-2-4,
	.column-3-4,
	.column-4-4 {
		float: none;
		width: 100%;
	}
}