.vbackground {
right: 0;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
transition: 0.5s;
z-index: 999;
border-radius: 10px;
}
.vbackground video,
.vbackground iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.vbackground__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
mix-blend-mode: overlay;
}
.vbackground .vbackground__content__heading {
font-weight: bold;
font-size: 34px;
line-height: 34px;
letter-spacing: 0;
}
.vbackground .vbackground__content {
padding: 30px;
max-width: 500px;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
transform: translate(0%, -50%);
}
.vbackground .vbackground__content__text {
font-size: 20px;
line-height: 24px;
}
.vbackground .vbackground__content.center {
margin: 0 auto;
left: 0;
right: 0;
}
@media screen and (min-width: 641px) {
.vbackground .vbackground__content.left {
left: 15%;
transform: translate(-50%, -50%);
}
.vbackground .vbackground__content.md-left {
left: 30%;
}
.vbackground .vbackground__content.right {
right: 15%;
transform: translate(50%, -50%);
}
.vbackground .vbackground__content.md-right {
right: 30%;
}
.vbackground .vbackground__content__heading {
font-size: 48px;
line-height: 48px;
}
.vbackground .vbackground__content__text {
font-size: 20px;
line-height: 24px;
}
}
@media screen and (min-width: 641px) and (max-width: 991px) {
.vbackground .vbackground__content {
max-width: 400px;
}
.vbackground .vbackground__content.md-left {
left: 35%;
}
.vbackground .vbackground__content.md-right {
right: 35%;
}
}