/*first import fonts ################################################*/

@import url('https://fonts.googleapis.com/css?family=Handlee|Baloo|Open+Sans:400,700');

/*#############################################################*/
html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	overflow-y: scroll;
}

body {
	line-height: 1.4;
}

::-moz-selection {
	background: #78c4ff;
	text-shadow: none;
	color: #fff;
}

::selection {
	background: #78c4ff;
	text-shadow: none;
	color: #fff;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	width: auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6 {}

h1 {
	font-size: 1.6em;
	color: #fff;
}

strong {}
a,
a:hover,
a:active,
a:focus {
	outline: 0;
	color:#003264;
	text-decoration: none;
}

ul {
	margin: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

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

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

.text-center {
	text-align: center;
}

/*Processwire Image Class*/

.align_right {
	float: right;
	margin-left: 15px;
	margin-right: 0;
	margin-top: 0;
}

.align_left {
	float: left;
	margin-left: 0;
	margin-right: 15px;
	margin-top: 0;
}

.align_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
	Site Styles
	======================================================== */


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

html,
body {
	/*height:100%;*/
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	background: #E5E5E5;
}

.baloo {
	font-family: 'Baloo';
	font-weight: 100;
}

.handlee {
	font-family: 'Handlee', cursive;
}

.os-bold {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

.os-reg {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

.container {
	margin: 0 auto;
	max-width: 1000px;
	background: #fff;
}

/* header######################################################*/

.header {
	width: 100%;
	background: #003264;
}

.logo {
	float: left;
}

.logo img {
	margin: 20px;
	max-width: 130px;
}

.siteheader {
	float: left;
	top: 103px;
	position: relative;
}

/* ==================================================
	  Page Styles
	================================================= */

.main {}

.content {
	clear: both;
	margin-bottom: 10px;
	position: relative;
}

.content p {
	margin: 0;
}

/*image1#######################################################*/

.image1 {
	padding: 0 80px;
}

/*text1#######################################################*/

.text1 {
	margin: 0 0 0 0;
}

.text1 p {
	color: #003264;
}

.text1 .p1 {
	text-align: center;
	font-size: 3.4em;
}

.text1 .p2 {
	text-align: center;
	font-size: 2em;
	margin-top: -10px;
}

.text1 .p3 {
	text-align: center;
}

/*image2#######################################################*/

.image2 {
	padding: 0 80px;
	z-index: 5;
}

/*text2#######################################################*/

.text2 {
	margin: -15px 10px 0 10px;
	background: #B3C2D1;
	padding: 20px;
	z-index: 10;
	position: relative;
}

.text2 p {
	color: #003264;
}

.text2 .p1 {
	text-align: center;
	font-size: 2.5em;
}

.text2 .p2 {
	text-align: center;
	padding: 0;
	font-size: 0.9em;
}

/*text3#######################################################*/

.text3 {
	margin: 30px 10px 0 10px;
	padding: 20px 150px;
}

.text3 .p1 {
	/*text-align: center;*/
	font-size: 2.4em;
	margin-bottom: 20px;
}

.text3 .image {
	width: 50%;
	float: left;
	/*padding-left: 30px;*/
}

.text3 .image img {
	width: 80%;
}


.text3 .text {
	width: 50%;
	float: left;
	margin-top: 30px;
}

.text3 ul {
	margin-bottom: 30px;
}
.text3 ul li{
	margin-bottom: 10px;
}

.text3 p {
	color: #003264;
	
}

/*text4#######################################################*/

.text4 {
	margin: 30px 10px 0 10px;
	padding: 20px 150px;
}

.text4 .p1 {
	font-size: 2.4em;
	margin-bottom: 20px;
	color: #003264;
}

.text4 .image {
	width: 50%;
	float: left;
	padding-top: 20px;

}

.text4 .image img{
	width: 80%;
	float: right;
}

.text4 .text {
	width: 50%;
	float: left;
}

.text4 span {
	color: #003264;
	font-weight: 700;
}
.text4 p {
	margin-bottom: 15px;
	
}

/*image4#######################################################*/

.image4 {
	background: #B3C2D1;
	padding-top: 30px;
	z-index: 10;
	position: relative;
	margin-top: -25px;
}

/*text5#######################################################*/

.text5 {
	margin: 30px 10px 0 10px;
	padding: 20px 0;
}



.text5 .image {
	width: 50%;
	float: left;

}

.text5 .image img{
	width: 90%;
}

.text5 .teaser{
	width: 90%;
	padding: 10px 20px;
	margin-top: 10px;
	background: #B3C2D1;
	font-size: 2.5em;
	text-align: center;
	color: #003264;
}
.text5 .text {
	width: 50%;
	float: left;
}

.text5 .p1 {
	font-size: 2.4em;
	margin-bottom: 20px;
	color: #003264;
}
.text5 .first {
	margin-top: 55px;
}


.text5 .third {
	color: #003264;
}

.text5 span {
	color: #003264;
	font-weight: 700;
}
.text5 p {
	margin-bottom: 15px;
	
}

/*text6#######################################################*/

.text6 {
	margin: 60px 10px 0 10px;
	padding: 20px 0;
}
.text6 .teaser{
background: #B3C2D1;
}

.text6 .teaser p{
	width: 260px;
	margin-left: 18%;
	padding: 20px 0 20px 10px;
	background: #fff;
	font-size: 1.9em;
}
.text6 .a-text1 {

	margin:20px 0 0 19%;
	float: left;
}

.text6 .a-text2 {
	float: left;
	margin:20px 0 0 20px;

}


.text6 .p2 {
	clear: both;
	margin-left: 19%;
	padding-top: 20px;
	color: #003264;
}


.text6 p {
	margin-bottom: 10px;
	
}

.text6 .p1 {
	font-size: 2.4em;
	margin-bottom: 20px;
	color: #003264;
}

.text6 .image {
	width: 50%;
	float: right;
	margin: -210px 0 0 0;
	padding-left: 30px;

}

.text6 .image img{
	width: 60%;
}



.text6 .per {
	color: #003264;
	font-weight: 700;
	padding-right: 10px;
}

.text6 .per1 {
	color: #003264;
	font-weight: 700;
	
}

.text6 .per2 {
padding-right: 10px;
}

.text6 .per3 {

}



/*############################################################*/

.content ul {}

.content li {
	list-style: none;
	list-style-image: url(images/li.png);
	line-height: 1.8em;
	margin-left: -25px;
}

.impressum {
	background: #fff;
	margin: 0;
	padding: 0;
}

.impressum .content {
	margin: 0;
	padding: 10px 20px;
}

.impressum .content p{
	margin-bottom: 20px;
}

footer {
	width: 100%;
	background: #003264;
	padding: 20px 20px;
}

footer a,
footer a:hover,
footer a:active,
footer a:focus {
	color: #fff;
	text-decoration: none;
}

footer span{
	color: #fff;
}

footer a:hover {
	text-decoration: underline;
}

/*scroll to to######################################################*/

.scrolltotop {
	clear: both;
	position: relative;
	float: right;
	margin-right: 50px;
	top: 45px;
}

.scrolltotop a {
	color: #d9dada;
}

.scrolltotop i {
	font-size: 2em;
}

.scrolltotop a span {
	position: absolute;
	top: 0.3em;
	left: 2.5em;
	font-size: 0.8em;
	text-transform: uppercase;
	
}

.scrolltotop a {
	transition: color 0.5s;
}

.scrolltotop a:hover {
	color: #fff;
}




.totop2{
	padding-bottom: 20px;
}

.totop2 a, .totop2 a:hover {
	color: #003264;
}
/* ==================================================
		Media Queries
	================================================ */


/* Smaller than standard 960 (devices and browsers) */

@media only screen and (max-width: 959px) {
	body {
		/*border: 3px solid #011892;*/
		;
	}
}


/* Tablet Portrait size to standard 960 (devices and browsers) */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	body {
		/*border:3px solid #942092;*/
	}
}


/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 767px) {
	body {
		/*border:3px solid #ff9300;*/
	}
	
	.siteheader {
		clear: both;
		top: -20px;
		margin: 10px 10px 0 20px;
		position: relative;
		font-size: 0.8em;	
	}
	
	
	.text3, .text4{
		padding: 20px;
	}
	 .text5 .image, .text5 .text, .text5 .teaser {
		 width: 100%;
		clear: both;
	 }
	
}

/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 479px) {
	body {
		/*border:3px solid #009192;*/
	}
	.siteheader {

	font-size: 0.7em;
		
	}
}


/* ==================================================
   Helper classes
   ================================================= */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}


/* ==================================================
   Print styles
   ================================================= */

@media print {
	* {
		background: transparent !important;
		color: #000 !important;
		/* Black prints faster: h5bp.com/s */
		-webkit-box-shadow: none !important;
		/* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}
	a,
	a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	/*
	 * Don't show links for images, or javascript/internal links
	 */
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}
	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
		/* h5bp.com/t */
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
}