header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  z-index: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8f0058+0,a01103+58,de4e12+100 */
background: #8f0058; /* Old browsers */
background: -moz-linear-gradient(45deg,  #8f0058 0%, #a01103 58%, #de4e12 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #8f0058 0%,#a01103 58%,#de4e12 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #8f0058 0%,#a01103 58%,#de4e12 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f0058', endColorstr='#de4e12',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */



}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('/video/forrest-beach-ocean.jpg') black no-repeat scroll;
    background-size: cover;
    background-position: right;
    }
  header video {
    display: none;
  }
}