body.openOverlay, body.hidden {overflow: hidden;}

/*INFOGRAFIKEN ONLY*/
.row.linedown .graphicSlideFrame {border-bottom: 2px solid #ddd;}

/*GENERALS*/
.graphicSlideFrame *, #gsBoxClose, #gsBIDownload span, .graphicSlide figure:before {
-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);
-moz-transition: all .75s cubic-bezier(.23,1,.32,1);
-ms-transition: all .75s cubic-bezier(.23,1,.32,1);
-o-transition: all .75s cubic-bezier(.23,1,.32,1);
transition: all .75s cubic-bezier(.23,1,.32,1)} 
.graphicSlideFrame .opac0{opacity: 0}
.graphicSlideFrame .disable{opacity: 0.5}

/*WRAPPER*/
.graphicSlideFrame {height: 600px; overflow: hidden; position: relative; margin: 0 auto;
-webkit-user-select: none;-moz-user-select: none; -ms-user-select: none;user-select: none}
.graphicSlideFrame .copytextLayer {font-family: var(--font-regular);transform: scale(0.8);transform-origin: 100% 0;}

.graphicSlideWrapper {position: absolute;top: 40px; bottom: 0; left: 40px;width: 100%;perspective: 1000px;}

/*ELEMENTS*/
.graphicSlide {position: absolute; top: 120px; width: 250px; text-align: center; margin-left: -3px; background: #fff; padding: 10px; cursor: pointer;backface-visibility: hidden;-webkit-font-smoothing: subpixel-antialiased;}
.graphicSlide:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;bottom: 0; right: 0;box-shadow: 2px 2px 8px rgba(0,0,0,0.3); border-radius: 12px}
.graphicSlide img {max-width: 100%; display: block}
.graphicSlide.second figure, .graphicSlide.first figure, .graphicSlide.third figure, .graphicSlide.fourth figure{overflow: hidden; position: relative;}
.DIALOGBLOCK .gsBoxPic {text-align: center}
.DIALOGBLOCK .gsBoxPic figure{overflow: hidden; position: relative;display: inline-block;margin: 0 auto;}
.graphicSlide.second figure:before {content: url("search.png");transform: scale(0);opacity: 0; background-color: rgba(0,0,0,0.8);position: absolute;top: 34%;border-radius: 50%;display: block;width: 80px;height: 80px;text-align: center;padding: 10px;box-sizing: border-box;left: 34%;}
.graphicSlide.second figure:hover:before {transform: scale(0.8);opacity: 1; }
.graphicSlide.second .title {display: block !important;position: absolute;left: 0;bottom: -30px;font-size: 10px;text-align: center;line-height: normal;width: 100%; font-weight: bold}

.graphicSlide.first {left: 0;transform:  scale(1.1);box-shadow: -6px 6px 2px -3px rgba(100, 100, 100, 0.3)}

.graphicSlide.second {left: 300px;transform: scale(1.3); z-index: 99999;box-shadow: 0px 6px 2px -3px rgba(100, 100, 100, 0.3)}
.graphicSlide.third {left: 610px;transform: scale(1.1);box-shadow: 6px 6px 2px -3px rgba(100, 100, 100, 0.3); z-index: 2}
.graphicSlide.fourth {left: 850px;transform: scale(0.9);box-shadow: 6px 6px 2px -3px rgba(100, 100, 100, 0.3)}
.graphicSlide.fifth {display: none}

/*NAVIGATION*/
.graphicSlideButton {position: absolute; top: 48%; width: 50px; height: 50px; background-color: #404040; color: #fff; text-align: center; padding: 10px; cursor: pointer; font-size: 1.4em}
.graphicSlideButton.slideLeft {left: 0}
.graphicSlideButton.slideRight {right: 0}

/*LIGHTBOX*/
.DIALOGS{position: absolute;}
.innerNav {width: 90%;left: 5%;
    position: fixed;
    top: 40%;
    z-index: 9999999;}
.innerLeft, .innerRight {position: absolute; font-size: 5em; color: #fff; top: 5px; cursor: pointer}  
.innerLeft {left: 0}    
.innerRight {position: absolute; right: 0}    

.cwDial{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.9); z-index: 1200000}
.cwDialInner {position: fixed; width: 60%; left: 20%; top: 7%; min-height: 400px; background-color: rgba(255,255,255,0.95); padding: 25px; overflow: visible; z-index: 9999999;}

.gsBoxClose {position: absolute; top: -2%; right: -2%; width: 40px; height: 40px; border-radius: 50%; background-color: var(--red); color: #fff; text-align: center; padding: 5px; cursor: pointer;
-webkit-user-select: none;-moz-user-select: none; -ms-user-select: none;user-select: none}
.gsBoxClose:hover, .gsBIDownload span:hover {transform: scale(1.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.4)}
.gsBoxBack.active, .gsBoxInner.active {display: block}

/*.gsBoxPic, .gsBoxInfo {width: 50%; float: left}
.gsBoxInfo {padding: 25px 50px}*/
.gsBoxInfo ul li {list-style-type: none; display: block; min-height: 30px; padding: 20px}
.gsBITitel {font-weight: bold}
.gsBITitel, .gsBIDesc {border-bottom: 1px solid #ddd;}
.gsBIDownload span {width: 60px; height: 60px; border-radius: 50%; display: block; background-color: #910f2f; margin: 0 auto}

.innerNav button:focus-visible, .cBLabel input:focus-visible {
  display: inline-block;
  outline: 2px dashed #fff !important;
}

/*--------------------------------------------------------------------------------------*/
/*---------- MEDIABREAKS --------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
/*TABLET*/
@media (max-width: 1200px)
{
	.graphicSlide.first {left: -10%}
	.graphicSlide.second {left: 11%;transform: scale(2) translateX(0.5em) translateY(0.5em) translateZ(0);}
	
	.innerNav {width: 95%; left: 2.5%;font-size: 0.6em;}
	.cwDialInner {width: 80%;left: 10%;top: 5%; -webkit-overflow-scrolling: touch;transform: translate3d(0,0,0);height: 90vh;overflow: scroll;}
	.gsBoxPic, .gsBoxInfo {width: 100%; float: none}
	.gsBoxPic img {margin: 0 auto}
	.gsBoxInfo {padding: 20px 0 0 0}
}

/*MOBILE*/
@media (max-width: 668px)
{
	.graphicSlideFrame {max-height: 600px}
	.graphicSlideFrame {margin-top: 0 !important}
	
	#article-252 .graphicSlideFrame {max-height: 380px}
	.graphicSlideWrapper {left: -159px; top: 80px}
	.graphicSlide {top: 0;}
	.graphicSlide.third, .graphicSlide.first {transform: scale(1)}
	.graphicSlide.third {left: 560px;}
	.graphicSlide.second {left: 175px;transform: scale(1.2) translateX(3em) translateY(0.5em);}
	
}