@charset "UTF-8";
/* 
 Minifier: https://github.com/jakubpawlowicz/clean-css-cli 
*/
/* SASS definitions */
/* Border radius */
/* Colours */
/* Sizes and Widths */
/* Viewport Sizes:

Sass:
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 !!
https://css-tricks.com/approaches-media-queries-sass/


https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://screensiz.es/phone
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

  - 240 / 320 Pixel
  - 480 Pixel
  - 640 Pixel 
  - 768 Pixel
  - 1024 Pixel 
  - 1400 Pixel
  - 1680 Pixel
  - 1920 Pixel

*/


/*@import "scrollbars.css";*/


/* ===============
   GLOBAL SETTINGS 
   =============== */


*,
:after,
:before,
body,
html {
  -webkit-box-sizing: border-box;
}

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

img {
  display: block;
  border: 0px;
  vertical-align: middle;
}


img.flexpic {
  width: 100%;
  height: auto;
}

a {
  outline: none;
}


/* =============================================================================
   Font setup
============================================================================= */



@font-face {
    font-family: 'regular';
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff'),
         url('fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'bold';
    src: url('fonts/roboto-bold-webfont.eot');
    src: url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff'),
         url('fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'italic';
    src: url('fonts/roboto-italic-webfont.eot');
    src: url('fonts/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('fonts/roboto-italic-webfont.woff') format('woff'),
         url('fonts/roboto-italic-webfont.ttf') format('truetype'),
         url('fonts/roboto-italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'medium';
    src: url('fonts/roboto-medium-webfont.eot');
    src: url('fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff'),
         url('fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'condensed';
    src: url('fonts/robotocondensed-regular-webfont.eot');
    src: url('fonts/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
         url('fonts/robotocondensed-regular-webfont.woff') format('woff'),
         url('fonts/robotocondensed-regular-webfont.ttf') format('truetype'),
         url('fonts/robotocondensed-regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'condensedbold';
    src: url('fonts/robotocondensed-bold-webfont.eot');
    src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
         url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
         url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
         url('fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}






h1, h2, h3, h4, h5 {
 font-family: 'bold', Arial, Helvetica, sans-serif;
 font-weight: normal;
}

b, strong { 
 font-family: 'bold', Arial, Helvetica, sans-serif;
 font-weight: normal;
}

i, em { 
 font-family: 'italic', Arial, Helvetica, sans-serif;
 font-style: normal;
}



p {
    font-size: 16px;
    line-height: 26px;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}



body, html {
  margin: 0px;
  height: 100vh;
  width: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -moz-osx-font-smoothing: grayscale;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: regular, Arial, Helvetica, 'Helvetica Neue', sans-serif; 
  font-size: 16px; 
  color: #000000;
  -webkit-tap-highlight-color: transparent;
}

body {
  /*-ms-overflow-style: scrollbar;*/
  /*overflow-x: hidden;*/
}




/* 
 Customizable Full BG Image:
 https://css-tricks.com/perfect-full-page-background-image/ 
 Sass: https://stackoverflow.com/questions/5448044/sass-background-image-mixin
*/
.imageGKP {
  background-image: url(bg/gkp.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageBlurA {
  background-image: url(bg/BG-Blur-01.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageBlurB {
  background-image: url(bg/BG-Blur-02.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageDefaultA {
  background-image: url(bg/Cologne.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageDefaultC {
  background-image: url(bg/Default.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageDefaultD {
  background-image: url(bg/Drops.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.imageDefaultE {
  background-image: url(bg/Leafs.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html {
  /*background: url(bg/BG-Blur-02.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}


/* =============================================================================
   Animation classes
============================================================================= */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


.animated {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}



/* ===============
   GKP SPECIFIC 
   =============== */


/*** TOP BAR ***/


.topBar {
  display: block;
  position: fixed;
  width: 100%;
  height: 70px;
  z-index: 10;
  margin: 0px;
  overflow: hidden; 
  background-color: #FFFFFF;
  color: #000000;
}


/* Wichtig: Später finetuing für High-DPI-Displays:
- https://css-tricks.com/snippets/css/retina-display-media-query/
- https://www.sitepoint.com/css-techniques-for-retina-displays/
- https://blog.kulturbanause.de/2013/02/retina-media-queries/
*/
/*@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  .topBar {
  height: 35px;
  background-color: fuchsia;
  
}

}*/


@media only screen and (min-width: 768px) and (max-width: 1200px) {  
 .topBar {
   height: 50px;
  }
}

@media only screen and (min-width: 240px) and (max-width: 767px) {  
 .topBar {
   height: 60px;
  }
}

/* TOP BAR Details */

.topBar--LogoArea, 
.topBar--NavArea  {
  display: block;
  height: 70px; 
  width: auto;
  background-color: #FFFFFF; 
  color: #000000;
}

.topBar--HamburgerArea  {
  float: left;
  display: none; 
  width: auto; 
  margin: 0px;
}


/* HAMBURGER MENU Animation */

.hamburger { 
  display: block; 
  position: relative;
  padding: 14px 17px 6px 18px;
  display: inline-block;
  cursor: pointer;
  text-transform: none;
  background-color: transparent;
  border: 0px;
  margin: 0px;
  overflow: visible; 
}


.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { 
  background: #093247;
}

.hamburger-box { 
  width: 26px;
  height: 25px;
  display: inline-block;
  position: relative; 
}

.hamburger-inner {
  display: block; 
  position: relative; 
  top: 9px;
  margin-top: 0px; 
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after { 
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; 
}

.hamburger-inner::before, 
.hamburger-inner::after {
  content: "";
  display: block; 
}

.hamburger-inner::before {
  top: 7px; 
}

.hamburger-inner::after {
  bottom: 7px; 
}


.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {  
  position: absolute; 
  display: block;
  width: 26px;
  height: 4px; 
  border-radius: 0px; 
  background: #2ab6a7; 
  background: -moz-linear-gradient(left,  #2ab6a7 0%, #1eaacd 100%); 
  background: -webkit-linear-gradient(left,  #2ab6a7 0%,#1eaacd 100%); 
  background: linear-gradient(to right,  #2ab6a7 0%,#1eaacd 100%); 
}


.hamburger--spin .hamburger-inner { 
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}


.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; 
}

.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}

.hamburger--spin.is-active .hamburger-inner { 
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}

.hamburger--spin.is-active .hamburger-inner::before {
  top: 0px;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
}

.hamburger--spin.is-active .hamburger-inner::after { 
  bottom: 0px;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}  



.topBar--LogoArea {
  float: left; 
  margin-left: 30px;
}

.topBar--NavArea { 
  /*display: block;
  width: 412px;
  height: 70px; */
  float: right;
  /*background-image: url(img/TopBarNav-Desktop.png); 
  background-repeat: no-repeat; 
  background-size: 412px 70px; 
  background-position: right top;*/
}



.topBar--LogoArea a, 
.topBar--NavArea a, 
.topBar--NavArea div {
  display: inline-block; 
  position: relative; 
  height: 70px; 
  width: auto;
  text-indent: -99999px;
  /*background-color: yellow; */
  /*text-indent: -99999px;*/
}

.topBar--LogoArea a {
  float: right;
}

.topBar--NavArea a, 
.topBar--NavArea div {
  float: right; 
  background-color: transparent;
}

/* indiv. Links in TopBar Nav */

.topBar--NavArea a.logoff {
  width: 58px; 
  background-image: url('img/topbar/desktop/TbLogOff.svg'); 
  background-repeat: no-repeat;
  background-size: 27px 24px;
  background-position: left 23px;
}

.topBar--NavArea a.usersettings {
  width: 69px; 
  background-image: url('img/topbar/desktop/TbUserSettings.svg'); 
  background-repeat: no-repeat;
  background-size: 49px 24px;
  background-position: right 23px;
}

.topBar--NavArea a.notifications {
  width: 72px; 
  background-image: url('img/topbar/desktop/TbMessages.svg'); 
  background-repeat: no-repeat;
  background-size: 43px 34px;
  background-position: 20px 14px;
  text-indent: 0px; 
  background-color: transparent;
  color: #FFFFFF; 
  text-decoration: none;
}

/* display msg counter */
.topBar--NavArea a.notifications span {
  position: absolute;
  display: block; 
  background-color: transparent; 
  color: #FFFFFF;
  width: 23px; 
  max-width: 23px;
  font-family: condensedbold, Arial, Helvetica, 'Helvetica Neue', sans-serif; 
  font-size: 13px;  
  line-height: 13px; 
  text-align: center;
  left: 40px; 
  top: 20px;
}

.topBar--NavArea a.help {
  width: 64px; 
  background-image: url('img/topbar/desktop/TbHelp.svg'); 
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 20px 23px;
}

.topBar--NavArea a.search {
  width: 64px; 
  background-image: url('img/topbar/desktop/TbSea.svg'); 
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 20px 23px;
  
}

.topBar--NavArea div.diffToLogoff {
  width: 102px;
}

.topBar--NavArea div.vertsep {
  width: 1px; 
  background-color: transparent; 
  background-image: url('img/topbar/sep.gif'); 
  background-repeat: no-repeat;
  background-size: 1px 28px;
  background-position: 0px 21px;
}



.topBar--SepVert {
  display: none; 
  position: relative;
  float: left;
  width: 1px;
  height: 22px;
  background-color: #dedede; 
  /*background-color: green; */
  color: #000000; 
  text-indent: -99999px;
  margin-top: 14px;
}





/* indiv. hrefs */ 



.topBar--LogoArea a.CorpLogo {
  width: 182px;
  height: 70px;
}

 a.CorpLogo img { 
  position: absolute;
  width: 182px;
  height: 36px;
  top: 17px;
}




@media only screen and (min-width: 768px) and (max-width: 1200px) {  
  .topBar--LogoArea, 
  .topBar--NavArea {
    height: 50px; 
  }

.topBar--HamburgerArea {
  display: block;
  /*height: 50px; */
  /*margin: 0px 17px 0px 18px; */
  background-color: transparent; 
  color: #000000;
}


.topBar--SepVert {
  display: block; 
  position: relative;
  float: left;
  width: 1px;
  height: 22px;
  background-color: #dedede; 
  /*background-color: green; */
  color: #000000; 
  text-indent: -99999px;
  margin-top: 14px;
}

  .topBar--LogoArea {
    margin-left: 17px;
  }

  /* indiv. hrefs */
  .topBar--LogoArea a.CorpLogo {
    width: 152px;
    height: 30px; 
    margin-left: 0px;
  }

  a.CorpLogo img { 
    width: 152px;
    height: 30px;
    top: 10px;
  }

  .topBar--HamburgerArea a.Hamburger { 
    display: block;
    width: 26px;
    height: 50px;  
    margin-right: 0px;
    /*background-color: red;*/
}

  a.Hamburger img { 
    position: absolute;
    width: 26px;
    height: 21px;
    top: 14px;
  }

  .topBar--NavArea { 
    /*width: 342px;*/
    height: 50px; 
    /*background-image: url(img/TopBarNav-1024.png); 
    background-size: 342px 50px; */
  } 


  .topBar--NavArea a, 
  .topBar--NavArea div { 
    height: 50px;
  }



.topBar--NavArea a.logoff {
  width: 45px; 
  background-image: url('img/topbar/tablet/TbLogOff.svg'); 
  background-repeat: no-repeat;
  background-size: 25px 22px;
  background-position: left 14px;
}

.topBar--NavArea a.usersettings {
  width: 64px; 
  background-image: url('img/topbar/tablet/TbUserSettings.svg'); 
  background-repeat: no-repeat;
  background-size: 45px 22px;
  background-position: right 14px;
}

.topBar--NavArea a.notifications {
  width: 65px; 
  background-image: url('img/topbar/tablet/TbNotifications.svg'); 
  background-repeat: no-repeat;
  background-size: 39px 30px;
  background-position: 19px 6px; 
}



/* display msg counter */
.topBar--NavArea a.notifications span {
  font-size: 11px;  
  line-height: 11px; 
  left: 35px; 
  top: 11px; 
  /*background-color: green;*/
}


.topBar--NavArea a.help {
  width: 60px; 
  background-image: url('img/topbar/tablet/TbHelp.svg'); 
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: 19px 14px;
}

.topBar--NavArea a.search {
  width: 60px; 
  background-image: url('img/topbar/tablet/TbSea.svg'); 
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: 19px 14px;  
}

.topBar--NavArea div.diffToLogoff {
  width: 64px;
}

.topBar--NavArea div.vertsep {
  background-size: 1px 22px;
  background-position: 0px 14px;
}



}


@media only screen and (min-width: 240px) and (max-width: 767px) {  
  .topBar--LogoArea, 
  .topBar--NavArea {
    height: 60px; 
  }

  .topBar--LogoArea {
    float: none; 
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
}

.topBar--HamburgerArea {
  display: block;
  /*height: 60px; */
  background-color: transparent; 
  color: #000000;
  /*margin-left: 18px;*/
}

.hamburger { 
  padding: 19px 17px 11px 18px; 
}



.SepVert.Hamburger { 
  display: none;

}

.topBar--NavArea { 
    width: 70px;
    height: 60px; 
    background-image: url(img/TopBarNav-Mobile.png); 
    background-size: 70px 60px; 
  }

  .topBar--NavArea a, 
  .topBar--NavArea div { 
    display: none;
  }





  /* indiv. hrefs */

  .topBar--LogoArea {
  margin-left: 0px;
}

  .topBar--LogoArea a.Hamburger { 
    display: block;
    width: 26px;
    height: 60px;  
    margin-right: 0px;
    /*background-color: red;*/
}

  a.Hamburger img {  
    position: absolute;
    width: 26px;
    height: 21px;
    top: 20px;
  }


  .topBar--LogoArea a.CorpLogo {
    width: 152px;
    height: 30px; 
  }

  a.CorpLogo img { 
    width: 152px;
    height: 30px;
    top: 15px;
  }
}



/*** MAIN NAV BAR ***/

/*
 https://stackoverflow.com/questions/7347532/how-to-position-a-div-scrollbar-on-the-left-hand-side
*/

.navBar {
  position: fixed;
  z-index: 5;
  display: block;
  width: 240px;
  height: 100%;
  background-color: rgba(9,50,71,0.85);
  color: #FFFFFF;
  top: 0px;
  /*left: -212px;*/
  left: 0px;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: 0.35s ease;
  -moz-transition: 0.35s ease;
  -o-transition: 0.35s ease;
  transition: 0.35s ease;
  /*direction: rtl;*/
  overflow-x: hidden; 
  /*overflow-y: auto;*/
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.navBar.slideout {
    -webkit-transform: translate(178px, 0px);
    -moz-transform: translate(178px, 0px);
    -o-transform: translate(178px, 0px);
    -ms-transform: translate(178px, 0px);
    transform: translate(178px, 0px);
  }


  .navBar.slidein {
    -webkit-transform: translate(-178px, 0px);
    -moz-transform: translate(-178px, 0px);
    -o-transform: translate(-178px, 0px);
    -ms-transform: translate(-178px, 0px);
  }

 


@media only screen and (min-width: 768px) and (max-width: 1200px) {  
  .navBar {
    background-color: rgba(9,50,71,1);
    left: -178px;
  }
}

@media only screen and (min-width: 240px) and (max-width: 767px) {  
 .navBar { 
    background-color: rgba(9,50,71,1);
    left: -240px;
  }

  .navBar.slideout {
    -webkit-transform: translate(240px, 0px);
    -moz-transform: translate(240px, 0px);
    -o-transform: translate(240px, 0px);
    -ms-transform: translate(240px, 0px);
    transform: translate(240px, 0px);
  }
}






/* MENU NAVBAR LEFT */


/* Menu internal accordion nav */


.accordion {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  opacity: 1;
  top: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {  
 .accordion {
  top: 50px;
 }
}

@media only screen and (min-width: 240px) and (max-width: 767px) {  
 .accordion {
   top: 60px;
  }
}

.unit { 
  position: relative; 
  width: 100%; 
}



.accordion a {
  font-family: regular, Arial, Helvetica, sans-serif; 
  font-size: 20px;
  line-height: 62px; 
  letter-spacing: 0px;
  text-decoration: none; 
  color: #FFFFFF; 
  padding-left: 25px;
}

.accordion,
.accordion-toggle, 
.accordion-static { 
  display: block; 
  margin: 0px; 
  width: 100%;
  height: 62px; 
}

/*.subItem a { 
  line-height: 88px; 
  -webkit-transition: background-color .25s linear;
  -moz-transition: background-color .25s linear;
  -o-transition: background-color .25s linear;
  -ms-transition: background-color .25s linear;
  transition: background-color .25s linear;  
}
*/




.accordion-toggle, 
.accordion-static {
    position: relative;
    z-index: 1;
    left: 0;
    display: block;
    cursor: pointer; 
    background-color: transparent; 
    /*color: #FFFFFF;*/
    border: none;
    padding: 0px;
    -webkit-transition: background-color .35s linear;
    -moz-transition: background-color .35s linear;
    -o-transition: background-color .35s linear;
    -ms-transition: background-color .35s linear;
    transition: background-color .35s linear; 
    background-size: 26px 26px; 
    background-position: 196px center; 
    background-repeat: no-repeat;
}


.accordion-toggle.default, 
.accordion-static.default {
    color: rgba(255,255,255,.75);
    -webkit-transition: color .25s linear;
    -moz-transition: color .25s linear;
    -o-transition: color .25s linear;
    -ms-transition: color .25s linear;
}


.accordion-toggle.aufgeklappt {
  background-color: rgba(5,30,43,1); 
} 




.accordion-toggle:hover, 
.accordion-static:hover {
    background-color: rgba(5,30,43,1);
    color: #FFFFFF;
}


.accordion-toggle.active, 
.accordion-static.active {
    background-color: #29ab94;
}




.accordion img.arr {
   position: absolute;
   z-index: 2;
   /*right: 62px;*/
   left: 165px;
   top: 27px;
   width: 13px;
   height: 8px;
   margin: 0px;
   -webkit-transition: all .55s .15s;
   -ms-transition: all .55s .15s;
   transition: all .55s .15s;
   display: block; 
   opacity: .8;
}


.accordion img.toggle-up {
    transform: rotate(180deg); 
    opacity: 1;
}

.accordion img.toggle-down {
    transform: rotate(0); 
    opacity: 1;
}



/*** SYMBOLS ***/

/* as images for viewports < 1200 */

.unit .mobilePageIcon { 
  position: absolute; 
  z-index: 3;
  display: none; 
  width: 62px; 
  height: 62px; 
  right: 0px; 
  top: 0px;
  background-color: transparent; 
  cursor: pointer;
}


/* as background-images for viewports > 1200 */


.unit.dashboard a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Dashboards.svg');
}

/*.unit.dashboard a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Dashboards-Dimmed.svg');
}*/

.unit.dashboard a.accordion-toggle.active  { 
  background-image: url('img/mainnav/symbols/Dashboards-Active.svg');
}



.unit.analysen a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Analyse.svg');
}

/*.unit.analysen a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Analyse-Dimmed.svg');
}*/

.unit.analysen a.accordion-toggle.active  { 
  background-image: url('img/mainnav/symbols/Analyse-Active.svg');
}



.unit.alarme a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Alarme.svg');
}

/*.unit.alarme a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Alarme-Dimmed.svg');
}*/

.unit.alarme a.accordion-toggle.active  { 
  background-image: url('img/mainnav/symbols/Alarme-Active.svg');
}



.unit.berichte a.accordion-static  { 
  background-image: url('img/mainnav/symbols/Berichte.svg');
}

/*.unit.berichte a.accordion-static  { 
  background-image: url('img/mainnav/symbols/Berichte-Dimmed.svg');
}*/

.unit.berichte a.accordion-static.active  { 
  background-image: url('img/mainnav/symbols/Berichte-Active.svg');
}




.unit.massnahmen a.accordion-static  { 
  background-image: url('img/mainnav/symbols/Massnahmen.svg');
}

/*.unit.massnahmen a.accordion-static  { 
  background-image: url('img/mainnav/symbols/Massnahmen-Dimmed.svg');
}*/

.unit.massnahmen a.accordion-static.active  { 
  background-image: url('img/mainnav/symbols/Massnahmen-Active.svg');
}



.unit.admin a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Admin.svg');
}

/*.unit.admin a.accordion-toggle  { 
  background-image: url('img/mainnav/symbols/Admin-Dimmed.svg');
}*/

.unit.admin a.accordion-toggle.active  { 
  background-image: url('img/mainnav/symbols/Admin-Active.svg');
}


/* change symbol pics display methods depending on viewport */

@media only screen and (min-width: 240px) and (max-width: 1200px) {  

.unit .mobilePageIcon { 
  display: block; 
 }

 .unit .mobilePageIcon.none { 
  display: none;
 }
}



/*** ACCORDION SUBNAV LINKS ***/

/* Default Elements */

.accordion-content {
    position: relative;
    display: none;
    background-color: rgba(5, 30, 43, 1); 
    padding: 26px 0px 26px 26px;
}

.accordion-content.active {
    display: block;
}


.accordion-content a { 
    position: relative;
    display: block; 
    height: 34px; 
    width: 100%; 
    background-color: transparent;
    font-family: medium, Arial, Helvetica, 'Helvetica Neue', sans-serif;  
    font-size: 16px; 
    line-height: 34px; 
    margin: 0px;
    color: rgba(255,255,255,.6);
    padding-left: 18px;
    -webkit-transition: color .35s ease-out;
    -moz-transition: color .35s ease-out;
    -o-transition: color .35s ease-out;
    transition: color .35s ease-out;
}

  .accordion-content a:hover { 
    color: rgba(255,255,255,1);
  }

  .accordion-content a.on { 
    color: rgba(255,255,255,1);
    /*color: rgba(45,185,157,1);*/
}

.accordion-content a.indent { 
    margin: 0px;
    padding-left: 42px;
}

.accordion-content a .vertsep { 
    position: absolute;
    display: block; 
    height: 34px; 
    width: 4px; 
    background-color: rgba(255,255,255,.25); 
    color: #000000;
    left: 0px; 
    top: 0px;
    -webkit-transition: background-color .25s ease-out; 
    -moz-transition: background-color .25s ease-out; 
    -o-transition: background-color .25s ease-out; 
    transition: background-color .25s ease-out;
  }

  .accordion-content a.on .vertsep { 
    background-color: #33dabd;
  }

  .accordion-content a.indent.on .vertsep { 
    background-color: #FFFFFF;
  }

  .accordion-content a .vertsep.highlighted { 
    background-color: rgba(51,218,189,1);  
  }

  .accordion-content a.indent .vertsep.highlighted { 
    background-color: rgba(255,255,255,1);  
  }

/*** ABSTANDSAUSGLEICH FÜR OVERFLOW-ACCORDIONS ***/

.diffToFooter { 
  display: block; 
  height: 50px; 
}

.diffToFooterMobile  { 
  display: none; 
}

@media (hover: none) { 
 .diffToFooter { 
   height: 10px; 
 }
  .diffToFooterMobile  { 
    display: none;
    height: 150px;
    /*background-color: rgba(5,30,43,1);*/
  }
}


/*** CONTENT ***/



.content {
  position: absolute;  
  z-index: 4;
  background-color: rgba(255,255,255,0.9);
  color: #000000;
  min-width: 700px;
  max-width: 1600px; 
  height: auto;
  left: 60%;
  top: 200px; 
  padding: 40px;
  -webkit-transform: translateX(-60%); 
  transform: translateX(-60%); 
  border-radius: 4px;
}

#slideButton {
  display: block; 
  background-color: #e6e6e6; 
  border: 1px solid #000000;
  width: 300px; 
  height: 50px;
  padding: 0px;
  cursor: pointer; 
  text-align: center; 
  line-height: 50px;  
  font-family: condensedbold, Arial, Helvetica, 'Helvetica Neue', sans-serif; 
  font-size: 1em;
  text-transform: uppercase; 
  margin-bottom: 20px;
}

@media only screen and (min-width: 240px) and (max-width: 1200px) {  
 #slideButton {
  display: none;
 }
}

@media only screen and (min-width: 641px) and (max-width: 840px) {  
 .content {
   min-width: 600px;
   max-width: 600px; 
   top: 100px; 
  }
}

@media only screen and (min-width: 321px) and (max-width: 640px) {  
 .content {
   min-width: 400px;
   max-width: 400px; 
   top: 100px; 
  }
}


@media only screen and (min-width: 240px) and (max-width: 320px) {  
 .content {
   min-width: 260px;
   max-width: 260px; 
   top: 80px; 
  }
}



h1 {
  font-family: condensedbold, Arial, Helvetica, 'Helvetica Neue', sans-serif; 
  font-size: 1.75em;
  text-transform: uppercase; 
  margin-bottom: 10px;
}


@media only screen and (min-width: 240px) and (max-width: 320px) {  
 h1 {
  font-size: 1em;
  text-transform: uppercase; 
  margin-bottom: 6px;
 }
}

.content a { 
  font-family: medium, Arial, Helvetica, 'Helvetica Neue', sans-serif; 
  font-size: 1em; 
  line-height: 28px;
  text-decoration: none; 
  color: #000000; 
  border-bottom: 1px dashed #000000;
  padding-bottom: 1px;
  color: #000000;
}




.content a:hover {
  text-decoration: none;
  border-bottom: 2px solid #000000;
  padding-bottom: 1px;
  color: #000000;
}


/*** FOOTER ***/

footer {
  display: block;
  position: fixed; 
  /*bottom: -60px;*/
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 60px;
  background-color: #FFFFFF;
  color: #000000;
  margin: 0px;
  overflow: hidden;
  /*opacity: 1;
  -moz-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;*/
}

footer .left, 
footer .right { 
  display: block;
  position: relative; 
  height: 60px; 
  text-indent: -999999px;
  background-color: transparent; 
}

footer .left {  
  float: left;
  width: 811px; 
  background-image: url('img/footer/Desktop-left.png'); 
  background-repeat: no-repeat; 
  background-size: 811px 60px;
  background-position: left top;
}

footer .right { 
  float: right;
  width: 584px;
  background-image: url('img/footer/Desktop-right.png'); 
  background-repeat: no-repeat; 
  background-size: 584px 60px;
  background-position: right top;
}

footer .center {  
  display: none;
}




@media only screen and (min-width: 768px) and (max-width: 1400px) {  
 footer {
   height: 50px;
   /*bottom: -50px;*/
  }


footer .left, 
footer .right { 
  height: 50px; 
}

footer .left {  
  width: 396px; 
  background-image: url('img/footer/Tablet-left.png'); 
  background-repeat: no-repeat; 
  background-size: 396px 50px;
}

footer .right { 
  float: right;
  width: 574px;
  background-image: url('img/footer/Tablet-right.png'); 
  background-repeat: no-repeat; 
  background-size: 574px 50px;
}

footer .center {  
  display: none;
}
}

@media only screen and (min-width: 240px) and (max-width: 767px) {  
 footer {
   height: 40px;
   display: none;
    /*position: relative; */
   /*bottom: -40px;*/
  }


footer .left, 
footer .right { 
  display: none;
}

footer .center {  
  display: block;
  background-color: transparent; 
  width: 335px; 
  height: 40px; 
  margin: 0px auto 0px auto; 
  background-image: url('img/footer/Mobile.png'); 
  background-repeat: no-repeat; 
  background-size: 335px 40px;
}

}



.contentOverlay {
  display: block;
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  /*background-color: $GPDarkBlue;  */
  background-color: #000000;
  color: #000000;
  top: 0px;
  left: 0px;
  overflow-x: hidden;
  opacity: 0;
  -moz-transition: opacity 0.55s ease-in-out;
  -webkit-transition: opacity 0.55s ease-in-out;
  transition: opacity 0.55s ease-in-out;
}

.contentOverlay.active {
  opacity: 0.5;
}