*{box-sizing:border-box;margin:0;padding:0;}
.showcase{position:absolute;right:0;width:100%;min-height:100vh;padding:100px;display:flex;justify-content:space-between;align-items:center;background:#000;color:#fff;z-index:2;transition:0.5s}
.showcase.active{right:300px}
.showcase header{position:absolute;top:0;left:0;width:100%;padding:40px 100px;z-index:999;display:flex;justify-content:space-between;align-items:center}
.showcase video#bgvid{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;object-fit:cover; z-index: -1;}
.logo{width:60px;display:flex;align-items:center;}
.text{position:relative;z-index:10; width: 100%; margin-top: 36%; display: flex;flex-direction: column;align-items: center;}
.text a{display:block;background: #fba95a linear-gradient(-90deg, #fba95a 17%, #f64744 100%); font-size:1em;padding:10px 30px;text-decoration:none;color:#fff;transition:0.2s;}
.text a:hover{letter-spacing:2px;}
.menu{position:absolute;top:20px;right:10%;width:80%;display:flex; z-index: 10;justify-content: space-around;}
.menu a{text-decoration:none;font-size:18px;color:#333;}
.menu a:hover{ color: #ec4f54;}
@media(max-width:991px){
    .showcase,.showcase header{padding:40px;}
    .text{ margin-top: 60%;}
    }
footer{ position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-around; width: 100%; color: #333; padding-bottom: 30px; }
footer a{ color: #333; text-decoration:none; }