*{box-sizing: border-box}

.bgwrap{position: fixed;z-index: 10;width: 100%;left: 0;top: 0;}
.bgvideo{min-width: 1400px;width: 130%}

.wrap{position: fixed;z-index: 20;width: 100%;min-width: 1000px}
button{border: 0;background: #000;color: #fff;padding: 21px;cursor: pointer;}

.wrap ul{width: 100%;height: 100vh;display: flex;justify-content: flex-end;}
.wrap li{width: 15%;height: 100vh;overflow: hidden;transform: skew(10deg);
border-left: 1px solid #fff;cursor: pointer;}
.wrap .video{transform: skew(-10deg) translate(-40%,0);opacity: 0;height: 100vh}
.wrap li span,.wrap li .logo{transform: skew(-10deg);transition: all .5s ease;position: absolute;
left: 10%;z-index: 50;color: #fff}
.wrap li .logo{top: 20%;transform: skew(-10deg) translateY(-50%)}
.wrap li span{top: 30%}
.wrap li h2{font-size: 2em;padding-bottom: 20px;text-indent: -40px}
.open{position: absolute;text-align: center;left: 0%;top: 70%;opacity: 0;transform: skew(-10deg);transition: all .5s ease;
background: rgba(255, 255, 255, .5);width: 200%;font-size: 1.2em;padding: 30px}
.open p{padding: 10px 0}
.wrap li:nth-child(1){left: 0}
.wrap li:nth-child(1) .video{height: 150vh;transform: skew(-10deg) translate(-40%,-19%)}
.wrap li:nth-child(2){left: 25%}
.wrap li:nth-child(2) .video{transform: skew(-10deg) translate(-32%,0)}
.wrap li:nth-child(3){left: 50%}
.wrap li:nth-child(3) .video{transform: skew(-10deg) translate(-34%,0)}
.wrap li:nth-child(4){left: 75%;border-right: 1px solid #fff}
.wrap li:nth-child(4) .video{transform: skew(-10deg) translate(-31%,0)}

.wrap li:hover span,.wrap li:hover .logo{opacity: 0;}
.wrap li .open.on{opacity: 1;left: -50%}