/* ============================= 
    GALLERY-4 CSS
================================ */

.gallery-style-4 {
  padding: 100px 0 70px;
  background: #f3f3f3;

  .single-gallery {
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 30px;

    &:hover {
      .overlay {
        opacity: 1;
        visibility: visible;

          .action {
            @include transform(translateY(0px));
          }
      }
    }

    .image {
      position: relative;
      overflow: hidden;
      border-radius: 5px;

      img {
        width: 100%;
      }
    }

    .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      @include flex-center;
      opacity: 0;
      visibility: hidden;
      @include transition(.3s);
      background: rgba($primary-color, .3);

      .action {
        @include transform(translateY(20px));
        @include transition(.3s);

        a {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: $white;
          color: $heading-color;
          font-size: 20px;
          @include flex-center;
        }
      }
    }

    .info {
      @include transition(.3s);
      background: $white;
      margin-left: 30px;
      margin-bottom: 15px;
      padding: 30px 20px;
      border-radius: 5px 0 5px 5px;
      margin-top: -70px;
      position: relative;
      z-index: 1;
      @include box-shadow(0px 0px 15px rgba(0, 0, 0, .1));

      h5 {
        margin-bottom: 15px;
      }

    }
  }
}