#Background {
  padding-top: var(--nav-height);
  & .video-container {
    height: 422px;
    overflow: hidden;
    position: relative;
    width: 100%;
    & .video {
      box-sizing: border-box;
      display: block;
      height: 422px;
      left: 0;
      padding: 0;
      position: absolute;
      top: 0;
      transition: transform 0.5s;
      width: 100%;
      will-change: transform;
      &.active {
        transform: translateX(0%);
      }
      &.next {
        transform: translateX(100%);
      }
      &.prev {
        transform: translateX(-100%);
      }
    }
    @media (max-width: 768px) {
      height: 300px;
      & .video {
        height: 300px;
      }
    }
    & .video-prev, & .video-next {
      color: $white-l;
      font-size: 20px;
      height: 100%;
      margin-top: -10px;
      opacity: 0.5;
      position: absolute;
      text-align: center;
      top: 50%;
      width: 20px;
      &:hover {
        cursor: pointer;
        opacity: 1;
      }
    }
    & .video-prev {
      left: 0;
    }
    & .video-next {
      right: 0;
    }
  }
  & .logos {
    margin-bottom: 20px;
    text-align: center;
    & img {
      height: 25px;
      margin: 30px 25px 10px;
    }
  }
}
