body {
  margin: 0;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}

.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper video {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* These just style the content */
article {
/*  just a fancy border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.55);
  margin: 10px;
}

img {
  width: 30%;
  position:fixed;
  top:15%;
  margin-left: auto;
  margin-right: auto; 
  
}

.logo {
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
  
}

.footer {
  width:100%;
  height:18%;
  text-align:center;
  position:fixed;    /*Here's what sticks it*/
  bottom:0;          /*to the bottom of the window*/
  left:0;            /*and to the left of the window.*/

}

.footer h1 {
  color: #fff;
  font-family: sans-serif;
  font-weight: light;
  font-size: 24px;
  margin: 0;
}

.footer p {
  font-family: sans-serif;
  font-weight: light;
  font-size:14px;
  color: #eee;
  margin: 0;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 992px) {
  img {width: 60%}
  .logo {width: 60%}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  img {width: 50%}
  .logo {width: 50%}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  img {width: 40%}
  .logo {width: 40%}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  img {width: 35%}
  .logo {width: 35%}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  img {width: 30%}
  .logo {width: 30%}
}