calraijintaiko/caltaiko

// Place all the styles related to the videos controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.youtube {
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 200ms ease-out;
  width: 100%;

  .play {
    background: image-url('play.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 64px 45px;
    filter: alpha(opacity=80);
    height: 100%;
    opacity: .8;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;

    &:hover {
      filter: alpha(opacity=100);
      opacity: 1;
    }
  }
}

#media-videos {

  h5:not(:first-child) {
    margin-top: 30px;
  }
}

article.video {
  margin-bottom: 30px;

  h4 {
    display: inline-block;
    font-family: 'Lato';
    margin-top: 0;
  }
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 0;
  position: relative;
}