.behind-overlay {
    float: left;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.media-wabe {
    margin-top:50px;
    margin-bottom:50px;
}

.zwei,
.zwei-b {
    width: 300px;
    height: 223px;
}

.zwei .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 223px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/two-overlay.png);
}

.zwei-b .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 223px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/two-overlay-b.png);
}



.drei,
.drei-b {
    width: 300px;
    height: 297px;
}

.drei .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 297px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/three-overlay.png);
}

.drei-b .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 297px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/three-overlay-b.png);
}

.vier,
.vier-b {
    width: 300px;
    height: 371px;
}

.vier .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 371px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/four-overlay.png);
}

.vier-b .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 371px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/four-overlay-b.png);
}


/*white*/
.zwei_white,
.zwei-b_white {
    width: 300px;
    height: 223px;
}

.zwei_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 223px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/two-overlay-weiss.png);
}

.zwei-b_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 223px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/two-overlay-b-weiss.png);
}



.drei_white,
.drei-b_white {
    width: 300px;
    height: 297px;
}

.drei_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 297px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/three-overlay-weiss.png);
}

.drei-b_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 297px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/three-overlay-b-weiss.png);
}

.vier_white,
.vier-b_white {
    width: 300px;
    height: 371px;
}

.vier_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 371px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/four-overlay-weiss.png);
}

.vier-b_white .festo-hexagon-mask {
    position: absolute;
    width: 300px;
    height: 371px;
    z-index: 1500;
    float: left;
    background-size: 100%;
    background-image: url(../img/four-overlay-b-weiss.png);
}

/*white end*/

@media (min-width: 920px) {
    .zwei,
    .zwei-b,
    .zwei_white,
    .zwei-b_white{
        width: 400px;
        height: 297px;
    }
    .zwei .festo-hexagon-mask,
    .zwei_white .festo-hexagon-mask{
        width: 400px;
        height: 297px;
    }
    .zwei-b .festo-hexagon-mask,
    .zwei-b_white .festo-hexagon-mask{
        width: 400px;
        height: 297px;
    }
    .drei,
    .drei-b,
    .drei_white,
    .drei-b_white{
        width: 400px;
        height: 396px;
    }
    .drei .festo-hexagon-mask,
    .drei_white .festo-hexagon-mask{
        width: 400px;
        height: 396px;
    }
    .drei-b .festo-hexagon-mask,
    .drei-b_white .festo-hexagon-mask{
        width: 400px;
        height: 396px;
    }
    .vier,
    .vier-b,
    .vier_white,
    .vier-b_white{
        width: 400px;
        height: 495px;
    }
    .vier .festo-hexagon-mask,
    .vier_white .festo-hexagon-mask{
        width: 400px;
        height: 495px;
    }
    .vier-b .festo-hexagon-mask,
    .vier-b_white .festo-hexagon-mask {
        width: 400px;
        height: 495px;
    }
}

@media (min-width: 1200px) {
    .zwei,
    .zwei-b,
    .zwei_white,
    .zwei-b_white{
        width: 571px;
        height: 423px;
    }
    .zwei .festo-hexagon-mask,
    .zwei_white .festo-hexagon-mask{
        width: 571px;
        height: 423px;
    }
    .zwei-b .festo-hexagon-mask,
    .zwei-b_white .festo-hexagon-mask{
        width: 571px;
        height: 423px;
    }
    .drei,
    .drei-b,
    .drei_white,
    .drei-b_white {
        width: 571px;
        height: 565px;
    }
    .drei .festo-hexagon-mask,
    .drei_white .festo-hexagon-mask{
        width: 571px;
        height: 565px;
    }
    .drei-b .festo-hexagon-mask,
    .drei-b_white .festo-hexagon-mask{
        width: 571px;
        height: 565px;
    }
    .vier,
    .vier-b,
    .vier_white,
    .vier-b_white{
        width: 570px;
        height: 705px;
    }
    .vier .festo-hexagon-mask,
    .vier_white .festo-hexagon-mask{
        width: 571px;
        height: 705px;
    }
    .vier-b .festo-hexagon-mask,
    .vier-b_white .festo-hexagon-mask{
        width: 571px;
        height: 705px;
    }
}


.festo-hexagon-mask {
    transform: scale(1.004);
}
@media (max-width: 992px) {
    .festo-hexagon-mask {
        transform: scale(1.01);
    }
    .media-wabe {
        display: block;
        margin:0 auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.media-wabe.vier {
    overflow: hidden;
}



.festo-hexagon-mask {
    z-index: 1!important;
}


.festo-hexagon-play-button {
    background-image: url(../img/PlayButton.png);
    width: 64px;
    height: 37px;
    z-index: 999;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}