/**** General ****/

.interactive-popup{
position: relative;
background: #FFF;
padding: 30px 45px;
width: auto;
margin: 20px auto;
}

.mod-article figure a > .box-icons .icon-interactive{
width: 100px;

position: relative;
margin: 0 5px 0 0;
float: left;
height: 100%;
background-color: #333;
background-color: rgba(31, 31, 31, .9);
display: block;
}

.mod-article figure a > .box-icons .icon-interactive:before{
font-size: 1.25rem;
}


/*** wenn Icon in Font verbaut ist, content anpassen ***/
.icon-interactive:before {
content: "\e80e";
}


/*** einzelne interaktive Grafik ***/

.interactiveArea figure img,.interactiveArea figure {
float: left;
width: 220px;
padding: 0 15px 9px 0;
cursor: pointer;
position: relative;
}

.mod-article .interactiveArea figure a > .box-icons{
bottom: 10px;
}

.interactiveArea .imageContainer:before{
content: "Interaktiv";
font-family: 'Open Sans Condensed', sans-serif;
}



/*** Interactive Slider ***/

.interactiveBigArea figure img,.interactiveBigArea figure{
width: 220px;
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;

-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}

.mod-article .interactiveBigArea figure a > .box-icons{
bottom: 10px;
left: 20px;
}

.interactiveBigArea::before, .interactiveBigArea::after {
content: " ";
display: block;
background: #c3c3c3;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(195,195,195,0) 0%, #c3c3c3 40%, #c3c3c3 60%, rgba(195,195,195,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(195,195,195,0)), color-stop(40%,#c3c3c3), color-stop(60%,#c3c3c3), color-stop(100%,rgba(195,195,195,0)));
background: -webkit-linear-gradient(left, rgba(195,195,195,0) 0%, #c3c3c3 40%, #c3c3c3 60%, rgba(195,195,195,0) 100%);
background: -o-linear-gradient(left, rgba(195,195,195,0) 0%, #c3c3c3 40%, #c3c3c3 60%, rgba(195,195,195,0) 100%);
background: -ms-linear-gradient(left, rgba(195,195,195,0) 0%, #c3c3c3 40%, #c3c3c3 60%, rgba(195,195,195,0) 100%);
background: linear-gradient(to right, rgba(195,195,195,0) 0%, rgba(195,195,195,1) 40%, rgba(195,195,195,1) 60%, rgba(195,195,195,0) 100%);
border: none;
height: 1px;
width: 100%;
margin: 24px 0 30px 0;
overflow: hidden;
}

.interactiveBigArea::before{
margin-bottom: 15px;
}

.interactiveBigArea header{
margin-bottom: 10px;
}

.interactive-slider .slick-prev:before, .interactive-slider .slick-next:before{
font-family: "iconfont";
color: #333;
}

.interactive-slider .slick-list{
margin: 0 20px 0 20px;
}

.interactive-slider .slick-prev:before {
content: "\e810";
}

.interactive-slider .slick-next:before {
content: "\e811";
}

.interactive-slider {
margin-left: 20px;
width: 530px;
}

.interactiveBigArea .imageContainer{
margin-right: 10px;
margin-left: 10px;
}