- front {
width:100%; height:100vh; background-size: 100% 100%; background-color: }
.back-video {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100;
}
.fullscreen-bg {
position: absolute; top: 0; left: 0; width: 100%; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); opacity: 0.5; filter: alpha(opacity=50);
}
.front-img { height:80%; margin-top:120px; z-index:2; margin-left: auto;
margin-right: auto; display:block;
}
.left-box { height:100vh; width:100px; float:left; position: relative; }
.left-but { background-color:#a94442; opacity:0.75; border-radius:5px; margin-left:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center;
}
.left-but p{ font-size:40px; color:white; border:#752E2D 7px solid; border-radius:5px; margin:10px; }
.right-box { height:100vh; width:100px; float:right; position: relative; }
.right-but { background-color:#0091c2; opacity:0.75; border-radius:5px; right:100px; width:300px; height:120px; position: absolute; top: 50%; transform: translate(0, -50%); line-height:90px; text-align:center; float:left; }
.right-but p{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; }
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg { width: 300%; left: -100%; }
}