:root {
  --container-bg-color: #333;
  --left-bg-color: rgba(223, 39, 39, 0.7);
  --left-button-hover-color: rgba(161, 11, 11, 0.6);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --right-button-hover-color: rgba(92, 92, 92, 0.6);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

html, body {
  padding:0;
  margin:0;
font-family: 'Poppins', sans-serif;  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.split video {
    object-fit: cover;
    object-position: 50% 50%;
    font-family: "object-fit: cover;object-position: 50% 50%;";
    height: 100%;
    width: 100%;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 90%;
  transform: translateX(-50%);
  text-align: center;
    transition: var(--speed) all ease-in-out;

}

.split img {
  width: 170px;
  height: auto;
  
}

.split.right img {
filter: invert(1)
  
}

h1 {
  font-size: 3rem;
font-family: "Old Standard TT", serif;
  color: #fff;  
  letter-spacing: 1px;
  border-bottom: 1px solid #ffffff85;
  padding-bottom: 2rem;
}

p {
  color: #fff;
    transition: var(--speed) all ease-in-out;
}

.button {
  margin: 2rem auto;
  display: block;
  padding: 1rem 4rem;
  text-align: center;
  color: #fff;
  border: #fff solid 0.1rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 40px;
  letter-spacing: 2px;
  width: 16rem;

}

.split.left .button:hover {
  background-color: var(--left-button-hover-color);
  border-color: var(--left-button-hover-color);
}

.split.right .button:hover {
  background-color: var(--right-button-hover-color);
  border-color: var(--right-button-hover-color);
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--container-bg-color);
}

.split {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.split.left {
  left:0;
}

.split.left:before {
  position:absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #142a1fc7;
}

.split.right {
  right:0;
}

.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 only screen and (max-width: 1024px) {
  h1 {
    font-size: 2rem;
  }

}

@media only screen and (max-width: 767px) {

  .wrapper {
  position: absolute;
  left: 50%;
  top: 7.5%;
  transform: translateX(-50%);
  text-align: center;
    transition: var(--speed) all ease-in-out;
            transition-delay: 2s;


}

  .split {
    width: 100%;
    height: 50%;
    left: 0;
  }
  .split.right {
    top: 50%;
  }
  .split img {
    width: 100px;
  }
  h1 {
    font-size: 1.9rem;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    padding: .5rem 0;
    margin-top: .5rem;
  }

  .button {
    width: 16rem;
    letter-spacing: 1px;
    padding: .7rem 2rem;
    font-size: 0.8rem;
  }

  .hover-left .left {
    width: 100%;
  height: var(--hover-width);
}

.hover-left .right {
    width: 100%;
  height: var(--other-width);
  top: 75%;
}

.hover-left .right:before {
  z-index: 2;
}


.hover-right .right {
  height: var(--hover-width);
    top: 25%;
  width: 100%;
}

.hover-right .left {
  height: var(--other-width);
    width: 100%;

}
  
  }