@charset "utf-8";

/*			Fonts			*/
@font-face {
  font-family: 'Avenir-Roman';
  src: url('../fonts/Avenir-Roman.eot');
  src: url('../fonts/Avenir-Roman.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Avenir-Roman.otf') format('otf'),
       url('../fonts/Avenir-Roman.svg#Avenir-Roman') format('svg'),
       url('../fonts/Avenir-Roman.ttf') format('truetype'),
       url('../fonts/Avenir-Roman.woff') format('woff'),
       url('../fonts/Avenir-Roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Avenir-Medium';
  src: url('../fonts/Avenir-Medium.eot');
  src: url('../fonts/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Avenir-Medium.otf') format('otf'),
       url('../fonts/Avenir-Medium.svg#Avenir-Medium') format('svg'),
       url('../fonts/Avenir-Medium.ttf') format('truetype'),
       url('../fonts/Avenir-Medium.woff') format('woff'),
       url('../fonts/Avenir-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Clear Floated Elements */
.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clear:after, .ce_text:after {clear:both;content:' ';display:block;font-size:0;
line-height:0;visibility:hidden;width:0;height:0;}
* html .clear {height:1%;}
.hide, .invisible {display: none;}
a.invisible {display:none;}

body {background-color:#FFF;color:#535353;}

h1,h2,h3,h4,h5,h6, h2 a {font-family: 'Avenir-Roman', Verdana, sans-serif;letter-spacing: 0.05em;}
h1,h2,h3,h4,h5,h6 {color: #02B8BF;}
h1 {font-size:50px;}
h2 {font-size:34px;margin-bottom:40px;}
#header h2 {margin-bottom:10px;}
#header p {color:#02B8BF;}
#header a {color:#02B8BF; text-decoration: none;}
.tuerkis {background-color: #02B8BF;}
.blau {background-color: #1990CE;}
.gruen {background-color: #07BC83;}
.bg-helix {min-height: 16px;}

p {font-family:'open_sansregular', Helvetica, sans-serif;
font-size:16px;line-height:1.6em;color:#333;}
a, table th {font-family: 'open_sansregular', Helvetica, sans-serif;}

table {width:100%;border-collapse:collapse;margin-bottom:24px;}
table th,table td {padding:16px 6px;line-height: 1.5em;vertical-align: top;}
table th {font-weight:600;text-align:left;}
caption {font-variant: small-caps;}
th *:first-child,td *:first-child {margin-top: 0;}
thead th {text-align: left;color: #000;border-bottom: 1px #000 solid;}
tbody th, td {text-align: left;border-top: 1px solid #ccc;}
tbody tr:hover th,tbody tr:hover td {background: #f8f8f8;}
tfoot {border-top: 4px solid #ccc;}

ul li {font-family:'open_sansregular', Helvetica, sans-serif;
font-size:16px;line-height:1.6em;color:#333;}

a {font-weight:400;color:#02B8BF;transition: .1s ease-in;outline:0 !important;}
a:hover {color:#999999;text-decoration:none;}
p a {text-decoration: underline;}

em,i {font-weight:600;}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 0;
  padding-left: 0;
}
.row {display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; width: 100%;}

hr {margin: 1.5em 0; clear: both; border-style: solid; border-top-style: solid;
color: #A9A9A9; border-width: 1px 0 0 0; border-top-width: 1px;
position: relative; border-top: 1px solid #A9A9A9;}

.iconhr::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  background: #ccc;
  top: 14px;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}
.iconhr::before {
  content: "";
  background: #fff url(../img/raute.svg) 3px 0 no-repeat;
    background-size: auto;
  background-size: auto;
  width: 60px;
  height: 30px;
  background-size: 90%;
  color: #23332E;
  font-size: 25px;
  position: absolute;
  top: 0;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
  padding: 0 5px;
}

::-moz-selection {color: #02B8BF;background: #FFF;}
::selection {color: #02B8BF;background: #FFF;}

.ce_gallery {margin: 16px 0;padding: 5px 0;
display: inline-block;}
.ce_gallery ul {display: inline;list-style: outside none none;}
.ce_gallery ul li {float: left;list-style: outside none none;
margin-left: 4px;margin-bottom: 4px;padding: 0;}

/* ####### CSS Hilfsklassen ####### */

.text-big {font-size:1.3em;}
.text-normal {text-transform:none;font-family:'open_sansregular', Helvetica, sans-serif;}
.text-small {font-size:0.88em;}
.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.serif, #boxes-overview p.serif {font-family: 'open_sansregular', Helvetica, sans-serif;}

.full-width {width:100%;
	padding:20px;
	text-align:center;}
.btn.full-width {background:transparent;
	border:1px solid #2d3e15;
	text-align:center;}
.zero-padding {
	padding-left:0 ;
	padding-right:0;
}
.btn{border-radius:0 !important;background:#FFF !important;
color:#FFFFFF;font-size:18px;margin:20px 0;padding:10px;}

.icon {
	width:30px;
	height:30px;
	display:inline-block;
	float:left;
	margin-right:10px;
	background:#02B8BF;
	padding:5px;
	border-radius:40px;
}

.padded-top {padding-top:60px;}
.padded-top-zwei {padding-top: 16px;}

/* ####### CSS spezifisch ####### */
#header {display:block;background: #FFF;}

.logo {display:block;z-index: 2147483647;}
#content .logo img {width: auto;display: block;height: auto;border-right: 0 solid #FFF;}
#logo-head img {display: flex; margin: 0 auto; width:200px;}

.blaubg {background-color: #02B8BF;color: #FFF;}
.blaubg h2.kurz {margin-bottom:0;}
p + p {margin-top: 40px;}
.produkt h3 {padding: 24px 24px 0 24px;}
.produkt p, .produkt img {padding: 0 24px 0 24px;}
.produkt ul {padding: 0 0 0 48px;list-style: disc;}
.produkt ul li {color: #333;}
#content .produkt .mitte img {display: inline-block; width: 51px; padding:0;}
.rechts {border-left: 8px solid #FFF;}
.links {border-right: 8px solid #FFF;}

.clear::after, .ce_text::after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}
img.float_left {float:left; margin-right:16px;}

.desktop {display:block;}
.fa-stack-2x { font-size: 0.5em; }

.navtop li ul {font-family:'open_sansregular', Helvetica, sans-serif;
width:100%;list-style: none;float: right;position: relative;}
.navtop li a {font-family:'open_sansregular', Helvetica, sans-serif; color:#FFF; font-size:14px;}
.navtop li {float: left;position: relative;padding-right:8px;}

.navbar-nav {float: left;}
#main-nav  #jaddatz-nav {position:relative;max-width:1170px;
margin:0 auto;left:-15px;right:0;}
.navbar-default {background-color: transparent;
border-color: transparent;}
.sticky-menu {position: fixed !important;top: 0;z-index: 1000 !important;
width: 100% !important;height: 168px;}

#main-nav {
	z-index:10000;
	margin:0;
	padding:0;
	top: auto !important;
	position: relative !important;
	background-color:#F2F2F2;
}
#main-nav li a {
	font-size:21px;
	color:#02B8BF;
	color:#F2F2F2;
	color:#333;
	padding-left:16px;
	padding-right:16px;
}
#main-nav li a.has-subnav {
	padding-right:2em;
	background-image:url(../img/arrow-down.png);
	background-position:95% center;
	background-repeat:no-repeat;
	background-size:20px auto;
}
#main-nav li a:hover, #main-nav li a:focus, #main-nav li a:active {
	background-color:#FFF;color:#333;}
#main-nav li a.active, #main-nav li a.forward {color:#333;background:#FFF;}
#main-nav li a:hover.has-subnav, #main-nav li a:focus.has-subnav, #main-nav li a:active.has-subnav {
	padding-right:2em;
	background-image:url(../img/arrow-down_active.png);
	background-position:95% center;
	background-repeat:no-repeat;
	background-size:20px auto;
}
#main-nav li ul {width:100%;background:#FFF;color:#333;padding:0;min-width: 22em;}
#main-nav li ul li a {padding:7px 15px;font-size:17px;color:#333;
border-top:1px solid rgba(0,130,129,.4);}
#main-nav li ul li a.active {color:#02B8BF;background:#FFF;}
#main-nav li ul li a:hover {background: #FFF;}

#navmobil, .navmobil {display:none;}
#access {padding:0;background:rgba(0,130,129,1);overflow: hidden;display:inline;
position: relative;z-index: 1;width: 1170px;margin: 0 auto;}
.navdesk a {font-size: 21px;font-family:'open_sansregular', Helvetica, sans-serif;}

#teaser {/*max-height:600px;*/overflow:visible;background:transparent;display: block;position: relative;}
#teaser img{width:100%;margin-top:0;display: block;height: auto;}
#teaser .col-xs-12 {padding-left:0;padding-right:0;}

#content img{width:100%;margin-top:0;display: block;height: auto;}

.row {display: flex;flex-wrap: wrap;margin-right: 0px;margin-left: 0px;}

.fill figure {margin: 0; display: block; overflow: visible; position: relative;
object-fit: contain; width: 100%; height: 100%;}

.mitte {text-align: center}

.ce_leaflet {position: relative; width: 100%; padding-bottom: .25%; overflow: hidden;}
.leaflet-pane > svg path.leaflet-interactive {fill-opacity: 0.07 !important;}

.site-title {margin-top:-140px;display:inline-block;
padding:20px;background:#eaeef8 !important;}
.table-heading {padding:10px;background:#eaeef8 !important;margin-bottom:20px;opacity:.7;}
ul {list-style:none;margin:0;padding:0;}

video,iframe {display:block;}
.ce_youtube {position: relative; padding-bottom: 56.25%; max-width: 100%;
height: 0;overflow: hidden; margin: 0 auto; width:1100px;}
.ce_youtube iframe {position: absolute; top: 0; left: 0; right: 0; bottom: 0;
 width: 100%; height: 100%;}
.ce_youtube a {color: #333; text-decoration: none;}
.playbutton {color: #fe0000;
font-size: 50px;left: 50%;margin: -73px 0 0 -31px;position: absolute;
text-shadow: 0 0 8px rgba(0,0,0,0.5);top: 50%;cursor: pointer;z-index: 10;}
.dsgvotext {color: #000;font-size: 16px;left: 0;right: 0;
width: 80%;margin: 0 auto;padding: 2em;position: absolute;
background-color: rgba(255,255,255,0.7);top: 10%;}
audio {max-width:100%;}

#footer {padding:40px 0 0 0;color:#333;background:#F2F2F2;margin-top: 32px;}
#footer p, #footer a {
font-family:'open_sansregular', Helvetica, sans-serif; color:#333; text-transform:none;}
#footer p {font-size:16px;}
#footer .copyright > p {margin-top:20px; color:#333; padding:0 0 20px 0; text-align:right;}
#footer .copyright > ul {text-align:right;}
#nav-toggle {background:transparent;width:80px;height:80px;
padding:0;border:0;}

/* Toplink */
#footer .nach_oben_link{position:fixed;bottom:93px;right:33px;z-index:15;opacity:0.9}
#footer a .nach_oben_link .fas {color:#333;background-color:transparent;height:40px;width:40px;display:block;font-size:4.8em;text-align:center;text-decoration:none}
#footer a:hover .nach_oben_link,
#footer a:focus .nach_oben_link{text-decoration:none;}
#footer a:hover .nach_oben_link .fas {color:#999999;}
#footer .nach_oben_link a:before{font-family:'Font Awesome 5 Free';content:" \f139";}

.fas, .far {font-weight: 600;font-size: 1em;color:#02B8BF;line-height: 1;display: inline-block;}
.fas:hover, .far:hover {color:#B1B3B4;}


@media screen and (max-width: 1100px){

}

@media screen and (max-width: 992px){
	#main-nav li a {font-size:14px;}
	.site-title {font-size:24px;}
}

@media screen and (max-width: 767px){
	img#logo {width:100%;height:auto;margin-top:10px;}
	#phone-btn img.icon{width:50px;height:50px;}
	.phone {margin:0 -15px 0 0;}
	#main-nav {width:100%;margin:0;float:none !important;}
	#jaddatz-nav {float:none !important;}

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { display: block; }
	/* Hide table headers (but not display: none;, for accessibility) */
	thead { position: absolute;top: -9999px;left: -9999px;}
	tr { border: 1px solid #ccc; margin-bottom: 20px;}
	td { /* Behave  like a "row" */border: none;
	/*border-bottom: 1px solid #eee; */position: relative;}
	td:before { /* Label the data */content: attr(data-title);
	display: inline-block;width: 35%; padding-right: 10px; white-space: nowrap;}
	td {padding-left: 45%;}
	td:before {width: 40%;}
	td:first-child {font-weight:bold;}
		td:first-child:before {font-weight:normal;}

	#header {display: block;background: transparent;position: relative;
	overflow: visible;}
	.text-welcome {font-size: 2.4em;}
	.text-small {font-size: 0.6em;}
	.text-yellow {margin-left: 2px;}
	#content {margin-top: 0;padding: 0;display: block;
	overflow: visible;position: relative;}
	#teaser h2 {top: 20px;}
	.padded-top {padding-top: 120px;}
	#teaser img {margin-top: 0;}
	#teaser h2.teaser-headline {font-size: 22px;left: auto;top: 70px;}
	#footer img {max-width: 119px;}
	
	#navmobil {display: flex;margin: 0;}
	#navmobile {display: flex;/*margin: 0 19px 0 0;*/}
	#navmobile a {font-size: 30px;/*font-size: 14px;*/padding: 0 8px; margin: 0; 
	color: #02B8BF;text-decoration:none;font-weight: bold;}
	.navbar-toggle {padding:0;}
	.btn.navbar-toggle {margin: 8px;}
	.navdesk.mod_navigation.block {display: none;}
/* All the following are for the div.menu-icon (pure CSS) */
	.icon-align-justify {font-size: 30px; /*icon size*/display: block;
	position: relative;	width: 36px;height: 34px;text-align: center;cursor: pointer;
	background-color: transparent;border-radius: 3px;margin-bottom:6px;}
	.icon-align-justify::before {border-bottom: 0.25em solid #02B8BF;
	border-top: 0.65em double #02B8BF;box-sizing: content-box;content: "";
	height: 0.25em;left: 4px;position: absolute;top: 0.25em;width: 1.5em;}

	#logo-area {width: 100%;}
	#header h2 a {font-size: 20px;}
	#teaser h3 {left: 10%;}
	.navtop {display:none;}
	.rechts {border-left: 0 solid #FFF;}
	.links {border-right: 0 solid #FFF;}
	#footer .copyright > ul, #footer .copyright > p {text-align:left;}
	.bildtext {top: 100px;}
	.mm-menu--position-top.mm-menu--opened {min-height: 80vh;}
	.mm-page {min-height: auto;}
}