- 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 h1{ font-size:40px; color:white; border:#752E2D 7px solid; border-radius:5px; margin:10px; }
.right-box { height:100vh; width:100px; float:right; position: relative;
margin-top:0px; border:none;
}
.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 h1{ font-size:40px; color:white; border:#00678A 7px solid; margin:10px; border-radius:5px; }
.phone {
display:none; }
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg { width: 300%; left: -100%; }
}
@media (min-width:992px) and (max-width:1199px) {
.left-but { margin-left:25px; } .right-but { right:25px; } .right-but h1,.left-but h1{
font-size:30px;
} .right-but, .left-but { height:90px; width:250px; }
}
@media (max-width:991px) {
.tablet { display:none; } .phone { display:inline-block; } .left-but,.right-but { position:static; transform:none; margin-top:50px; } .left-but { float:left; margin-left:5vh; } .right-but { float:right; margin-right:5vh; }
}