/* --------------------------------------------------------------------------
 * CSS RESET
 * -------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,
pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s,
samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul,
li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
	}

body {
	line-height: 1;
	}

ol, ul {
	list-style: none;
	}

blockquote, q {
	quotes: none;
	}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}


/* --------------------------------------------------------------------------
 * CLEARFIX
 * -------------------------------------------------------------------------- */

.clearfix:after,
.row:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	}

/* Clearfix Patches für den IE */
.clearfix,
.row {
	display: inline-block;
	}

/* Vor IE5/Mac verstecken mit dem Commented Backslash Hack \*/
* html .clearfix,
* html row { height: 1px; }
.clearfix,
.row { display: block; }
/* Ende des Versteckspiels für den IE5/Mac */


/* --------------------------------------------------------------------------
 * GLOBAL STYLES
 * -------------------------------------------------------------------------- */

* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	margin: 0;
	padding: 0;
	}

html, body {
	height: 100%;
	}

body {
    font-family: 'Arimo', Arial, Tahoma, sans-serif;
	overflow-y: scroll;
	background: #fff;
	color: #777;
	font-size: 14px;
	line-height: 1.2em;
	}

.left {
	display: inline-block;
	float: left;
	}

.right {
	display: inline-block;
	float: right;
	}

.center {
	clear: both;
	position: relative;
	margin: 0 auto;
	}


/* --------------------------------------------------------------------------
 * TYPOGRAPHY
 * -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin-bottom: 10px;
	}

h1 {
	position: relative;
	margin-bottom: 0px;
	}
h2 {
	font-size: 20px;
	font-weight: bold;
	color: #004288;
	margin-bottom: 25px;
	}
h3 {
	}
h4 {
	margin-bottom: 5px;
	}
h5 {
	}
h6 {
	}

a,
a:visited,
a:active {
	color: #fff;
	text-decoration: none;
	}

.kontakt a {
	color: #004288;
}

p {
	margin-bottom: 16px;
	}


/* --------------------------------------------------------------------------
 * SECTIONS
 * -------------------------------------------------------------------------- */

#wrapper {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: 100%; /* Mindesthöhe für den IE */
    width: 100%;
    position: absolute;
	}


section,
.fullscreen {
	clear: both;
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
    height: auto !important;
    width: 100%;
	position: relative;
	display: block;
	background: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
	}

.inside {
	clear: both;
	min-width: 960px;
	width: 80%;
	position: absolute;
	height: 100%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	}


/* --------------------------------------------------------------------------
 * HEADER
 * -------------------------------------------------------------------------- */

#header {
	width: 100%;
	position: fixed;
	top: -129px;
	z-index: 1000;
	height: 129px;
	background: rgba(255,255,255,.8);
	-webkit-transition: top 400ms ease-in-out;
	-moz-transition: top 400ms ease-in-out;
	-ms-transition: top 400ms ease-in-out;
	-o-transition: top 400ms ease-in-out;
	transition: top 400ms ease-in-out;
	}
#header.active {
	top: 0;
	}
	#header ul {
		position: relative;
		width: 100%;
		margin-top: 52px;
		}
	#header ul li {
		display: inline-block;
		float: left;
		line-height: 46px;
		font-weight: bold;
		text-align: center;
		width: 14.28%;
		position: relative;
		}
	#header ul li a {
		font-size: 17px;
		color: #004288;
		-webkit-transition: color 150ms linear;
		-moz-transition: color 150ms linear;
        -ms-transition: color 150ms linear;
        -o-transition: color 150ms linear;
		transition: color 150ms linear;
		}
	#header ul li a.active {
		color: #ff5000;
		}
	#header ul li a.logo {
		display: block;
		width: 134px !important;
		height: 28px;
		background: url(../img/logo-big.png);
		background-size: cover;
		text-indent: -999em;
		line-height: 28px !important;
		margin: 0 auto;
		}


/* --------------------------------------------------------------------------
 * FOOTER
 * -------------------------------------------------------------------------- */

#footer {
	width: 100%;
	height: 24px;
	position: fixed;
	bottom: 60px;
	z-index: 1000;
	}
	#footer .inside > ul {
		display: inline-block;
		position: absolute;
		right: 0px;
		}
	#footer .inside > ul > li {
		display: inline-block;
		float: left;
		position: relative;
		margin-left: 5px;
		}
	#footer .inside > ul > li > a {
		display: block;
		padding: 5px 10px;
		color: #777;
		}
	#footer .inside > ul > li.active a {
		background-color: #004288;
		color: #fff;
		}
	#footer .inside > ul > li.active ul {
		display: block;
		}
	#footer .inside > ul > li > ul {
		position: absolute;
		width: 370px;
		height: auto;
		bottom: 24px;
		right: 0px;
		background: #004288;
		display: none;
		padding: 20px;
		color: #fff;
	}
	#footer .inside > ul > li > ul#datenschutz {
		width: 800px;
		height: 90vh;
		overflow-y: scroll;
		margin-right: -17px;
	}
	#footer .inside h2 {
		font-size: 17px;
		color: #fff;
		}
	#footer .inside > ul ul a.close {
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 3px 5px;
		font-weight: bold;
		background: transparent;
		color: #fff;
		}
	#footer .inside > ul ul a.close:hover {
		background: #fff;
		color: #004288;
		}
	#footer .inside > ul .downloads a {
		background: url(../img/pdf_icon.png) no-repeat left center;
		line-height: 18px;
		padding-left: 23px;
		margin-bottom: 3px;
		}


/* --------------------------------------------------------------------------
 * KONTAKT FORMULAR
 * -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
textarea {
	padding: 3px 4px;
	width: 210px;
	margin-top: 5px;
	}

textarea {
	width: 100%;
	resize: none;
	}

.submit_container {
	display: inline-block;
	float: right;
	}
input.submit {
	text-decoration: none;
	text-align: center;
	padding: 3px 17px;
	border: none; 
	-webkit-border-radius: 3px;
	-moz-border-radius:3px; 
	border-radius: 3px;
	font-size: 18px;
	font-weight: bold;
	color: #E5FFFF;
	background-color: #ff6a00;
	background-image: -moz-linear-gradient(top, #ff6a00 0%, #ff5100 100%);
	background-image: -webkit-linear-gradient(top, #ff6a00 0%, #ff5100 100%);
	background-image: -o-linear-gradient(top, #ff6a00 0%, #ff5100 100%);
	background-image: -ms-linear-gradient(top, #ff6a00 0% ,#ff5100 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5100', endColorstr='#ff5100',GradientType=0 );
	background-image: linear-gradient(top, #ff6a00 0% ,#ff5100 100%);
	cursor: pointer;
	}

.explanation,
.explanation p {
	display: inline-block;
	float: left;
	}

/* --------------------------------------------------------------------------
 * HOME
 * -------------------------------------------------------------------------- */

#home {
	}
	#home a#logo {
		position: absolute;
		left: 50%;
		margin-left: -85px;
		top: 46px;
		display: block;
		width: 169px;
		height: 35px;
		background: url(../img/logo-big.png) no-repeat;
		text-indent: -999em;
		}
	#home a#scrolldown {
		position: absolute;
		left: 50%;
		margin-left: -53px;
		bottom: 10%;
		display: block;
		width: 107px;
		height: 107px;
		background: url(../img/scroll-down.png) no-repeat;
		text-indent: -999em;
		z-index: 500;
		}

	#home .mod_newslist,
	#home .kontakt {
		position: absolute;
		top: 50%;
		width: 270px;
		left: 75%;
		top: 50%;
		transform: translateY(-50%);

		}
	#home .mod_newslist .info,
	#home .mod_newslist div > h2 {
		display: none;
		}

	#home .kontakt {
		width: 170px;
		right: 0px;
		}


/* --------------------------------------------------------------------------
 * COMPANY
 * -------------------------------------------------------------------------- */

#company .mod_article {
	position: relative;
	width: 40%;
	left: 65%;
	top: 50%;
	transform: translateY(-50%);
	}
	#company .mod_article > div {
		margin-bottom: 42px;
		}


/* --------------------------------------------------------------------------
 * PRODUCTS
 * -------------------------------------------------------------------------- */

#products .intro {
	position: absolute;
	width: 25%;
	top: 25%;
	left: 75%;
	background: rgba(255,255,255,.8);
	}


/* --------------------------------------------------------------------------
 * ACCOUNTING
 * -------------------------------------------------------------------------- */

#accounting .mod_article {
	position: relative;
	width: 40%;
	left: 65%;
	top: 50%;
	transform: translateY(-50%);
	}


/* --------------------------------------------------------------------------
 * REGULATION / STEUERUNG
 * -------------------------------------------------------------------------- */

#regulation .mod_article {
	position: relative;
	width: 40%;
	left: 65%;
	top: 50%;
	transform: translateY(-50%);
	}


/* --------------------------------------------------------------------------
 * SUPPLY / LIEFERUNG
 * -------------------------------------------------------------------------- */

#supply .mod_article {
	position: relative;
	width: 40%;
	left: 65%;
	top: 50%;
	transform: translateY(-50%);
	}


/* --------------------------------------------------------------------------
 * PARTNER
 * -------------------------------------------------------------------------- */

#partner .mod_article {
	position: relative;
	width: 40%;
	left: 65%;
	top: 50%;
	transform: translateY(-50%);
	}
#partner .mod_article a {
	color: #004288;
	}



/* --------------------------------------------------------------------------
 * COOKIEBAR
 * -------------------------------------------------------------------------- */

.cookiebar {
	background-color: #e5e5e5 !important;
	color: #222 !important;
}

.cookiebar__button {
	background-color: #004288 !important;
}


/* --------------------------------------------------------------------------
 * CSS3 DIAMONDS
 * -------------------------------------------------------------------------- */

.diamond {
	display: table;
	width: 160px; 
	height: 160px; 
	background: #004288;
	color: #fff;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
a.diamond,
#products .diamond {
	-webkit-transition: all 100ms linear;
	-moz-transition: all 100ms linear;
	-ms-transition: all 100ms linear;
	-o-transition: all 100ms linear;
	transition: all 100ms linear;
	}
	.diamond span,
	#products .diamond p {
		display: table-cell;
		vertical-align: middle;
		width: 160px; 
		height: 160px;
		text-align: center;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg); 
		}
	.diamond span {
		font-weight: bold;
		font-size: 17px;
		}
	#products .diamond strong {
		display: block;
		font-weight: bold;
		border-bottom: 1px solid #fff;
		margin-bottom: -6px;
		}
	a.diamond:hover,
	#products .diamond:hover {
		background: #ff5000;
		}

	#diamondProducts,
	#diamondAccounting,
	#diamondRegulation,
	#diamondSupply,
	#company .diamond,
	#accounting .diamond,
	#regulation .diamond,
	#supply .diamond,
	#products .diamond,
	#partner .diamond {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -80px;
		margin-top: -80px;
		}
	#diamondProducts { margin: -210px 0 0 -80px; }
	#diamondSupply { margin: 50px 0 0 -80px; }
	#diamondAccounting { margin: -80px 0 0 -210px; }
	#diamondRegulation { margin: -80px 0 0 50px; }
	#company .diamond,
	#accounting .diamond,
	#regulation .diamond,
	#supply .diamond,
	#partner .diamond { margin: -80px 0 0 -210px; }

	#products .diamond:nth-of-type(1) { margin-top: -340px; }
	#products .diamond:nth-of-type(2) { margin-top: -210px; margin-left: 50px; }
	#products .diamond:nth-of-type(3) { margin-top: -80px; margin-left: 180px; }
	#products .diamond:nth-of-type(4) { margin-top: -210px; margin-left: -210px; }
	#products .diamond:nth-of-type(5) { }
	#products .diamond:nth-of-type(6) { margin-top: 50px; margin-left: 50px; }
	#products .diamond:nth-of-type(7) { margin-top: -80px; margin-left: -340px; }
	#products .diamond:nth-of-type(8) { margin-top: 50px; margin-left: -210px; }
	#products .diamond:nth-of-type(9) { margin-top: 180px; margin-left: -80px; }