:root {
--container-bg-color: #333;
--left-bg-color: rgba(20, 20, 20, 0.3);
--left-button-hover-color: rgba(200, 200, 200, 0.3);
--right-bg-color: rgba(20, 20, 20, 0.3);
--right-button-hover-color: rgba(200, 200, 200, 0.3);
--hover-width: 75%;
--other-width: 25%;
--speed: 1000ms;
} .split-container .button {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.landing-logo {
background: none;
position: fixed;
z-index: 1000;
top: 0;
left: 37%;
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
text-decoration: none;
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
text-decoration: none;
}
.split-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
width: 100vw;
height: 100vh;
background: var(--container-bg-color);
}
.split-container h1 {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 40%;
transform: translateX(-50%);
white-space: nowrap;
}
.split {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.split.left {
left:0;
background: url(https://stepbc.ca/wp-content/uploads/2018/07/landing-page-crystine-ign-systems-3.jpg) center center no-repeat;
background-size: cover;
}
.split.left:before {
position:absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.right {
right:0;
background: url(https://stepbc.ca/wp-content/uploads/2018/07/landing-page-shamus-shamus-jones-construction-1.jpg) center center no-repeat;
background-size: cover;
}
.split.right:before {
position:absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left, .split.right, .split.right:before, .split.left:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .right:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .left:before {
z-index: 2;
}
@media(max-width: 800px) {
.split-container h1 {
font-size: 0.8rem;
top: 50%;
}
.split-container .button {
width: 10rem;
}
}
@media(max-height: 700px) {
.split-container .button {
top: 60%;
}
}