@charset "utf-8";
/* CSS Document */

/* First make sure the video thumbnail images are responsive. */

  img {
    max-width: 100%;
    height: auto;
  }

  /* 
  This is the starting grid for each video with thumbnails 4 across for the largest screen size.
  It's important to use percentages or there may be gaps on the right side of the page. 
  */

 


@media only screen and (min-width : 180px) and (max-width : 359px) {
 .video {
      display: block;
      width: 96%; /* Single column view. */
      margin: 2%; /* The smaller the screen, the smaller the percentage actually is. */
      float: none;
}
	  .video figure {
    height: 0;
  padding-bottom: 100%;
    overflow: hidden; }

 .video figure a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
  }
}
@media only screen and (min-width : 360px) and (max-width : 639px) {
 .video {
      display: block;
      width: 96%; /* Single column view. */
      margin: 2%; /* The smaller the screen, the smaller the percentage actually is. */
      float: none;
}
	  .video figure {
    height: 0;
   padding-bottom: 100%;
    overflow: hidden; }

 .video figure a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
  }
}

@media only screen and (min-width : 640px) and (max-width : 979px) {
 .video {
    background: #fff;
    padding-bottom: 20px;
    width: 46%; /* Thumbnails 4 across */
    margin: 1%;
    float: left;
}
	  .video figure {
    height: 0;
    padding-bottom: 100%;
    overflow: hidden; }

 .video figure a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
  }
}



@media only screen and (min-width : 980px) and (max-width : 1920px) {
.video {
    background: #fff;
    
    width: 23%; /* Thumbnails 4 across */
    margin: 1%;
    float: left;
  }

   /* 
   These keep the height of each video thumbnail consistent between YouTube and Vimeo.
   Each can have thumbnail sizes that vary by 1px and are likely break your layout. 
   */

  .video figure {
    height: 0;
    padding-bottom: 100%;
    overflow: hidden; }

 .video figure a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
  }
}