.video-background.banner {
  min-height: var(--top-banner-min-height);
  height: calc(100vh - var(--header-height));
}

@media (min-width: 1200px) {
  .video-background.banner {
    min-height: var(--top-banner-min-height-desktop);
    height: calc(100vh - (var(--header-height-small-desktop) + var(--pre-header-height)))
  }
}

@media (min-width: 1600px) {
  .video-background.banner {
    height: calc(100vh - (var(--header-height-large-desktop) + var(--pre-header-height)))
  }
}

.video-background .content-container {
  position: relative;
}

.video-background .content-container .loading-bar {
  left: 25px;
  top: 20px;
  width: calc(100% - 50px);
  z-index: 3;
}

@media (min-width: 1024px) {

  .video-background .content-container .loading-bar {
    top: 30px
  }
}

.video-background .content-container .overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: var(--target-neutral-colour-overlay);
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 40px 20px 20px;
}

@media (min-width: 1350px) {

  .video-background .content-container .overlay-container {
    padding: 40px 20px 30px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .overlay-container {
    padding: 40px 20px 50px
  }
}

.video-background .content-container .overlay-content {
  width: 100%;
  height: 100%;
  max-width: 405px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

@media (min-width: 768px) {

  .video-background .content-container .overlay-content {
    max-width: 425px
  }
}

@media (min-width: 1024px) {

  .video-background .content-container .overlay-content {
    max-width: 480px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .overlay-content {
    max-width: 600px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .overlay-content {
    max-width: 680px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .overlay-content {
    max-width: 850px
  }
}

.video-background .content-container .text-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-background .content-container .heading {
  font-family: var(--target-neutral-ff-heading);
  color: var(--target-neutral-colour-text);
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  margin-bottom: 10px;
}

@media (min-width: 375px) {

  .video-background .content-container .heading {
    font-size: 28px;
    line-height: 28px
  }
}

@media (min-width: 600px) {

  .video-background .content-container .heading {
    margin-bottom: 15px
  }
}

@media (min-width: 768px) {

  .video-background .content-container .heading {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 20px
  }
}

@media (min-width: 1024px) {

  .video-background .content-container .heading {
    font-size: 44px;
    line-height: 44px;
    margin-bottom: 25px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .heading {
    font-size: 56px;
    line-height: 56px;
    margin-bottom: 30px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .heading {
    font-size: 64px;
    line-height: 64px;
    margin-bottom: 40px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .heading {
    font-size: 80px;
    line-height: 80px;
    margin-bottom: 50px
  }
}

.video-background .content-container .heading .top-line {
  font-family: var(--target-neutral-ff-top-line);
  color: var(--target-neutral-colour-text);
  font-size: 16px;
  line-height: 16px;
  display: block;
}

@media (min-width: 400px) {

  .video-background .content-container .heading .top-line {
    font-size: 18px;
    line-height: 18px
  }
}

@media (min-width: 768px) {

  .video-background .content-container .heading .top-line {
    font-size: 26px;
    line-height: 31px
  }
}

@media (min-width: 1024px) {

  .video-background .content-container .heading .top-line {
    font-size: 34px;
    line-height: 39px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .heading .top-line {
    font-size: 38px;
    line-height: 43px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .heading .top-line {
    font-size: 44px;
    line-height: 49px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .heading .top-line {
    font-size: 50px;
    line-height: 50px
  }
}

.video-background .content-container .text {
  font-family: var(--target-neutral-ff-text);
  color: var(--target-neutral-colour-text);
  font-size: 14px;
  line-height: 140%;
  text-align: center;
  margin-bottom: 0;
}

@media (min-width: 400px) {

  .video-background .content-container .text {
    font-size: 15px
  }
}

@media (min-width: 768px) {

  .video-background .content-container .text {
    font-size: 16px
  }
}

@media (min-width: 1024px) {

  .video-background .content-container .text {
    font-size: 18px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .text {
    padding: 0 60px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .text {
    font-size: 20px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .text {
    font-size: 24px;
    padding: 0 100px
  }
}

.video-background .content-container .logos {
  display: flex;
  -moz-column-gap: 30px;
  column-gap: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {

  .video-background .content-container .logos {
    -moz-column-gap: 40px;
    column-gap: 40px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .logos {
    -moz-column-gap: 50px;
    column-gap: 50px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .logos {
    -moz-column-gap: 60px;
    column-gap: 60px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .logos {
    -moz-column-gap: 80px;
    column-gap: 80px
  }
}

.video-background .content-container .logos .sogo-logo {
  width: 69px;
  height: 25px;
}

@media (min-width: 768px) {

  .video-background .content-container .logos .sogo-logo {
    width: 88px;
    height: 32px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .logos .sogo-logo {
    width: 106px;
    height: 39px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .logos .sogo-logo {
    width: 130px;
    height: 48px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .logos .sogo-logo {
    width: 184px;
    height: 67px
  }
}

.video-background .content-container .logos .divide {
  height: 27px;
  width: 1px;
  display: block;
  background-color: var(--target-neutral-colour-text);
  flex-shrink: 0;
}

@media (min-width: 768px) {

  .video-background .content-container .logos .divide {
    height: 28px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .logos .divide {
    height: 36px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .logos .divide {
    height: 46px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .logos .divide {
    height: 57px
  }
}

.video-background .content-container .logos .bp-logo {
  width: 56px;
  height: 27px;
}

@media (min-width: 768px) {

  .video-background .content-container .logos .bp-logo {
    width: 72px;
    height: 35px
  }
}

@media (min-width: 1350px) {

  .video-background .content-container .logos .bp-logo {
    width: 82px;
    height: 40px
  }
}

@media (min-width: 1600px) {

  .video-background .content-container .logos .bp-logo {
    width: 96px;
    height: 47px
  }
}

@media (min-width: 1920px) {

  .video-background .content-container .logos .bp-logo {
    width: 149px;
    height: 73px
  }
}

.video-background .content-container video {
  display: block;
  width: 100%;
  border-radius: 15px;
  -o-object-fit: cover;
  object-fit: cover;
}

.video-background .gutter-container {
  padding: 30px 10px 60px;
}

@media (min-width: 768px) {

  .video-background .gutter-container {
    padding: 30px
  }
}

@media (min-width: 1200px) {

  .video-background .gutter-container {
    padding: 60px 30px
  }
}

@media (min-width: 1600px) {

  .video-background .gutter-container {
    padding: 60px 50px
  }
}

.video-background .gutter-container .content-container video {
  height: 240px;
}

@media (min-width: 600px) {

  .video-background .gutter-container .content-container video {
    height: 250px
  }
}

@media (min-width: 768px) {

  .video-background .gutter-container .content-container video {
    height: 350px
  }
}

@media (min-width: 1024px) {

  .video-background .gutter-container .content-container video {
    height: 420px
  }
}

@media (min-width: 1350px) {

  .video-background .gutter-container .content-container video {
    height: 500px
  }
}

@media (min-width: 1600px) {

  .video-background .gutter-container .content-container video {
    height: 600px
  }
}

@media (min-width: 1920px) {

  .video-background .gutter-container .content-container video {
    height: 720px
  }
}

.video-background .banner-container {
  padding: 0 10px 30px;

}

@media (min-width: 768px) {

  .video-background .banner-container {
    padding: 0 30px 30px

  }
}

@media (min-width: 1600px) {

  .video-background .banner-container {
    padding: 0 50px 50px

  }
}

.video-background .banner-container .content-container {
  position: relative;
}

.video-background .banner-container .content-container .banner-overlay-container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 76%);
  background-size: cover;
  border-radius: 15px;
}

@media (min-width: 1200px) {

  .video-background .banner-container .content-container .banner-overlay-container {
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
    background-size: cover
  }
}

.video-background .banner-container .content-container .banner-overlay-container .heading-container {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  padding: 0 30px 30px;
}

@media (min-width: 1200px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading-container {
    padding: 0 60px 50px
  }
}

@media (min-width: 1600px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading-container {
    padding: 0 120px 100px
  }
}

@media (min-width: 1920px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading-container {
    padding: 0 150px 100px
  }
}

.video-background .banner-container .content-container .banner-overlay-container .heading {
  font-family: var(--video-banner-ff-heading);
  color: var(--video-banner-colour-heading);
  font-size: 40px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: auto;
  text-align: left;
}

@media (min-width: 768px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading {
    font-size: 46px;
    line-height: 46px
  }
}

@media (min-width: 1600px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading {
    font-size: 60px;
    line-height: 60px
  }
}

@media (min-width: 1920px) {

  .video-background .banner-container .content-container .banner-overlay-container .heading {
    font-size: 80px;
    line-height: 80px
  }
}

.video-background .banner-container .content-container .banner-overlay-container .sub-heading {
  display: block;
  font-family: var(--video-banner-ff-sub-heading);
  color: var(--video-banner-colour-sub-heading);
  font-size: 22px;
  line-height: 22px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {

  .video-background .banner-container .content-container .banner-overlay-container .sub-heading {
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 15px
  }
}

@media (min-width: 1600px) {

  .video-background .banner-container .content-container .banner-overlay-container .sub-heading {
    font-size: 32px;
    line-height: 32px
  }
}

@media (min-width: 1920px) {

  .video-background .banner-container .content-container .banner-overlay-container .sub-heading {
    font-size: 40px;
    line-height: 40px
  }
}

.video-background .banner-container .content-container video {
  min-height: var(--top-banner-min-height);
  height: calc(100vh - (var(--header-height)) - 30px);
}

@media (min-width: 1200px) {

  .video-background .banner-container .content-container video {
    min-height: var(--top-banner-min-height-desktop);
    height: calc(100vh - (var(--header-height-small-desktop) + var(--pre-header-height)) - 30px)
  }
}

@media (min-width: 1600px) {

  .video-background .banner-container .content-container video {
    height: calc(100vh - (var(--header-height-large-desktop) + var(--pre-header-height)) - 50px)
  }
}