/*****************************************************************************
 * VIDEO BACKGROUNDS
 ****************************************************************************/
.row-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 43px);
  overflow: hidden; /* hides YouTube titles stretched out by sibling div */
}
/* contains text laid over video background */
.row-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
/* cover images, which fade out after video loads */
.video-cover-img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#boulevard .video-cover-img {background-image: url("/landing/product/boulevard.jpg");}
#sailboats .video-cover-img {background-image: url("/landing/product/sailboats.jpg");}
#driving .video-cover-img {background-image: url("/landing/product/driving.jpg");}
#walking .video-cover-img {background-image: url("/landing/product/walking.jpg");}

/* fade out cover images after videos load */
@keyframes fade-out {
  from {opacity: 1;}
  to {opacity: 0;}
}
/* fadeOutCoverImage() adds this class to .video-cover-img when onReady:play() is called */
.fade-out {
  -webkit-animation: fade-out 1s ease 2s forwards; /* needed for iOS?? */
  /*-ms-animation: fade-out 1s ease-in 2s forwards; /* can't get IE to work */
  animation: fade-out 1s ease-in 2s forwards;
}

.video-container {position: absolute; width: 100%; height: 100%;}
iframe {width: 100%; height: 100%;}
/* stretch YouTube titles off screen (container div must have overflow=hidden) */
@media (min-aspect-ratio: 16/9) {.video-container {height: 300%; top: -100%;}}
@media (max-aspect-ratio: 16/9) {.video-container {width: 300%; left: -100%;}}

/*****************************************************************************
 * OTHER STYLE RULES
 ****************************************************************************/
.row-container,
.row-overlay,
.flex-centering-container {display: flex; flex-direction: column;}

.row-container,
.row-overlay > div,
.flex-centering-container > div {margin: auto;}

.row-overlay div.left-center {margin: auto 5%;}

.small-row-container {justify-content: space-between; text-align: center;}
.small-row-container div {
  display: inline-block;
  width: 200px;
  text-align: initial;
}

h2 {font-size: 48px; font-weight: 600;}
.blue {color: var(--blue); -webkit-text-stroke: .3px #ffffff;}
/* .yellow {color: #faffcc;} */
.subheading {margin: 30px 0 30px; font-size: 1.3rem; color: #ffffff;}

/* ROW 1: Execute, View, Assess *********************************************/
#boulevard .row-overlay {
  padding: 0 5%;
  background-color: rgba(17, 17, 17, 0.439); /* rgba for Safari transparency */
}
h1 {
  font-size: 48px;
  font-weight: 600;
  color: var(--blue);
  margin: 20px 0 0;
}
#boulevard h4 {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--green);
}

/* ROW 2 & 3: In one place & On the go **************************************/
.text {padding: 5%; text-align: center;}
.text h2 {font-size: 36px; font-weight: 700;}
#laptop {
  background: url("/landing/product/laptop.png") center no-repeat;
  background-position: right center;
  background-size: contain;
}
#phone {
  background: url("/landing/product/phone.png") center no-repeat;
  background-size: contain;
}
#on-the-go .text {order: 1;}
#on-the-go .image {order: 2;}
.image {width: 100%; height: 100%;}

/* ROW 4: Compliance ********************************************************/
#compliance {
  background: url("/landing/product/surfing.jpg") center no-repeat;
  background-size: cover;
}
.white-shadow {
  display: inline-block;
  padding: 1vh;
  background-color: rgba(255, 255, 255, 0.502); /* rgba for Safari transparency */
  box-shadow: 0 0 3px 7px rgba(255, 255, 255, 0.502);  /* rgba for Safari transparency */
}
#compliance img {
  display: block;
  height: 5vh;
  margin: 0 0 3vh;
}
#compliance img:last-child {margin: 0;}

/* ROW 5: Weather with BI ***************************************************/
#analytics {
  background: url("/landing/product/analytics.png") center no-repeat;
  background-size: contain;
  height: 47vh;
}

/* ROW 6: Flocking to us ****************************************************/
#driving h3 {
  font-family: serif;
  font-size: 2.5rem;
  letter-spacing: 6px;
  color: var(--green);
}
#driving svg {display: none;}

/* ROW 7: Our guarantee *****************************************************/
#walking a {float: initial;}

/* MEDIA QUERIES ************************************************************/
@media only screen and (min-width: 490px) {
  .row-container {flex-direction: row;}
  .small-row-container {display: flex;}
  .small-row-container div {width: initial}

  #boulevard .row-overlay {padding: 0 7%;}

  #in-one-place,
  #on-the-go {flex-direction: column;}

  #in-one-place,
  #on-the-go {flex-direction: row;}

  #in-one-place > div,
  #on-the-go > div {margin: auto; width: 50%;}
  #on-the-go .text,
  #on-the-go .image {order: 0;}
  .text {text-align: initial;}
}

@media only screen and (min-height: 390px) {
  span.line-break:before {content: "";}
  .text h2 {font-size: 48px;}
  #driving svg {display: initial;}
}

@media only screen and (min-width: 768px) {
  #boulevard .row-overlay {padding: 0 9%;}
  h1,
  #boulevard h4 {margin: 25px 0;}
  #boulevard p {
    margin-bottom: 100px;
    line-height: 3rem;
    font-size: 1.3rem;
  }
  h2,
  .text h2 {font-size: 64px;}
}

@media only screen and (min-width: 992px) {
  .text {padding: 10%;}

  #boulevard .row-overlay {padding: 10%;}
  h1 {font-size: 64px;}
  #boulevard h4 {font-size: 1.5rem;}
}