/*
12 Blog page css here
-----------------------...
--blog section
--sidebar  
*/

.Blog-wrap {
    min-height: 500px;
    padding: 50px 0;
}
.blog-body-content {
    display: block;
    clear: both;

    .medical-blog-block {
        position: relative;
        background: darken($dim-bg, 1%);
        padding: 0px 15px;
        -webkit-box-shadow: 0 8px 6px -7px darken($dimline-color, 10%);
        -moz-box-shadow: 0 8px 6px -7px darken($dimline-color, 10%);
        box-shadow: 0 8px 6px -7px darken($dimline-color, 10%);
        margin-bottom: 30px;

        &:hover {
            figure {
                .hover-icon {
                    left: 0;
                }
            }
        }
        figure {
            display: block;
            overflow: hidden;
            position: relative;

            .hover-icon {
                position: absolute;
                left: -100px;
                top: 50%;
                transform: translateY(-50%);
                display: block;
                overflow: hidden;
                @include transition(all 0.4s ease-in-out 0s);

                span {
                    width: 50px;
                    height: 50px;
                    display: table-cell;
                    margin: 2px 4px;
                    background: $white-color;
                    padding: 4px;
                    font-size: 10px;
                    clear: both;
                    position: relative;
                    float: left;
                    text-align: center;
                    vertical-align: middle;
                }
            }
        }
        &:hover {

            /*background: $dim-bg;*/
        }
        .blog-caption {
            display: block;
            margin-top: 20px;
        }
        .blog-heading {
            position: relative;
            display: block;
            padding: 20px 85px 20px 0px;
            border-bottom: 1px solid $dimline-color;
            margin-bottom: 20px;
            min-height: 90px;

            a {
                color: darken($dimline-color, 35%);
            }
            h2 {
                font-size: 20px;
                margin: 0;
                line-height: 25px;
                font-weight: 600;
            }
            span {
                display: inline-block;
                margin-right: 8px;
                font-size: 12px;
                margin-top: 10px;
            }
            .right-date {
                width: 70px;
                height: 85px;
                position: absolute;
                right: 0;
                bottom: 0;
                background: $theme-color;
                color: $white-color;
                padding: 5px;
                text-align: center;
                display: table-cell;
                vertical-align: middle;
                font-weight: 100;
                font-size: 13px;

                span {
                    font-weight: bold;
                    display: inline-block;
                    width: 100%;
                    clear: both;
                    overflow: hidden;
                    font-size: 20px;
                    margin: 0;
                }
            }
        }
        .blog-caption {
            padding: 0px 0px 20px;

            .btn-wrap {
                margin: 15px 0 20px;

                a {
                    color: $black-color;
                }
            }
        }
    }
    .medical-blog-block.bottom {
        padding-top: 15px;
        position: relative;

        .blog-heading {
            position: relative;
            display: block;
            min-height: 90px;
            margin-bottom: 20px;

            .right-date {
                right: 0;
                top: auto;
                bottom: 0;
            }
            h2 {
                margin: 0;
            }
        }
    }

    /*blog single*/
   
    // comment blog side 

    .comment-section-wrap {
        display: block;
        clear: both;
        margin-top: 34px;
        
        padding-top: 15px;
        position: relative;

        .blog-comments {
            .comment-single {
                border-bottom: 1px dotted $dimline-color;
                overflow: hidden;
                display: block;
                padding-bottom: 20px;
                margin-top: 20px;
            }
            li {
                width: 100%;
                clear: both;
                margin-bottom: 20px;
                list-style: none;
                margin-bottom: 20px;
            }
            li:last-child {
                .comment-single {
                    border-bottom: 0;
                }
            }
            .avatar-thumb {
                width: 80px;
                height: 80px;
                float: left;

                img {
                    max-width: 100%;
                }
            }
            .comment-block {
                @include calc(width, '100% - 80px');
                @include box-sizing (border-box);
                float: left;
                padding-left: 20px;

                a {
                    color: $black-color;

                    &:hover {
                        color: $theme-color;
                    }
                }
                .date {
                    color: darken($dim-bg, 25%);
                }
                .comment-by {
                   
                    padding-bottom: 15px;
                }
            }
        }
    }

    .comment-form-wrap {
    .leave-comment-head {
        margin-bottom: 30px;
    }

    .form-input-row {
        margin-bottom: 20px;
        @include clearfix ();

        input,
        textarea {
            border: none;
            box-shadow: none;
            border-bottom: 1px solid $dimline-color;
            @include border-radius(0);

            &:focus {
                border-bottom: 1px solid $theme-color;
            }

        }

    }

}
}
.pagination-wrap {
    padding: 0px 0;
    border-top: 1px solid $dimline-color;
    margin: 15px 0 0;
    clear: both;
    overflow: hidden;

    .pagination > li > a, .pagination > li > span {
        border: 1px solid transparent;
        background-color: darken($dim-bg, 10%);
        margin-right: 5px;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        background-color: $theme-color;
    }
}
.sidebar-wrap {
    position: relative;

    .search-block {
        position: relative;
        min-height: 100px;
        margin-bottom: 20px;

        .sidebar-form {
            .form-control {
                background: $dim-bg;
                border: none;
                box-shadow: none;
                font-size: 12px;
                border-bottom: 1px solid $dimline-color;
            }
            .btn-search {
                background: $theme-color;
                color: $white-color;
            }
            .input-group-addon:last-child {
                border-left: 1px solid #ddd;
            }
        }
    }
    .news-tab-block {
        display: block;
        margin-bottom: 25px;

        .news-tab {
            background: $dimline-color;
            border-bottom: 1px solid transparent;

            a {
                border-radius: 0;
                font-size: 18px;
                color: $black-color;
                font-weight: bold;

                &:hover {
                    background: transparent;
                    border-color: transparent;
                }
            }
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            background: $theme-color;
            border: transparent;
            color: $white-color;
        }
        .recent-news {
            margin: 0;
            padding: 0;
            margin-top: 20px;

            li {
                clear: both;
                list-style: none;
                border-bottom: 1px solid $dimline-color;
                overflow: hidden;
                margin-bottom: 10px;
                padding: 0 0 10px 0;

                .left-news-thumb {
                    width: 75px;
                    height: 75px;
                    float: left;

                    img {

                        /*max-width: 100%;*/
                    }
                }
                .right-news-content {
                    @include box-sizing(border-box);
                    @include calc(width, '100% - 75px');
                    padding: 0 0 0px 20px;
                    float: left;
                    display: block;

                    h4 {
                        font-size: 16px;
                        line-height: 25px;
                    }
                    span {
                        display: inline-block;
                        margin-right: 10px;
                        font-size: 12px;
                        color: darken($dimline-color, 30%);

                        i {
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
        .popular-news {
            margin: 0;
            padding: 0;
            margin-top: 20px;

            li {
                clear: both;
                list-style: none;
            }
        }
    }
}
.sidebar-heading {
    position: relative;
    display: block;
    margin-bottom: 25px;

    h3 {
        font-size: 20px;
        font-weight: 300;
        margin-top: 0px;
    }
}
.tags-block {
    position: relative;

    .tags-content {
        display: block;

        a {
            padding: 6px 12px;
            border: 2px solid $theme-color;
            color: $black-color;
            margin: 8PX 4px;
            display: inline-block;
            font-size: 12px;
            @include transition(all 0.5s ease-in-out 0s);

            &:hover {
                color: $white-color;
                background: $theme-color;
            }
        }
    }
}