/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom: 1;
}

html {
  background: #111 url(../img/DSC_7551_2_big_bg.jpg) 0 0 no-repeat;
}

body {
  padding: 2%;
  font-family: "Open sans", sans-serif;
  font-size: 2em;
}

h1 {
  font-size: 1em;
}

.video {
  width: 24.25%;
  margin-right: 1%;
  float:left;
  background: rgba(230, 230, 230, 0.35);
  margin-bottom: 0.5em;
}
.video:nth-child(4n+4) {
  margin-right: 0;
}

.video a {
  display: block;
  width: 100%;
  overflow: hidden;

  position: relative;
  height: 0;
  padding-top: 56.25%;

  color: #fff;
}

.video a img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

a:hover img, a:focus img img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}


.video a h3 {
  margin: 0;
  font-size: 0.5em;
  padding: 0.4em 0.5em;
  position: absolute;
  z-index: 1001;
  bottom: 5px;
  background: rgba(10, 10, 10, 0.6);
  font-weight: normal;
}

.mejs-container {
  margin: 0 auto;
  margin-bottom: 1em;
}


@media screen and (min-width: 621px) and (max-width: 800px) {
  .video {
    width: 49.5%;
  }
  .video:nth-child(2n+2) {
    margin-right: 0;
  }
}

@media screen and (min-width: 0px) and (max-width: 620px) {
  .video {
    width: 100%;
  }
  margin: 0 0 0.5em 0;
}