/*** Video Container / Styles ***/

#myVideo {
  color: #fff;
}
#icon-page-down i {
  font-size: 4em;
  color: #fff;
  font-weight: 300;
}
.media-object {
  background: var(--brightred);
  min-height: 200px;
  padding: 0.5rem;
}

#uiBackgroundVideo__controller {
  position: absolute;
  bottom: 35px;
  right: 65px;
  height: 20px;
  background: transparent;
  border-style: double;
  border-width: 0 0 0 16px;
  box-sizing: border-box;
  border-color: transparent transparent transparent #eee;
  transition: 100ms all ease;
  cursor: pointer;
  z-index: 4;
}
#uiBackgroundVideo__controller.paused {
border-style: solid;
border-width: 10px 0 10px 16px;
}
#mobile-image-wrapper {
  position: relative;
text-align: center;
color: white;
}
#mobile-image-wrapper h1 {
position: absolute;
bottom: 8px;
left: 16px;
font-size:8vw;
font-weight:900;
      text-shadow: 2px 2px 6px #00000063;

}
#vidwrapper {
background: #000;
position: relative;
overflow: hidden;
width: 100vw;
/* z-index:-3; */
}
#vid-overlay {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(10,10,10,.2);
  z-index: 1;
}
#vidwrapper-text {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2; /* may need change */
  color: #fff;
}

#vidwrapper-text > div.grid-x {
    padding: 1rem 0;
}
  #vidwrapper-text h1 {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      /* width:60%; */
      text-shadow: 2px 2px 6px #00000063;
  }

  #vidwrapper-text a {
  color: var(--brightred);
  font-weight: 700;
}
#vidwrapper .link__container a:focus {
  color: #fff;
}
  #vidwrapper img {
      position: relative;
      top: 50%;
      transform: translateY(-30%);
  }
  .video__container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  #myVideo {

      min-height: 100vh;
      overflow-x: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  #vidwrapper-text .link__container {
      text-align: right;
      padding-right: 1em;
  }
#uiBackgroundVideo__controller {
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 20px;
  background: transparent;
  border-style: double;
  border-width: 0 0 0 16px;
  box-sizing: border-box;
  border-color: transparent transparent transparent #eee;
  transition: 100ms all ease;
  cursor: pointer;
  z-index: 4;
}
#uiBackgroundVideo__controller.paused {
border-style: solid;
border-width: 10px 0 10px 16px;
}
#uiBackgroundVideo__controller:focus {
  color: var(--uthorange);
  border-color: transparent transparent transparent var(--uthorange);
}

@media print, screen and (min-width: 40em) {
  #vidwrapper-text > div.grid-x {
    padding: initial;
  }
  #vidwrapper-text .link__container {
      text-align: left;
      padding-right: 0;
  }
  #vidwrapper-text p {font-size: 1.15rem;}
  #vidwrapper-text h1 {font-size: 3rem; margin-left:8%; margin-bottom:10%;}
  #vidwrapper-text {
      min-height:100vh;
  }
}
@media print, screen and (min-width: 64em) {

  #vidwrapper-text h1 {
      font-size: 5rem;
  }
  #vidwrapper-text p {
  }
#vidwrapper-text {
  min-height:100vh;
}
}
  @media print, screen and (min-width:90em) {

  #vidwrapper-text h1 {
      font-size: 5rem;
  }

}