@import url("https://use.typekit.net/bbx6plk.css");
 /* ---------------------------------------------------------
   Basisgestaltung und Layoutbereiche
   ---------------------------------------------------------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
* {
  margin:0;
  padding:0;
}
html {
  font-family: 'tablet-gothic', Arial, sans-serif;
  font-size: 62.5%;
  -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change */
  -webkit-text-size-adjust: 100%;
  background-color:#fff;
}
body {
  font-size: 18px; font-size: 1.8rem;
  font-weight:300;
  color: #000;
  min-width: 320px;
  margin: 0 auto;
}
.openNav body {
  overflow-y: hidden;
}

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


TABLE, TR, TD, TH {
  font-family: 'tablet-gothic', Arial, sans-serif;
  font-size: 18px; font-size: 1.8rem;
  font-weight:300;
	vertical-align:top;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
}

A {
  color:#000;
  outline: 0;
}
A:hover {
  color:#d2b940;
}

A IMG,
IMG {
	border:0;
}
B, STRONG {font-weight:700;}

P {
  margin-bottom:25px;
  line-height:1.3em;
}

H1,H2,H3,H4,H5,H6 {
  font-family: 'tablet-gothic-semi-condensed', Arial, sans-serif;
  font-weight:800;
  color:#000;
  line-height:1;
  text-transform:uppercase;
}
H1 {
  font-size:90px;font-size: 9rem;
  line-height:0.94;
  margin-bottom:45px;
}
H1 span {font-size:190px;font-size: 19rem;line-height:1.1; }


H2 {
  font-size:54px;font-size: 5.4rem;
  line-height:0.67;
  margin-bottom:45px;
}
H3 {
  font-size:36px;font-size: 3.6rem;
  line-height:1;
  margin-bottom:45px;
}
H4 {
  font-size:18px;font-size: 1.8rem;
  line-height:1.06;
  margin-bottom:45px;
}

.hl-small {
  display:block;
  font-size:18px;font-size: 1.8rem;
  margin-top:10px;
  text-transform: none;
}

.text-center {text-align:center;}

.flexcon {display:flex;}

/* Elemente verstecken */
.hideme {
  display:none;
}

/* Clearfix */
.clearfix:after {
	content    : ".";
	display    : block;
	clear      : both;
	font-size  : 0;
	height     : 0;
	visibility : hidden;
}
.clear { clear: both; }

::-moz-selection {
	background: #575757;
	color: #F4364C;
	text-shadow: none
}
::selection {
	background: #575757;
	color: #F4364C;
	text-shadow: none
}

.reframe { display:flex;width:100%;max-width:1280px; padding: 0; margin: 0 auto; position:relative; }
.reframe.noflex {display:inherit;}

/* COLORS */
.blue-light{color: #17a1dc;}
.grey-light{color: #c0c4c6;}
.grey-dark{color: #575757;}
.yellow-light{color: #ffe800;}
.green-light{color: #90c149;}
.white{color: #ffffff;}
.black{color: #000000;}

.blue-light.zitat::before,.blue-light.zitat::after {color: #17a1dc}
.grey-light.zitat::before,.grey-light.zitat::after {color: #c0c4c6}
.grey-dark.zitat::before,.grey-light.zitat::after {color: #575757}
.green-light.zitat::before,.green-light.zitat::after {color: #90c149}
.blue-light.zitat::before,.blue-light.zitat::after {color: #17a1dc}

.bg-blue-light{background-color: #17a1dc !important;}
.bg-grey-light{background-color: #c0c4c6 !important;}
.bg-grey-dark{background-color: #575757 !important;}
.bg-yellow-light{background-color: #ffe800 !important;}
.bg-green-light{background-color: #90c149 !important;}
.bg-white{background-color: #ffffff !important;}
.bg-black{background-color: #000000 !important;}

.btn--blue-light{background-color: #17a1dc !important; color: #000;}
.btn--grey-light{background-color: #c0c4c6 !important; color: #000;}
.btn--grey-dark{background-color: #575757 !important; color: #000;}
.btn--yellow-light{background-color: #ffe800 !important; color: #000;}
.btn--green-light{background-color: #90c149 !important; color: #000;}


.table--blue-light TH {background-color: #17a1dc;}
.table--blue-light TR {border-bottom-color: #17a1dc;}

.table--grey-light TH {background-color: #c0c4c6;}
.table--grey-light TR {border-bottom-color: #c0c4c6;}

.table--grey-dark TH {background-color: #575757;}
.table--grey-dark TR {border-bottom-color: #575757;}

.table--yellow-light TH {background-color: #ffe800; }
.table--yellow-light TR {border-bottom-color: #ffe800;}

.table--green-light TH {background-color: #90c149;}
.table--green-light TR {border-bottom-color: #90c149;}


.mind--blue-light h1,.mind--blue-light h3,.mind--blue-light h4 { color: #17a1dc; }
.mind--blue-light .plus {background-color: #17a1dc;}
.mind--blue-light .btn {background-color: #17a1dc !important; color: #000; }
.mind--grey-light h1,.mind--grey-light h3,.mind--grey-light h4 { color: #c0c4c6; }
.mind--grey-light .plus {background-color: #c0c4c6;}
.mind--grey-light .btn {background-color: #c0c4c6 !important; color: #000; }
.mind--grey-dark h1,.mind--grey-dark h3,.mind--grey-dark h4 { color: #575757; }
.mind--grey-dark .plus {background-color: #575757;}
.mind--grey-dark .btn {background-color: #575757 !important; color: #000; }.mind--blue-light h1,.mind--blue-light h3,.mind--blue-light h4 { color: #ad9970; }
.mind--yellow-light h1,.mind--yellow-light h3,.mind--yellow-light h4 { color: #ffe800; }
.mind--yellow-light .plus {background-color: #ffe800;}
.mind--yellow-light .btn {background-color: #ffe800 !important; color: #000; }
.mind--green-light h1,.mind--green-light h3,.mind--green-light h4 { color: #90c149; }
.mind--green-light .plus {background-color: #90c149;}
.mind--green-light .btn {background-color: #90c149 !important; color: #000; }

/* counter*/
#statistik.blue-light .text H3,
#statistik.blue-light .text P { color: #17a1dc;}
#statistik.blue-light .text H3::before,
#statistik.blue-light .text H3::after {background-color: #17a1dc;}
#statistik.blue-light .counter__circle {
  background-image: url(../ssco_circle_blue-light.png);
  color: #17a1dc;
}
#statistik.yellow-light .text H3,
#statistik.yellow-light .text P { color: #ffe800;}
#statistik.yellow-light .text H3::before,
#statistik.yellow-light .text H3::after {background-color: #ffe800;}
#statistik.yellow-light .counter__circle {
  background-image: url(../ssco_circle_yellow-light.png);
  color: #ffe800;
}

#statistik.green-light .text H3,
#statistik.green-light .text P { color: #90c149;}
#statistik.green-light .text H3::before,
#statistik.green-light .text H3::after {background-color: #90c149;}
#statistik.green-light .counter__circle {
  background-image: url(../ssco_circle_green-light.png);
  color: #90c149;
}



/* HEADER */
HEADER {
  position:fixed;
  left:0;
  top:0;
  width:100%;
	height:97px;
	background-color: rgba(87,87,87, 1);
  z-index:10001;
  -webkit-transition: top 0.3s ease;
  -moz-transition: top 0.3s ease;
  -ms-transition: top 0.3s ease;
  transition: top 0.3s ease;
}
HEADER.off {
	top:-97px;
}
.openNav HEADER {
	position:fixed !important;
  top: 0 !important;
}
#topBlock {
  position:relative;
  width:100%;
	height:97px;
	background-color: rgba(87,87,87, 1);
  z-index:10;
}
#logo {
  display:block;
  position:absolute;
  right:50px;
  top:28px;
  background: url(../logo.png) no-repeat;
  background-size:contain;
  width: 258px;
  height: 32px;
}

#toggleMenu {
  position:absolute;
  left:50px;
  top:25px;
  height:44px;
  width:44px;
  cursor:pointer;
}

.openNav #toggleMenu .icon-menu { display:none; }  /*svg*/
.openNav #toggleMenu .icon-cross { display:block; }   /*svg*/


.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.icon-menu {
  font-size:44px; font-size:4.4rem;
  color:#000;
}
.icon-cross {
  display:none;
  font-size:44px; font-size:4.4rem;
  color:#000;
}


/* Suche und Sprachauswahl */
#slbar, #slbar2 {
  position:relative;
  height:50px;
  max-width:1080px;
  margin:0 auto 95px;
}
#slbar2 {
    margin:0 auto 95px;
}
#searchbar,#searchbar2 {
  position:relative;
  height:50px;
  width:100%;
  max-width:970px;
}
#searchform,#searchform2 {
  height:50px;
  width:100%;
}
#searchfield,#searchfield2 {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  width:100%;
  height:50px;
  padding:0 57px;
  font-family: 'tablet-gothic', Arial, sans-serif;
  font-size:18px;font-size:1.8rem;
  font-weight:700;
  text-transform:uppercase;
  color:#000;
  text-align:left;
  background-color:#4d4d4d;
  border:0;
  border-radius: 0;
  line-height: inherit;
  margin: 0;
  box-shadow: none;
  outline: medium none;
}

#searchbar INPUT[type="submit"],#searchbar2 INPUT[type="submit"] {
  position:absolute;
  left:0; top:0;
  width:50px; height:50px;
  font-size:14px;font-size:1.4rem;
  color:#000;
  border:0;
  cursor:pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28' height='22' width='24'%3E%3Cpath d='M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: center center;
}

#languagebar, #languagebar2 {
  position:absolute;
  top:0;right:0;
  height:50px;
  width:110px;
  padding-right:50px;
  border-left:10px solid #575757;
  overflow:hidden;
    -webkit-transition: width 0.2s linear;
    -moz-transition: width 0.2s linear;
    -o-transition: width 0.2s linear;
    transition: width 0.2s linear;
}
#languagebar.active, #languagebar2.active {
  width:260px;
}
.language  {
  display:inline-block;
  height:50px;
  line-height:50px;
  width:50px;
  font-size:18px;font-size:1.8rem;
  font-weight:700;
  text-align:center;
  margin:0;
  background-color:#4d4d4d;
}
A.language  {
  height:50px;
  width:50px;
  text-decoration:none;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
A.language:hover  {
  color:#000;
  background-color:#f4364c;
}
#select-language, #select-language2 {
  position:absolute;
  top:0;right:0;
  width:50px; height:50px;
  color:#000;
  cursor:pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='20' width='20'%3E%3Cpath d='M28 14c0 5.531-6.266 10-14 10-0.766 0-1.531-0.047-2.266-0.125-2.047 1.813-4.484 3.094-7.187 3.781-0.562 0.156-1.172 0.266-1.781 0.344-0.344 0.031-0.672-0.219-0.75-0.594v-0.016c-0.078-0.391 0.187-0.625 0.422-0.906 0.984-1.109 2.109-2.047 2.844-4.656-3.219-1.828-5.281-4.656-5.281-7.828 0-5.516 6.266-10 14-10s14 4.469 14 10z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: center center;
  background-color:#4d4d4d;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
#select-language:hover, #select-language2:hover  {
  background-color:#f4364c;
}


/* NAVIGATION */
#naviFrame {
  display:block;
  left:0;right:0;
  top:97px; bottom:0;
  margin-top:-130%;
  height: calc(100vh - 97px);
  padding-top:200px;
  background-color:#575757;
  opacity:0;
  z-index:3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.openNav #naviFrame {
  /* position:fixed;  !!! */
  opacity:1;
  margin-top:0;
}

#mainnavi  {
  max-width:1080px;
  margin:0 auto;
  height:100%;
}
#mainnavi > UL {
  display:table;
  width:100%;
  height:100%;
}
#mainnavi > UL > LI {
  display:table-cell;
  line-height: 1;
  position:relative;
  min-width:140px;
  padding-right:5px;
  height:100%;
}

#mainnavi > UL > LI > DIV {
  display:table;
  height:80px;
  margin-bottom:30px;
}

#mainnavi > UL > LI > DIV > A {
  display:table-cell;
  font-size: 36px; font-size:3.6rem;
  font-weight: 800;
  color:#000;
  text-decoration:none;
  text-transform:uppercase;
  vertical-align:bottom;
}
#mainnavi > UL > LI > DIV > A:link,
#mainnavi > UL > LI > DIV > A:active,
#mainnavi > UL > LI > DIV > A:visited {
  color:#000;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
#mainnavi > UL > li > DIV > A:hover {
  color:#f4364c;
}
#mainnavi > UL > LI.current > DIV > A {
  color:#f4364c;
}
#mainnavi > UL > LI .arrow {
  display: none;
}

/* subnav */
#mainnavi ul li > ul {
  display: block;
  opacity: 1;
  list-style: none;
  height:100%;
  min-width:140px;
  text-align:left;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -ms-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
#mainnavi ul ul > li {
  padding: 0 0 10px 0;
}
#mainnavi > UL ul > li.last {
  position:relative;
  height:100%;
  margin-top:20px;
}
#mainnavi > UL ul > li.last:after {
  content: " ";
  display:block;
  position:absolute;
  left:0;bottom:0;
  height:0;
  width:10px;
  background: url(../bg_subnavi.png) repeat-y;
  -webkit-transition: height 0.4s ease;
  -moz-transition: height 0.4s ease;
  -ms-transition: height 0.4s ease;
  transition: height 0.4s ease;
}
#mainnavi > UL ul:hover > li.last:after {
  height:100%;
}
#mainnavi ul ul > li > a {
  text-decoration:none;
  color:#000;
  font-size:18px ;font-size: 1.8rem;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
#mainnavi ul ul > li a:hover {
  color:#f4364c;
}
#mainnavi ul ul > li.current a {
  color:#f4364c;
}


/* MAIN */
MAIN {  }

SECTION {overflow:hidden;}

MAIN ul { margin: 0 0 40px 35px;  }
MAIN ul li,MAIN OL li  { position: relative;margin-bottom:10px;}
MAIN OL {  counter-reset:item;margin: 0 0 40px 10px;}
MAIN ol>li {
  padding:0 0 0 28px;
  text-indent:-28px;
  list-style-type:none;
  counter-increment:item;
}
MAIN ol>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

IMG { width: 100%; height: auto; }
FIGURE IMG { display:block; }


.btn {
  display: block;
  font-size:14px; font-size:1.4rem;
  font-weight:700;
  padding:13px 50px 13px 20px;
  text-decoration:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='27' width='27'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 90% center;
  background-color: #fff;
  -webkit-transition: background-position 0.2s ease;
  -moz-transition: background-position 0.2s ease;
  -ms-transition: background-position 0.2s ease;
  transition: background-position 0.2s ease;
}
.btn:hover {
  color:#000;
  background-position: 93% center;
}
.btn--pdf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 139 150' height='27' width='23'%3E%3Cpath d='M107.143 112.5c0-2.93-2.427-5.357-5.357-5.357s-5.357 2.427-5.357 5.357 2.427 5.357 5.357 5.357 5.357-2.427 5.357-5.357zM128.571 112.5c0-2.93-2.427-5.357-5.357-5.357s-5.357 2.427-5.357 5.357 2.427 5.357 5.357 5.357 5.357-2.427 5.357-5.357zM139.286 93.75v26.786c0 4.436-3.599 8.036-8.036 8.036h-123.214c-4.436 0-8.036-3.599-8.036-8.036v-26.786c0-4.436 3.599-8.036 8.036-8.036h38.923l11.3 11.384c3.097 3.013 7.115 4.688 11.384 4.688s8.287-1.674 11.384-4.688l11.384-11.384h38.839c4.436 0 8.036 3.599 8.036 8.036zM112.081 46.122c0.837 2.009 0.419 4.353-1.172 5.859l-37.5 37.5c-1.004 1.088-2.427 1.59-3.767 1.59s-2.762-0.502-3.767-1.59l-37.5-37.5c-1.59-1.507-2.009-3.85-1.172-5.859 0.837-1.925 2.762-3.265 4.939-3.265h21.429v-37.5c0-2.93 2.427-5.357 5.357-5.357h21.429c2.93 0 5.357 2.427 5.357 5.357v37.5h21.429c2.176 0 4.102 1.339 4.939 3.265z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 90% center;
  background-color: #fff;
}
.btn--pdf:hover {
  color:#000;
  background-position: 90% 65%;
}



/* CONTENT */
.bg {
  min-height: 350px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* stage */
#stage {
  position:relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
/* stage keyvisual*/
#stage IMG { display:block; }
#stage .claim {
  position:absolute;
  top: 50%;left:50px;
  transform: translateY(-50%);
}
#stage H1 {
  font-size:150px;font-size: 15rem;
  line-height:0.9;
  margin-bottom:0;
}

/* stage video */

video#backgroundvid {
  position: absolute; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  /* background: url(../../media/ssco-keyvisual-home.png) no-repeat; */
  background-size: cover;
}



#anchor-navigation {
  position:fixed;
  top: 50%;right:0;
  transform: translateY(-50%);
  width:auto;
  text-align:right;
  z-index:10000;
}
#anchor-navigation A {
  display:inline-block;
  font-size:14px;font-size: 1.4rem;
  color:#000;
  background-color:#575757;
  padding:4px 30px;
  text-decoration:none;
  margin-bottom:1px;
  box-shadow: 0px 3px 5px  rgba(0,0,0, 0.2);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#anchor-navigation A:hover, #anchor-navigation A.active {
  color:#dde0e1;
  background-color:#000;
}

#up-n-down {
  position:fixed;
  display:block;
  bottom: 0px;right:0px;
  width:60px;
  height:60px;
  text-align:right;
  z-index:9999;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='60' width='60'%3E%3Cpath d='M125.098 75l-50.098 50.098-50.098-50.098 9.082-8.789 34.863 34.863v-76.172h12.305v76.172l35.156-34.863z' style='fill:%23F4364C ' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 90% center;
  background-color:#575757;
  cursor:pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#up-n-down.flip  {
  -webkit-transform: rotateX(180deg);  /* to support Safari and Android browser */
  -ms-transform: rotateX(180deg);      /* to support IE 9 */
  transform: rotateX(180deg);
}

/* shuffle  */
.shuffleblock {
  position: relative;
  overflow: hidden;
  display:flex;
  flex-wrap: wrap;
  width:1080px;
  margin:80px auto 100px;
}
.teaserBox, .eventBox {
  position:relative;
  width:360px;
  padding:45px 30px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.teaserBox.double, .eventBox.double {
  width:720px;
}
.teaserBox h3 span, .teaserBox h4 span, .stepby h3 span,
.eventBox h3 span, .eventBox h4 span {
  background-color:#fff;
  padding: 0 10px;
  line-height: 1.65em;
}
.teaserBox h4, .eventBox h4  {
  margin-bottom: 7px;
}
.teaserBox .btn {
  display:inline-block;
  background-color: #fff;
}
.teaserBox.bg-white .btn {
  background-color: #dde0e1;
}

.teaserBox .layer {
  position:absolute;
  left: 0;right: 0;
  top: 0;bottom: 0;
  opacity:0;
  background-color: rgba(244,54,76, 0.9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='56' width='56'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
  cursor:pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.teaserBox:hover .layer {
  opacity:1;
  background-position: 52% center;
}

.eventBox {
  padding: 45px 30px 60px;
}

.eventBox .btn {
  display:inline-block;
  background-color: #fff;
}
.eventBox.bg-white .btn {
  background-color: #dde0e1;
}

.socialbar {
  float:left;
  display:block;
  height:48px;
  width:48px;
  margin:0 10px 10px 0;
  overflow:hidden;
    -webkit-transition: width 0.2s linear;
    -moz-transition: width 0.2s linear;
    -o-transition: width 0.2s linear;
    transition: width 0.2s linear;
}
.socialbar.active {
  width:146px;
}
.socialbar + .btn {
  float:left;
}

A.media  {
  display:inline-block;
  height:48px;
  line-height:48px;
  width:48px;
  font-size:18px;font-size:1.8rem;
  font-weight:700;
  text-align:center;
  text-indent: -999em;
  margin:0;
  background-color:#fff;
  text-decoration:none;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.bg-white A.media  {
  background-color:#dde0e1;
}
A.media:hover  {
  color:#000;
  background-color:#f4364c;
}
A.fb  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28' height='22' width='22'%3E%3Cpath d='M14.984 0.187v4.125h-2.453c-1.922 0-2.281 0.922-2.281 2.25v2.953h4.578l-0.609 4.625h-3.969v11.859h-4.781v-11.859h-3.984v-4.625h3.984v-3.406c0-3.953 2.422-6.109 5.953-6.109 1.687 0 3.141 0.125 3.563 0.187z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
}
A.xing  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28' height='22' width='22'%3E%3Cpath d='M9.328 10.422c0 0-0.156 0.266-4.016 7.125-0.203 0.344-0.469 0.719-1.016 0.719h-3.734c-0.219 0-0.391-0.109-0.484-0.266s-0.109-0.359 0-0.562l3.953-7c0.016 0 0.016 0 0-0.016l-2.516-4.359c-0.109-0.203-0.125-0.422-0.016-0.578 0.094-0.156 0.281-0.234 0.5-0.234h3.734c0.562 0 0.844 0.375 1.031 0.703 2.547 4.453 2.562 4.469 2.562 4.469zM21.922 0.391c0.109 0.156 0.109 0.375 0 0.578l-8.25 14.594c-0.016 0-0.016 0.016 0 0.016l5.25 9.609c0.109 0.203 0.109 0.422 0.016 0.578-0.109 0.156-0.281 0.234-0.5 0.234h-3.734c-0.562 0-0.859-0.375-1.031-0.703-5.297-9.703-5.297-9.719-5.297-9.719s0.266-0.469 8.297-14.719c0.203-0.359 0.438-0.703 1-0.703h3.766c0.219 0 0.391 0.078 0.484 0.234z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
}
.select-media {
  float:left;
  width:48px; height:48px;
  color:#000;
  cursor:pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' height='20' width='20'%3E%3Cpath d='M19 16c2.766 0 5 2.234 5 5s-2.234 5-5 5-5-2.234-5-5c0-0.172 0.016-0.359 0.031-0.531l-5.625-2.812c-0.891 0.828-2.094 1.344-3.406 1.344-2.766 0-5-2.234-5-5s2.234-5 5-5c1.313 0 2.516 0.516 3.406 1.344l5.625-2.812c-0.016-0.172-0.031-0.359-0.031-0.531 0-2.766 2.234-5 5-5s5 2.234 5 5-2.234 5-5 5c-1.313 0-2.516-0.516-3.406-1.344l-5.625 2.812c0.016 0.172 0.031 0.359 0.031 0.531s-0.016 0.359-0.031 0.531l5.625 2.812c0.891-0.828 2.094-1.344 3.406-1.344z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: center center;
  background-color:#fff;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.bg-white .select-media {
  background-color:#dde0e1;
}
.select-media:hover {
  background-color:#f4364c;
}


.eventBox .layer {
  display:flex;
  justify-content: center;
  align-self: center;
  position:absolute;
  left: 0;right: 0;
  top: 0;bottom: 0;
  opacity:0;
  background-color: rgba(244,54,76, 0.9);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.eventBox:hover .layer {
  opacity:1;
}

.eventBox .inner {
  display:flex;
  align-self: center;
}
.eventBox .layer .socialbar {margin-right:10px;height:68px;width: 68px;}

.eventBox .layer .socialbar.active {
  width:224px;
}
.eventBox .layer .select-media {
  width:68px; height:68px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' height='50' width='50'%3E%3Cpath d='M19 16c2.766 0 5 2.234 5 5s-2.234 5-5 5-5-2.234-5-5c0-0.172 0.016-0.359 0.031-0.531l-5.625-2.812c-0.891 0.828-2.094 1.344-3.406 1.344-2.766 0-5-2.234-5-5s2.234-5 5-5c1.313 0 2.516 0.516 3.406 1.344l5.625-2.812c-0.016-0.172-0.031-0.359-0.031-0.531 0-2.766 2.234-5 5-5s5 2.234 5 5-2.234 5-5 5c-1.313 0-2.516-0.516-3.406-1.344l-5.625 2.812c0.016 0.172 0.031 0.359 0.031 0.531s-0.016 0.359-0.031 0.531l5.625 2.812c0.891-0.828 2.094-1.344 3.406-1.344z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: center center;
  background-color:#000;
  background-color:transparent;
}


.eventBox .layer A.media  {
  height:68px;
  line-height:68px;
  width:68px;
  color:#fff;
  font-size:18px;font-size:1.8rem;
}
.eventBox .layer A.media:hover  {
  color:#fff;
  background-color:transparent;
}
.eventBox .layer A.fb  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28' height='40' width='40'%3E%3Cpath d='M14.984 0.187v4.125h-2.453c-1.922 0-2.281 0.922-2.281 2.25v2.953h4.578l-0.609 4.625h-3.969v11.859h-4.781v-11.859h-3.984v-4.625h3.984v-3.406c0-3.953 2.422-6.109 5.953-6.109 1.687 0 3.141 0.125 3.563 0.187z' style='fill:%23ffffff' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
}
.eventBox .layer A.xing  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28' height='40' width='40'%3E%3Cpath d='M9.328 10.422c0 0-0.156 0.266-4.016 7.125-0.203 0.344-0.469 0.719-1.016 0.719h-3.734c-0.219 0-0.391-0.109-0.484-0.266s-0.109-0.359 0-0.562l3.953-7c0.016 0 0.016 0 0-0.016l-2.516-4.359c-0.109-0.203-0.125-0.422-0.016-0.578 0.094-0.156 0.281-0.234 0.5-0.234h3.734c0.562 0 0.844 0.375 1.031 0.703 2.547 4.453 2.562 4.469 2.562 4.469zM21.922 0.391c0.109 0.156 0.109 0.375 0 0.578l-8.25 14.594c-0.016 0-0.016 0.016 0 0.016l5.25 9.609c0.109 0.203 0.109 0.422 0.016 0.578-0.109 0.156-0.281 0.234-0.5 0.234h-3.734c-0.562 0-0.859-0.375-1.031-0.703-5.297-9.703-5.297-9.719-5.297-9.719s0.266-0.469 8.297-14.719c0.203-0.359 0.438-0.703 1-0.703h3.766c0.219 0 0.391 0.078 0.484 0.234z' style='fill:%23ffffff' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
}

.eventBox .layer .select-media:hover {
  background-color:transparent;
}
.eventBox .layer .media {
  color:#fff;
  background-color:transparent;
}
.eventlink {
  display:block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='56' width='56'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:  center;
  content: ' ';
  cursor:pointer;
  width:68px;height:68px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.eventlink:hover {
  background-position: 85% center;
}





/* shuffle block */
.shuffle-filter {
  padding:40px 50px;
}
.shuffle-filter .reframe {
  display: block;
}
.btn-group  {
  margin:5px 0;
}
.btn-group .filter {
  display: inline-block;
  font-size:14px; font-size:1.4rem;
  text-align:center;
  padding:13px 20px;
  text-decoration:none;
  background-color: #fff;
  border:0;
  margin:0 1px 5px 0;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.btn-group .filter:hover, .btn-group .active {
  background-color: #f4364c;
  color:#fff;
}
.loadmore {
  height: 400px;
  text-align: center;
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center bottom;
}
.loadmore .btn {
  display:inline-block;
  background-image:none;
  padding-right: 20px;
}




/* element big pic */
.bigpic {
  position:relative;
  display:flex;
  height: 850px;
  padding:0 50px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center center;
}
.bigpic .claim, .slider .claim {
  align-self: center;
}
.bigpic H1 {
  font-size:90px;font-size: 9rem;
  line-height:0.9;
  margin-bottom:0;
}
.bigpic .btn, .slider .btn {
  display:inline-block;
  margin-top:50px;
  cursor:pointer;
}


/* element text mitte */
.textblock {
  padding:160px 80px;
  background-size:cover;
  background-position: bottom center;
  background-repeat:no-repeat;
}
.text {
  max-width:720px;
  margin:0 auto;
}

[class*="textblock"] A:not(.btn), A.witharrow {
  padding: 0px 10px 2px 2px;
  margin: 0 5px 0 4px;
  background: #dde0e1;
  text-decoration: none;
  display: inline;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: 1px 0 0 #dde0e1, -1px 0 0 #dde0e1, 4px 0 0 #dde0e1, -4px 0 0 #dde0e1, 3px 0 0 #dde0e1, -3px 0 0 #dde0e1, 1px 0 0 #dde0e1, -1px 0 0 #dde0e1;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}
[class*="textblock"] A:not(.btn)::after, A.witharrow::after {
  content: '';
  display: inline-block !important;
  position: relative;
  width: 15px;
  height: 14px;
  right: -5px;
  top: 0;
  margin: 0 0 0 2px;
  background: transparent url(../textlink-arrow.svg) no-repeat 0 0;
  z-index: 90;
}
[class*="textblock"] A:hover, A.witharrow:hover {
color: #000;
}

.zitat  {
  position:relative;
  font-size:36px;font-size: 3.6rem;
  font-weight:900;
  text-align:center;
  margin:80px 0 50px;
  text-transform:uppercase;
  color: #000;
}
.zitat SPAN  {
  font-size:54px;font-size: 5.4rem;
}
.zitat::before {
  position:absolute;
  left:-10px;top:-175px;
  padding:0;margin:0;
  content: "„";
  font-size:248px;font-size: 24.8rem;
  color:#549fa7;
}
.zitat::after {
  position:absolute;
  right:-10px;bottom:-115px;
  content: "“";
  font-size:248px;font-size: 24.8rem;
  color:#549fa7;
}


.statement .reframe .textblock__col1,
.statement .reframe .textblock__col2 {
  display:flex;
  flex-wrap: wrap;
  align-self: center;
}

TABLE {
  width:100%;
  margin-bottom:60px;
}
TABLE TD, TABLE TH {
  text-align:left;
  vertical-align:middle;
  padding:10px 20px;
}
TABLE TH {
  font-weight: 700;
}
TABLE TR {
  border-bottom: 1px solid #000;
}
TABLE TR:first-child TD {
  border-top: 1px solid #000;
}


/* element text  2 spalten */
.textblock-2cols {
  padding:100px 50px;
}
.textblock-2cols .reframe {
  display:flex;
}
.textblock__col1 {
  flex-basis:50%;
  padding-right:20px;
}
.textblock__col2 {
  flex-basis:50%;
  padding-left:20px;
}


/* element teaser (pic-text) */
.teaser {
  display:flex;
  margin: 80px 0;
}
.teaser--sm {
  height:500px;
}
.teaser--md {
  height:700px;
}
.teaser--lg {
  height:850px;
}

.teaser__bg-pic {
  background-repeat:no-repeat;
  background-size:cover;
  background-position: right center;
  width:50%;
}
.teaser__text {
  display:flex;
  width:50%;
  padding:80px 50px;
  justify-content: flex-start;
}
.teaser__text .btn, .diagram .btn {
  display:inline-block;
}
.teaser__textframe {
  max-width:590px;
}
.reverse .teaser__bg-pic {
  order:2;
  background-position: left center;
}
.reverse .teaser__text {
  justify-content: flex-end;
}

/* element teaser (bild+text)
.teaser2 .reframe {
  display:flex;
  background-color:#fff;
}

.teaser2--sm {
  height:500px;
}
.teaser2--md {
  height:700px;
}
.teaser2--lg {
  height:850px;
}

.teaser2__bg-pic {
  background-repeat:no-repeat;
  background-size:cover;
  background-position: right center;
  width:40%;
  height:700px;
}
.teaser2__text {
  display:flex;
  width:60%;
  padding:80px 80px;
  justify-content: flex-start;
}
.teaser2__textframe {
  max-width:580px;
}
.reverse .teaser2__bg-pic {
  order:2;
  background-position: left center;
}
.reverse .teaser2__text {
  justify-content: flex-end;
}
 */



/* element diagram */
.diagram {
  display:flex;
  height:auto;
}
.diagram_graphic {
  width:50%;
  padding:150px 0;
  overflow:hidden;
}
.diagram_balken {
  width:50%;
  padding:150px 0;
  overflow:hidden;
}
.balken {
  display:flex;
  align-items: center;
  position:relative;
  float:right;
}
.balken__number {
  position:absolute;
  left:40%;
  top:-38px;
  font-size:34px;font-size: 3.4rem;
  font-weight:900;
}
.balken:first-child .balken__number {
  left:20px;
  font-size:60px;font-size: 6rem;
  top:-70px;
}
.balken__number SPAN {
  font-size:22px;font-size: 2.2rem;
  font-weight:300;
}
.balken P {
  margin:0 50px;
  color:#fff;
}
.balken__text {
  position:absolute;
  color:#fff;
}

.diagram__text {
  display:flex;
  width:50%;
  padding:80px 50px;
  justify-content: flex-end;
}
.diagram__textframe {
  max-width:590px;
}
.diagram_graphic IMG {
  height:395px;
  width: auto;
}


/* Element Studien */
.studien {
  position: relative;
}
.studien .reframe {
  position: relative;
  height:850px;
  display: flex;
}
.studien .claim {
  align-self: center;
}

/* Element Studien Skala mit Animation */
#scale {
  position: relative;
  padding: 0 50px;
}

#scale .reframe {
  position: relative;
  height:850px;
  display: flex;
}
#scale  .claim {
  align-self: center;
}
#scale-parts {
  position:absolute;
  right:0px;top:0;
  width:405px;
  height:1700px;
  padding-top:850px;
  background-image: url(../ssco_scala_green.png);
  background-repeat: repeat-y;
  background-position: 240px top;
}
#scale-parts .inner {
  height:850px;
  background-position: 100px top;
}
.scale-part {
  border-bottom:1px solid #000;
}
.scale-part {
  position:absolute;
  left:0;top:100px;
  width:265px;
  border-bottom:1px solid #90c149;
  color:#90c149;
  font-size:32px;font-size:3.2rem;
  font-weight:700;
}
.scale-part.right {
  right:0;left:auto;
  text-align:right;
  width:180px;
}
.scale-part.big {
font-size:70px;font-size:7rem;
}
.scale-part P {
  margin-bottom:-8px !important;
}
.scale-part.big P {
  margin-bottom:-30px !important;
}
.scale-part SPAN {
font-size:18px;font-size:1.8rem;
font-weight:400;
}
.scale-part.big SPAN {
font-size:18px;font-size:1.8rem;
}
#scale .btn {
  display:inline-block;
}


/* Element Statistik */
#statistik {
  display:flex;
  align-items: center;
  height:850px;
  padding:100px 0;
  background-size:cover;
  background-position: bottom center;
  background-repeat:no-repeat;
}
#statistik .reframe {
  display:flex;
}
.counter {
  margin:0 auto;
}
.counter__circle {
  width:401px;
  height: 400px;
  background-image: url(../ssco_circle_blue.png);
  background-position: center center;
  background-repeat:no-repeat;
  font-size:48px;font-size:4.8rem;
  color:#004661;
  text-align:center;
  padding-top: 85px;
}
.counter__circle SPAN {
  font-size:140px;font-size:14rem;
  font-weight:700;
}

#statistik-marker1 {
  position: absolute;
  left: 0; top: 152px;
  width: 425px;
  height: auto;
  visibility:hidden;
}
#statistik-marker2 {
  position: absolute;
  right: 1px; top: -48px;
  width: 405px;
  height: auto;
  text-align:right;
  visibility:hidden;
}
#statistik-marker3 {
  position: absolute;
  right: 40px; top: 346px;
  width: 414px;
  height: auto;
  text-align:right;
  visibility:hidden;
}

#statistik .text H3,
#statistik .text P {
  color: #004661;
}
#statistik .text H3 {
  position:relative;
  padding-bottom: 12px;
  margin-bottom:12px;
}
#statistik .text H3::after {
  position: absolute;
  left: -0; bottom: -0;
  content: "";
  height:1px;
  width:100%;
  background-color: #004661;
}
#statistik #statistik-marker1 H3,
#statistik #statistik-marker1 P {
  padding-right: 70px;
  margin-right: -40px;
}
#statistik #statistik-marker2 H3,
#statistik #statistik-marker2 P
#statistik #statistik-marker3 H3,
#statistik #statistik-marker3 P {
  padding-left: 50px;
  margin-left: -40px;
  position: relative;
}

#statistik-marker2 H3::before {
  position: absolute;
  left: -85px; bottom: -35px;
  content: "";
  height:1px;
  width:100px;
  background-color: #004661;
  transform: rotate(-45deg);
}
#statistik-marker3 H3::before {
  position: absolute;
  left: -84px; bottom: 35px;
  content: "";
  height:1px;
  width:100px;
  background-color: #004661;
  transform: rotate(45deg);
}

/* Element Historie */
#history {
  height:832px;
  background-size:cover;
  background-position: bottom center;
  background-repeat:no-repeat;
}
.frame-history {
  position: relative;
  height:100%;
  width:100%;
  background-image: url(../bg_historie.png);
  background-position:  0 319px;
  background-repeat:repeat-x;
}

.stage-history {
  position:relative;
  margin:0 auto;
  height:100%;
  width:1280px;
}

.stage-history .inner {
  height:100%;
  width:1280px;
}

.history-date {
  padding-left: 10px;
  color:#004661;
  font-size: 32px;font-size: 3.2rem;
  font-weight: 800;
  border-left:2px solid #7fa2b0;
}
.history-date P {
  margin:0;
  margin-top:-0.25em;
  cursor:pointer;
}
.history-text {
  display:none;
  opacity:0;
  color:#004661;
  max-width:490px;
  padding-left:12px;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -ms-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.history-text.active {
  opacity:1;
}

.history-text H3 {
  font-size: 24px;font-size: 2.4rem;
  font-weight: 800;
  margin-bottom:25px;
  color:#004661;
}

#date-1984 {
  position:absolute;
  left:80px;top:245px;
  height:82px;
}
#text-1984 {
  position:absolute;
  left:80px;top:25px;
}

#date-1992 {
  position:absolute;
  left:272px;top:318px;
  height:152px;
  font-size:90px;font-size:9rem;
}
#text-1992 {
  position:absolute;
  left:272px;top:490px;
}

#date-1999 {
  position:absolute;
  left:376px;top:225px;
  height:102px;
  font-size:48px;font-size:4.8rem;
}
#text-1999 {
  position:absolute;
  left:376px;top:25px;
}

#date-2007 {
  position:absolute;
  left:628px;top:318px;
  height:90px;
  font-size:48px;font-size:4.8rem;
}
#text-2007 {
  position:absolute;
  left:628px;top:428px;
}

#date-2008 {
  position:absolute;
  left:684px;top:165px;
  height:162px;
}
#text-2008 {
  position:absolute;
  left:684px;top:25px;
}

#date-2014 {
  position:absolute;
  left:968px;top:318px;
  height:127px;
}
#text-2014 {
  position:absolute;
  left:562px;top:465px;
  text-align:right;
}

#date-heute {
  position:absolute;
  left:1116px;top:272px;
  height:55px;
  padding-left: 0;
  border:0;
}
#text-heute {
  position:absolute;
  left:722px;top:25px;
  text-align:right;
}

.date-down {
  display:flex;
  align-items: flex-end;
  top:318px !important;
}
.date-down P  {
  margin-top:0;
  margin-bottom:-0.15em;
}


#prev-history {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M125.098 68.848v12.305h-76.172l34.863 35.156-8.789 8.789-50.098-50.098 50.098-50.098 8.789 8.789-34.863 35.156h76.172z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  left: 0;
}
#next-history {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  right: 0;
}
#prev-history,#next-history {
  display:none;
  position: absolute;
  bottom:0;
  height: 60px;
  width: 60px;
  z-index: 800;
  background-color: #575757;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#prev-history:hover {background-position: 28% center; }
#next-history:hover {background-position: 72% center; }



/* Slider Content */
.slider {
    position:relative;
    height:750px;
}
.slider .reframe {height:100%;}
.slider .cycle-slideshow {
  position:relative;
  width:100%;
}
.slider .cycle-slide {
  width: 100%;
  height:750px;
  padding:90px 0;
}
.slider .item   {
  background-repeat:norepeat;
  background-position:center center;
  background-size:cover;
}
.slider .item .teaserBox  {
  max-height:560px;
  width:430px;
  overflow:hidden;
}

.slider .cycle-prev {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M125.098 68.848v12.305h-76.172l34.863 35.156-8.789 8.789-50.098-50.098 50.098-50.098 8.789 8.789-34.863 35.156h76.172z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  left: 0;
}
.slider .cycle-next {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  right: 0;
}
.slider .cycle-prev, .slider .cycle-next {
  position: absolute;
  bottom:0;
  height: 60px;
  width: 60px;
  z-index: 800;
  background-color: #575757;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider .cycle-prev:hover {background-position: 28% center; }
.slider .cycle-next:hover {background-position: 72% center; }


.slider.small {
  position:relative;
  height:auto;
}
.slider.small .cycle-slideshow {
  position:relative;
}
.slider.small .cycle-slide {
  width: 100%;
  height:auto;
  padding:90px 0;
}
.slider.small .cycle-prev, .slider.small .cycle-next {
  bottom:90px;
}

/* Application Process */
#application-process  {
  height:auto;
}
#application-process .cycle-slide {
  height: auto;
  padding: 80px 0;
}
#application-process .item {
  height: 850px;
}
#application-process .item.steps {
  height: auto;
  padding: 0;
}
#application-trigger  {
  position: absolute;
  right:0;top:50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height:auto;
  text-align:right;
}
#application-trigger .btn {
  margin:0 0 3px;
  height:72px;
  padding: 16px 80px 13px 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='50' width='50'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-position: 95% center;
  background-repeat: no-repeat;
  font-size: 24px;font-size: 2.4rem;
  cursor: pointer;
}
#application-trigger .btn:hover {
  background-position: 96.5% center;
}
#application-process .slider .item  {
  position: relative;
}

.step-back {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 72px;
  height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='48' width='48'%3E%3Cpath d='M125.098 68.848v12.305h-76.172l34.863 35.156-8.789 8.789-50.098-50.098 50.098-50.098 8.789 8.789-34.863 35.156h76.172z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #549fa7;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;

}
.step-back:hover {background-position: 35% center; }

.step-frame {
  display: flex;
  margin:250px 0 0 50px;
  justify-content: space-between;
}

.step-text {
  padding-right:75px;
}
.step-text H3 {
  font-size:90px;font-size: 9rem;
}
.step-text UL {
  margin:0 0 20px 28px;
  list-style-image: url(../bullet.png);
}
.step-text UL LI {
  margin:0;
}

.stepby {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-top:75px;
}

.stepby__step {
  position:relative;
  width:62px;
  height: auto;
  min-height: 400px;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  transition: width 0.3s ease-in-out;
  cursor:pointer;
}
.stepby__step.active {
  width:400px;
}

.stepby__text {
  overflow: hidden;
  opacity:0;
}
.stepby__text .inner {
  padding:50px 40px;
  width:400px;
}
.stepby__step.active .stepby__text {
  opacity:1;
}

.stepby__step .number {
  position:absolute;
  top:-1.14em;
  right:10px;
  font-size:72px;font-size: 7.2rem;
  font-weight: 800;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.stepby__step.active .number {
  top:-1.14em;
  right:38px;
  font-size:144px;font-size: 14.4rem;
}
.step1, .step1 .stepby__text {background-color:#549fa7;}
.step2, .step2 .stepby__text {background-color:#d2b940;}
.step3, .step3 .stepby__text {background-color:#b93a4b;}
.step4, .step4 .stepby__text {background-color:#f4364c;}
.step5, .step5 .stepby__text {background-color:#004661;}

.step1 .number {color:#549fa7;}
.step2 .number {color:#d2b940;}
.step3 .number {color:#b93a4b;}
.step4 .number {color:#f4364c;}
.step5 .number {color:#004661;}


/* Minds */
.mindslayer {
  position: fixed;
  top:0;left:120%;right:0;bottom:0;
  background-color: #000;
  z-index:10000;
}
.mindslayer .slideshow {
  height:100%;
}
.mindslayer .cycle-carousel-wrap {height:100%;}

.minds {
  position:relative !important;
  width:480px;
  height:100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index:500;
}
.prev-minds {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M125.098 68.848v12.305h-76.172l34.863 35.156-8.789 8.789-50.098-50.098 50.098-50.098 8.789 8.789-34.863 35.156h76.172z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  left: 62px;
}
.next-minds {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='40' width='40'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  right: 0;
}
.prev-minds,.next-minds {
  position: absolute;
  height: 60px;
  width: 60px;
  z-index: 800;
  background-color: #575757;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.prev-minds {
  left: 62px;
  bottom:0;
}
.next-minds {
  right: 0;
  bottom:0;
}
.prev-minds:hover {background-position: 28% center; }
.next-minds:hover {background-position: 72% center; }
.close-minds {
  position: absolute;
  left: 0;
  bottom:0;
  height: 60px;
  width: 60px;
  z-index: 800;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' height='36' width='36'%3E%3Cpath d='M19 4q0.43 0 0.715 0.285t0.285 0.715q0 0.422-0.289 0.711l-6.297 6.289 6.297 6.289q0.289 0.289 0.289 0.711 0 0.43-0.285 0.715t-0.715 0.285q-0.422 0-0.711-0.289l-6.289-6.297-6.289 6.297q-0.289 0.289-0.711 0.289-0.43 0-0.715-0.285t-0.285-0.715q0-0.422 0.289-0.711l6.297-6.289-6.297-6.289q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285q0.422 0 0.711 0.289l6.289 6.297 6.289-6.297q0.289-0.289 0.711-0.289z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  background-color: #575757;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}


.minds__content {
  position: absolute;
  left:50px;bottom:128px;
  color:#fff;
}
.minds__content H3 {
  color:#fff;
  margin-bottom:30px;
}
.minds__content h4 {
  font-weight:800;
  margin-bottom:3px;
}
.plus {
  display: inline-block;
  width:50px;
  height:50px;
  line-height:42px;
  font-size: 50px;
  color:#000;
  text-align:center;
  cursor:pointer;
}

.minds__detail {
  position: fixed;
  left:100%;right: 0;
  top: 0;bottom: 0;
  width:100%;
  background-color: white;
  z-index:1000;
  overflow: hidden;
}
.detail__text {
  float:left;
  max-width:40%;
  height:auto;
  padding:184px  0 0 80px ;
}
.detail__text .btn {
  display: inline-block;
  padding: 13px 20px 13px 50px;
  margin-bottom:20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='27' width='27'%3E%3Cpath d='M125.098 68.848v12.305h-76.172l34.863 35.156-8.789 8.789-50.098-50.098 50.098-50.098 8.789 8.789-34.863 35.156h76.172z' style='fill:%23000000' /%3E%3C/svg%3E");
  background-position: 7% center;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.2s ease;
  -moz-transition: background-position 0.2s ease;
  -ms-transition: background-position 0.2s ease;
  transition: background-position 0.2s ease;
  cursor:pointer;
}
.detail__text .btn:hover {
  background-position: 5% center;
}

.detail__text P {
	/*
	font-size: 36px;
	font-size: 3.6rem;
	line-height: 1;
	*/
	/*margin-bottom: 45px;*/
}

.detail__pic {
  float:right;
  width:540px;
  height:100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.minds__detail-ud {
  position:fixed;
  display:block;
  bottom: 0px;right:-65px;
  width:60px;
  height:60px;
  text-align:right;
  z-index:9999;
  opacity:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='60' width='60'%3E%3Cpath d='M125.098 75l-50.098 50.098-50.098-50.098 9.082-8.789 34.863 34.863v-76.172h12.305v76.172l35.156-34.863z' style='fill:%23F4364C ' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 90% center;
  background-color:#575757;
  cursor:pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.minds__detail-ud.active {
  right:0;
  opacity:1;
}
.minds__detail-ud.flip  {
  -webkit-transform: rotateX(180deg);  /* to support Safari and Android browser */
  -ms-transform: rotateX(180deg);      /* to support IE 9 */
  transform: rotateX(180deg);
}


/* Grafik Career Possibilities */
#possibilities {
  position:relative;
  width:100%;
}
#possibilities .item {
  position:absolute;
  width:24px; height:24px;
  background-color:#000;
  cursor:pointer;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
#possibilities .item:hover {
  background-color:#F4364C;
  color:#F4364C;
}

#possibilities .item.size2 { width:40px; height:40px;}
#possibilities .item.size3 { width:80px; height:80px;}
#possibilities .item.size4 { width:100px; height:100px;}

#possibilities .item P {
  position:absolute;
  left:0; bottom:28px;
  font-size:12px;font-size: 1.2rem;
  font-weight: 800;
  line-height:1;
  margin:0;
  text-transform: uppercase;
}
#possibilities .item.size2 P {
  bottom:50px;
  font-size:18px;font-size: 1.8rem;
}
#possibilities .item.size3 P {
  bottom:85px;
  font-size:24px;font-size: 2.4rem;
}
#possibilities .item.size4 P {
  bottom:105px;
  font-size:24px;font-size: 2.4rem;
}

#pb1 {
  /* x-y: 260 - 804*/
  left:62.8125%; top:20.3125%;
}
#pb2 {
  /* 954 - 366*/
  left:74.53125%; top:28.59375%;
}
#pb3 {
  /* 1073 - 478*/
  left:83.828125%; top:37.34375%;
}
#pb4 {
  /* 1110 - 652*/
  left:86.71875%; top:50.9375%;
}
#pb5 {
  /* 1054 - 749*/
  left:82.34375%; top:58.515625%;
}
#pb6 {
  /* 993 - 890*/
  left:77.578125%; top:69.53125%;
}
#pb7 {
  /* 712 - 1076*/
  left:55.625%; top:84.0625%;
}
#pb8 {
  /* 443 - 1073*/
  left:34.609375%; top:83.828125%;
}
#pb9 {
  /* 263 - 917*/
  left:20.546875%; top:71.640625%;
}
#pb10 {
  /* 192 - 532*/
  left:15%; top:41.5625%;
}
#pb11 {
  /* 295 - 430*/
  left:23.046875%; top:33.59375%;
}
#pb12 {
  /* 237 - 320 */
  left:18.515625%; top:25%;
}
#pb13 {
  /* 407 - 258*/
  left:31.796875%; top:20.15625%;
}
#pb14 {
  /* 549 - 218 */
  left:42.890625%; top:17.03125%;
}
#pb15 {
  /* 714 - 553 */
  left:55.78125%; top:43.203125%;
}
#pb16 {
  /* 502 - 733 */
  left:39.21875%; top:57.265625%;
}
#pb17 {
  /* 475 - 489 */
  left:37.109375%; top:38.203125%;
}

.item-text {
  display:none;
  position:absolute;
  left:50%;top:50%;
  transform: translate(-50%, -50%);
  background-color:#d2b940;
  padding: 50px 50px 20px;
}
.item-text.active {display:none;}
.item-text::after {
  position:absolute;
  right:0;top:0;
  width:24px; height:24px;
  background-color:#000;
  content: '';
}
.item-text.size2::after { width:40px; height:40px;}
.item-text.size3::after { width:80px; height:80px;}
.item-text.size4::after { width:100px; height:100px;}
.item-text H3 {
  font-size:24px;font-size: 2.4rem;
  margin-bottom:10px;
}

.whitelayer,.whitelayer2 {
  display:none;
  position: absolute;
  left: 0;right: 0;
  top: 0; bottom: 0;
  background-color: rgba(255,255,255, 0.7);
}


/* searchresults */
#searchresults  {
  padding:150px 20px 50px;
  background-color: #575757;
}
#searchresults .text {
  max-width:1080px;
}
#searchresults .text A,#searchresults .text A:hover {
  text-decoration:none;
  color: #000;
}
#searchresults .text SPAN {
  color:#f4364c;
  font-weight:400;
  background-color:rgba(0,0,0, 0.1);
}
#searchresults .result {
  padding-bottom:10px;
  border-bottom:1px solid #000;
  margin-bottom:30px;
}


/* contact + form */
.formcol1 {
  width:48%;
	float: left;
}
.formcol2 {
  width:48%;
	float: right;
}

#contactform {
  margin-bottom:40px;
}

#contactform LABEL {
  display:block;
	width:100%;
	height:28px;
	font-weight:700;
  text-transform:uppercase;
}
#contactform INPUT.formtext {
  font-family: 'tablet-gothic', Arial, sans-serif;
  font-size:18px;font-size: 1.8rem;
	width:100%;
	height:50px;
  padding:0 10px;
	border:0;
	margin-bottom:25px;
  background-color:#dde0e1;
}
#contactform SELECT {
	width:255px;
	height:50px;
  padding:0 16px;
	border:0;
	margin-bottom:25px;
  background-color:#dde0e1;
}
#contactform OPTION {
  padding:0 10px;
  background-color:#dde0e1;
}

#contactform TEXTAREA {
	width:100%;
	height:250px;
  padding:10px 10px;
	border:0;
  font-family: 'tablet-gothic', Arial, sans-serif;
  font-size:18px;font-size: 1.8rem;
	margin-bottom:45px;
  background-color:#dde0e1;
}

#contactform INPUT.submit {
  font-family: 'tablet-gothic', Arial, sans-serif;
	display:block;
  float:right;
  height:50px;
	padding:0 20px;
	color:#85888d;
  font-weight: 700;
  background-color: #dde0e1;
	border:0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
	cursor:pointer;
}
#contactform INPUT.submit:hover {
  background-color:#d2b940;
  color:#000;
}

#contactform INPUT:hover,
#contactform TEXTAREA:hover,
#contactform SELECT:hover {
  background-color:#dde0e1;
}
#contactform INPUT.error,
#contactform TEXTAREA.error,
#contactform SELECT.error {
  background-color:#f4364c;
  color:#fff;
}


/* FOOTER */
FOOTER {
  position:relative;
  color: #000;
  padding:65px 0 45px;
  font-size:14px;font-size: 1.4rem;
  background-color: #575757;
  clear:both;
}
FOOTER .reframe {
display: block;
}
.footer-navigation {
  display: flex;
  text-align: left;
  padding: 0 80px;
  flex-flow: row wrap;
  justify-content: flex-end;
}
.footer-navigation__col {
  flex-basis: 25%;
}

FOOTER A {
  color: #000;
  text-decoration:none;
}
FOOTER H3 {
  position:relative;
  font-size:12px;font-size: 1.2rem;
  font-weight:700;
  padding-bottom:10px;
  margin-bottom:40px;
}
FOOTER H3::after {
  content: " ";
  position:absolute;
  left:0;bottom:0;
  height:3px;width:24px;
  background-color:#000;
}
FOOTER P,
FOOTER LI {
  line-height:1.5;
}

FOOTER UL {
  list-style: none;
  margin:0 0 25px 0;
}
FOOTER LI {
  position:relative;
  padding-left:0;
  margin-bottom:7px;
}



.bg-lightgrey {background-color:#dde0e1;}



/* ---------------------------------------------------------
   @media
   ---------------------------------------------------------*/

@media screen and (min-width: 1350px) and (max-width: 1380px) {
  /*
  .studien .claim, .bigpic .claim {
    padding-left:50px;
  }
  */

}

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

  .reframe { max-width:1024px;}

  #stage H1 { font-size:90px;font-size: 9rem; }


  /* shuffle  */
  .shuffleblock {
    width:720px;
  }

/* element text mitte*/
  .textblock {
    padding:80px 50px;
  }

  /* element text  2 spalten */
  .textblock-2cols {
    padding-top:80px;
    padding-bottom:80px;
  }

  .bigpic {height:768px;}

/* element teaser*/
  /*.teaser2 .reframe { max-width:100%;}
  .teaser2__bg-pic { width:50%;}
  .teaser2__text {
    width:50%;
    padding:80px 50px;
  }  */
  .teaser__bg-pic { width:50%;}
  .teaser__text {
    width:50%;
    padding:80px 50px;
  }
  .teaser__textframe {
    max-width: 462px;
  }

  /* element diagram */
  .diagram__text {
    padding:80px 50px;
  }
  .diagram__textframe {
    max-width:460px;
  }

  #statistik .counter {margin:0 0 0 570px; }
  #statistik-marker1 {
    width: 555px;
  }
  #statistik-marker2, #statistik-marker3 {display:none;}


  /* Element Historie */
  #history {
    height:768px;
  }
  .stage-history {
    width:100%;
    overflow:hidden;
  }
  .stage-history .inner {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  #prev-history,#next-history {
    display:block;
  }

  /* Element application Process */
  .step-text {
    padding-right: 50px;
    width: 100%;
  }
  .step-text .col1 {
    float: left;
    width: 45%;
  }
  .step-text .col2 {
    float: right;
    width: 45%;
    padding-top: 30px;
  }
  .step-frame {
    flex-wrap: wrap;
    margin:200px 0 0 50px;
    justify-content: flex-end;
  }
  .stepby {
    padding-top:130px;
  }

  /* Minds */
  .detail__text {
    max-width:50%;
  }
  .detail__pic {
    width: 414px;
  }

  #searchresults .text {
    padding:0 30px;
  }


  .footer-navigation {padding: 0 50px;}
  .footer-navigation__col {flex-basis: 33.3333%;}


}

/* ---------------------------------------------------------*/
@media screen and (max-width: 1024px) {


  .reframe { max-width:768px; }


  H1, .bigpic H1, #stage H1 { font-size:70px;font-size: 7rem; }
  H1 span {font-size: 130px; font-size: 13rem;}

  #naviFrame {
    padding-top: 10px;
    width: 100%;
    height: calc(-100vh);
    overflow:auto;
  }
  .openNav #naviFrame {
    height: calc(100vh - 97px);
  }
  #slbar {
    margin-bottom: 25px;
    margin-right:10px;
  }
  #searchbar {
    padding-left:10px;
    width:90%;
  }
  #searchbar INPUT[type="submit"] {
    left:10px;
  }

  #mainnavi {
    max-width: 100%;
  }
  #mainnavi > UL {
    margin:0;
  }
  #mainnavi > UL > LI {
    position:relative;
    display: block;
    height:auto;
    text-align:left;
    font-size:36px;font-size:3.6rem;
    padding:0;
    border:0;
  }
  #mainnavi > UL > LI .arrow {
    display:block;
    position:absolute;
    right:20px;top:0;
    height:40px;
    width:40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150' height='40' width='40'%3E%3Cpath d='M89.983 61.607c0 0.67-0.335 1.423-0.837 1.925l-39.007 39.007c-0.502 0.502-1.256 0.837-1.925 0.837s-1.423-0.335-1.925-0.837l-39.007-39.007c-0.502-0.502-0.837-1.256-0.837-1.925s0.335-1.423 0.837-1.925l4.185-4.185c0.502-0.502 1.172-0.837 1.925-0.837 0.67 0 1.423 0.335 1.925 0.837l32.896 32.896 32.896-32.896c0.502-0.502 1.256-0.837 1.925-0.837s1.423 0.335 1.925 0.837l4.185 4.185c0.502 0.502 0.837 1.256 0.837 1.925z' style='fill:%23000000 ' /%3E%3C/svg%3E");
    cursor:pointer;
  }
  #mainnavi > UL > LI .arrow.active  {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150' height='40' width='40'%3E%3Cpath d='M89.983 99.107c0 0.67-0.335 1.423-0.837 1.925l-4.185 4.185c-0.502 0.502-1.172 0.837-1.925 0.837-0.67 0-1.423-0.335-1.925-0.837l-32.896-32.896-32.896 32.896c-0.502 0.502-1.256 0.837-1.925 0.837s-1.423-0.335-1.925-0.837l-4.185-4.185c-0.502-0.502-0.837-1.256-0.837-1.925s0.335-1.423 0.837-1.925l39.007-39.007c0.502-0.502 1.256-0.837 1.925-0.837s1.423 0.335 1.925 0.837l39.007 39.007c0.502 0.502 0.837 1.256 0.837 1.925z' style='fill:%23000000 ' /%3E%3C/svg%3E");
  }
  #mainnavi > UL > LI > DIV {
    display: block;
    height: auto;
    margin-bottom: 0;
    padding-left:20px;
  }
  #mainnavi > UL > LI {
    margin-bottom: 30px;
  }

  #mainnavi > UL > LI > A {
    display:block;
    height:auto;
    color: #fff !important;
    margin: 0 auto;
    padding: 13px 0;
  }

 /* subnav */
  #mainnavi .has-submenu .active {
    display:block;
  }
  #mainnavi ul ul li.last {
    display: none;
  }

  #mainnavi ul li > ul {
    display: none;
    position:relative;
    height:auto;
    padding:10px 0 0 0;
    text-align:left;
  }
  #mainnavi UL UL LI {
    display:block;
    position:relative;
    margin-bottom: 0px;
    padding:0 0 0 80px;
  }
  #mainnavi UL UL LI a {
  }
  #mainnavi > UL ul > li a:after {
    content: " ";
    display:block;
    position:absolute;
    left:0;top:23px;
    height:10px;
    width:0;
    background: url(../bg_subnavi-v.png) repeat-x;
    -webkit-transition: width 0.4s ease;
    -moz-transition: width 0.4s ease;
    -ms-transition: width 0.4s ease;
    transition: width 0.4s ease;
  }
  #mainnavi > UL ul > li a:hover:after {
    width:50px;
  }

/* element text mitte*/
  .textblock {
    padding:50px 50px;
  }

/* element text  2 spalten */
  .textblock-2cols .reframe {
    flex-wrap: wrap;
  }
  .textblock-2cols {
    padding-top:50px;
    padding-bottom:50px;

  }
  .textblock__col1 {
    flex-basis:auto;
    padding-right:0;
  }
  .textblock__col2 {
    flex-basis:auto;
    padding-left:0;
  }

/*
  .teaser__textframe {
    max-width: 335px;
  } */

  .teaser--md {
    flex-wrap: wrap;
    height: auto;
  }
  .teaser{ flex-wrap: wrap;height:auto;}
  .teaser__bg-pic { width:100%;height:400px;background-position: center center;}
  .teaser__text { width: 100%; }
  .reverse .teaser__bg-pic {order:0; }
  .teaser__textframe {
    max-width: 100%;
  }



/* element diagram */
  .diagram {
    flex-wrap: wrap;
  }
  .diagram_balken {
    width:100%;
    padding:50px 0 50px 50px;
  }
  .diagramm_graphic {
    width:100%;
    padding:50px 0 50px 50px;
  }
  .diagram__text {
    width:100%;
    padding:80px 50px;
  }
  .diagram__textframe {
    max-width:768px;
    margin:0 auto;
  }

/* Statistik animation */
  #statistik .reframe {
    flex-direction: column;
  }
  #statistik .counter {
    margin:0 auto;
  }
  #statistik .counter__circle {
    width:300px;
    height: 300px;
    padding-top: 70px;
    background-size: contain;
  }
  .counter__circle SPAN {
    font-size: 100px; font-size: 10rem;
  }


  #statistik-marker1 {
    position: relative;
    display:block;
    top:auto;
    width: 90%;
    margin-top:40px;
  }
  #statistik #statistik-marker1 H3,
  #statistik #statistik-marker1 P{
    padding-right:0;
    margin-right:0;
  }
  #statistik-marker1 h3::after {
    transform: rotate(90deg);
    width:30px !important;
    left:48% !important;
    top:-30px;
  }

  .bigpic {height:540px;}


  /* Element Historie */
  #history {
    height:768px;
  }

  /* Element Application Process */
  .step-text H3  {
    font-size:70px;font-size:7rem;
  }


  /* Minds */
  .detail__text {
    max-width:50%;
    padding-left:20px;
  }
  .detail__pic {
    width: 320px;
  }

  /* grafik possibilities */
  #possibilities .item { width:15px; height:15px;}
  #possibilities .item.size2 { width:25px; height:25px;}
  #possibilities .item.size3 { width:38px; height:38px;}
  #possibilities .item.size4 { width:47px; height:47px;}
  #possibilities .item P {
    bottom:20px;
  }
  #possibilities .item.size2 P {
    bottom:28px;
    font-size:15px;font-size: 1.5rem;
  }
  #possibilities .item.size3 P {
    bottom:42px;
    font-size:19px;font-size: 1.9rem;
  }
  #possibilities .item.size4 P {
    bottom:50px;
    font-size:21px;font-size: 2.1rem;
  }


}

/* ---------------------------------------------------------*/

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

  #logo {
    right:20px;
  }

  #toggleMenu {
    left:20px;
  }

/* element text  2 spalten */
  .textblock-2cols {
    padding:50px 50px;
  }


/* element teaser*/
  /* .teaser2 .reframe { width:100%;}
  .teaser2__bg-pic { width:40%;}
  .teaser2__text {width:60%; }  */
  /*.teaser__bg-pic { width:40%;}
  .teaser__text {width:60%; }
  .teaser__textframe {
    max-width: 100%;
  }*/


  .teaser--sm {
    height:500px;
  }
  /* .teaser--md {
    height:700px;
  } */
  .teaser--lg {
    height:850px;
  }

  /* element diagram */
  .diagram__text {
    padding:80px 50px;
  }

  .shuffleblock {
    width:360px;
  }

  .teaserBox.double, .eventBox.double {
    width:360px;
  }
  #scale H1 { font-size:36px;font-size:3.6rem;}


  /* Minds */
  .detail__text {
    float:none;
    width:100%;
    max-width:100%;
    padding:40px 20px;
  }
  .detail__pic {
    float:none;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height:280px;
  }

  #searchresults .text {
    padding:0;
  }


  .item-text {
    padding: 20px 20px 0px;
  }


  FOOTER .reframe { width:100%;padding:0 20px; }
  .footer-navigation {justify-content: flex-start;padding:0 0; }
  .footer-navigation__col {flex-basis: 50%;}


}

/* ---------------------------------------------------------*/
@media screen and (max-width: 767px) {
  #backgroundvid {
    /* display: none; */
  }
}

/* ---------------------------------------------------------*/
@media screen and (max-width: 649px) {

  /* Element Application Process */

  .step-frame {
    margin-left: 0;
  }
  .step-text {
    padding: 0 50px;
  }
  .stepby {
    margin-top:20px;
  }
  .stepby__step.active {
    width: 100%;
    display: block;
    align-self: flex-end;
  }
  .stepby__step {
    display: none;
  }
  .stepby__text .inner {
    width: 100%;
    padding: 40px 50px;
  }

}

/* ---------------------------------------------------------*/

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

  #logo {
    top:32px;
    width: 218px;
    height: 32px;
  }

  .reframe { max-width:400px; }

  #stage .claim {
    left: 20px;
  }

  .zitat  {
    font-size:24px;font-size: 2.4rem;
  }
  .zitat SPAN  {
    font-size:34px;font-size: 3.4rem;
  }
  .zitat::before {
    top: -125px;
    font-size: 148px; font-size: 14.8rem;
  }
  .zitat::after {
    bottom: -60px;
    font-size: 148px; font-size: 14.8rem;
  }

  #anchor-navigation { display:none; }

  .bigpic, #scale {padding: 0 20px;}

  /* shuffle block */
  .shuffle-filter {
    padding:40px 20px;
  }

/* element text mitte*/
  .textblock {
    padding:50px 20px;
  }
/* element text  2 spalten */
  .textblock-2cols {
      padding:50px 20px;
  }
  .textblock-2cols .reframe {
    flex-wrap: wrap;
    width:100%;
    padding:0;
  }
  .textblock-2cols .reframe DIV {
    padding:0;
  }

  /* shuffle  */
  .shuffleblock {
    width:360px;
  }


/* element teaser*/
  .teaser--sm, .teaser--md, teaser--lg  { height:auto;}
  /* .teaser2--sm, .teaser2--md, teaser2--lg  { height:auto;}
  .teaser2 {background-color:#fff !important; }
  .teaser2 .reframe{ flex-wrap: wrap;height:auto;}
  .teaser2__bg-pic { width:100%;height:300px;background-position: center center;}
  .reverse .teaser2__bg-pic {order:0; }
  .teaser2__text {width:100%;padding: 45px 20px; }
  */

  .teaser{ flex-wrap: wrap;height:auto;}
  .teaser__bg-pic { width:100%;height:300px;background-position: center center;}
  .reverse .teaser__bg-pic {order:0; }
  .teaser__text {width:100%;padding: 45px 20px; }

/* element diagram */
  #diagram {
    flex-wrap: wrap;height:auto;
  }
  .diagram_balken {
    width:100%;
    padding:50px 0 50px 20px;
  }
  .diagramm_graphic {
    width:100%;
    padding:50px 20px 80px;
  }
  .diagram__text {
    width:100%;
    padding: 80px 20px;
  }



  #scale-parts {
    right: 0;
    width: 150px;
    background-position: 130px top;
  }
  #scale .claim {
    align-self: center;
    padding-bottom:100%;
  }
  .scale-part {
    width:150px;
  }
  .scale-part.right {
    right:auto;left:0;
    text-align:left;
    width:150px;
  }
  .scale-part.big P {font-size:30px;font-size:3rem;margin-bottom:-4px !important;}


  /* Element Historie */
  #history {
    height:677px;
  }

  /* Element Application Process */
  #application-process .cycle-slide {
    height: auto;
    padding: 50px 0;
  }
  #application-process .item {
    height: 540px;
  }
  #application-trigger  {
    right:auto;top:auto;
    left:20px;bottom:20px;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    text-align:left;
  }
  #application-trigger .btn {
    height:60px;
    padding: 14px 70px 14px 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='44' width='44'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
    background-position: 92% center;
    background-repeat: no-repeat;
    font-size: 18px;font-size: 1.8rem;
  }
  #application-trigger .btn:hover {
    background-position: 94% center;
  }
  #application-process .claim {
    align-self: flex-start;
  }
  .step-frame {
    margin-top: 150px;
  }
  .step-back {
    top:50px;
    left: 20px;
  }
  .step-text {
    padding: 0 20px;
  }
  .stepby__text .inner {
    padding: 40px 20px;
  }
  .step-text .col1,
  .step-text .col2 {float:none;width:100%;padding-top:0;}


  /* grafik possibilities */
  #possibilities .item { width:8px; height:8px;}
  #possibilities .item.size2 { width:12px; height:12px;}
  #possibilities .item.size3 { width:16px; height:16px;}
  #possibilities .item.size4 { width:24px; height:24px;}
  #possibilities .item P {
    bottom:10px;
    font-size:10px;font-size: 1.0rem;
  }
  #possibilities .item.size2 P {
    bottom:14px;
    font-size:10px;font-size: 1.0rem;
  }
  #possibilities .item.size3 P {
    bottom:20px;
    font-size:10px;font-size: 1.0rem;
  }
  #possibilities .item.size4 P {
    bottom:26px;
    font-size:10px;font-size: 1.0rem;
  }

  .whitelayer2 {
    display:block;
  }
  #possibilities {
    width:100%;
    height: auto;
    overflow:hidden;
  }
  #possibilities-text {
      position:relative;
      height: auto;
  }
  #possibilities-text .item-text {
      position:relative;
      display:none;
      left: 0;
      top: auto;
      transform: translate(-0, -0);
      padding-bottom:20px;
  }
  .item-text::after {
    display:none;
}
  #prev-text, #next-text {
      position:absolute;
      width: 60px;height: 60px;
      top:-60px;
      cursor:pointer;
  }
  #prev-text {
      left:0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' height='50' width='50'%3E%3Cpath d='M40.031 22.031v3.938h-24.375l11.156 11.25-2.813 2.813-16.031-16.031 16.031-16.031 2.813 2.813-11.156 11.25h24.375z' style='fill:%23000000' /%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-color: #575757;
  }
  #next-text {
      right:0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' height='50' width='50'%3E%3Cpath d='M75 24.902l50.098 50.098-50.098 50.098-8.789-8.789 34.863-35.156h-76.172v-12.305h76.172l-34.863-35.156z' style='fill:%23000000' /%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-color: #575757;
  }
  .item-text.active {display:block !important;}
  #possibilities .active {z-index:1000;}


  .slider .cycle-slide {
    padding:60px 0;
  }
  .slider .item .teaserBox  {
    max-height:620px;
    padding: 35px 30px;
  }
  .slider .item .teaserBox H3 {
    font-size: 31px; font-size: 3.1rem;
    margin-bottom: 28px;
  }
  .teaserBox h3 span {
    padding: 0 7px;
    line-height: 1.6em;
  }
  .slider .item .teaserBox P {
    font-size: 17px; font-size: 1.7rem;
  }


  FOOTER .reframe { max-width:100%; }

}

/* ---------------------------------------------------------*/
@media screen and (max-width: 400px) {

  .reframe { width:100%; }

  /* shuffle  */
  .shuffleblock {
    width:100%;
    padding:0 20px;
  }
  .teaserBox {
    width:100%;
  }
  .slider .reframe {padding: 0 20px;}

  /* Element Application Process */
  .step-text H3 {
    font-size: 50px;font-size: 5rem;
  }


  .footer-navigation__col {flex-basis: 100%;}
  .footer-navigation__col:nth-child(1),
  .footer-navigation__col:nth-child(2) {
    flex-basis: 50%;
  }

}


/* Ende @media */
/* ---------------------------------------------------------*/

/* END */


/* formularfeld verstecken für robots */
INPUT.reqboth {
  position: absolute;
  left:-999em;
}