.blog-one { padding: 120px 0; &__single { position: relative; margin-bottom: 30px; &:hover { .blog-one__more-link { color: #fff; opacity: 1; } .blog-one__image>img { opacity: 0.5; } .blog-one__content { box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03); } } } &__image { position: relative; background-color: $thm-black; border-top-left-radius: 5px; border-top-right-radius: 5px; >img { border-top-left-radius: 5px; border-top-right-radius: 5px; width: 100%; transition: all .4s ease; } } &__content { border-style: solid; border-width: 1px; border-color: rgb(239, 239, 239); background-color: rgb(255, 255, 255); border-top: 0; transition: all .4s ease; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 0 50px; padding-top: 45px; padding-bottom: 40px; } &__meta { margin: 0; display: flex; align-items: center; li { display: flex; align-items: center; line-height: 1em; +li { &:before { content: '.'; color: #74727a; font-size: 14px; font-weight: 400; margin-left: 10px; margin-right: 10px; } } a { color: #74727a; font-size: 14px; font-weight: 400; transition: all .4s ease; &:hover { color: $thm-base-color; } } } } &__title { font-weight: 500; font-size: 24px; line-height: 36px; color: $thm-black; margin: 0; margin-top: 5px; margin-bottom: 15px; a { color: inherit; transition: all .4s ease; &:hover { color: $thm-base-color; } } } &__link { color: #ff4eb5; font-size: 14px; font-weight: 500; line-height: 1em; text-transform: uppercase; letter-spacing: .2em; transition: all .4s ease; &:hover { color: $thm-black; } } &__more-link { font-size: 33px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: color .4s ease, opacity .4s ease; } .post-pagination { margin-top: 40px; } } .blog-details { padding: 120px 0; .blog-one__single { margin-bottom: 0; } .blog-one__title { font-size: 30px; font-weight: 500; line-height: 1.2em; margin-bottom: 28px; } .blog-one__content { padding-left: 50px; padding-right: 50px; border-radius: 0; box-shadow: none !important; } .blog-one__text { margin-bottom: 0; font-size: 16px; line-height: 34px; } .blog-one__text+.blog-one__text { margin-top: 30px; } &__content-title { margin: 0; color: $thm-black; font-size: 30px; font-weight: 500; margin-bottom: 40px; } .share-block { display: flex; align-items: center; justify-content: space-between; padding: 50px; border: 1px solid #efefef; border-top: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; .left-block { p { margin: 0; color: $thm-black; font-size: 24px; font-weight: 400; a { color: $thm-text-color; font-size: 16px; font-weight: 400; transition: all .4s ease; margin-left: 5px; letter-spacing: 0; &:hover { color: $thm-black; } } } } .social-block { display: flex; align-items: center; a { width: 56px; height: 56px; border-radius: 50%; background-color: $thm-base-color; text-align: center; line-height: 56px; color: #fff; background-size: 200% auto; font-size: 18px; transition: all .4s ease; +a { margin-left: 10px; } &:hover { background-position: right center; } &.fa-facebook-square { background-image: linear-gradient(40deg, rgb(255, 169, 92) 0%, rgb(255, 67, 192) 51%, rgb(255, 169, 92) 100%); } &.fa-twitter { background-image: linear-gradient(40deg, rgb(13, 184, 255) 0%, rgb(243, 50, 255) 51%, rgb(13, 184, 255) 100%); } &.fa-instagram { background-image: linear-gradient(40deg, rgb(57, 174, 255) 0%, rgb(60, 255, 83) 51%, rgb(57, 174, 255) 100%); } &.fa-pinterest-p { background-image: linear-gradient(40deg, rgb(255, 112, 62) 0%, rgb(255, 236, 78) 51%, rgb(255, 112, 62) 100%); } } } } &__author { border: 1px solid #efefef; padding: 60px 60px; margin-top: 50px; margin-bottom: 60px; border-radius: 5px; &-image, &-content { display: table-cell; vertical-align: top; } &-image { width: 169px; >img { width: 100%; border-radius: 5px; } } &-content { padding-left: 40px; h3, p { margin: 0; } h3 { color: $thm-black; font-size: 20px; margin-bottom: 20px; font-weight: 500; } p { font-size: 16px; line-height: 30px; color: $thm-text-color; margin-bottom: 0px; } a { font-size: 16px; font-weight: 400; line-height: 34px; color: $thm-base-color; transition: all .4s ease; &:hover { color: $thm-black; } } } } } .comment-one { margin-bottom: 60px; &__single { border-bottom: 1px solid #efefef; padding-bottom: 50px; } &__single+&__single { margin-top: 60px; } &__image, &__content { display: table-cell; vertical-align: top; } &__image { width: 90px; .inner-block { width: 100%; border-radius: 50%; overflow: hidden; >img { width: 100%; } } } &__content { padding-left: 40px; } &__author { margin: 0; font-size: 20px; font-weight: 500; color: $thm-black; } &__date { color: $thm-base-color; font-size: 16px; font-weight: 400; line-height: 1em; margin: 0; margin-top: 15px; margin-bottom: 25px; } &__date-sep { display: inline-block; vertical-align: middle; margin-left: 12px; margin-right: 12px; } &__text { color: $thm-text-color; font-size: 16px; line-height: 34px; margin: 0; } &__reply { padding: 8px 30px; } &__top-left, &__top-right { display: table-cell; vertical-align: top; } } .reply-form { input, textarea { border: none; outline: none; width: 100%; display: block; height: 70px; color: $thm-text-color; font-size: 16px; padding-left: 30px; border-style: solid; border-width: 1px; border-color: rgb(239, 239, 239); border-radius: 5px; background-color: rgb(254, 251, 244); margin-bottom: 30px; @include placeholder() { color: $thm-text-color; } } textarea { height: 232px; padding-top: 20px; } &__btn {} } .blog-one__home { padding-bottom: 90px; }