/*** Blog ***/
/***thumbs***/
.blog-post{
    position:relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #f8f4ef;
    border-radius: 1rem;
    -webkit-transition: -webkit-transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    -webkit-transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    box-shadow: 1px 1px 5px 0 rgb(1 1 1 / 5%);
    overflow: hidden;
    /*height: 100%;*/
    margin-bottom: 1rem;
}
.blog-post:hover{
    transform: translateY(-3px);
    box-shadow: 1px 4px 8px 0 rgb(1 1 1 / 10%);
}
.blog-post.hw{
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.blog-post__wrapper.abs{
    height: 100%;
    width: 100%;
    background: linear-gradient( 0deg, #2d3748 0%, transparent 100% );
    position: absolute;
    z-index: 3;
}
.blog-post__wrapper,
.blog-post__meta,
.blog-post__meta-data,
.blog-post__meta-data span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.blog-post__wrapper,
.blog-post__meta-data{
    flex-direction:column;
}

.blog-post__wrapper{
    padding: 2rem;
}
.blog-post__img img{
    width: 470px;
    height: 290px;
    object-fit: cover;
    object-position: center;
}
.blog-post__img.in img{
    padding: 0.5rem;
    border-radius:1rem;
}
.blog-post.w50 .blog-post__img,
.blog-post.w50 .blog-post__wrapper{
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}
.blog-post.w40 .blog-post__img{
    -webkit-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
}
.blog-post.w40 .blog-post__wrapper{
    -webkit-flex-basis: 60%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
}
.blog-post.hw .blog-post__img img{
    width:100%;
    height:100%;
}
.blog-post.h40 .blog-post__img img{
    height:470px;
}
.blog-post__category{
    display: inline-block;
    margin-bottom: 1rem;
}
.blog-post__category a{
    background-color: #dd6b20;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}
.blog-post__wrapper.abs .blog-post__title{
    margin-top:auto;
}
.blog-post__wrapper.abs .blog-post__title,
.blog-post__wrapper.abs .blog-post__shortdesc,
.blog-post__wrapper.abs .blog-post__meta-autor{
    color:#fff;
}
.blog-post__title{
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.blog-post__shortdesc{
    font-size: 1rem;
    margin-bottom: 1rem;
}
.blog-post__meta{
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
.blog-post__meta-img{
    border: 3px solid #e2e8f0;
    transform: translateZ(0);
    transition: opacity .25s linear;
    will-change: opacity;
    object-fit:cover;
    margin-right: 1rem;
    border-radius: 9999px;
    opacity:1
}
.blog-post__meta-autor{
    font-size: 0.85rem;
    color: #718096;
    font-weight:bold;
}
.blog-post__meta-data{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.blog-post__meta-data span{
    font-size: 0.85rem;
    color: #a0aec0;
}
.blog-post__meta-data--views:before{
    content: " ・ ";
}
.blog-post__meta-data--views,
.blog-post__meta-data--comments{
    padding-left:5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items:center;
}
.blog-post__meta-data--views i,
.blog-post__meta-data--comments i{
    padding:0 0.25rem;
    position:relative;
    top:2px;
}
/***thumbs***/

/***post***/
.post-cover{
    --imgh:500px;
    height:var(--imgh);
}
.post-cover__img{
    position:absolute;
    width:100%;
    height:var(--imgh);
    left:0;
    right:0;
}
.post-cover__img img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}
.post-cover__img--fill{
    background: linear-gradient( 0deg, #2d3748 0%, transparent 100% );
    position:absolute;
    width:100%;
    height:var(--imgh);
    left:0;
    right:0;
    top: 0;
}
.post-cover__info{
    position:absolute;
    height:var(--imgh);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction:column;
}
.post-cover__info-wrapper{
    padding:2rem;
    margin-top:auto;
}
.post__title{
    color:#fff;
    font-size:3rem;
    line-height: 1.33;
    margin-bottom:1rem;
    width:70%;
}
.post__meta-data{
    border-left:5px solid #718096;
    color:#718096;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding:0.75rem;
}
.post-content{
    margin:2rem 0;
    background: #fff;
    border-radius: 1rem;
    -webkit-transition: -webkit-transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    -webkit-transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    box-shadow: 1px 1px 5px 0 rgb(1 1 1 / 5%);
    overflow: hidden;
}
.post-content__wrapper{
    padding:2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction:column;
}
.post-content__text,
.post-content__text p{
    font-size:1.25rem;
    line-height:1.8;
}
.post-content__addinfo{
    margin-top:1rem;
    padding:2rem 0 0 0;
    border-top:1px solid #ccc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items:center;
}
.post-content__addinfo-share{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items:center;
    margin-left:auto;
}
.post-content__addinfo-share span{
    padding-right:.5rem;
}
.post-content__addinfo span{
    font-weight:bold;
}
.share-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.share-list__item{
    width:36px;
    height:36px;
    border-radius:100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.share-list__link{
    margin:auto;
}
.share-list__item:hover{
    background:#ccc;
}
.share-list__item:hover .share-list__link{
    color:#fff;
}
.post-content__comments{
    padding:2rem 0 0 0;
    border-top:1px solid #ccc;
}
.comments-body,
.comments-head,
.comments-head__count,
.comments-head__toggle,
.comments__form{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.comments-body{
    flex-direction:column;
}
.comments-head,
.comments-head__count,
.comments-head__toggle{
    align-items:center;
}
.comments-head__toggle{
    cursor:pointer;
}
.comments-head__count{
    margin-right:auto;
}
.comments-head{
    margin-top:1rem;
}
.comments-head__count>span{
    padding-right:.5rem;
}
.comments-head__count div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width:28px;
    height:28px;
    border-radius:100px;
    background:#ccc;
    color:#fff;
}
.comments-head__count div span{
    margin:auto;
    font-size: .8rem;
    line-height: 1;
}
.comments__list .comments__wrapper{
    margin-top:1rem;
    padding:0;
}
.comments__list .comments__name {
    display: block;
    font-weight: 600;
    font-size: 1rem;
}
.comments__list .comments__date {
    font-size: .8rem;
}
.comments__list .comments__body {
    padding: 1rem;
    font-style: italic;
    border-bottom: 1px solid #ccc;
    margin:0;
}
.comments__form{
    margin-top:2rem;
}
.comments__photo {
    display: inline-block;
    float: left;
    padding: 0 10px 0 0;
    width:7%;
}
.comments__textarea{
    width:93%;
}
.comments__textarea textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: 6px;
    border-color: #ccc;
}
.comments__btn{
    float: right;
    margin-top:1rem;
}
.post-autor{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction:column;
    padding: 2rem;
    background: #fff;
    border-radius: 1rem;
    -webkit-transition: -webkit-transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    -webkit-transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease;
    box-shadow: 1px 1px 5px 0 rgb(1 1 1 / 5%);
    overflow: hidden;
    margin: 2rem 0 1rem 0;
    text-align:center;
}
.post-autor__img{
    border-radius:100px;
    margin:auto;
}
.post-autor__name{
    font-weight:600;
    font-size:1.5rem;
    margin-top:1rem;
    color: #4f5762;
}
.related-posts h4{
    margin:4rem 0;
    font-weight:600;
    font-size:1.5rem;
    color: #718096;
    text-align:center;
}
.related-posts .blog-post__title{
    font-size:.8rem;
}
.post-thumb{
    height:100%;
}
.post-thumb-img-mini{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius:10px;
}