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

/*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; max-width: 1000px; margin: 0 auto;
-webkit-user-select: none;-moz-user-select: none; -ms-user-select: none;user-select: none}

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

/*ELEMENTS*/
.graphicSlide {position: absolute; top: 55px; width: 250px; text-align: center; margin-left: -3px; background: #fff; padding: 10px; cursor: pointer}
.graphicSlide:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;bottom: 0; right: 0;box-shadow: 2px 2px 10px rgba(0,0,0,0.3)}
.graphicSlide img {max-width: 100%; display: block}
.graphicSlide.second figure:before {
    content: url("/system/modules/pg_coverflow/assets/img/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: -45px;font-size: 10px;text-align: center;line-height: normal;width: 100%; font-weight: bold}

body.firefox .graphicSlide.second {width: 350px;transform: translateY(-55px);}

.graphicSlide.first {left: 0;transform: rotateY(100deg);box-shadow: -6px 6px 2px -3px rgba(100, 100, 100, 0.3)}
.graphicSlide.second {left: 250px;transform: scale(1.4) translateX(0.5em) translateY(0.5em); z-index: 99999;box-shadow: 0px 6px 2px -3px rgba(100, 100, 100, 0.3)}
.graphicSlide.second.alone {left: 80px} 
.graphicSlide.third {left: 500px;transform: rotateY(-36deg) translateX(1em);box-shadow: 6px 6px 2px -3px rgba(100, 100, 100, 0.3)}
.graphicSlide.fourth {left: 750px;transform: rotateY(-36deg) translateX(-7em);box-shadow: 6px 6px 2px -3px rgba(100, 100, 100, 0.3)}

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

/*LIGHTBOX*/
.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: 120000}
.cwDialInner {position: fixed; width: 70%; left: calc(50% - 600px);max-width: 1200px; min-width: 1200px; top: 5%; min-height: 400px;height: 80vh; background-color: rgba(255,255,255,0.95); padding: 25px; overflow: scroll; z-index: 120001;}

.gsBoxClose {position: absolute; top: 2%; right: 2%; width: 40px; height: 40px; border-radius: 50%; background-color: #910f2f; 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.2); 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, .gsAnsprechpartner {border-bottom: 1px solid #ddd;}
.gsBIDesc .more {font-size: 14px}
.gsBIDesc.noLink .gsBILink.more {display: none}

.gs_downloadButton {position: absolute; left: 0; top: 15%; background-color: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
.gsBIDownload span {width: 60px; height: 60px; border-radius: 50%; display: block; background-color: #910f2f; margin: 0 auto}
.gsBIDownload label {text-align: center; display: inline-block; margin-top: 8px}
.gsBIDesc {padding-top: 0 !important}
.gsBIDesc p {font-size: 14px}

.gsArbeitsgruppen, .gsDate, .gsAnsprechpartner, .gsAutoren {padding: 10px 20px !important; font-size: 14px}
.gsDate span, .gsAnsprechpartner span {display: inline-block; padding-left: 10px}
.gsArbeitsgruppen span, .gsAutoren span {font-weight: bold; display: block}
/*--------------------------------------------------------------------------------------*/
/*---------- MEDIABREAKS --------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
@media (max-width: 1250px)
{
	.cwDialInner {width: 80%;left: 10%;min-width: auto;max-width: none;}

@media (max-width: 1050px)
{
	.cwDialInner {width: 90%;left: 5%;top: 5%; -webkit-overflow-scrolling: touch;transform: translate3d(0,0,0);height: 90vh;overflow: scroll;}
}
/*TABLET*/
@media (max-width: 768px)
{
	.gsBoxPic, .gsBoxInfo {width: 100%; float: none}
	.gsBoxPic img {margin: 0 auto}
	.gsBoxInfo {padding: 20px 0 0 0}
	.gs_downloadButton {transform: scale(0.6);transform-origin: 0}
	
}

/*MOBILE*/
@media (max-width: 668px)
{
	.graphicSlideFrame {max-height: 400px}
	.graphicSlideFrame {margin-top: 0 !important}
	.graphicSlideWrapper {left: -159px}
	.graphicSlide {top: 0}
	.graphicSlide.second {left: 175px; transform: scale(0.8) translateX(0.5em) translateY(0.5em)}
	
}