.curtain { position: fixed; bottom: 0px; left: 0px; z-index: 999; height: 100%; background: #333;  transition: all 0.6s ease-out; }
.curtain_active { height: 0px; opacity: 0.8; }

@media only screen and (min-width: 768px) {
    .curtain_01 { left: 0px; transition-delay: 600ms; }
    .curtain_02 { left: 20%; transition-delay: 400ms; }
    .curtain_03 { left: 40%; transition-delay: 300ms; }
    .curtain_04 { left: 60%; transition-delay: 450ms; }
    .curtain_05 { left: 80%; transition-delay: 650ms; }
    .curtain { width: 20%; }
}

@media only screen and (max-width: 768px) {
    .curtain_01 { left: 0px; transition-delay: 200ms; }
    .curtain_02 { left: 33.333%; transition-delay: 300ms; }
    .curtain_03 { left: 66.667%; transition-delay: 400ms; }
    .curtain { width: 33.333%; }
}