.video-background {
position: relative;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: -2.5em !important;
padding: 0 !important;
overflow: hidden;
}
#background-video {
display: block;
width: 100vw !important;
max-width: 100vw !important;
height: 75vh;
object-fit: cover;
position: relative;
z-index: 0;
}
.video-background .overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.content-area {
position: absolute;
left: 5%;
top: 57.5%;
transform: translateY(-50%);
width: 50%;
max-width: 650px;
z-index: 2;
text-align: left;
}
.content-area h1,
.content-area h2 {
margin: 0;
color: #ffffff !important;
}
.content-area h1 {
font-size: 65px;
font-weight: 400;
line-height: 1.1;
padding-bottom: 0.25em;
}
.content-area h2 {
font-size: 20px;
font-weight: 300;
line-height: 1.4;
padding-bottom: 1.5em;
}
.content-area a {
display: inline-block;
background: #FF800F !important;
color: #ffffff !important;
text-transform: none !important;
font-size: 20px !important;
font-weight: 500;
line-height: 1;
border-radius: 0;
padding: 16px 24px;
text-decoration: none;
}
.content-area a:hover {
background-color: #e06e00 !important;
color: #ffffff !important;
}
@media screen and (max-width: 1024px) {
.content-area {
width: 65%;
}
.content-area h1 {
font-size: 46px;
}
.content-area h2 {
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
.video-background {
margin-top: 0 !important;
}
#background-video {
height: 60vh;
}
.content-area {
left: 8%;
width: 84%;
max-width: none;
}
.content-area h1 {
font-size: 34px;
padding-bottom: 0.5em;
}
.content-area h2 {
font-size: 16px;
padding-bottom: 1.25em;
}
.content-area a {
font-size: 16px !important;
padding: 14px 20px;
}
}