html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; 
}
body {margin: 0; padding: 0; font-size: 14px;line-height: 1.8em}
#wrapper { position: relative;}

/* ---------------------------------------------- */
/* ----- FONTS ------ */
/* ---------------------------------------------- */
body, input, textarea {font-family: 'Open Sans', sans-serif; font-weight: 400}
blockquote, h1, h2, h3, .lightfont {font-weight: 200}
strong {font-weight: 700}

h1 {font-size: 5em}
h2 {font-size: 40px}

h1, h2, h3, h4, h5, h6 {  
    margin: 0;
    margin-bottom: 15px;
    word-wrap: break-word;
    line-height: normal}

.layout_full h1 {font-size: 3em}

/*General Headline*/
.col12 h2 {margin-bottom: 30px}

a {outline: 0; text-decoration: none}
a:hover, #mainnav li.active span {color: #335344}

.halftext {width: 75%; margin: 0 auto}
.textup, #mainnav a, .backpic .inside h1, #tab_panel li p {text-transform: uppercase}
.textcenter, .pagination {text-align: center}
.textright {text-align: right}
.samlltext, .crumbs a, .crumbs, #Select, .lightgrey {font-size: 11px}
.layout_latest .info, .rightnewslist .info, .mediumtext, .layout_full .info {font-size: 13px}


#wrapper {margin-top: 88px}
.heighter, #TP13, #TP14, #TP15, #TP16 {min-height: 550px}


/*IE FIX*/
.ie8 #logo img {max-width: none !important}

/* ---------------------------------------------- */
/* ----- TRANSITION + LAYOUT BUILDER ------ */
/* ---------------------------------------------- */
a, #logo img, #header, #toTop, #tab_panel li, #tab_panel li p, #header.sticky #mainnav, .ce_download, .ce_download p, 
#mainnav.closed, #mainnav.opened
{
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

.invisible {display: none}
.inliner {display: inline-block;vertical-align: middle }
.transparent {opacity: 0}
li.active span {cursor: default}

/* ------------- */
/*  IMAGES  */
/* ------------- */
figure, ul {margin: 0; padding: 0; overflow: hidden;}
img {max-width: 100%; height: auto; display: block}


/* ------------- */
/*  COLORS  */
/* ------------- */

/*---TEXT---*/
/*-dunkles Grau-*/
body, p, #tab_panel li a {color: #838383}

/*-dunkles Blau-*/
#mainnav a, h1, h2, h3, h4, h5, h6, a:hover, #toTop a, #mob .fa {color: #263238}

/*-leichtgrau-*/
.backpic h1, .backpic h2, .backpic h3, .backpic h4, .backpic h5, .backpic h6, .backpic p, .backpic a,
.darkblue a, #footer a, .darkblue h1, .darkblue h2, .darkblue h3, .darkblue h4, .darkblue h5, .darkblue h6,
.submit_container input  
{color: #f6f7f8}

/*-hellblau-*/
#section-2-tab-panel h2, span.mandatory,
a, #footer li.active span, #footer li a:hover, #tab_panel li.active, #tab_panel li.active p, #tab_panel li:hover, #tab_panel li:hover p, #tab_panel li:hover a
{color: #0098b1}

/*weiß*/
.mod_newsreader .back > a {color: #fff}

/*---BACKGROUND---*/
.lightgray, body.stickyfooter {background-color: #f6f7f8}
.darkgray {background-color: #838383; color: #f6f7f8}
.darkblue, #footer {background-color: #263238; color: #f6f7f8}
.mod_newsreader .back, .submit_container, .mod_newslist .more > a, .contact_panel a.more, .document_panel .ce_downloads a.more, .login_panel a.more
{background-color: #0098b1; color: #f6f7f8}
.mod_newsreader .back:hover, .submit_container:hover, .mod_newslist .more > a:hover, .contact_panel a.more:hover, .document_panel .ce_downloads a.more:hover, .login_panel a.more:hover
{background-color: #03b9d7}
.white {background-color: #fff}




/* ---------------------------------------------- */
/* ----- HEADER ------ */
/* ----------------------------------------------*/
#header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;background-color: rgba(255, 255, 255, 1);}
#header .inside {position: relative; padding: 10px 0 14px;}

#logo {float: left}
#logo img {width: 200px}
#logo a {display: block}

/*-- Mobile Menu Trigger --*/
#mob {display: none}


/*-- Main Navigation --*/
#mainnav {float: right; margin-top: 29px}
#mainnav li {display: inline-block; padding: 0 20px; border-left: 1px dotted #ccc}
#mainnav li:last-child {border-right: 1px dotted #ccc}


/*-- Sticky Header --*/
#header.sticky {background-color: rgba(255, 255, 255, 0.8);}
#header.sticky #logo img {width: 150px}
#header.sticky #mainnav {margin-top: 14px;font-size: 12px}

/* ---------------------------------------------- */
/* ----- SCROLL ICON ------ */
/* ---------------------------------------------- */
#toTop {    position: fixed;
    right: 3%;
    bottom: 3%;
    background-color: rgb(255, 255, 255);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 200;
    border: 1px solid rgb(228, 228, 228);
	padding: 2px 11px;
    box-shadow: 2px 2px 5px rgba(134, 134, 134, 0.28);
    cursor: pointer;
    font-size: 40px}

/* ---------------------------------------------- */
/* ----- HEADPICTURE + CONTENT MOTION PICTURE ------ */
/* ---------------------------------------------- */
.backpic {position: relative}
.backpic .layer, .backpic .container {position: absolute; width: 100%; top: 0; left: 0; right: 0; bottom: 0}
.backpic .layer {background-color: rgba(0, 0, 0, 0.3)}
.backpic .inside {padding-top: 8%;text-align: center;color: #fff}
.backpic .inside h1 {text-shadow: 0 1px 2px rgba(0, 0, 0, .6)} 


/* ---------------------------------------------- */
/* ----- TAB PANEL ------ */
/* ---------------------------------------------- */

#tab_panel ul {width: 100%}
#tab_panel li {width: 25%; float: left; list-style-type: none; text-align: center;border-left: 1px dotted rgb(204, 204, 204); padding: 15px 0; cursor: pointer}
#tab_panel li.last {border-right: 1px dotted rgb(204, 204, 204)}
#tab_panel li p {margin: 5px 0 0 0}
#tab_panel li .fa {font-size: 30px}

/* ----- GENERAL -------- */
.mod_newslist figure, .contact_panel .ce_image, .document_panel .ce_download, .login_panel .mod_login
{float: right; width: 40%}
.mod_newslist figure, .contact_panel .ce_image, .login_panel .mod_login
{background-color: #fff; border: 1px solid #ccc;  padding: 15px}

/*ZUR ZEIT NUR EINE NEWS 05.01.2017*/
.mod_newslist a.all {display: none !important}

.mod_newsreader .back,  .mod_newslist a.all, .mod_newslist .more > a, .contact_panel a.more, .document_panel .ce_downloads a.more, .login_panel a.more
{display: block;max-width: 130px;text-align: center;padding: 5px;border-radius: 3px}

.mod_newslist .teaser, .document_panel .ce_downloads, .login_panel .ce_text, .contact_panel .ce_contact 
{float: left; width: 50%}
.mod_newslist .more {margin: 0}


/* ---------------------------------------------- */
/* ----- GOOGLE MAPS ------ */
/* ----------------------------------------------*/
iframe {display: block}
.overlay {
  	 background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 100;
    width: 100%;
    height: 550px;
    top: 550px;
    margin-top: -550px;
    display: block !important}

    
    
/* ---------------------------------------------- */
/* ----- FORMULARE ------ */
/* ----------------------------------------------*/    
.ce_form {margin-top: -10px !important}
.ce_form .widget {clear: both; overflow: hidden; height: 50px; padding: 8px 0}
.ce_form .widget-text, .widget-textarea {border-bottom: 1px solid #838383; }
label, input {float: left; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
label {width: 35%; height: 50px; padding: 13px 0 0 13px}
.ce_form label {border-right: 1px dotted #ccc; height: 100%;padding: 5px 0 0 13px}
.widget-textarea {height: 150px !important}
textarea {width:calc(65% - 2px)!important;min-width: 63%;height: 130px !important;margin-top: 8px;float: right; resize: none}
input, input:focus, textarea {border: none; outline: 0; background: transparent; height: 100%;font-size: 14px;padding: 0 10px;width:calc(65% - 2px)!important;min-width: 63%;cursor: text}
input:-webkit-autofill {-webkit-box-shadow: inset 0 2px 13px 0px #f5f5f5, inset 0 0 0 50px #f5f5f5;}

/*---SEND BUTTON---*/
.submit_container {position: relative; overflow: hidden; max-width: 160px; border-radius: 3px; margin-top: 13px}
label.login {width: 20% !important}
label.send, input.send, label.login, input.submit {height: 40px; padding-top: 0; width: 100%;text-align: left;padding-left: 22px;font-size: 14px}
label.send:before, label.login:before {content: "\f1d8"; position: absolute; top: 8px; left: 13px}
input.submit {cursor: pointer}
.submit_container label {border-right: none}

/* -----LOGIN FORM------ */
.mod_login  {max-width: 500px; width: 90%; margin: 0 auto; background-color: #fff; border-radius: 3px; border: 2px solid #ccc; padding: 3%;overflow: hidden}
.mod_login .widget, .mod_login .checkbox_container {overflow: hidden;border-bottom: 1px solid rgb(131, 131, 131);padding: 5px 0}
.mod_login input {height: 50px}
.mod_login #autologin {float: left;max-width: 40%;cursor: pointer;height: 20px;margin-top: 16px;}
.mod_login input.submit {width: initial; padding-left: 8px; height: 38px}

/*---ICON FONT FORMULARE---*/
label:before {font-family: "FontAwesome"; padding-right: 13px;font-weight: 100;}
label.name:before, label.username:before {content: "\f007"; padding-right: 16px}
label.company:before {content: "\f0b1"}
label.mail:before {content: "\f0e0"}
label.message:before {content: "\f075"}
label.password:before {content: "\f084"}
label.autologin:before {content: "\f00c"}
label.login:before {content: "\f090"}



/* ---------------------------------------------- */
/* ----- DOWNLOAD + TOOLS ----- */
/* ---------------------------------------------- */
.downloadFrame {display: flex; flex-wrap: wrap}
.downloadFrame > div {width: 23%; margin: 0 2% 2% 0;
  hyphens: auto;
  overflow: hidden;
  border: 1px solid;
  padding: 6px;
  word-wrap: anywhere;
  }
.downloadFrame > div:nth-child(4n) {margin-right: 0}

.ce_download {border: 4px solid #ddd; color: #ddd ; min-height: 300px; max-width: 360px; position: relative;  text-align: center; padding: 6%}
.ce_download .mime_icon {display: none}
.ce_download p {color: #ddd; margin: 0}
.ce_download:before {font-family: "FontAwesome"; content: "\f019"; display: block;font-size: 55px; margin-bottom: 20%}
.ce_download a {position: absolute; top: 0; left: 0; bottom: 0; right: 0}
.ce_download:hover, .ce_download:hover > p {color: #0098b1}

/* ---------------------------------------------- */
/* ----- FOOTER ----- */
/* ---------------------------------------------- */
#footer {height: 300px}
#footer .inside {padding: 3% 0}

/*-- Sticky Footer ---*/
html {
  height: 100%;
}
body.stickyfooter {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
body.stickyfooter #wrapper {
  flex: 1;
}

/* ---------------------------------------------- */
/* ----- BREAKS ----- */
/* ---------------------------------------------- */

@media (max-width: 950px)
{


}
@media (max-width: 768px)
{
	#wrapper {margin-top: 58px}
	
	/*--Fonts--*/
	h1 {font-size: 30px}
	h2 {font-size: 20px}
	
	/*--Header + Navigation--*/
	#header .inside {padding: 10px 0 10px;}
	#logo img {width: 100px}
	#header.sticky #logo img {width: 100px}
	
	#mob {display: block;float: right;width: 50px;height: auto;text-align: right;padding-top: 2px}
	#mob .fa {font-size: 30px;cursor: pointer }
	
	#mainnav {float: none;margin-top: 45px !important}
	#mainnav ul {width: 100%; margin: 0}
	#mainnav li {display: block; height: auto; text-align: center; border-bottom: 1px dotted #ddd;padding: 3% 0; border-left: none; border-right: none !important}
	#mainnav li:last-child {border-bottom: none}
	#mainnav li.active span {border: none; padding: 10px 0}
	
	#mainnav.closed {visibility: hidden;max-height: 0}
	#mainnav.opened {visibility: visible;max-height: 230px}
	
	/*---TAB PANEL--*/
	#tab_panel ul {width: 90%}
	#tab_panel li, .mod_newslist .teaser, .document_panel .ce_downloads, .login_panel .ce_text, .contact_panel .ce_contact,
	.mod_newslist figure, .contact_panel .ce_image, .document_panel .ce_download, .login_panel .mod_login
	{float: none; width: 100%}
	
	#tab_panel li {text-align: left; padding: 15px 30px; border-left: none; border-bottom: 1px dotted #ddd; font-size: 18px;}
	#tab_panel li.last {border: none}
	#tab_panel li .fa {font-size: 24px; width: 50px; vertical-align: bottom}
	#tab_panel li p {display: inline-block; margin: 0}
	
	.ce_download:before {margin-top: 10px}
	.mod_newslist figure, .contact_panel .ce_image, .document_panel .ce_download, .login_panel .mod_login, .ce_download
	{margin: auto !important ;margin-top: 6% !important}

	/*--- BACKPICS --*/
	.backpic {height: 350px !important;background-attachment: initial !important;}
	
	
	/*---- FORMS -----*/
	.ce_form, .mod_login {margin-top: 12% !important}
	.ce_form .widget {height: auto;padding: 5px 0}
	label, input, input:focus, textarea {width: 100% !important; height: 30px; padding: 0 13px; float: none}
	.widget-textarea, textarea {height: auto !important}
	.submit_container {max-width: none}
	.mod_login {width: 100%; max-width: none}
	.mod_login input.submit {width: initial !important}
	
	/*Checkbox*/
	label.autologin {width: 65% !important;padding-top: 15px;}
	/*.checkbox_container {height: 70px !important}*/	
	input[type=checkbox] {
  	outline: none;
  	float: none !important; 
  	width: 88px !important;
    height: 23px !important;
    max-width: 88px !important;
    min-width: 0 !important;
  	font-size: 11px;
  	line-height: 2;
  	display: block;
  	font-weight: bold;
  	border-radius: 3px;
  	border: 1px solid #B9B9B9;
  	-webkit-appearance: none;
  	background-image: -webkit-gradient( 
    linear, left top, left bottom,
    color-stop(0, #E8E8E8),
    color-stop(0.5, #E8E8E8),
    color-stop(0.5, #FDFDFD),
    color-stop(1, #FDFDFD));
 	box-shadow: 0px 1px 2px #AFAFAF inset;
  	color: #7F7F7F;
    padding: 0;
    cursor: pointer;
	margin-top: 15px}

	input[type=checkbox]:checked {
  	background-image: -webkit-gradient( 
    linear, left top, left bottom,
    color-stop(0, #0098b1),
    color-stop(0.5, #0098b1),
    color-stop(0.5, #22adc3),
    color-stop(1, #7fc8d4));
  	box-shadow: 0px 1px 2px #0098b1 inset;
  	color: #fff;
  	border: 1px solid #0098b1}

	input[type=checkbox]:before {
  	content: 'NO';
  	border-radius: 3px;
  	border-top: 1px solid #F7F7F7;
  	border-right: 1px solid #999999;
  	border-bottom: 1px solid: #BABABA;
  	border-left: 1px solid #BDBDBD;
  	background-image: -webkit-gradient( 
    linear, left top, left bottom,
    color-stop(0, #D8D8D8),
    color-stop(1, #FBFBFB));
  	height: 20px;
  	width: 42px;
  	display: inline-block;
  	text-indent: 54px}

	input[type=checkbox]:checked:before {
  	content: 'YES';
  	text-indent: -33px;
  	margin-left: 43px}


	/*---Footer---*/
	#footer {position: initial; height: auto}


	
}