body {
  margin: 0;
  background: #000; 
}
video { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../img/drone-memorial-1.png') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
  opacity: .5;
}
#map {
  margin:0;
  height: 100%;
}

.container{
    /*background: rgba(1,0,0,0.3); */
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.3);
    z-index: 10;
}

p.coord {
  opacity: 0.6;
  font-weight:700; 
  font-size:33px;
  color:white;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  line-height:0.2;
}

.coord span.coordTitle{
  font-weight: 200; 
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
}


.memorial { 
  font-family: 'Arial';
  z-index: 1;
  width:215px;
  height:120px;
  position:fixed;
  color:black;
  padding:2rem;
  bottom: 8rem;
  margin:2rem;
  float:left;
}

h3 {
  color:white;
  font-size: 13px;
  font-variant: normal;
  font-weight: 500;
  text-transform: uppercase;
  text-align:center;
  margin-top: 0;
  letter-spacing: .37rem;
  line-height:0.2;
   opacity: 0.6;
}

@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(../img/drone-memorial-1.png) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}