@font-face {
    font-family: 'robotoitalicbold';
    src: url('fonts/roboto-bolditalic-webfont.eot');
    src: url('fonts/roboto-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
        url('fonts/roboto-bolditalic-webfont.woff') format('woff'),
        url('fonts/roboto-bolditalic-webfont.ttf') format('truetype'),
        url('fonts/roboto-bolditalic-webfont.svg#robotobold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'robotoitalic';
    src: url('fonts/roboto-italic-webfont.eot');
    src: url('fonts/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto-italic-webfont.woff2') format('woff2'),
        url('fonts/roboto-italic-webfont.woff') format('woff'),
        url('fonts/roboto-italic-webfont.ttf') format('truetype'),
        url('fonts/roboto-italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.eot');
    src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto-light-webfont.woff2') format('woff2'),
        url('fonts/roboto-light-webfont.woff') format('woff'),
        url('fonts/roboto-light-webfont.ttf') format('truetype'),
        url('fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.eot');
    src: url('fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto-medium-webfont.woff2') format('woff2'),
        url('fonts/roboto-medium-webfont.woff') format('woff'),
        url('fonts/roboto-medium-webfont.ttf') format('truetype'),
        url('fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto-regular-webfont.woff2') format('woff2'),
        url('fonts/roboto-regular-webfont.woff') format('woff'),
        url('fonts/roboto-regular-webfont.ttf') format('truetype'),
        url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
	font-family: robotolight, roboto, Calibri, Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
}

body,
a {
	color: #4A4A4A;
}



h1, h2, h3, h4, h5, h6 							{ font-weight: normal; line-height: 130%;
												  font-family: robotothin;						}

a 												{ text-decoration: none; outline-style: none;	}
a:hover 										{ text-decoration: none; 						}
p, h1, h2, h3 									{ margin: 0 0 .8em 0; 							}
h4, h5  										{ margin: 0 0 0.3em 0; 							}
.size45											{ font-size: 3.75em; 							}
.size42											{ font-size: 3.5em; 							}
.size40, h1.heading								{ font-size: 2.5em; 							}
.size26 										{ font-size: 1.625em; 							}
.size24, h1 									{ font-size: 1.5em; 							}
.size22											{ font-size: 1.375em; 							}
.size20, p.text, article li						{ font-size: 1.25em; 							}
.size19											{ font-size: 1.1875em;							}
.size18, nav > a 								{ font-size: 1.125em; 							}
.size17, h2										{ font-size: 1.0625em; 							}
.size16											{ font-size: 1em; 								}
.size15, h3, p, label							{ font-size: 0.9375em;							}
.size14											{ font-size: 0.875em; 							}
.size13											{ font-size: 0.8125em; 							}
.size12											{ font-size: 0.75em; 							}
.size11 										{ font-size: 0.6875em; 							}
p.text 											{ line-height: 160%; 							}


ul > li {
	margin: 0 0 1em 0;
}

ul > li:last-child {
	margin: 0;
}



h1.heading.center,
p.text.center {
	text-align: center;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

.hide,
.hide-me {
	display: none;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.content-width,
nav {
    width: 100%;
    margin: 0;
	box-sizing: border-box;
	padding: 0 20px;
}

.back-to-top {
	display: block;
	width: 30px;
	height: 30px;
	/* margin: -16px auto 30px auto; */
	background-image: url(top_button.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	opacity: 0.1;

	position: absolute;
	left: 50%;
	top: 10px;
	margin: 0 0 0 -15px;
	background-color: #FFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}


.logo-header {
	margin: 20px 0;
}

.logo-header a.image {
	display: inline-block;

}

.logo-header a.logo {
	float: right;
}

.logo-header img {
	height: 30px;
	width: auto;
}

.intro,
.kontakt {
	padding: 25px 0;
}


.kontakt .content article h1 {
	padding: 0 0 50px 0;
	text-align: center;
	margin: 0;
	/* color: #006292; */
}




.intro {
	background-color: #f2f2f2;
}


/* ---------------------------------------------------------------------- */
/* NAVIGATION */


nav {
	margin: 0 0 40px 0;
	border-bottom: 1px solid #17607F;
	padding: 0 0 10px 0;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	/* display: flex; */
	justify-content: space-between;
	align-items: center;
}

nav ul li {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* flex: 0 0 auto; */
	height: 32px;
	z-index: 900;
	display: inline-block;
}

nav ul li > a {
	line-height: 32px;
}

nav ul li.standard {
	padding: 0 10px 0 0;
}

nav ul li.empty {
	/* flex: 1 1 auto; */
}

nav ul li.login {
	position: relative;
	border: 1px solid #17607F;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	z-index: 900;
	float: right;
}


nav li > a.login {
	display: inline-block;
	padding: 4px 20px;
	line-height: 20px;
}


.loginpanel {
	position: absolute;
	width: 340px; /* war: 300px */
	height: 330px; /* war: 174px */
	left: -99999em;
	top: -99999em;
	margin: 0 0 0 -170px;
	z-index: 1000;
}

.loginpanel.vis {
	left: 50%;
	top: 100%;
}


.loginpanel .arrow {
	position: absolute;
	background-color: white;
	width: 30px;
	height: 30px;
	left: 50%;
	margin-left: -15px;
	top: 8px;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 1001;
}

.loginpanel .content {
	position: absolute;
	top: 10px;
	z-index: 1002;
	width: 100%;
	height: calc(100% - 10px);
	box-sizing: border-box;
	background-color: white;
	margin: 0;
	padding: 20px;
	border: 1px solid white;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;



	-webkit-box-shadow: 10px 10px 30px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 30px -9px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 30px -9px rgba(0,0,0,0.75);
}

.loginpanel .ifr {
	position: absolute;
	left: -99999em;
	top: -99999em;
	width: 0;
	height: 0;
}

/* ---------------------------------------------------------------------- */



.intro * {
	color: #17607F;
}


.intro article h1 {
	padding: 0;
}

.standardcontent,
.verticalstandardcontent,
.kontakt {
	padding: 50px 0;
	position: relative;
}

.bottomline {
	border-bottom: 2px solid #D6D6D6;

}



/* ---------------- Kontakt ----------------- */

.kontakt .vertriebsinfo,
.kontakt .mailform {
	margin-top: 30px;
}

.kontakt .mailform {
	position: relative;
}

.kontakt .mailform input[name="beschreibung"] {
	height: 0;
	position: absolute;
	left: -999999em;
	top: -99999999em;
}

.kontakt article .vertriebsinfo h1.heading,
.kontakt article .mailform h1.heading {
	text-align: left;
	padding-bottom: 20px;
}


.kontakt .mailform input,
.kontakt .mailform textarea,
.loginpanel input {
	box-sizing: border-box;
	display: block;
	border: 2px solid white;
	background-color: #eee;
	padding: 5px;
	margin: 0 0 10px 0;
	width: 100%;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	color: #a9a9a9;
}

.kontakt .mailform input:focus,
.kontakt .mailform textarea:focus,
.loginpanel input:focus {
	border: 2px solid #949494;
	outline: none;
}



.kontakt .mailform textarea {
	height: 200px;
	font-family: roboto, Calibri, Arial, Helvetica, Verdana, sans-serif;
}

.kontakt .mailform button,
.loginpanel .content button {
	border-width: 0;
	padding: 5px 30px;
	background-color: #17607F;
	color: #FFF;
	cursor: pointer;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.kontakt .mailform {
	position: relative;
}

.kontakt .mailform .failed {
	background-color: darkred;
	color: white;
	padding: 20px;
	margin: 0 0 20px 0;
}

.kontakt .mailform .success {
	background-color: darkgreen;
	color: white;
	padding: 20px;
	margin: 0 0 20px 0;
	line-height: 150%;
}

.kontakt .sendform,
.loginpanel .sendform {
	text-align: right;
}

.impressum a {
	font-weight: bold;
	color: #015295;
}

footer {
	background-color: #17607F;
	color: #FFF;
	padding: 30px 0;

}

footer > div {
	display: flex;
	justify-content: space-between;
}


footer > div > div {
	flex: 0 0 auto;
}

footer > div > div a {
	color: #FFF;
}


@media screen and (min-width:430px) {

	.intro nav ul li.standard {
		padding: 0 50px 0 0;
	}

}


@media screen and (min-width:768px) {

	body {
		font-size: 16px;
	}

	.standardcontent,
	.verticalstandardcontent,
	.kontakt {
		padding: 150px 0;
	}

	.back-to-top {
		top: 50px;
	}

	.content-width {
		max-width: 980px;
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}

	.intro {
		padding: 30px 0 150px 0;
	}

	.logo-header img {
		height: 80px;
		width: auto;
	}

	.intro article h1 {
		padding: 15px 0 15px 0;
	}

	.intro article p.text {
		margin-bottom: 1.5em;
	}

	.standardcontent {
		background-color: #fff;
	}

	.f5 {
		background-color: #f2f2f2;
	}

	.standardcontent .content-width {
		display: flex;
		align-items: center;
	}



	.standardcontent .content-width > *:first-child {
		width: 50%;
		padding: 0 25px 0 0;
	}

	.standardcontent .content-width > *:last-child {
		width: 50%;
		padding: 0 0 0 25px;
	}

	/* ---------------- Kontakt ----------------- */

	.kontakt .vertriebsinfo {
		float: right;
		width: 40%;
		margin-left: 5%;
		margin-top: 0;
	}

	.kontakt .mailform {
		width: 50%;
		margin-top: 0;
	}
}