// overlay the duration of the video over the video thumb
.clip_thumbnail {
  position: relative;
  .duration {
    right: 2px;
    bottom: 2px;
    position: absolute;
  }
}

// overlaying the play button over the video. FIXME: some of this we don't use anymore
div#home_video_image {
  &:hover .mejs-overlay-button {
    background-position: 0 -100px;
  }
}

.mejs-overlay-button{ top:80%; left:90%;}

.thumbnail_video {
  .thumbnail_image {    
    .mejs-overlay-button {
      background: image-url("kinney/smallplay.png") no-repeat;
      width: 50px;
      height: 50px;
      bottom: 10px;
      right: 10px;
      top: inherit;
      left: inherit;
    }    
  }
  &:hover {
    .mejs-overlay-button {
      background-position: 0 -50px;
    }    
  }
}


@media (max-width: 767px) {
  #video_container {
    .mejs-overlay-button {
      top: 50%;
      left: 50%;
    } 
  }
  div#home_video_image {
    .mejs-overlay-button {
      bottom: 10px;
      right: 10px;
      top: inherit;
      left: inherit;
    }  
  }
}