.qodef-blog-holder{

	&.qodef-blog-type-masonry {

		opacity: 0;
		@include qodefTransition(opacity 0.15s ease-out);

		&.qodef-appeared{
			opacity: 1;
		}

		article {
			width: 32%;
            padding: 0;
			margin: 0 0 48px;

			.qodef-post-image {
				margin-bottom: 39px;

                a{
                    position:relative;
                    display:block;

                    &:before{
                        content:'';
                        display:block;
                        width:100%;
                        height:100%;
                        position: absolute;
                        top:0;
                        left:0;
                        background-color: #000;
                        opacity:0;
                        @include qodefTransition(opacity 0.2s ease);
                    }

                    &:hover:before{
                        opacity:0.15;
                    }
                }
			}

            .qodef-post-info {
                &.qodef-section-top {
                    margin-bottom: 8px;
                }
            }

            .qodef-post-title {
                margin-bottom: 24px;
            }

            .qodef-post-excerpt {
                margin: 0 0 24px;
            }

            .qodef-blog-share {
                float: left;
                position: relative;
                z-index: 10;

                &:hover {
                    display: block;
                    width: 100%;
                }

                &:hover ~ .qodef-post-info-author {
                    opacity: 0;
                    transition-delay: 0s;
                }
            }

            .qodef-post-info-author {
                display: inline-block;
                position: absolute;
                left: 27px;
                top: 50%;
                @include qodefTransform(translateY(-50%));
                margin-left: 10px;
                line-height: 16px;
                opacity: 1;
                @include qodefTransition(opacity 0.2s ease-out);
                transition-delay: 0.25s;
                color: #444;
                a {
                    text-transform: capitalize;
                    color: #444;
                    &:hover {
                        color: $first-main-color;
                    }
                }
            }

            &.format-quote .qodef-post-author {
                margin-bottom: 13px;
            }

            &.format-quote,
            &.format-link {
                .qodef-post-text{
                    padding: 54px 60px 53px 40px;
                }
                .qodef-post-mark {
                    padding-right: 10px;
                }
                .qodef-post-title {
                    color: #000000;
                    font-weight: 400;
                    margin-bottom: 18px;
                }
                .qodef-post-author {
                  font-size: 14px;
                  font-weight: 700;
                }
            }

            &.format-audio {
                .qodef-post-image {
                    margin-bottom: 0;
                }
                .qodef-blog-audio-holder {
                    margin-bottom: 39px;
                }
            }

		}
		.qodef-blog-masonry-grid-sizer {
			width: 32%;
		}
		.qodef-blog-masonry-grid-gutter {
			width: 2%;
		}

	}
	&.qodef-masonry-full-width {

		margin-right: 2%;
		margin-left: 2%;
        margin-top: 2%;

      article,
      .qodef-blog-masonry-grid-sizer{
        width: 18.4%;
      }

      .qodef-blog-masonry-grid-gutter {
        width: 2%;
      }
      &.qodef-has-sidebar {
        margin-right: 0;
        margin-top: 50px;
        margin-left: 50px;
        article,
        .qodef-blog-masonry-grid-sizer{
          width: 31.66%;
        }

        .qodef-blog-masonry-grid-gutter {
          width: 2.5%;
        }
      }
	}
}



.page-template-blog-masonry-full-width {
  .qodef-load-more-ajax-pagination {
    .qodef-btn {
      margin:50px 0;
    }
  }
  .qodef-column2 {
    .qodef-sidebar {
      margin-right: 50px;
      margin-top: 50px;
    }
  }
  .qodef-column1 {
    .qodef-sidebar {
      margin-left: 50px;
      margin-top: 50px;
    }
  }
}