html,
body {
   margin:0;
   padding:0;
   height:100%;
}

video{
  /* position: absolute; */
  align-content:center;
  background-color: "#222" !important; /* or whatever you want */
  /* left:70%; */
  /* display:block; */
  -moz-transform:scale(1.2);
  -webkit-transform:scale(1.2);
  -ms-transform:scale(1.2);
  -o-transform:scale(1.2);
  transform:scale(1.2);
}

/* INSERTED */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
/* INSERTED  */

.black_text {
  color: black;
}

.left_container {
  float: left;
}

.right_container {
  float: right;
}

.crop_container{
    width: 960px;
    overflow:hidden;
    display:block;
    height: 540px;
    margin: 0 auto;
}

.image {
  display: block
}

.caption {
  display: block;
  width: 100%;
  text-align: center; //assuming centered captions
}

#image_reference {
   position:absolute;
   top: 568px;
   left: 635px;
   width: 100px;
   color: rgba(0,0,0,0.5);
}

#video_reference {
   position:absolute;
   top: 600px;
   left: 100px;
   width: 300px;
   color: rgba(0,0,0,0.5);
}


#glass{
    margin-left: 800px;
    margin-right: 400px
}

#image{
  position:absolute;
  align-content:center;
  /* top:350px; */
  /* left: 65%; */
  width: 100%;
  z-index: -1;
}

#text{
  position: absolute;
  text-align: center;
  z-index: 1;
}

#main-vid{
  position:absolute;
  align-content:center;
  /* right: 10%; */
  width: 100%;
  z-index: -1;
}

#sub-vid1{
  position:absolute;
  top:350px;
  left: 65%;
  width: 25%;
  z-index: -1;
}

#sub-vid2{
  position:absolute;
  top:380px;
  left: 23%;
  width: 30%;
  z-index: -1;
}

#logo{
  border-style: none;
  border: hidden;
  display:inline-block;
  outline: none;
}

#picture_left{
  position:absolute;
  top: 600px;
  right: 90%;
  width: 25%;
}

#picture_right{
  position:absolute;
  top: 600px;
  left: 90%;
  width: 20%;
}

#picture_centre{
  position:absolute;
  top: 600px;
  right: 25%;
  width: 50%;
}


/* Bottom right text */
#bottom-right {
   position:absolute;
   top: 650px;
   left: 845px;
   width: 300px;
   color: rgba(0,0,0,0.5);
}

#container {
   min-height:100%;
   height:100%;
   position:relative;
}

#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   text-align:center;
   position:absolute;
   bottom:0;
   width:100%;
   height:50px;   /* Height of the footer */
   /* background-color: #ffffff; */
}