/* ************************** HOME PAGE FEATURE ************************** */

body.home.page { background-color: #111; /* make footer look like it extends, if video is shorter than screen height */ }

.feature { margin-bottom: -5px; /* reduce whitespace after video */ }
    .feature video { width: 100%; height: auto; min-height: 100%; }

    .feature video ~ .loading,
    .feature video ~ .play,
    .single-portfolio .gallery .item video ~ .loading,
    .single-portfolio .gallery .item video ~ .play {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      background-image: url("../images/icons/loading6_red_on_grey.gif");
      background-repeat: no-repeat;
      background-position: center;
      -webkit-transition: background-color 1.5s, background-image 1.5s;
      -moz-transition: background-color 1.5s, background-image 1.5s;
      transition: background-color 1.5s, background-image 1.5s;
      right: 0;
      bottom: 0;
    }

      /* reduce darkness of overlay, and size of icon, for the portfolio gallery */
      .single-portfolio .gallery .item video ~ .loading,
      .single-portfolio .gallery .item video ~ .play { background-color: rgba(0,0,0,.2); background-size: 64px; }

      .feature video ~ .play,
      .single-portfolio .gallery .item video ~ .play {
        background-image: url("../images/icons/arrow5_right_white.png");
        display: none;
        cursor: pointer;
      }

        .mod-no-touch .feature video ~ .play:hover { background-color: rgba(0,0,0,.3); }

        .mod-no-touch .single-portfolio .gallery .item video ~ .play:hover {
          background-color: rgba(0,0,0,0);
          background-image: none;
          -webkit-transition-duration: .5s;
          -moz-transition-duration: .5s;
          transition-duration: .5s;
        }

      .feature video ~ .loading.playing,
      .single-portfolio .gallery .item video ~ .loading.playing {
        background-color: transparent;
        background-position: bottom 30px right 30px;
      }