/* https://codepen.io/kennethillman/pen/jEmjBK */
.curtain {
    position: absolute;
    top: -10%;
    height: 120%;
    width: 55%;
    transition: all .5s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    z-index: 50;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #327bf4, #2e428e, #327bf4), linear-gradient(to left, #2d428c, #325de2, #2d418c);
    background-size: 17% 17%, 14% 14%;
    transform: rotate(0deg);
}
.curtain.-left {
    left: -5%;
}
.curtain.-right {
    right: -5%;
    overflow: hidden;
}

.swing-curtains .curtain {
    width: 52%;
}
.swing-curtains .curtain.-left {
    left: -13px;
    transform: rotate(-2deg);
    width: 56%;
}
.swing-curtains .curtain.-right {
    right: -13px;
    transform: rotate(2deg);
    width: 56%;
}

.curtain.-left:before {
    content: ' ';
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 82%;
    right: 0;
    background: url(https://www.virtuelles-museum.com/site/themes/vmel/img/logo-heimatverein.png);
    background-repeat: no-repeat;
    opacity: 0.3;
}
.curtain.-right:before {
    content: ' ';
    position: absolute;
    top: 30%;
    bottom: 0;
    left: -125px;
    right: 0%;
    background: url(https://www.virtuelles-museum.com/site/themes/vmel/img/logo-heimatverein.png);
    background-repeat: no-repeat;
    opacity: 0.3;
}

.open-curtains .curtain.-left {
    left: -16%;
    width: 10%;
    transform: rotate(7deg);
}
.open-curtains .curtain.-right {
    right: -16%;
    width: 10%;
    transform: rotate(-7deg);
}