@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------- *
 *                     Style ABN by A-KRUEGER Webdesign                          *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- * 
 * Verwendete Farben
 * #1a1a1a - anthrazite
 * #29293d - Darkblue Corporate Identity
 * #006eb6 - Hellblau Corporate Identity
 * silver  - hellgrau
-------------------------------------------------------------------------------- */

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	margin: 0;
  	padding: 0;
}

/* -------------------------------------Fonts-------------------------------------*/
@font-face {
 font-family: OpenSansLightCond;
 src: url("../fonts/Open_Sans/OpenSans-CondLight.eot") /* EOT file for IE */
}
 @font-face {
 font-family: OpenSansLightCond;
 src: url("../fonts/Open_Sans/OpenSans-CondLight.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: OpenSansLight;
 src: url("../fonts/Open_Sans/OpenSans-Light.eot") /* EOT file for IE */
}
 @font-face {
 font-family: OpenSansLight;
 src: url("../fonts/Open_Sans/OpenSans-Light.ttf") /* TTF file for CSS3 browsers */
}


/* ----------------------------------------------------------------------------- *
 *                                 Generalités                                   *
 * ----------------------------------------------------------------------------- */

html {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	}
	
body {
	margin: 0 auto;
	background: hsl(0, 0%, 95%);
	width: 100%;
	height: 100%;
	}

main {
	margin: 0 auto;
	width: 100%;
	height: auto;
	}

section {
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 10px;
	}

img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	}

.limiter_1200 {
	margin: 0 auto;
	max-width: 1200px;
	}

.limiter_800 {
	margin: 0 auto;
	max-width: 800px;
	}

.limiter_600 {
	margin: 0 auto;
	max-width: 600px;
	}

.limiter_400 {
	margin: 0 auto;
	max-width: 400px;
	}

.top_25 {
	margin-top: 25px;
	}

.top_50 {
	margin-top: 50px;
	}

.top_100 {
	margin-top: 100px;
	}

.top_150 {
	margin-top: 150px;
	}

.bottom_100 {
	margin-bottom: 100px;
	}



/* ----------------------------------------------------------------------------- *
 *                                 Flexboxes                                     *
 * ----------------------------------------------------------------------------- */

.flex-container-row {
	margin: 0 auto;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}

.flex-container-column {
	margin: 0 auto;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	}

.flex-container-box {
    margin: 1px;
	margin: 0 auto;
	padding-left: 5px;
	padding-right: 5px;
}	

.flex-item-box {
	align-content: space-between;
	min-height: 200px;
	margin-top: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	}

.details-box {
	align-content: space-between;
	min-height: 50px;
	margin-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	}

.flex-item-box-image {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
}

.flex-item-box-middle {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

.flex-item-box-text {
	background-color: none;
	color: #1a1a1a;
	padding: 2px;
}

.flex-item-box-text h3 {
	color: #1a1a1a;
	font-size: 2.0em;
	line-height: 1.5em;
}

.flex-item-box-text p {
	color: #1a1a1a;
	font-size: 1.0em;
	line-height: 1.2em;
}

.flex-item-box:hover .flex-item-box-image {
    opacity: 0.3;
	background-color: #e8cdc2;
	-webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.flex-item-box:hover .flex-item-box-middle {
	opacity: 1;
}

.flex-item-1 {
	flex: 1;
	}

.flex-item-2 {
	flex: 2;
	}

.flex-item-3 {
	margin: 0;
	padding: 0;
	flex: 3;
	}

.order-1 {
	order: 1;
	}

.order-2 {
	order: 2;
	}

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

.align-self-start {
	align-self: flex-start;
}

.align-self-end {
	align-self: flex-end;
}

.align-items {
	align-items: stretch;
}



/* ----------------------------------------------------------------------------- *
 *                                Décoration                                     *
 * ----------------------------------------------------------------------------- */

.sign-before::before {
  content:'\00A0→';
}

.sign-after::after {
  content:'\00A0→';
}

hr {
 	background: #aaaaaa;
 	border: none;
 	color: #aaaaaa;
 	height: 1px;
 	width: 100%;
}

.center {text-align: center;}
.justify {text-align: justify;}
.right {text-align: right; padding-right: 20px;}

.shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 10px 0 rgba(0, 0, 0, 0.5);}
.shadow-light {box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.shadow-line {
  position: relative;
  height: 10px;
  width:100%;
  margin:0 auto;
  display:block;
}
.shadow-line:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 50% / 20px; 
  box-shadow: rgba(0, 0, 0, 0.3) 0 5px 10px;
  clip: rect(20px, auto, 50px, 0);
}

.horizontal-line {
  overflow: hidden;
  text-align: center;
}

.horizontal-line:before,
.horizontal-line:after {
  background-color: white;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.horizontal-line:before {
  right: 0.5em;
  margin-left: -50%;
}

.horizontal-line:after {
  left: 0.5em;
  margin-right: -50%;
}


.clear { clear: both;
	height: 120px;}

/* ----------------------------------------------------------------------------- *
 *                                   Icons                                       *
 * ----------------------------------------------------------------------------- */
i.far, i.fas, i.fab {
	font-size: 25px;
	color: white;
	margin: 0 auto;
	width: 45px;
	height: 45px;
	padding: 7px;
	padding-top: 8px;
	border-radius: 50%;
	border: 1px solid white;
}

i.far:hover, i.fas:hover, i.fab:hover {
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
	background: white;
}

/* ----------------------------------------------------------------------------- *
 *                              Scroll TOP Button                                *
 * ----------------------------------------------------------------------------- */
#Top {
	font-size: 20px;
	padding-top: 0px;
	color: #1a1a1a;
	margin: 0 auto;
	width: 45px;
	height: 45px;
	margin-top: 20px;
	border-radius: 50%;
	border: 1px solid #1a1a1a;
	background-color: white;
	z-index:1000;
	display: none;
  	position: fixed;
  	bottom: 20px;
  	right: 20px;
	cursor: pointer;
}

#Top:hover {
  	color: silver;
	border: 1px solid white;
	background: #1a1a1a;
}

#Top i.fa:hover, #Top i.far:hover, #Top i.fas:hover, #Top i.fab:hover {
	color: white;
	border: none;
}


/* ----------------------------------Button-------------------------------------*/
.link-btn {
	cursor: pointer;
	text-decoration: none;
	margin-top: 30px;
	margin-right: 10px;
	text-align: left;
}

.link-btn a {
	color: #1a1a1a;
	text-decoration: none;
}

.link-btn a:hover {
	background: silver;
	color: #1a1a1a;
	text-decoration: underline;
}

/* ----------------------------------------------------------------------------- *
 *                               Hero Parallax                                   *
 * ----------------------------------------------------------------------------- */

.hero-parallax {
	background-image: url(../img/bg_black_logo.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	
}
.hero-parallax-transparence {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(230, 230, 230, 0.0);
	
}
.hero-parallax-content {
	position: relative;
	width: 100%;
}

.hero-parallax-middle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

.bottom {
	height: 100%;
	text-align: center;
	position: relative;
	margin: 0 auto;
}

.scroll-down i.fa,  .scroll-down i.far, .scroll-down i.fas, .scroll-down i.fab {
	font-size: 20px;
	padding-top: 13px;
	color: white;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: 1px solid white;
	background: transparent;
	z-index:1000;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	
}

.scroll-down i.fa:hover, .scroll-down i.far:hover, .scroll-down i.fas:hover, .scroll-down i.fab:hover {
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
	background: white;
}

/* ----------------------------------------------------------------------------- *
 *                                  Parallax                                     *
 * ----------------------------------------------------------------------------- */

.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 0px solid silver;
	border-bottom: 0px solid silver;
	padding-top: 40px; 
	padding-bottom: 60px;
	height: 300px;
	background-color: silver;
}


.parallax h2 {
	font-family: OpenSans, system-ui, sans-serif;
	font-size: 3.0em;
	font-weight:lighter;
	padding: 50px 0 10px 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	color: black;
    text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666;
	}

.parallax h4 {
	padding: 10px 0 50px 0;
	}

/* ----------------------------------------------------------------------------- *
 *                                   Spalten                                     *
 * ----------------------------------------------------------------------------- */

.spalten-inside {
	padding: 30px 10px 30px 10px;
	column-width: 20em;
	column-rule: 1px dotted silver;
	}

.spalten-inside h2 {
	column-span: all;
	color: #1a1a1a;
	margin-bottom: 10px;
	}
	
.spalten-inside p {
	font-family: OpenSansLight, sans-serif;
	font-size: 1.0em;
	text-align: justify;
	color: #1a1a1a;
	line-height: 1.5em;
	margin: 0 10px 0px 10px;
	}

.spalten-inside img {
	padding: 10px;
	width: 100%;
	height: auto;
	}

/* ----------------------------------------------------------------------------- *
 *                                 Accordion                                     *
 * ----------------------------------------------------------------------------- */

.accordion {
  	background: none;
  	color: #29293d;
  	cursor: pointer;
  	padding: 15px;
  	width: 100%;
  	border: none;
  	text-align: left;
  	outline: none;
  	font-size: 1.0em;
  	transition: 0.4s;
}

.accordion-active, .active, .accordion:hover {
  	background: silver;
	color: #29293d;
}

.accordion:after {
  	content: '\00bb';
   	float: right;
  	margin-left: 5px;
}

.active:after {
  	content: "\00bb";
}

.panel {
  	padding: 0 18px;
  	background: white;
  	max-height: 0;
  	overflow: hidden;
  	transition: max-height 0.2s ease-out;
}

.panel h3 {
  	margin-top: 10px;
	margin-bottom: 10px;
	color: #29293d;
	font-family:OpenSansLight, Helvetica, sans-serif;
	font-size: 1.0em;
}
.panel p {
  	margin-top: 10px;
	margin-bottom: 10px;
	color: #29293d;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}


/* ----------------------------------------------------------------------------- *
 *                                    Table                                      *
 * ----------------------------------------------------------------------------- */

.t-right { 
	display:table;
	clar:both;
}

.table_right { 
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	height: 500px;
	display: table;
	margin-left: 20px;
	font-family: OpenSansLight, sans-serif;
}

.table_right th{ 
	padding:6px 8px;
	display:table-cell;
	text-align:left;
	vertical-align:top;
}
.table_right td{ 
	padding:6px 8px;
	display:table-cell;
	text-align:left;
	vertical-align:top;
	font-family: OpenSansLight, sans-serif;
	color: #000000; 
}

/* ----------------------------------------------------------------------------- *
 *                                   Cookies                                     *
 * ----------------------------------------------------------------------------- */

#mbmcookie {
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	background: #aaaaaa; 
	color: #ffffff; 
	padding: 10px; 
	font-size: 10px; 
	font-family: Arial; 
	text-align:center;
}

#mbmcookie a {
	cursor: pointer; 
	color:#ffffff; 
	text-decoration:underline;
}

#mbmcookie a:hover {
	cursor: pointer; 
	color:#ffffff; 
}

#mbmcookie a.btn_cookie {
	cursor: pointer; 
	background: #ffffff; 
	color:#aaaaaa; 
	padding: 8px 15px; 
	margin-left: 10px; 
	border-radius: 5px; 
	font-weight: bold;
	text-decoration: none;
}

#mbmcookie a.btn_cookie:hover {
	background-color: #aaaaaa;
	color: #ffffff;
	border: 1px solid #ffffff;
	
}

#mbmcookie p.cookiemessage {
	display: block; 
	padding: 0; 
	margin: 0; 
	text-align:center;
	color: #ffffff;
}

.btn_cookie {
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100px;
}