@import url(//db.onlinewebfonts.com/c/1238db2fc008ce88465a792fad1e5519?family=Druk+Wide+Medium);
@import url(//db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold);

body {
  /* Location of the image */
  background-image: url(images/background.jpg);
  
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
  
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;
  
  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(images/background-mobile.jpg);
  }
	}

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}


button {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 1px solid;
  border-color: #fff;
  text-shadow: 0px 0px 0px transparent;
}

button h1{
	xfont-family: 'Roboto', sans-serif;
	font-family: "Druk Wide Bold";
	color: #fff;
}
button:hover {
  background: #fff;
  box-shadow: 0px 0px 0px transparent;
  border: 1px solid;
  border-color: #fff;
  text-shadow: 0px 0px 0px transparent;
}

button:hover h1{
	color:#05172b;
}

button:active {
  outline: none;
  xborder: none;
}

button:focus {
  outline: 0;
}


#splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#splash p { display: inline-block }