/* CENTERED VIDEO */
.homePageVideo.container-fluid div.row {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.homePageVideo div.row {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

div.homePageVideo.spb-row-container.spb-row-full-width {
  background-image: -webkit-gradient(linear, left bottom, right top, from(#0081c7), to(#00b7e5));
  background-image: linear-gradient(to top right, #0081c7, #00b7e5);
}

div.spb_video_widget.homePageVideo.homePageVideo2 {
  max-width: 768px;
  min-width: 360px;
  margin: auto !important;

  /* overriding .spb_content_element - weird that we have to apply 2 classes to make this work, when the other one just has a single class... */

  /* justify-content: center; */

  /* align items in Main Axis */
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;

  /* align items in Cross Axis */
  -ms-flex-line-pack: stretch;
  align-content: stretch;

  /* Extra space in Cross Axis */
  -webkit-box-flex: 1;
  flex: 1 0 auto;
}

@media screen and (max-width: 359px) {
  /* for iPhone 5 */
  div.spb_video_widget.homePageVideo.homePageVideo2 {
    min-width: 320px;
  }
}

.sf-video-wrap {
  padding-bottom: 0;
}

/* SIDE-BY-SIDE TEXT & VIDEO */
.fw-row .spb-row-full-width.sbs-text-video > .spb_content_element > .container {
  padding-left: 15px;
  padding-right: 15px;
  overflow: visible;
}

.sbs-text p {
  color: white;
  font-size: 100%;
  font-family: "Source Sans Pro", sans-serif;
}

.sbs-text-video .vi-lazyload {
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .sbs-column-container .row {
    flex-wrap: wrap-reverse;
  }

  .sbs-column-container div.spb_raw_html {
    width: 100%;
  }

  div.sbs-text {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .fw-row .spb-row-full-width.sbs-text-video > .spb_content_element > .container {
    padding-left: 0;
    padding-right: 0;
  }

  .sbs-text-video .col-sm-8 {
    padding-left: 0;
    padding-right: 0;
  }

  .sbs-text-video .vi-lazyload {
    width: 95%;
  }
}

@media (min-width: 768px) {
  .fw-row .spb-row-full-width.sbs-text-video > .spb_content_element > .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .fw-row .spb-row-full-width.sbs-text-video > .spb_content_element > .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .fw-row .spb-row-full-width.sbs-text-video > .spb_content_element > .container {
    width: 1170px;
  }
}

/* Conference Video with Green Play */
div.conference-video {
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5a7931), color-stop(50%, #5a7931), color-stop(50%, #fff), to(#fff));
  background-image: linear-gradient(#5a7931 0%, #5a7931 50%, #fff 50%, #fff 100%);
}

div.conference-video div.white-ellipse {
  height: 101px;
  width: 101px;
  display: box;
  display: flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  bottom: -50px;
  background-image: url("../../../resources/white-ellipse.svg");
  cursor: pointer;
}

div.conference-video div.white-ellipse div.play {
  height: 71px;
  width: 70px;
  background-image: url("../../../resources/play-button.svg");
}

div.conference-video div.white-ellipse div.play-gray {
  height: 71px;
  width: 70px;
  background-image: url("../../../resources/play-button-gray.svg");
}

div.spb_video_widget.homePageVideo.homePageVideo2 {
  max-width: 900px;
}

@media screen and (max-width: 450px) {
  /* for iPhone 5/6/7/8/X Galaxy S5 Pixel 2 */
  div.conference-video div.white-ellipse {
    height: 50px;
    width: 50px;
    bottom: -25px;
    background-image: url("../../../resources/white-ellipse-small.svg");
  }

  div.conference-video div.white-ellipse div.play {
    height: 35px;
    width: 35px;
    background-image: url("../../../resources/play-button-small.svg");
  }

  div.conference-video div.white-ellipse div.play-gray {
    height: 35px;
    width: 35px;
    background-image: url("../../../resources/play-button-gray.svg");
    background-size: 35px 35px;
  }
}