#blog-list .blog-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.5em 0 0.8em;
}

    #blog-list .blog-filters .blog-filters-categories {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.5em;
        flex-wrap: wrap;
    }

        #blog-list .blog-filters .blog-filters-categories > a {
            margin-left: 0.6em;
            border-radius: 1em;
            color: #000;
            padding: 0.5em 1em;
            font-size: 0.87em;
            margin-bottom: 0.5em;
            margin-top: 0.5em;
            font-weight: 500;
        }

            #blog-list .blog-filters .blog-filters-categories > a.active {
                background-color: rgba(46, 128, 59, 1);
                color: #fff;
            }

    #blog-list .blog-filters .blog-filters-search {
        max-width: 20em;
        width: 25%;
        min-width: 16em;
        position: relative;
    }

        #blog-list .blog-filters .blog-filters-search input {
            width: 100%;
            background-color: rgba(0,0,0,0.05);
            border-radius: 1em;
            padding: 0.8em 1em;
            padding-right: 3.5em;
            font-size: 0.86em;
            color: rgba(0,0,0,1);
        }

        #blog-list .blog-filters .blog-filters-search button {
            width: 1.1em;
            height: 1.1em;
            position: absolute;
            right: 1em;
            top: calc(50% - 0.55em);
            outline: none;
            background-color: none;
            background: none;
            cursor: pointer;
        }

            #blog-list .blog-filters .blog-filters-search button:hover {
                background-color: none;
            }

            #blog-list .blog-filters .blog-filters-search button > svg {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            #blog-list .blog-filters .blog-filters-search button:hover > svg path {
                fill: rgba(46, 128, 59, 1);
                transform: scale(1.1);
            }

#blog-list .blog-subfilters {
    margin-bottom: 1.5em;
}

    #blog-list .blog-subfilters > div:first-of-type {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap:wrap;
    }

    #blog-list .blog-subfilters a {
        font-size: 0.95em;
        font-weight: 500;
        color: rgba(0,0,0,0.8);
        margin-left: 1.2em;
        margin-bottom: 0.4em;
        margin-top: 0.4em;
    }

        #blog-list .blog-subfilters a.active {
            font-weight: 600;
            color: var(--primary-color);
        }
        #blog-list .blog-subfilters a > i {
            width: 0.35em;
            height: 0.35em;
            background-color: rgba(0,0,0,0.7);
            border-radius: 50%;
            margin-left: 0.4em;
            margin-top: -0.1em;
            transform: translateY(-0.1em);
            display: inline-block;
        }
        #blog-list .blog-subfilters a.active > i {
            background-color: var(--primary-color);
        }

            #blog-list .blog-subfilters > div {
                display: none;
            }

        #blog-list .blog-subfilters > div.active {
            display: block;
        }

    #blog-list .blog-subfilters h5 {
        font-size: 0.9em;
        color: var(--primary-color);
        font-weight: 600;
        margin-top: 2em;
        margin-bottom: 0.5em;
    }

    #blog-list .blog-subfilters p {
        font-weight: 300;
        line-height: 1.7;
        margin: 0;
        font-size: 0.9em;
        white-space: pre-line;
        text-align: justify;
    }

#blog-list *,
#blog-detail * {
    font-family: 'Dibaj';
}

body#blog {
    background-color: rgba(244, 244, 245, 0.54);
}

#blog-list {
    padding-top: 0;
    margin-top: -5em;
}

    #blog-list .blog-slider {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        /*padding-top: 4.3em;*/
        padding-bottom: 2.5em;
        width: 100%;
    }

        #blog-list .blog-slider h2 {
            font-weight: 700;
            color: #000;
            font-size: 2.2em;
            text-align: center;
            display: block;
            margin-bottom: 2em;
        }


    #blog-list .slider-container {
        width: 100%;
        font-size: 0.94em;
        margin-bottom: 2em;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 25em;
        height: 48vw;
        max-height: 60em;
        position: relative;
    }



    #blog-list .blog-slider .blog-swiper {
        width: 100%;
        position: relative;
        overflow: hidden;
        height: 100%;
    }

        #blog-list .blog-slider .blog-swiper .swiper-pagination {
            z-index: 1;
        }

            #blog-list .blog-slider .blog-swiper .swiper-pagination span.swiper-pagination-bullet {
                background-color: #fff;
            }

        #blog-list .blog-slider .blog-swiper .swiper-button-next::after,
        #blog-list .blog-slider .blog-swiper .swiper-button-prev::after {
            font-size: 0.2em;
        }

        #blog-list .blog-slider .blog-swiper .swiper-button-next::after {
            margin-left: 1em;
        }

        #blog-list .blog-slider .blog-swiper .swiper-button-prev::after {
            margin-right: 1em;
        }

        #blog-list .blog-slider .blog-swiper .swiper-button-next,
        #blog-list .blog-slider .blog-swiper .swiper-button-prev {
            color: #fff;
            font-size: 12em
        }

        #blog-list .blog-slider .blog-swiper > div.swiper-wrapper {
        }

        #blog-list .blog-slider .blog-swiper .swiper-slide {
            width: 100%;
            height: 100%;
            position: relative;
        }

            #blog-list .blog-slider .blog-swiper .swiper-slide:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.1);
                background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.3) 10em,rgba(0,0,0,0.1) 13em, rgba(0,0,0,0.1));
            }

            #blog-list .blog-slider .blog-swiper .swiper-slide > img {
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
            }

            #blog-list .blog-slider .blog-swiper .swiper-slide .slider-content {
                position: absolute;
                left: 0;
                bottom: 5em;
                width: 100%;
                z-index: 1;
                color: #fff;
                text-align: center;
            }

                #blog-list .blog-slider .blog-swiper .swiper-slide .slider-content > h4 {
                    font-weight: 600;
                    font-size: 1.8em;
                    margin-bottom: 0.5em;
                    padding: 0 3em;
                }

                    #blog-list .blog-slider .blog-swiper .swiper-slide .slider-content > h4 > a {
                        color: inherit;
                        font-size: inherit;
                    }

                #blog-list .blog-slider .blog-swiper .swiper-slide .slider-content > span {
                    color: #a7eab1;
                    font-weight: 500;
                    font-size: 1em;
                    padding: 0 3em;
                    display:block;
                }

    #blog-list .blog-latest > .container {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
    }
    /*#blog-list .blog-slider .slider-item {
        position: relative;
        float: right;
        padding: 0.7em;
        display: inline-flex;*/
    /*height: 12.5em;*/
    /*}

        #blog-list .blog-slider .slider-item.h2 {*/
    /*height: 25em;*/
    /*}

        #blog-list .blog-slider .slider-item > div {
            position: relative;*/
    /*padding-bottom:66.66%;*/
    /*1920*1080*/
    /*padding-bottom: 56.25%;
            width: 100%;
        }

            #blog-list .blog-slider .slider-item > div > div {*/
    /*position: relative;*/
    /*position: absolute;
                left: 0;
                top: 0;
                display: flex;
                justify-content: start;
                align-items: end;
                border-radius: 0.5em;
                overflow: hidden;
                height: 100%;
                width: 100%;
            }

                #blog-list .blog-slider .slider-item > div > div:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;*/
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) 70%);*/
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, 0.7) 100%);
                    z-index: 2;
                }

        #blog-list .blog-slider .slider-item.h2 > div:before {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%);
        }

        #blog-list .blog-slider .slider-item.empty > div:before {
            opacity: 0.2;
        }

        #blog-list .blog-slider .slider-item img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1);
            color: rgba(0,0,0,0);
        }

        #blog-list .blog-slider .slider-item > div:hover img {
            transform: scale(1.05);
        }

        #blog-list .blog-slider .slider-item a {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0;
            background-color: transparent;
            z-index: 5;
        }

        #blog-list .blog-slider .slider-item .slider-content {
            position: absolute;
            left: 2em;
            width: calc(100% - 4em);
            bottom: 1.5em;
            height: auto;
            z-index: 3;
        }

            #blog-list .blog-slider .slider-item .slider-content span {
                font-weight: 400;
                font-size: 0.8em;
                color: #fff;
                opacity: 0.95;
                display: block;
                padding-bottom: 0.5em;
            }

        #blog-list .blog-slider .slider-item:first-of-type .slider-content span {*/
    /*font-size: 0.85em;*/
    /*font-size: 0.9em;
        }

        #blog-list .blog-slider .slider-item .slider-content h4 {*/
    /*font-size: 1.05em;*/
    /*font-size: 1.1em;
            font-weight: 500;
            color: #fff;
        }

        #blog-list .blog-slider .slider-item:first-of-type .slider-content h4 {
            font-size: 1.15em;
        }*/
    #blog-list .blog-latest .latest-container {
        /*font-size: 0.94em;*/
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
        gap: 1.5em;
        width: 100%;
    }

    #blog-list .blog-latest .advertisements {
        display: flex;
        justify-content: center;
        align-items: start;
        width: 100%;
        flex-wrap: wrap;
    }
    /*  #blog-list .blog-latest h3 {
        font-size: 1.35em;
        font-weight: 700;
        color: #424242;
        text-align: right;
        margin: 3.5em 0 1.5em;
    }*/
    /*   #blog-list .blog-latest .latest-container {
        display: table;
        width: 100%;
        padding: 1em 0;
    }*/
    #blog-list .blog-latest .post {
        width: calc(100% - 1em);
        display: flex;
        justify-content: center;
        align-items: start;
        padding: 1em;
        position: relative;
        border-radius: 0.5em;
        margin-top: 0.5em;
        flex-wrap: wrap;
        border: solid 1px rgba(0,0,0,0.1);
        /*height:31em;*/
        padding-bottom: 2em;
        position: relative;
        overflow: hidden;
    }

        #blog-list .blog-latest .post > a {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            z-index: 3;
        }

        #blog-list .blog-latest .post > div {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        #blog-list .blog-latest .post .img {
            position: relative;
            overflow: hidden;
            border-radius: 0.5em;
            width: 100%;
        }

            #blog-list .blog-latest .post .img:before {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                content: "";
                background-color: rgba(0,0,0,0.05);
                z-index: 1;
            }

            #blog-list .blog-latest .post .img > div {
                position: relative;
                /*aspect-ratio : 2*3 */
                padding-top: 66.66%;
            }

            #blog-list .blog-latest .post .img img {
                object-fit: cover;
                object-position: center;
                width: 100%;
                height: 100%;
                transform: scale(1);
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                color: rgba(0,0,0,0);
            }

        #blog-list .blog-latest .post:hover .img img {
            transform: scale(1.05);
        }

        #blog-list .blog-latest .post .content {
            width: 100%;
            padding: 1em 0.5em 0.5em 0.5em;
        }

            #blog-list .blog-latest .post .content span.category {
                color: rgba(46, 128, 59, 1);
                font-weight: 500;
                text-align: right;
                font-size: 0.75em;
                display: inline-block;
                margin-bottom: 1.2em
            }

                #blog-list .blog-latest .post .content span.category.empty__animation {
                    height: 1.2em;
                    width: 10em;
                    max-width: 100%;
                    border-radius: 0.5em;
                }

            #blog-list .blog-latest .post .content h4 {
                color: rgba(0,0,0,0.87);
                font-weight: 600;
                font-size: 1.05em;
                text-align: right;
                margin: 0.3em 0 0.2em;
            }

                #blog-list .blog-latest .post .content h4.empty__animation {
                    height: 1.7em;
                    width: 15em;
                    max-width: 100%;
                    border-radius: 0.5em;
                }

            #blog-list .blog-latest .post .content p {
                color: rgba(0,0,0,0.80);
                font-weight: 400;
                text-align: right;
                font-size: 0.8em;
                margin-bottom: 1.7em;
                line-height: 1.8;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                #blog-list .blog-latest .post .content p.empty__animation {
                    height: 6.5em;
                    width: 33em;
                    max-width: 100%;
                    border-radius: 0.5em;
                }

            #blog-list .blog-latest .post .content span.date {
                position: absolute;
                left: 0;
                color: rgba(0,0,0,0.4);
                font-weight: 400;
                font-size: 0.75em;
                width: 100%;
                bottom: 0;
                padding: 1.5em 1.5rem;
                text-align: left;
            }

                #blog-list .blog-latest .post .content span.date.empty__animation {
                    height: 1.2em;
                    width: 13em;
                    max-width: 100%;
                    border-radius: 0.5em;
                }

    #blog-list .pagination {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4em 0 2em;
    }

        #blog-list .pagination:before {
            position: absolute;
            content: "";
            border: solid 1px rgba(0,0,0,0.05);
            top: 0.85em;
            left: 0;
            width: 100%;
        }

        #blog-list .pagination > div {
            padding: 0 2em;
            position: relative;
            background-color: #F9F9F9;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #blog-list .pagination a {
            border: solid 1px rgba(0,0,0,0.3);
            color: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2em;
            height: 2em;
            font-weight: 500;
            margin: 0 0.5em;
            border-radius: 0.5em;
            cursor: pointer;
        }

            #blog-list .pagination a.active {
                /*color: rgb(46, 128, 59);
                font-weight:600;
                border: solid 2px rgb(46, 128, 59);*/
                border-color: rgb(46, 128, 59);
                background-color: rgb(46, 128, 59);
                color: #fff;
            }

            #blog-list .pagination a.active {
            }













#blog-detail {
    padding-top: 0;
}

    #blog-detail .blog-header {
        text-align: center;
        margin-top: 6em;
    }

        #blog-detail .blog-header .blog-createdon {
            font-weight: 400;
            color: rgba(0,0,0,0.7);
            font-size: 0.9em;
        }

        #blog-detail .blog-header h1 {
            font-family: 600;
            font-size: 2em;
            margin: 0.5em 0;
            padding: 0 0.5em;
        }

        #blog-detail .blog-header span {
            font-weight: 500;
            font-size: 1em;
            color: var(--primary-color);
            margin-bottom: 4em;
            display: block;
            padding: 0 1em;
        }

        #blog-detail .blog-header .img {
            width: 100%;
            padding-bottom: 50%;
            position: relative;
        }

            #blog-detail .blog-header .img > img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
    /*
    #blog-detail .blog-header .img {
        padding: 0;
        top: 0;
        left: 0;
        min-height: 0;
        max-height: none;
        height: auto;
        padding-bottom: 56.25% !important;
        position: relative;
        width: 100%;
        display: inline-block;
    }

        #blog-detail .blog-header .img:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color);
            opacity: 0.05;
        }

        #blog-detail .blog-header .img:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.05;
        }

        #blog-detail .blog-header .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            top: 0;
            left: 0;
            position:absolute;
        }

    #blog-detail .blog-header img:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,0.05);
    }


    #blog-detail .blog-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: start;
        max-width: 40em;
        margin-right: auto;
        margin-left: auto;
    }
    #blog-detail .blog-title {
        border-radius: 0.5em;
        background-color: #fff;
        padding: 2.5em 2em 1.5em;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.5em;
        position: relative;
        z-index: 1;
        width: 100%;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        margin-bottom: -3em;
    }

        #blog-detail .blog-title span.category {
            display: block;
            color: #000000;
            font-weight: 400;
            font-size: 0.95em;
            width: 100%;
        }

        #blog-detail .blog-title h1 {
            display: block;
            color: #000000;
            font-weight: 600;
            font-size: 1.7em;
            margin: 0.7em 0 2.1em;
            width: 100%;
        }

        #blog-detail .blog-title span.createdon {
            display: inline-block;
            color: rgba(0,0,0,0.4);
            font-weight: 500;
            font-size: 0.85em;
            padding: 0 0.35em;
        }



    #blog-detail .blog-header .blog-player {
        width: 100%;
        margin: 3em 0 5em;
        justify-content: center;
        align-items: center;
        display: flex;
    }

        #blog-detail .blog-header .blog-player audio {
            width: 100%;
            max-width: 30em;
        }
*/
    #blog-detail .blog-container {
        max-width: 40em;
        margin: auto;
    }

    #blog-detail .blog-content {
        margin: 4em auto;
        font-size: 1em;
        font-weight: 200;
    }

        #blog-detail .blog-content img,
        #blog-detail .blog-content video {
            max-width: 100%;
            object-fit: contain;
            object-position: center;
        }
        #blog-detail .blog-content video {
            height: auto;
        }
            #blog-detail .blog-content img {
                width: auto;
            }


            #blog-detail .blog-content * {
                margin: initial;
                margin: revert;
                padding: initial;
                padding: revert;
                list-style: initial;
                font-weight: initial;
                font-weight: revert;
                text-decoration: initial;
                text-decoration: revert;
                font-style: inherit;
                font-style: revert;
                width: 100%;
            }

        #blog-detail .blog-content p,
        #blog-detail .blog-content span {
            font-weight: 400 !important;
            line-height: 1.7 !important;
            color: rgba(0,0,0,0.8);
        }

        #blog-detail .blog-content strong {
            font-weight: 600;
            /*color: var(--primary-color);*/
        }

        #blog-detail .blog-content u {
            text-decoration: underline;
        }

        #blog-detail .blog-content em {
            font-style: italic;
        }

        #blog-detail .blog-content blockquote {
            margin: 0;
            position: relative;
            padding-top: 1em;
            padding-bottom: 1em;
            padding-right: 1.5em;
        }

            #blog-detail .blog-content blockquote:before {
                content: "";
                position: absolute;
                right: 0;
                top: 1.5em;
                width: 2px;
                bottom: 4em;
                background-color: var(--primary-color);
            }

            #blog-detail .blog-content blockquote:after {
                position: absolute;
                top: 0;
                width: 1em;
                height: 1em;
                left: 0;
                background-image: url('../../img/icons/quote.svg');
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                content: "";
            }

            #blog-detail .blog-content blockquote pre {
                text-align: left;
                display: block;
                width: 100%;
                color: var(--primary-color);
                font-weight: 500;
            }
/*
main#blog-detail .related-blogs,
main#blog-detail .related-comments {
    margin: 7em 0;
}

    main#blog-detail .related-blogs.category .box__header,
    main#blog-detail .related-comments.category .box__header {
        margin-bottom: 1.5em;
    }

        main#blog-detail .related-blogs.category .box__header h2,
        main#blog-detail .related-comments.category .box__header h2 {
            font-size: 1.7em;
        }










#blog-detail .related-comments #blog-comments {
}

    #blog-detail .related-comments #blog-comments > div {
        width: 100%;
    }


#blog-detail .related-comments .add-comment {
    margin: 0;
    max-height: 0;
    overflow: hidden;
}

    #blog-detail .related-comments .add-comment.show {
        max-height: 20em;
        padding: 1.5em 0 2em;
    }

    #blog-detail .related-comments .add-comment > div {
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
    }

    #blog-detail .related-comments .add-comment .comment-img {
    }

        #blog-detail .related-comments .add-comment .comment-img > img {
        }

    #blog-detail .related-comments .add-comment .comment-content {
    }

        #blog-detail .related-comments .add-comment .comment-content textarea {
            width: 100% !important;
            max-width: 100%;
            min-width: 100%;
            border: solid 1px rgba(112, 112, 112, 0.4);
            border-radius: 0.5em;
            font-size: 1em;
            font-weight: 400;
            outline: none;
            height: 8em;
            min-height: 5em;
            padding: 0.7em;
            max-height: 0;
            overflow: hidden;
        }

    #blog-detail .related-comments .add-comment.show .comment-content textarea {
        max-height: 15em;
    }

    #blog-detail .related-comments .add-comment .comment-content textarea:focus,
    #blog-detail .related-comments .add-comment .comment-content textarea:active {
        border-color: rgba(112, 112, 112, 0.4);
    }

    #blog-detail .related-comments .add-comment .comment-content button {
        border-radius: 0.5em;
        padding: 0.7em 2em;
        font-weight: 600;
        font-size: 0.9em;
        background-color: #355B29;
        color: #fff;
        margin: 1.2em 0 0.5em;
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: pointer;
        max-height: 0;
        overflow: hidden;
    }

    #blog-detail .related-comments .add-comment.show .comment-content button {
        max-height: 5em;
    }

    #blog-detail .related-comments .add-comment .comment-content button:hover,
    #blog-detail .related-comments .add-comment .comment-content button:active {
        -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.21);
        box-shadow: 0 5px 15px 0 rgba(0,0,0,.21);
    }



#blog-detail .related-comments .primary-comment {
    width: 100%;
    padding: 1.5em 0;
    display: block;
}

    #blog-detail .related-comments .primary-comment.not-found > p {
        display: block;
        text-align: center;
    }

#blog-detail .related-comments .comment {
    font-size: 1em;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 1.5em 0;
}

    #blog-detail .related-comments .comment .comment-img,
    #blog-detail .related-comments .add-comment .comment-img {
        width: 3em;
        height: 3em;
        border-radius: 50%;
        overflow: hidden;
    }

        #blog-detail .related-comments .comment .comment-img.teacher-img,
        #blog-detail .related-comments .add-comment .comment-img.teacher-img {
            padding: 0.4em;
            background-color: rgb(46,128,59);
        }


        #blog-detail .related-comments .comment .comment-img > img,
        #blog-detail .related-comments .add-comment .comment-img > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        #blog-detail .related-comments .comment .comment-img.teacher-img > img,
        #blog-detail .related-comments .add-comment .comment-img.teacher-img > img {
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

    #blog-detail .related-comments .comment .comment-content,
    #blog-detail .related-comments .add-comment .comment-content {
        margin-bottom: 0.5em;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        width: calc(100% - 3em);
        padding-right: 1.2em;
    }

        #blog-detail .related-comments .comment .comment-content .action {
            width: 100%;
            display: flex;
            margin-bottom: 0.5em;
        }

            #blog-detail .related-comments .comment .comment-content .action > a.name {*/
/*width: calc(100% - 10rem);*/
/*margin-left: auto;
                display: inline-flex;
                font-size: 1.1em;
                font-weight: 600;
                color: #424242;
                align-items: center;
                justify-content: start;
            }

            #blog-detail .related-comments .comment .comment-content .action > span.createdon {*/
/*width: 10rem;*/
/*margin-right: auto;
                display: inline-flex;
                color: #C2C2C2;
                font-size: 0.9em;
                font-weight: 400;
                align-items: center;
                justify-content: end;
            }

        #blog-detail .related-comments .comment .comment-content .body {
            width: 100%;
            display: block;
        }

            #blog-detail .related-comments .comment .comment-content .body > p {
                color: #707070;
                font-size: 1em;
                font-weight: 500;
                width: 100%;
            }

            #blog-detail .related-comments .comment .comment-content .body > a {
                font-size: 0.97em;
                font-weight: 600;
                color: #355B29;
                padding: 0.1em;
                padding-right: 0;
                margin-top: 0.7em;
                display: inline-block;
                margin-left: 1.5em;
            }

                #blog-detail .related-comments .comment .comment-content .body > a.delete {
                    color: #F93154;
                    margin-left: 0;
                }

                #blog-detail .related-comments .comment .comment-content .body > a:hover,
                #blog-detail .related-comments .comment .comment-content .body > a:active {
                    text-decoration: underline;
                }

#blog-detail .related-comments .reply-comment {
    padding-right: calc(3em + 1.2em);
}

    #blog-detail .related-comments .reply-comment .comment {
        font-size: 0.95em;
    }

        #blog-detail .related-comments .reply-comment .comment .comment-img {
            font-size: 0.9em;
            margin-left: -0.2em;
            overflow: hidden;
        }*/
.emptyBlogList {
    margin-top: 9em;
    font-size: 0.9em;
    font-weight: 400;
}

#blogAuthor > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    max-width: 55em;
    margin: 0 auto 6em;
    position: relative;
    flex-wrap: wrap;
}

.author-page #blogAuthor > div {
    margin-top: 3em;
}

#blogAuthor > div:before {
    position: absolute;
    top: -1.5em;
    left: 0;
    height: 1px;
    width: 100%;
    content: "";
    background-color: rgba(0,0,0,0.07);
}

.author-page #blogAuthor > div:before {
    display: none;
}

#blogAuthor .img {
    width: 6.5em;
    height: 6.5em;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

    #blogAuthor .img > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

#blogAuthor .content {
    width: calc(100% - 8.5em);
}

    #blogAuthor .content h3 {
        margin: 0;
        font-weight: 600;
        font-size: 1.15em;
        margin-bottom: 0.5em;
        color: var(--primary-color);
    }

    #blogAuthor .content p {
        margin: 0;
        font-weight: 400;
        font-size: 0.9em;
        line-height: 1.9;
    }

#authors-list section.authors h2 {
    margin: 1em 0;
    color: rgb(46,128,59);
    font-weight: 600;
    font-size: 1.7em;
}

#authors-list section.authors .items {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

    #authors-list section.authors .items .item {
        margin-bottom: 2em;
    }

        #authors-list section.authors .items .item > div {
            position: relative;
            padding: 0.8em;
        }

        #authors-list section.authors .items .item a {
            position: absolute;
            left: 0.8em;
            top: 0.8em;
            height: calc(100% - 0.8em);
            width: calc(100% - 0.8em);
            left: 0;
            top: 0;
            z-index: 3;
            opacity: 0;
        }

        #authors-list section.authors .items .item .img {
            padding-bottom: 100%;
            position: relative;
            background-color: #C4C4C7;
            position: relative;
            overflow: hidden;
        }

            #authors-list section.authors .items .item .img:before {
                position: absolute;
                left: -1em;
                width: 3em;
                height: 5em;
                top: -2em;
                content: "";
                background-color: #F9F9F9;
                transform: rotate(45deg);
                z-index: 1;
            }

            #authors-list section.authors .items .item .img > img {
                width: 100%;
                height: 100%;
                object-position: center;
                object-fit: cover;
                position: absolute;
                left: 0;
                top: 0;
            }

        #authors-list section.authors .items .item .content {
            margin-top: 1em;
        }

            #authors-list section.authors .items .item .content h4 {
                color: #fff;
                background-color: rgb(46,128,59);
                padding: 0.5em;
                font-weight: 500;
                width: 100%;
                text-align: center;
                margin: 0;
                font-size: 0.9em;
            }





@media(min-width:576px) {
    #blog-list .slider-container {
        font-size: 0.96em;
    }
    /*
    #blog-list .blog-latest .post .img {
        width: 16em;
    }*/
    /*    #blog-list .blog-latest .latest-container {
        font-size: 0.96em;
    }*/

    #blog-list .blog-actions a.more {
        width: 26em;
    }
}

@media (min-width:768px) {
    #blog-list .slider-container {
        font-size: 0.98em;
    }
    /*
    #blog-list .blog-latest .post .img {
        width: 18em;
    }*/


    /*  #blog-list .blog-latest .latest-container {
        font-size: 0.98em;
    }*/


    /*    #blog-detail .blog-header img {
        height: calc(100vh - 6em);
    }*/

    #blog-list .blog-slider .slider-item.h2 > div {
        padding-bottom: calc(2 * 56.25% + 0.85em)
    }

    #blog-list .blog-latest .post {
        width: calc(50% - 1em);
    }

    #blog-list .blog-latest .advertisements {
        display: block;
        width: 17em;
        padding-right: 3em;
    }

    #blog-list .blog-latest .latest-container {
        width: calc(100% - 18em);
    }
}

@media (min-width:1024px) {
    #blog-list .slider-container {
        font-size: 1em;
    }
    /*
    #blog-list .blog-latest .post .img {
        width: 20em;
    }*/
    /*    #blog-list .blog-latest .latest-container {
        font-size: 1em;
    }*/
    #blog-list {
        margin-top: -6em;
    }
        /*  #blog-detail .blog-header .img {
        min-height: 30em;
        max-height: 45em;
        height: calc(100vh - 5em);
        padding-bottom: 0 !important;
    }

        #blog-detail .blog-header .img img {
            position: absolute;
        }
    #blog-detail .blog-title {
        margin-top: -9.5em;
        margin-bottom: 2em;
    }*/
        #blog-list .blog-filters {
            justify-content: space-between;
        }

            #blog-list .blog-filters .blog-filters-categories {
                width: auto;
                margin-bottom: 0;
            }

        #blog-list .blog-latest .post {
            width: calc(33% - 1em);
        }
}