/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); 
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center;

}
 
 body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url('bg.jpg') center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

@media (max-width: 480px) {
    body {
        background-image: url('bg-mobile.jpg');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url('bg-tablet.jpg');
    }
}

@media (min-width: 1025px) {
    body {
	    background-image: url('bg.jpg');
   }
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}