html {
   line-height: 1.15;
   /* 1 */
   -webkit-text-size-adjust: 100%;
   /* 2 */
}

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

/* ----------------------------------------------------------- */
body {
   font-family: 'Frutiger', Arial, sans-serif;
   /* ------------------- NICHT VERÄNDERN ------------------------- */
   font-size: 100%;
   /* ------------------------------------------------------------ */
   color: #000;
   text-decoration: none;
   font-weight: normal;
   word-spacing: normal;
   line-height: 1.5;
   background-color: #f1f1f1;
   /*	Hintergrundbilder werden in Chrome mit ausgedruckt	*/
   -webkit-print-color-adjust: exact;
}

@font-face {
   font-family: 'Frutiger';
   src: url('Frutiger.eot');
   src: url('Frutiger.eot?#iefix') format('embedded-opentype'),
      url('Frutiger.woff2') format('woff2'),
      url('Frutiger.woff') format('woff'),
      url('Frutiger.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Frutiger';
   src: url('FrutigerBold.eot');
   src: url('FrutigerBold.eot?#iefix') format('embedded-opentype'),
      url('FrutigerBold.woff2') format('woff2'),
      url('FrutigerBold.woff') format('woff'),
      url('FrutigerBold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}


p {
   margin: 0 0 1rem 0;
}

.center {
   text-align: center;
}

h1 {
   line-height: 1.3;
   font-size: 2.5rem;
   font-weight: normal;
   padding: 0;
   margin: 0 0 0.2rem 0;
}

h2 {
   line-height: 1.2;
   font-size: 1.1rem;
   font-weight: normal;
   margin: 0 0 0.5rem 0;
}

.frame-outer {
   position: relative;
   padding: 0;
   width: 721px;
   margin: 1.3rem auto;
   background-color: #FFF;
   border: 0.02rem solid #A7A9A4;
   box-shadow: -0.1rem 0.1rem 1rem #999;
   font-size: 0.95rem;
}

.frame-outer::after {
   content: "";
   display: block;
   clear: both;
}

.auszeichnung {
   font-size: 1.15rem;
   line-height: 1.4;
}

.logo {
   width: 13rem;
   margin: 2rem auto 1rem;
}

.header {
   position: relative;
   padding: 0 0 1rem 0;
}

.title-block {
   position: absolute;
   bottom: 3%;
   right: 0;
   padding: 0.5rem 3%;
   /* --------------------- FALLBACK FÃœR BROWSER DIE RGBA-WERTE NICHT UNTERSTÃœTZEN -------------------- */
   background: rgb(0, 0, 0);
   /* ------------------------------------------------------------------------------------------------- */
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
}

.Bundesbank-Blau {
   color: #0062a1;
}

.Bundesbank-Grau-background {
   background-color: #f0f0f0;
   padding: 2.5rem 3rem 1rem 3rem;
}

.ausblenden {
   display: block;
}

.aus {
   display: none;
}

.content-unten {
   padding: 2.5rem 3rem 1.7rem 3rem;
}

.content {
   padding: 1rem 3rem 0.6rem 3rem;
}

.content::after {
   content: "";
   display: block;
   clear: both;
}

.box-left {
   float: left;
   width: 48%;
}

.box-right {
   float: right;
   width: 48%;
}

.box-ap-bild {
   float: left;
   width: 15%;
   padding: 0 0.5rem 0 0;
}

.box-ap {
   float: left;
   width: 48%;
   margin: 0.8rem 0 0 0;
}

.box-ap2 {
   float: left;
   width: 48%;
   margin: 0.8rem 0 0 0;
}

.footer {}

.footer::after {
   content: "";
   display: block;
   clear: both;
}

img {
   max-width: 100%;
   border: 0;
}

a:link {
   color: #000;
   text-decoration: none;
}

a:visited {
   text-decoration: none;
   color: #000;
}

a:hover {
   text-decoration: underline;
   color: #000;
}

a:active {
   text-decoration: none;
   color: #000;
}

ul {
   margin: 0 auto 1rem 0.5rem;
   padding-left: 0.5rem;
   list-style-type: none;
}

li {
   position: relative;
   margin: auto;
   padding: 0 0 0.5rem 0;
}

li::before {
   position: absolute;
   top: 0.22rem;
   left: -0.8rem;
   content: "▌";
   font-size: 0.55rem;
   color: #0062a1;
}

.clear {
   clear: both;
   font-size: 0;
   line-height: 0;
}

.hide {
   display: none;
}

.refnr {}

.justifier {
   text-align: justify;
   text-align-last: justify;
}

.justifier:after {
   content: "";
   display: inline-block;
   width: 100%;
}

p:empty {
   height: 1rem;
}

/* -------------- FLEXBOX EIGENSCHAFTEN -------------------- */

/* -----GENERELL: FLEXBOX STATT FLOAT NEHMEN, DA SIE BESSERE OPTIONEN ZUR GESTALTUNG BIETEN, 
JEDOCH DARAUF ACHTEN, DASS FLEXBOXEN NICHT VOM INTERNET EXPLORER 9 UND ABWÄRTS UNTERSTÜTZT WERDEN. => IN DEM FALL FLOATEN --------------------- */

/* .flex {
  display: table;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 1rem 0;
} 
*/

/* -------------- FLEXBOX EIGENSCHAFTEN FÃœR GLEICHE HOHE BOXEN MIT "PLATZ ZWISCHEN DEN BOXEN" (siehe "justify-content: space-between;") -------------------- */

.flex {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   margin: 1.7rem 0 1rem 0;
}

.left {
   width: 48%;
}

.right {
   width: 48%;
}

.flex .left ul,
.flex .right ul {
   text-align: left;
}

.button {
   text-align: center;
   padding-bottom: 2rem;
}

/*_______________________

BUTTON MIT ANIMATION
_______________________
*/
a.apply {
   text-transform: uppercase;
   padding: 0.6rem 2.5rem 0.6rem 2.5rem;
   border: 0.1rem solid #0062a1;
   transition: all 140ms ease 0s;
   color: #0062a1;
   background: #F0F0F0;

}

.apply:hover {
   background: #0062a1;
   text-decoration: none;
   color: #fff;
   padding: 0.6rem 2.5rem 0.6rem 2.5rem;
   margin: 2rem auto;
   border: 0.1rem solid #0062a1;
}

.apply a {
   color: #0062a1 !important;
}

.apply:hover a {
   color: #fff !important;
}

/*_______________________

cards
_______________________
*/
#centerframe {
   margin: 0 auto 0 auto;
   max-width: 719px;
   padding: 0.6rem 3rem 2.5rem 3rem;
   text-align: left;
   line-height: 1.3em;
   background-image: url("gledhintergrund-3.jpg");
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   /*	background-size: 150%;*/
}

.sym-boxes {
   position: static;
   display: flex;
   flex-wrap: wrap;
}

.scene {
   flex: 1 0 auto;
   min-width: 125px;
   min-height: 165px;
   margin: 15px 5px;
   perspective: 200px;
}

.card {
   position: relative;
   width: 100%;
   height: 100%;
   transition: transform 1s;
   transform-style: preserve-3d;
   font-family: FrutigerNextW04-Regular, sans-serif;
}

.card:hover {
   transform: rotateY(180deg);
}

.card-face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
}

.card-face.front {}

.card-face.back {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.7rem;
   line-height: 0.9rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-verlaesslichkeit {
   background: url('verlaesslichkeit.svg') no-repeat center;
   background-size: 37%;
}

.card-face.back-verlaesslichkeit {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-verguetung {
   background: url('verguetung.svg') no-repeat center;
   background-size: 45%;
}

.card-face.back-verguetung {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-karriere {
   background: url('karriere.svg') no-repeat center;
   background-size: 47%;
}

.card-face.back-karriere {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-homeoffice {
   background: url('homeoffice.svg') no-repeat center;
   background-size: 45%;
}

.card-face.back-homeoffice {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-work-life {
   background: url('worklife.svg') no-repeat center;
   background-size: 45%;
}

.card-face.back-work-life {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-weiterbildung {
   background: url('weiterbildung.svg') no-repeat center;
   background-size: 45%;
}

.card-face.back-weiterbildung {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-team {
   background: url('team.svg') no-repeat center;
   background-size: 45%;
}

.card-face.back-team {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

.card-face.front-zusatzleistung {
   background: url('zusatzleistung.svg') no-repeat center;
   background-size: 49%;
}

.card-face.back-zusatzleistung {
   background: #0062a1;
   transform: rotateY(180deg);
   font-size: 0.8rem;
   line-height: 1rem;
   color: #fff;
   padding: 10px;
}

/*Slider*/
.slider-wrap {
   max-width: 719px;
   width: auto;
   min-height: 300px;
   position: relative;
   overflow: hidden;
   margin: 0 0.1rem 0 0.1rem;
   background-image: url("header-geld-slider.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
   padding: 0 0 0 0;
}

/* BEGINN Slider mit 3 Bildern mit transform Animation */

/*
.slideshow-3-bilder {
	position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow-3-bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image 18s linear infinite;
  animation: image-3-bilder 18s linear infinite;
}

@keyframes image-3-bilder {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  33.3333% {
    transform: translateX(0);
	
  }
  
  34.3333% {
    transform: translateX(-100%);

  }
	100%{
		transform: translateX(-100%);
	 opacity: 1;
	}

}
@-webkit-keyframes image-3-bilder {
 0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  33.3333% {
    transform: translateX(0);
	
  }
  
  34.3333% {
    transform: translateX(-100%);

  }
	100%{
		transform: translateX(-100%);
	 opacity: 1;
	}
}

.slideshow-3-bilder li {
    margin:0;
    padding:0;
  list-style: none;
}

.slideshow-3-bilder li:nth-child(1) span {
}

.slideshow-3-bilder li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow-3-bilder li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

ul.slideshow-3-bilder {
    margin:0;
}


.slider-wrap li::before{
                display:none;
}

.slider-wrap ul {
                margin:0;
                padding-left:0px;
                list-style-type: none;
                list-style:none;
			    border-bottom:none;
	            border-color: #fff;
                border-width: 0px;
				padding-bottom:5px;
}
*/

/* ENDE Slider mit 3 Bildern mit transform Animation */

/* BEGINN Slider mit 4 Bildern mit transform Animation */

.slideshow-4-bilder {
   position: absolute;
   width: 100%;
   top: 0px;
   left: 0px;
   z-index: 0;
}

.slideshow-4-bilder li span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   color: transparent;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-animation: image 32s linear infinite 0.2s;
   animation: image-4-bilder 32s linear infinite 0.2s;
}

@keyframes image-4-bilder {
   0% {
      opacity: 1;
      transform: translateX(100%);
   }

   1% {
      transform: translateX(0);
   }

   2% {
      transform: translateX(0%);
   }

   3% {
      transform: translateX(0%);
   }

   4% {
      transform: translateX(0%);
   }

   5% {
      transform: translateX(0%);
   }

   6% {
      transform: translateX(0%);
   }

   7% {
      transform: translateX(0%);
   }

   8% {
      transform: translateX(0%);
   }

   9% {
      transform: translateX(0%);
   }

   10% {
      transform: translateX(0%);
   }

   11% {
      transform: translateX(0%);
   }

   12% {
      transform: translateX(0%);
   }

   25% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(-100%);
      opacity: 1;
   }

}

@-webkit-keyframes image-4-bilder {
   0% {
      opacity: 1;
      transform: translateX(100%);
   }

   1% {
      transform: translateX(0);
   }

   2% {
      transform: translateX(0%);
   }

   3% {
      transform: translateX(0%);
   }

   4% {
      transform: translateX(0%);
   }

   5% {
      transform: translateX(0%);
   }

   6% {
      transform: translateX(0%);
   }

   7% {
      transform: translateX(0%);
   }

   8% {
      transform: translateX(0%);
   }

   9% {
      transform: translateX(0%);
   }

   10% {
      transform: translateX(0%);
   }

   11% {
      transform: translateX(0%);
   }

   12% {
      transform: translateX(0%);
   }

   25% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(-100%);
      opacity: 1;
   }

}

.slideshow-4-bilder li {
   margin: 0;
   padding: 0;
   list-style: none;
}

.slideshow-3-bilder li:nth-child(1) span {}

.slideshow-4-bilder li:nth-child(2) span {
   -webkit-animation-delay: 8s;
   animation-delay: 8s;
}

.slideshow-4-bilder li:nth-child(3) span {
   -webkit-animation-delay: 16s;
   animation-delay: 16s;
}

.slideshow-4-bilder li:nth-child(4) span {
   -webkit-animation-delay: 24s;
   animation-delay: 24s;
}

ul.slideshow-4-bilder {
   margin: 0;
}

.slider-wrap li::before {
   display: none;
}

.slider-wrap ul {
   margin: 0;
   padding-left: 0px;
   list-style-type: none;
   list-style: none;
   border-bottom: none;
   border-color: #fff;
   border-width: 0px;
   padding-bottom: 5px;
}

/* ENDE Slider mit 4 Bildern mit transform Animation */

/* SLIDER ENDE */

/* NEUER SLIDER UNTEN */
.slider-wrap-unten {
   width: auto;
   height: auto;
   position: relative;
   overflow: hidden;
}

.slideshow-3-bilder-unten {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 0;
}

.slideshow-3-bilder-unten li span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   color: transparent;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-animation: image-3-bilder 18s ease-out infinite;
   animation: image-3-bilder 18s ease-out infinite;
}

@keyframes image-3-bilder {
   0% {
      opacity: 1;
      transform: translateX(100%);
   }

   3% {
      transform: translateX(0);
   }

   33.33333% {
      transform: translateX(0);
   }

   36.33333% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(-100%);
      opacity: 1;
   }

}

@-webkit-keyframes image-3-bilder {
   0% {
      opacity: 1;
      transform: translateX(100%);
   }

   3% {
      transform: translateX(0);
   }

   33.33333% {
      transform: translateX(0);
   }

   36.33333% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(-100%);
      opacity: 1;
   }

}

.slideshow-3-bilder-unten li {
   margin: 0;
   padding: 0;
   list-style: none;
}

.slideshow-3-bilder-unten li:nth-child(1) span {}

.slideshow-3-bilder-unten li:nth-child(2) span {
   -webkit-animation-delay: 6s;
   animation-delay: 6s;
}

.slideshow-3-bilder-unten li:nth-child(3) span {
   -webkit-animation-delay: 12s;
   animation-delay: 12s;
}

.slider-wrap-unten ul.slideshow-3-bilder-unten {
   margin: 0;
   padding: 0;
}

.slider-wrap-unten li::before {
   display: none;
}

/* ------SLIDER gnaz unten---------- */
figure {
   display: inline-block;
}

a {
   text-decoration: none;
   color: #8f6b51;
}

a:hover,
a:focus {}

.sread {
   position: absolute;
   left: -9999px;
}

.cursive {
   font-family: 'Mr Dafoe', cursive;
}

.center {
   text-align: center;
}

#slideshow {
   position: relative;
   max-width: 720px;
   height: 300px;
   padding: 0px 0 0 0;
   border: 0px solid #ddd;
   margin: 0 auto 2rem;
   background-color: #f0f0f0;
   /*  
		background: #FFF;
		background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
		background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
		background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
		background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
		background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	*/
   -webkit-border-radius: 2px 2px 2px 2px;
   -moz-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   /*
		-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
		-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
		box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	*/
}

/* avanced box-shadow : http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow */
#slideshow:before,
#slideshow:after {
   position: absolute;
   display: block;
   bottom: 16px;
   width: 50%;
   height: 20px;
   content: " ";
   background: rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   /*
		-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
		-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
		box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	*/
   z-index: -10;
}

#slideshow:before {
   left: 0;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   -ms-transform: rotate(-4deg);
   -o-transform: rotate(-4deg);
}

#slideshow:after {
   right: 0;
   -webkit-transform: rotate(4deg);
   -moz-transform: rotate(4deg);
   -ms-transform: rotate(4deg);
   -o-transform: rotate(4deg);
}

#slideshow .commands {
   position: absolute;
   top: 35%;
   padding: 5px 13px;
   border-bottom: 0;
   font-family: 'Amaranth', Arial, Verdana, sans-serif;
   font-size: 4.0rem;
   color: #aaa;
   text-decoration: none;
   /*
		background-color: #eee;
		background-image: -webkit-linear-gradient(#fff,#ddd);
		background-image: -moz-linear-gradient(#fff,#ddd);
		background-image: -ms-linear-gradient(#fff,#ddd);
		background-image: -o-linear-gradient(#fff,#ddd);
		background-image: linear-gradient(#fff,#ddd);
		text-shadow: 0 0 1px #aaa;
	*/
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   /*
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
		-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
		box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	*/
}

#slideshow .commands:after {
   position: absolute;
   bottom: 65px;
   left: -18px;
   content: attr(title);
   width: 50px;
   padding: 11px;
   background: #0062a1;
   color: #fff;
   font-family: FrutigerNextW04-Regular, sans-serif;
   font-size: 14px;
   text-align: center;
   text-shadow: 0 0 0;
   opacity: 0;
   font-weight: normal;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   /*
		-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	*/
   -webkit-transition: opacity 0.7s, bottom 0.7s;
   -moz-transition: opacity 0.7s, bottom 0.7s;
   transition: opacity 0.7s, bottom 0.7s;
}

#slideshow .commands:before {
   position: absolute;
   bottom: 55px;
   left: 13px;
   content: " ";
   width: 1px;
   height: 1px;
   border-top: 10px solid #0062a1;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   z-index: 100;
   opacity: 0;
   -webkit-transition: opacity 0.7s, bottom 0.7s;
   -moz-transition: opacity 0.7s, bottom 0.7s;
   transition: opacity 0.7s, bottom 0.7s;
}

#slideshow .commands:hover:before {
   bottom: 70px;
   opacity: 1;
}

#slideshow .commands:hover:after {
   bottom: 80px;
   opacity: 1;
}

#slideshow .commands:focus {
   outline: 0;
   -webkit-transform: translate(1px, 2px);
   -moz-transform: translate(1px, 2px);
   -ms-transform: translate(1px, 2px);
   -o-transform: translate(1px, 2px);
   transform: translate(1px, 2px);
}

#slideshow .commands:active {
   -webkit-transform: translate(0, 1px);
   -moz-transform: translate(0, 1px);
   -ms-transform: translate(0, 1px);
   -o-transform: translate(0, 1px);
   transform: translate(0, 1px);
}

#slideshow .prev {
   left: 0px;
   z-index: 1000000000000;
}

#slideshow .next {
   right: 0px;
   z-index: 1000000000000;
}

#slideshow .prev,
#slideshow .next {
   display: none;
}

#slideshow .prev,
#slideshow .next {
   display: none;
}

#slideshow .commands1 {
   display: block;
}

/* play/pause commands */
.play_commands {
   position: absolute;
   width: 22px;
   height: 22px;
   top: 25px;
   right: 25px;
   z-index: 10;
   text-indent: -9999px;
   border: 0 none;
   opacity: 0;
   -webkit-transition: opacity 1s, right 1s;
   -moz-transition: opacity 1s, right 1s;
   transition: opacity 1s, right 1s;
}

.play {
   right: 55px;
   cursor: default;
}

.pause:hover {
   border: 0 none;
}

.play_commands:focus {
   outline: 0;
}

#slideshow:hover .pause,
#sl_play:target~#slideshow:hover .pause,
.play_commands:focus {
   opacity: 1;
}

.sl_command:target~#slideshow:hover .pause,
#sl_pause:target~#slideshow:hover .pause {
   opacity: 0;
}

.pause:after,
.pause:before {
   position: absolute;
   display: block;
   content: " ";
   top: 0;
   width: 38%;
   height: 22px;
   background: #fff;
   background: rgba(255, 255, 255, 0.5);
}

.pause:after {
   right: 0;
}

.pause:before {
   left: 0;
}

.play {
   width: 1px;
   height: 1px;
   border-top: 10px solid transparent;
   border-left: 20px solid #fff;
   border-left: 20px solid rgba(255, 255, 255, 0.5);
   border-bottom: 10px solid transparent;
   opacity: 0;
}

.play:hover,
.play:focus {
   border-bottom: 10px solid transparent;
}

#slideshow .container {
   position: relative;
   width: 720px;
   height: 300px;
   overflow: hidden;
}

/* timeline base */
#slideshow .container:after {
   position: absolute;
   bottom: 0;
   left: 0;
   content: " ";
   background: #0062a1;
   width: 100%;
   height: 1px;
}

@-webkit-keyframes slider {

   0%,
   20%,
   100% {
      left: 0%
   }

   25%,
   45% {
      left: -100%
   }

   50%,
   70% {
      left: -200%
   }

   /*	75%, 95%		{ left: -300% }*/
}

@-moz-keyframes slider {

   0%,
   20%,
   100% {
      left: 0%
   }

   25%,
   45% {
      left: -100%
   }

   50%,
   70% {
      left: -200%
   }

   /*	75%, 95%		{ left: -300% }*/
}

@keyframes slider {

   0%,
   20%,
   100% {
      left: 0%
   }

   25%,
   45% {
      left: -100%
   }

   50%,
   70% {
      left: -200%
   }

   /*	75%, 95%		{ left: -300% }*/
}

#slideshow .slider {
   position: absolute;
   left: 0;
   top: 0;
   width: 400%;
   min-height: 300px;
   -webkit-animation: slider 20s infinite;
   -moz-animation: slider 20s infinite;
   animation: slider 20s infinite;
}

.sl_i:target~#slideshow .slider {
   -webkit-transition: left 0.7s;
   -moz-transition: left 0.7s;
   transition: left 0.7s;
}

.sl_command:target~#slideshow .slider {
   -webkit-transition: opacity 0.7s;
   -moz-transition: opacity 0.7s;
   transition: opacity 0.7s;
}

#slideshow .c_slider {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 300px;
   background: url("bluecollargeld1.jpg") 0 0 no-repeat, url("bluecollargeld2.jpg") 100% 0 no-repeat, url("bluecollargeld3.jpg") 1280px 0 no-repeat;
   /*		url("studium1.jpg") 1920px 0 no-repeat;*/
}

.sl_i:target~#slideshow .c_slider {
   -webkit-transition: background 0.7s;
   -moz-transition: background 0.7s;
   transition: background 0.7s;
}

#slideshow figure {
   position: relative;
   padding: 0;
   margin: 0;
}

@-webkit-keyframes figurer {

   /*
		0%, 25%, 50%, 75%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
		5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
	*/
}

@-moz-keyframes figurer {

   /*
		0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
		5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }

	*/
}

@keyframes figurer {

   /*
		0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
		5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
	*/
}

#slideshow figure:after {
   position: absolute;
   display: block;
   content: " ";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*
		-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
		-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
		box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	*/
   -webkit-animation: figurer 2s infinite;
   -moz-animation: figurer 2s infinite;
   animation: figurer 2s infinite;
}

@-webkit-keyframes figcaptionner {

   0%,
   25%,
   50%,
   75%,
   100% {
      bottom: -55px;
   }

   5%,
   20%,
   30%,
   45%,
   55%,
   70%,
   80%,
   95% {
      bottom: 5px;
   }

}

@-moz-keyframes figcaptionner {

   0%,
   25%,
   50%,
   75%,
   100% {
      bottom: -55px;
   }

   5%,
   20%,
   30%,
   45%,
   55%,
   70%,
   80%,
   95% {
      bottom: 5px;
   }

}

@keyframes figcaptionner {

   0%,
   25%,
   50%,
   75%,
   100% {
      bottom: -55px;
   }

   5%,
   20%,
   30%,
   45%,
   55%,
   70%,
   80%,
   95% {
      bottom: 5px;
   }

}

#slideshow figcaption {
   position: absolute;
   padding: 20px 20px;
   margin: 0;
   left: 0;
   right: 0;
   bottom: 5px;
   text-align: center;
   letter-spacing: 0.05em;
   word-spacing: 0.05em;
   font-family: Georgia, Times, serif;
   background: #000;
   background: rgba(255, 255, 255, 0.7);
   border-top: 1px solid rgb(225, 225, 225);
   color: #555;
   text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3);
   -webkit-animation: figcaptionner 2s infinite;
   -moz-animation: figcaptionner 2s infinite;
   animation: figcaptionner 2s infinite;
}

@-webkit-keyframes timeliner {

   0%,
   25%,
   50%,
   75%,
   100% {
      width: 0;
   }

   20%,
   45%,
   70%,
   90% {
      width: 100%;
   }

}

@-moz-keyframes timeliner {

   0%,
   25%,
   50%,
   75%,
   100% {
      width: 0;
   }

   20%,
   45%,
   70%,
   90% {
      width: 100%;
   }

}

@keyframes timeliner {

   0%,
   25%,
   50%,
   75%,
   100% {
      width: 0;
   }

   20%,
   45%,
   70%,
   90% {
      width: 100%;
   }

}

#timeline {
   position: absolute;
   background: #0062a1;
   bottom: 15px;
   left: 15px;
   height: 1px;
   background: rgb(0, 98, 161);
   background: rgba(0, 98, 161, .8);
   width: 0;
   -webkit-animation: timeliner 25s infinite;
   -moz-animation: timeliner 25s infinite;
   animation: timeliner 25s infinite;
}

/* dots styles */
.dots_commands {
   position: relative;
   top: 32px;
   padding: 0;
   margin: 0;
   text-align: center;
}

.dots_commands li {
   display: inline;
   padding: 0;
   margin: 0;
   list-style: none;
}

.dots_commands a {
   position: relative;
   display: inline-block;
   height: 8px;
   width: 8px;
   margin: 0 5px;
   text-indent: -9999px;
   background: #fff;
   border-bottom: 0;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   /*
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
		box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	*/
   z-index: 25;
}

.dots_commands li+li a {
   z-index: 10;
}

@-moz-keyframes dotser {

   0%,
   100% {
      opacity: 1;
      left: 0;
   }

   20% {
      opacity: 1;
      left: 0;
   }

   22% {
      opacity: 0;
      left: 0;
   }

   23% {
      opacity: 0;
      left: 18px;
   }

   25% {
      opacity: 1;
      left: 18px;
   }

   45% {
      opacity: 1;
      left: 18px;
   }

   47% {
      opacity: 0;
      left: 18px;
   }

   48% {
      opacity: 0;
      left: 36px;
   }

   50% {
      opacity: 1;
      left: 36px;
   }

   70% {
      opacity: 1;
      left: 36px;
   }

   72% {
      opacity: 0;
      left: 36px;
   }

   73% {
      opacity: 0;
      left: 54px;
   }

   75% {
      opacity: 1;
      left: 54px;
   }

   95% {
      opacity: 1;
      left: 54px;
   }

   97% {
      opacity: 0;
      left: 54px;
   }

   98% {
      opacity: 0;
      left: 0;
   }

}

@-webkit-keyframes dotser {

   0%,
   100% {
      opacity: 1;
      left: 0;
   }

   20% {
      opacity: 1;
      left: 0;
   }

   22% {
      opacity: 0;
      left: 0;
   }

   23% {
      opacity: 0;
      left: 18px;
   }

   25% {
      opacity: 1;
      left: 18px;
   }

   45% {
      opacity: 1;
      left: 18px;
   }

   47% {
      opacity: 0;
      left: 18px;
   }

   48% {
      opacity: 0;
      left: 36px;
   }

   50% {
      opacity: 1;
      left: 36px;
   }

   70% {
      opacity: 1;
      left: 36px;
   }

   72% {
      opacity: 0;
      left: 36px;
   }

   73% {
      opacity: 0;
      left: 54px;
   }

   75% {
      opacity: 1;
      left: 54px;
   }

   95% {
      opacity: 1;
      left: 54px;
   }

   97% {
      opacity: 0;
      left: 54px;
   }

   98% {
      opacity: 0;
      left: 0;
   }

}

@keyframes dotser {

   0%,
   100% {
      opacity: 1;
      left: 0;
   }

   20% {
      opacity: 1;
      left: 0;
   }

   22% {
      opacity: 0;
      left: 0;
   }

   23% {
      opacity: 0;
      left: 18px;
   }

   25% {
      opacity: 1;
      left: 18px;
   }

   45% {
      opacity: 1;
      left: 18px;
   }

   47% {
      opacity: 0;
      left: 18px;
   }

   48% {
      opacity: 0;
      left: 36px;
   }

   50% {
      opacity: 1;
      left: 36px;
   }

   70% {
      opacity: 1;
      left: 36px;
   }

   72% {
      opacity: 0;
      left: 36px;
   }

   73% {
      opacity: 0;
      left: 54px;
   }

   75% {
      opacity: 1;
      left: 54px;
   }

   95% {
      opacity: 1;
      left: 54px;
   }

   97% {
      opacity: 0;
      left: 54px;
   }

   98% {
      opacity: 0;
      left: 0;
   }

}

.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
   position: absolute;
   top: 0;
   left: 0;
   content: " ";
   width: 8px;
   height: 8px;
   background: #bd9b83;
   z-index: 20;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   /*
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
		box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	*/
}

.dots_commands li:first-child a:after {
   -webkit-animation: dotser 2s infinite;
   /* webkit can't animate pseudo-element =_= :L: */
   -moz-animation: dotser 2s infinite;
   /* thanks moz ! :D */
   animation: dotser 2s infinite;
}

.dots_commands li:first-child a:before {
   display: none;
}

/* need a stop ! */

/* actions when target ! */
.sl_command {
   display: none;
}

.sl_command:target~#slideshow .slider,
.sl_command:target~#slideshow figure:after,
.sl_command:target~#slideshow figcaption,
.sl_command:target~#slideshow #timeline,
.sl_command:target~#slideshow .dots_commands li:first-child a:after {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   animation-play-state: paused;
}

#sl_play:target~#slideshow .slider,
#sl_play:target~#slideshow figure:after,
#sl_play:target~#slideshow figcaption,
#sl_play:target~#slideshow #timeline,
#sl_play:target~#slideshow .dots_commands li:first-child a:after {
   -webkit-animation-play-state: running;
   -moz-animation-play-state: running;
   animation-play-state: running;
}

.sl_command:target~#slideshow .pause {
   opacity: 0;
}

.sl_command:target~#slideshow .play {
   opacity: 1;
   right: 25px;
   cursor: pointer;
}

#sl_play:target~#slideshow .pause {
   opacity: 0;
}

#sl_play:target~#slideshow .play {
   opacity: 0;
   right: 55px;
   cursor: default;
}

.sl_i:target~#slideshow .slider {
   visibility: hidden
}

.sl_i:target~#slideshow .slider figcaption {
   visibility: hidden
}

.sl_i:target~#slideshow .dots_commands li:first-child a:after {
   display: none;
}

.sl_i:target~#slideshow .dots_commands li:first-child a:before {
   display: block;
}

#sl_i1:target~#slideshow .commands {
   display: none;
}

#sl_i1:target~#slideshow .commands1 {
   display: block;
}

#sl_i1:target~#slideshow .c_slider {
   background-position: 0 0, 800px 0, 1280px 0;
}

#sl_i1:target~#slideshow .dots_commands li:first-child a:before {
   left: 0;
}

#sl_i2:target~#slideshow .commands {
   display: none;
}

#sl_i2:target~#slideshow .commands2 {
   display: block;
}

#sl_i2:target~#slideshow .c_slider {
   background-position: -720px 0, 0 0, 640px 0, 1280px 0;
}

#sl_i2:target~#slideshow .dots_commands li:first-child a:before {
   left: 18px;
}

#sl_i3:target~#slideshow .commands {
   display: none;
}

#sl_i3:target~#slideshow .commands3 {
   display: block;
}

#sl_i3:target~#slideshow .c_slider {
   background-position: -1280px 0, -720px 0, 0 0, 640px 0;
}

#sl_i3:target~#slideshow .dots_commands li:first-child a:before {
   left: 36px;
}

/*
#sl_i4:target ~ #slideshow .commands								{ display: none; }
#sl_i4:target ~ #slideshow .commands4								{ display: block; }
#sl_i4:target ~ #slideshow .c_slider								{ background-position:  -1280px 0, -720px 0, 0 0; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }
*/
.abstand-icon {
   margin-top: 125px;
}

.benefits {
   width: 33.0%;
   float: left;
   padding: 2rem 1rem 1rem 1rem;
   text-align: center;
}

.benefits-bild {
   width: 40%;
}

/*_______________________

hover
_______________________
*/
.hover {
   position: relative;
   display: inline-block;
}

.hover .hovertext {
   visibility: hidden;
   width: 200px;
   background-color: #0062a1;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px;
   position: absolute;
   z-index: 1;
   bottom: 87%;
   left: 29%;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.3s;
   display: block;
   font-size: 0.8rem;
   line-height: 1rem;
}

.hover .hovertext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #0062a1 transparent transparent transparent;
}

.hover:hover .hovertext {
   visibility: visible;
   opacity: 1;
}

.refnr {}

.apply {}

@media only all and (max-width: 719px) {

   /* for 700px or less */
   body {
      font-size: 80%;
      line-height: 1.5;
      -ms-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
   }

   .frame-outer {
      width: 100%;
      font-size: 1rem;
   }

   .title-block {
      bottom: 0;
      width: 100%;
   }

   .logo {
      width: 13rem;

   }


   .abstand {
      margin: -0.55rem 0 0rem 0;
      padding: 0 0 1.2rem 0;
   }


   .hover .hovertext {
      display: none;
   }

   .hover:hover .hovertext {
      visibility: visible;
      opacity: 1;
   }

   .button a {
      display: inline-block;

      padding: 0.6rem 2.5rem 0.6rem 2.5rem;
      margin: 2rem auto;
      cursor: pointer;
      -webkit-border-radius: 0rem;
      border-radius: 0rem;
      border: 0.1rem solid #0062a1;
      transition: all 140ms ease 0s;
      -moz-transition: all 140ms ease 0s;
      -webkit-transition: all 140ms ease 0s;
      color: #0062a1;
   }

   .button a:hover {
      background-position: 15px center;
      background: #0062a1;
      text-decoration: none;
      color: #fff;
      padding: 0.6rem 2.5rem 0.6rem 2.5rem;
      margin: 2rem auto;
      border: 0.1rem solid #0062a1;
   }

   .content-unten {
      padding: 2.5rem 2rem 1.7rem 2rem;
   }

   .content {
      padding: 1rem 2rem 0.6rem 2rem;
   }

   .auszeichnung {
      font-size: 1.2rem;
      line-height: 1.4;
   }

   .box-left {
      width: 100%;
      padding: 0 0 1rem 0;
   }

   .box-right {
      width: 100%;
      padding: 0 0 1rem 0;
   }

   .ausblenden {
      display: none;
   }

   .aus {
      display: block;
      width: 100%;
   }



   .box-ap-bild {
      float: inherit;
      width: 100%;
      padding: 0.7rem 0 0 0;
      text-align: center;
   }

   .box-ap {
      float: inherit;
      width: 100%;
      margin: 0.8rem 0 0 0;
   }



   h1 {
      margin: 0px;
      line-height: 1.5;
      font-size: 1.9rem;
   }

   h2 {
      margin: 0px;
      line-height: 1.4;
      font-size: 1.1rem;
      font-weight: normal;
   }

   .flex {
      display: block;
   }

   .left {
      width: 100%;
      padding: 0;
      margin: 0;
   }

   .right {
      width: 100%;
      padding: 0.6rem 0 0.55rem 0;
      margin: 0;
   }

   .benefits {
      width: 100%;
      float: inherit;
      padding: 2rem 0rem 1rem 0rem;
   }


   .abstand-respo {
      padding: 1.9rem 0 0.6rem 0;
   }



   .hide {
      display: inline-block;
   }

   .hide_m {
      display: none;
   }

   .footer {
      margin-top: 2rem;
   }

   .slider-wrap {
      max-width: 719px;
      width: auto;
      min-height: 50px;
      position: relative;
      overflow: hidden;
      margin: 0 0.1rem 0 0.1rem;
   }

   .slider {
      width: 100%;
      max-width: 720px;
      min-height: 100px;
      margin: 0px;
      text-align: center;

      overflow: hidden;
      position: relative;
   }

   .slide {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 100%;
      min-height: 100px;
      scroll-snap-align: center;
      margin-right: 0px;
      box-sizing: border-box;
      background: white;
      transform-origin: center center;
      transform: scale(1);
   }

   .header {
      margin: 0 0 0.7rem 0;
   }


   #centerframe {
      margin: 0 auto;
      width: 99.8%;
      padding: 1rem 3rem 2.5rem 3rem;
      line-height: 1.3em;
      background-size: cover;
      background-image: url("gledhintergrund-respo.jpg")
   }

   .sym-boxes {
      width: 100%;
      padding: 0 0rem;
      text-align: center;
   }

   .sym {

      display: inline-block;
      height: 33px;
      vertical-align: middle;
      background: transparent url("symbols_master_3.png") no-repeat 0 0;
      overflow: hidden;
      margin-left: 1em;

   }

   .sym:first-of-type {
      margin-left: 0;
   }

   .sym_location {
      /*margin-bottom: 13px; */
      /*background-position: 0 0; */
      /* width: 26px; */
      margin-bottom: 13px;
      background-position: 0 0;
      width: 70px;
      margin-left: 50px;
      padding-right: 50px;

   }

   .sym_time {
      /* margin-bottom: 13px; */
      /* background-position: 0 0; */
      /* width: 26px; */
      margin-bottom: 13px;
      background-position: 0 0;
      width: 70px;
      margin-left: auto;
      padding-right: 50px;
   }

   .sym_graduation {
      /* margin-bottom: 13px; */
      /* background-position: 0 0; */
      /* width: 26px; */
      margin-bottom: 13px;
      background-position: 0 0;
      width: 70px;
      margin-left: auto;
      padding-right: 50px;
   }

   .sym_contact {
      background-position: -103px 0;
      width: 33px;
   }

   .button {
      margin-bottom: 0;
   }


}

.refnr {}

.apply {}