/*
colors:
black, white,
pink #d7827d (RGB:215/130/125),
blue #35aae0 (53/170/224)
gray #545763 (84/87/99).

*/

html{overflow-y:scroll; background:#545763;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */

body{margin:0; padding:0; font-size:13px; font-family:Arial, "Helvetica Neue", Arial, sans-serif; color:#545763; background-color:#232323; }

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

a{outline:none; text-decoration:none;}
a:hover{text-decoration: underline;}

code{font-weight:normal; font-style:normal; font-family:Arial, "Helvetica Neue", Arial, sans-serif;}

.spacer{height: 20px;}
.fl_left{float:left;}
.fl_right{float:right;}

img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'� '; font-size:26px;}
q:after{content:' �'; font-size:26px; line-height:0;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}

.row1, .row1 a{color:#FFFFFF; background-color:#35aae0;}
.row1 a:hover{color:#545763; background-color:#35aae0;}
.row2{color:#608BA3; background-color:#FFFFFF;} /* textfarbe body */
.row2 a{color:#35aae0; background-color:#FFFFFF;}
.row2 a:hover{color:#545763; background-color:#FFFFFF;}
.row3, .row3 a{color:#35aae0; background-color:#35aae0;}

/*----------------------------------------------Generalise-------------------------------------*/

#header, #container, #footer{display:block; width:960px; margin:0 auto;}

nav ul{margin:0; padding:0; list-style:none;}
h1, h2 {color:#35aae0;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:25px; font-weight:normal; font-style:normal; line-height:normal;}
h3 {font-size:18px; }
#header h1 a{color:#ffffff;}
#header h2 {
    color: #FFFFFF;}

address{font-style:normal;}

blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'� '; font-size:26px;}
blockquote:after, q:after{content:' �'; font-size:26px; line-height:0;}

form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}

.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
.one_third{width:300px;}
.two_third{width:630px; }
.three_third{width:960px; float:none; margin-right:0; clear:both;}
.lastbox{margin-right:0;}
.full_length{height: 8960px;}
.flex{}
.with_slider_lenght{height:600px;}

/*----------------------------------------------Header-------------------------------------*/

#header{width:1000px; }
/*#header #headerContent{float:right; display:inline-block;}*/
#header #Logo{float:left; width:20%; padding:5px ;display:inline-block;}
#header #hgroup{float:left; padding:10px 0;display:block; width:100%}
#header #hgroup h1, #header #hgroup h2{font-weight:normal; text-transform:none; margin: 0 auto;}
#header #hgroup h1{font-size:36px;}
#header #hgroup h1 a:hover{text-decoration: none}
#header #hgroup h2{font-size:13px;}
#header #hgroup div{float:right; display:inline-block; width:220px; position:relative; left:-135px;}

#subheader1 {width: 130px; float: left; margin:7px; text-align: left;}
#subheader2 {width: 830px; float: left; margin:7px; text-align: left;}
#header-logo a img{width:300px;}


#header form{display:inline-block; width:290px; float:right; margin:40px 0 0 0; padding:0;}
#header form input{display:inline-block; float:left; width:200px; margin:0; padding:5px; color:#0E3846; background-color:#FFFFFF; border:1px solid #666666;}
#header form #sf_submit{display:block; float:right; width:70px; font-size:12px; font-weight:bold; text-transform:uppercase; color:#FFFFFF; background-color:#35AAE0; border:none; cursor:pointer;}

#header nav{display:inline-block; width:80%; margin:0;  border-bottom:1px solid #35aae0;}
#header nav ul{padding: 0; margin: 0; list-style: none; position: relative; padding-top: 10px; padding-bottom: 10px }
#header nav li{display:inline; margin-right:25px; text-transform:uppercase; position: relative; padding-bottom: inherit; padding-top: inherit }
#header nav li.last{margin-right:0;}
#header nav li a{}
#header nav li a:hover{color:#545763; background-color:#35aae0;}

#header nav li ul{display: none;top:0;left:0; padding: 10px 0 0 0; width:auto; height:auto; margin:0; z-index: 2}
#header nav li ul div {border: 1px solid darkgrey; width:12em; height:auto; min-height:2em; z-index: 2;color: #35aae0;
    background-color: #FFFFFF; vertical-align:middle;}
#header nav li ul div a {color: #35aae0; background-color: #FFFFFF}
#header nav li ul div a:hover {color: #545763; background-color: #FFFFFF}

#header nav li ul div li {vertical-align: middle; margin-left: 4px; z-index: 2; text-align: center}
#header nav li:hover ul{display: block; position: absolute; top:auto; z-index: 2; left:0;}


/*----------------------------------------------Content Area-------------------------------------*/

/* Success, info and error messages */

.alert-message{padding:10px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}
.alert-message-form{ padding:2px; margin-bottom: 10px; margin-top:5px; border:1px solid transparent; border-radius: 4px}
.alert-message-form ul {list-style: none; margin: 5px}
.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6
}

.success a {
    background-color: #dff0d8;
    text-decoration: underline;
}

.success a:hover {
    background-color: #dff0d8;

}

.info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
}

.info a {
    background-color: #d9edf7;
    text-decoration: underline;
}
.info a:hover {
    background-color: #d9edf7;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc
}

.warning a {
    background-color: #fcf8e3;
    text-decoration: underline;
}

.warning a:hover {
    background-color: #fcf8e3;
}

.error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
}

.error a {
    background-color: #f2dede;
    text-decoration: underline;
}

.error a:hover {
    background-color: #f2dede;
}



#container {
    min-height:1000px;
    padding: 30px 0;
}

#container section {
    display: block;
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
}

#container .last {
    margin: 0;
}

#container .more {
    text-align: right;
}

/* ------Slider-----*/

#container #slider{
    position: relative;}
#container #slider figure{}
#container #slider figure #headerpiccontainer {float:left; margin:.5em 10px .5em 0; overflow:hidden;} /* Wrap the header pic to allow parts of the picture to disappear*/
#container #slider figure #headerpic{float:left; width:630px; height:270px; margin: -90px 0 0px 0;} /* The picture shown on every page above content. negative margin makes parts of the too large pic disappear */
#container #slider figure figcaption{display:block; float:right; min-height:160px; padding:20px;
    color:#545763; line-height:1.8em; position: absolute; top:auto; right:0}
#container #slider figure figcaption div a {color: #35aae0; background-color: #FFFFFF}
#container #slider figure figcaption div a:hover {color: #545763; background-color: #FFFFFF}
#support-slider {position: absolute; margin-top: 200px; width:260px}
#support-slider-link:hover {color: #545763;}

#side-logo div a img { margin-left: 50px; width:300px;}
#side-flow{margin-top: 140px;}
#side-flow img { width:250px;  height:491px;}
#side-news{margin-top:730px; width: 250px; display: block; float:right}
.news-item{border-radius: 15px; border: #545763 1px solid; padding-left: 10px; padding-top: 5px; padding-right: 5px}
.side-news-date{text-align: right; color: darkgrey}


#container #slider figure figcaption a{color:#35aae0; background-color:#545763;}
#container #slider figure figcaption a:hover{color:#545763; background-color:#545763;}
#container #slider figure figcaption img{ display: block; align-items: center}
#container #slider figure h2{padding-bottom:8px; border-bottom:1px solid #35aae0;}
#container #slider figure footer{}

/* ------Main Content-----*/

#container #homepage{display:block; width:100%; line-height:1.6em;}

#container #homepage .services{margin:0; font-size:12px;}
#container #homepage .services article{}
#container #homepage .services article h2{margin-bottom:10px; text-transform:uppercase; font-size:14px; font-weight:bold;}
#container #homepage .services article img{float:left; padding:4px; border:1px solid #D6D6D6;}
#container #homepage .services article p{display:block; float:right; width:200px; margin:0; padding:0;}
#container #homepage .services article footer{padding-top:10px; clear:both;}

#container #homepage .spacer{display:block; width:100%; height:30px; margin:0; padding:0; clear:both;}

#container #about{display:block; width:100%; line-height:1.6em; text-align: center;}
#container #about a{background-color:#FFFFFF;}
#container #about a:hover{background-color:#FFFFFF;}
#container #graph{width:100%;}

.faqheadline {color:#35aae0}
/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:20px 0; color: #FFFFFF}
#footer p{margin:0; padding:0; vertical-align: middle}
#footer .logos{float:left;}
#footer p a {color: #FFFFFF}
#footer p a:hover {color: #545763}

#footer p div {color: #FFFFFF}

/* Bootstrap icons */
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.badge{color:#fff;background-color:#333}
.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;
    font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;
    vertical-align:middle;background-color:#777;border-radius:10px}
.badge:empty{display:none}

.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-user:before {
  content: "\e008";
}