/***********************************************
Variables
/***********************************************/
/*** Fonts ***/
/*** Weight ***/
/*** Colors ***/
/***********************************************
Border Colors
  -whitepaper cover image
/***********************************************/
/***********************************************
Pattern Squares Colors
/***********************************************/
/***********************************************
Buttons
/***********************************************/
/***********************************************
General Mixin
/***********************************************/
/***********************************************
Images
/***********************************************/
/***********************************************
Line-Height Function
/***********************************************/
.videos-block {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#333333+1,333333+72,f4f4f4+72,333333+72,f4f4f4+72,f4f4f4+100 */
  background: #333333;
  /* Old browsers */
  background: -moz-linear-gradient(top, #333333 1%, #333333 60%, #f4f4f4 60%, #333333 60%, #f4f4f4 60%, #f4f4f4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #333333 1%, #333333 60%, #f4f4f4 60%, #333333 60%, #f4f4f4 60%, #f4f4f4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #333333 1%, #333333 60%, #f4f4f4 60%, #333333 60%, #f4f4f4 60%, #f4f4f4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#f4f4f4',GradientType=0 );
  /* IE6-9 */
  padding: 40px 0; }
  .videos-block .video-iframe {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; }
    .videos-block .video-iframe iframe,
    .videos-block .video-iframe object,
    .videos-block .video-iframe embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .videos-block .video-iframe img {
      max-width: 100%;
      width: 100%; }
    .videos-block .video-iframe .play-button {
      position: absolute;
      width: 15%;
      left: 0;
      right: 0;
      margin: 20% auto 0 auto; }
  .videos-block h4 {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 100;
    margin-bottom: 20px; }
  .videos-block h3 {
    font-size: 16px;
    line-height: 1.6em;
    color: #adadad; }
  .videos-block h2 {
    font-family: canada-type-gibson, helvetica, arial, sans-serif;
    font-weight: 600;
    font-size: 18px; }
    .videos-block h2 a {
      color: #000000; }
      .videos-block h2 a:hover {
        text-decoration: none; }
  .videos-block .video-info h2 a {
    color: #ffffff; }
  .videos-block .video-iframe {
    margin-bottom: 20px; }
  .videos-block .container .row > div {
    margin-bottom: 40px; }

@media (min-width: 768px) {
  .video-info h2 a {
    color: #000000 !important; } }

@media (min-width: 992px) {
  .videos-block {
    padding: 70px 0; }
    .videos-block h4 {
      font-size: 36px; }
    .videos-block h3 {
      margin-bottom: 50px; }
    .videos-block .col-lg-6 h2 {
      font-size: 24px; }
    .videos-block .col-lg-3 {
      margin-top: 100px; }
      .videos-block .col-lg-3 h2 {
        font-size: 20px; } }