section.main_section {
padding-top: 5px;
}
.main_section .flex-wrapper {
gap: 20px;
display: flex;
margin-bottom: 40px;
position: relative;
align-items: flex-start;
}
.main_section article h1 {
font-size: 30px;
font-weight: 600;
color: #383838;
margin-bottom: 30px;
}
article {
width: calc(66% - 15px);
max-width: 820px;
}
article [id] {
scroll-margin-top: 150px;
}
.site-main {
overflow: hidden;
}
.main_section aside {
width: calc(34% - 15px);
max-width: 390px;
position: sticky;
left: 0;
top: 20px;
}
aside .top {
display: flex;
align-items: center;
justify-content: space-between;
}
aside .share {
border-radius: 10px;
border: 1px solid #4D5053;
padding: 12px 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
cursor: pointer;
}
aside .share span {
color: #292F36;
font-size: 16px;
font-weight: 500;
line-height: 150%;
}
aside .space-between {
display: flex;
justify-content: space-between;
}
aside .stars_side {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
aside .rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
margin: 0;
}
aside .rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-rating-widget__icons {
margin: 0;
}
aside > div {
margin-bottom: 40px;
}
aside > div:last-child {
margin-bottom: 0;
}
aside .table-of-contents {
border-radius: 20px;
border: 1px solid #E7E7E7;
padding: 20px 30px;
}
aside .headline {
color: #383838;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 24px;
}
aside .table-of-contents ul {
list-style: none;
margin-left: 0;
}
aside .table-of-contents ul ul {
margin-left: 20px;
}
aside .table-of-contents li {
margin-bottom: 6px;
}
aside .table-of-contents li li:first-child {
margin-top: 6px;
}
aside .table-of-contents li li:last-child,
aside .table-of-contents li:last-child {
margin-bottom: 0;
}
aside .table-of-contents li a {
color: #292F36;
font-size: 16px;
font-weight: 400;
line-height: 156.25%;
transition: all .2s ease;
}
aside .table-of-contents li a:hover {
color: #BF964A;
}
aside .table-of-contents li li a {
color: #4D5053;
font-size: 14px;
font-weight: 300;
line-height: 178.571%;
}
aside .categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}
aside .categories a {
border-radius: 10px;
border: 1px solid #E7E7E7;
display: block;
color: #292F36;
font-size: 16px;
font-weight: 300;
line-height: 150%;
padding: 12px 30px;
display: block;
text-decoration: none;
}
aside .stars_side .star_text {
color: #292F36;
font-size: 16px;
font-weight: 500;
line-height: 120%;
margin-bottom: 5px;
}
aside .aside_article {
margin-bottom: 30px;
}
aside .aside_article .aside_article_items {
display: flex;
box-shadow: -2px 2px 20px -1px #71717133;
}
aside .aside_article .aside_article_items .main {
padding: 15px;
}
aside .aside_article .aside_article_items .main .excerpt {
margin-top: 8px;
margin-bottom: 16px;
color: #848C8B;
font-size: 14px;
font-weight: 400;
}
aside .aside_article:last-child {
margin-bottom: 0;
}
aside .aside_article .photo {
position: relative;
}
aside .aside_article img {
width: 184px;
max-height: 162px;
min-height: 162px;
display: block;
object-fit: cover;
}
aside .aside_article a {
display: block;
width: 100%;
color: #383838;
font-size: 16px;
font-weight: 500;
text-decoration: none;
}
aside .aside_article .category {
border-radius: 10px 10px 10px 0px;
background: #FFF;
color: #292F36;
font-size: 14px;
font-weight: 400;
display: inline-block;
position: absolute;
bottom: 15px;
left: 15px;
width: auto;
padding: 12px 30px;
}
aside .bottom, aside .bottom div.date {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
article ul {
list-style: disc;
padding-left: 30px;
}
article ol {
list-style: auto;
padding-left: 30px;
}
aside .bottom div.date span {
font-size: 12px;
font-weight: 300;
color: #848C8B;
}
aside .info {
display: flex;
align-items: center;
gap: 5px;
color: #4D5053;
font-size: 14px;
font-weight: 400;
line-height: 120%;
}
aside .info a {
color: #4D5053;
font-size: 14px;
font-weight: 400;
line-height: 120%;
width: auto;
}
article .image {
margin-bottom: 30px;
}
article .image,
article img {
width: 100%;
max-height: 420px;
object-fit: cover;
}
article .info_stats .stats .stat,
article .info_stats .stats,
article .info_stats {
display: flex;
align-items: center;
}
article .info_stats {
margin-top: 30px;
margin-bottom: 30px;
gap: 25px;
}
article .info_stats .stats {
gap: 16px;
}
article .info_stats .stats .stat {
gap: 10px;
}
article .info_stats .category {
border-radius: 10px;
background: #F4F0EC;
color: #292F36;
font-size: 14px;
font-weight: 600;
padding: 12px 30px;
display: block;
}
article .info_stats .stats .stat,
article .info_stats .info {
color: #292F36;
font-size: 14px;
font-weight: 400;
line-height: 120%;
}
article .info_stats .info a {
color: #4D5053;
font-size: 14px;
line-height: 120%;
border-bottom: 1px solid #CFB077;
}
article h2,
article .h2,
article h3,
article .h3 {
text-align: left;
}
article h2 {
font-size: 28px;
font-weight: 400;
}
article h3,
article .h3 {
color: #292F36;
font-size: 24px;
font-weight: 400;
line-height: 120%;
}
article h4,
article .h4 {
color: #292F36;
font-size: 18px;
font-weight: 400;
line-height: 120%;
}
article p, article li, article table {
color: #6D6D6D;
font-size: 16px;
font-weight: 400;
line-height: 150%;
margin-bottom: 10px;
}
article .content > * {
margin-bottom: 10px;
}
article .content > *:last-child {
margin-bottom: 0;
}
article .author_box {
border-radius: 20px;
border: 1px solid #E7E7E7;
padding: 30px;
margin-top: 80px;
}
article .author_top {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
}
article .author_top .portrait img {
width: 100px;
height: 100px;
border-radius: 50px;
}
article .author_top a {
display: flex;
align-items: center;
gap: 32px;
}
article .author_top .name {
color: #292F36;
font-size: 40px;
font-weight: 600;
line-height: 110%;
}
article .author_top .soc_links {
display: flex;
align-items: center;
gap: 40px;
}
article .author_top .soc_links svg {
width: 25px;
height: 25px;
}
article .author_bottom p {
color: #4D5053;
font-size: 16px;
line-height: 150%;
}
article .author_bottom .button {
margin-top: 24px;
}
article .author_bottom .button a {
border-radius: 50px;
border: 1px solid #F4F0EC;
background: #F4F0EC;
color: #292F36;
font-size: 16px;
line-height: 150%;
padding: 15px 30px;
display: inline-block;
}
.comment_form {
margin-top: 40px;
}
.comment_form h3 {
color: #292F36;
font-size: 32px;
font-weight: 400;
line-height: 32px;
}
.stars p {
color: #383838;
}
.comment_form form {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 35px;
box-shadow: 0px 1px 13px 0px #0000000D;
border: 1px solid #C5C5C5;
justify-content: flex-end;
}
.comment_form .comment-reply-title {
color: #383838;
font-size: 26px;
margin-bottom: 20px;
}
.comment_form .like_a_subtitle {
color: #4D5053;
font-size: 16px;
margin-bottom: 20px;
}
.comment_form form label:not(.comment_form form .comment-form-cookies-consent label) {
display: none;
}
.comment_form form .comment-form-cookies-consent,
.comment_form form .comment-notes {
width: 100%;
}
.comment_form form .comment-form-comment {
width: 100%;
order: 3;
}
.comment_form form .comment-form-email,
.comment_form form .comment-form-author {
width: calc(50% - 10px);
}
.comment_form form .comment-form-author {
order: 1;
}
.comment_form form .comment-form-email {
order: 2;
}
.comment_form form .comment-form-cookies-consent {
order: 4;
display: flex;
align-items: center;
gap: 15px;
}
.comment_form form .form-submit {
order: 5;
}
.rmp-rating-widget.js-rmp-rating-widget {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.comment_form form .form-submit .send {
outline: none;
font-size: 16px;
color: #fff;
text-transform: uppercase;
padding: 15px 40px;
background: #B02929;
border: none;
cursor: pointer;
}
.comment_form form textarea {
background: #F9F9F9;
border: none;
width: 100%;
height: 150px;
resize: none;
font-family: "Roboto";
padding: 15px;
box-sizing: border-box;
}
.comment_form form p,
.comment_form form textarea {
margin: 0;
display: block;
}
.comment_form form .comment-form-email input,
.comment_form form .comment-form-author input {
display: block;
margin: 0;
width: 100%;
box-sizing: border-box;
background: #F9F9F9;
border: none;
padding: 15px;
font-family: "Roboto";
}
article ol.comment-list {
padding-left: 0;
}
article ol.comment-list .comment {
background: #F9F9F9;
padding: 15px;
border: 1px solid #F9F9F9;
margin-bottom: 10px;
}
article ol.comment-list .comment .comment-author {
font-weight: 700;
font-size: 16px;
color: #383838;
margin-bottom: 5px;
}
article ol.comment-list .comment .date {
color: #999999;
font-size: 12px;
font-weight: 400;
margin-bottom: 12px;
}
article ol.comment-list .comment .text {
font-size: 14px;
font-weight: 400;
color: #383838;
}
#comments .like_a_title {
font-size: 16px;
font-weight: 700;
color: #383838;
margin-top: 40px;
margin-bottom: 24px;
text-transform: uppercase;
}
@media screen and (max-width:1000px) {
.main_section > .container > .flex-wrapper {
flex-direction: column;
}
article {
width: 100%;
max-width: 100%;
}
.main_section aside {
max-width: 575px;
width: 100%;
}
}
@media screen and (max-width: 650px) {
article .author_top {
flex-direction: column;
align-items: center;
gap: 15px;
}
article .info_stats {
gap: 15px;
}
article p {
font-size: 14px;
}
article .info_stats {
margin-top: 20px;
margin-bottom: 20px;
}
.comment_form form .comment-form-email input, .comment_form form .comment-form-author input {
height: 40px;
}
}
@media screen and (max-width: 550px) {
article .author_top a {
flex-direction: column;
align-items: center;
width: 100%;
gap: 15px;
}
article .author_bottom .button a {
padding: 15px 20px;
}
article .author_bottom p {
font-size: 14px;
}
article .author_bottom .button {
display: flex;
justify-content: center;
}
.comment_form .comment-reply-title {
font-size: 24px;
}
.comment_form form .comment-form-email, .comment_form form .comment-form-author {
width: 100%;
}
.main_section .flex-wrapper {
gap: 40px;
}
h1 {
margin-bottom: 15px;
}
aside .info {
flex-wrap: wrap;
}
aside .info,
aside .info * {
white-space: nowrap;
}
}
.background_shadow {
align-items: center;
background: rgba(0,0,0,.5);
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: fixed;
top: 0;
z-index: 12;
}
.background_shadow, .share_popup {
opacity: 0;
pointer-events: none;
transition: all .4s ease;
width: 100%;
}
.active .share_popup, .background_shadow.active {
margin-top: 0;
opacity: 1;
pointer-events: all;
}
.share_popup {
background-color: #fff;
margin-top: 200px;
max-width: 420px;
}
.share_popup_top {
align-items: center;
border-bottom: 1px solid #c7c6c6;
display: flex;
justify-content: space-between;
padding: 25px 30px;
}
.share_popup_top span {
color: #292f36;
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
text-transform: capitalize;
}
.share_popup_top>svg {
cursor: pointer;
}
.share_popup_middle {
padding: 25px 30px;
}
.share_popup .small_txt {
color: #626262;
font-size: 16px;
letter-spacing: -.005em;
line-height: 18px;
margin-bottom: 30px;
}
.share_popup_middle .socials {
align-items: center;
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 15px;
}
.share_popup_middle .socials a {
align-items: center;
background-color: #c2c1c1;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06);
display: flex;
height: 45px;
justify-content: center;
transition: all .2s ease;
width: 45px;
}
.share_popup_middle .socials a svg {
height: 100%;
width: 100%;
}
.share_popup_middle .socials a:first-child svg {
margin-right: 5px;
margin-top: 9px;
}
.share_popup_middle .socials a:nth-child(3) svg {
margin-top: 8px;
}
.share_popup_middle .socials a:nth-child(4) svg {
margin-left: 2px;
margin-top: 9px;
}
.share_popup_middle .socials a:hover:first-child {
background-color: #018acc;
}
.share_popup_middle .socials a:hover:nth-child(2) {
background-color: #4267b2;
}
.share_popup_middle .socials a:hover:nth-child(3) {
background-color: #e60023;
}
.share_popup_middle .socials a:hover:nth-child(4) {
background-color: #1da1f2;
}
.share_popup_bottom {
border-bottom: 5px solid #bf964a;
padding: 15px 30px 55px;
}
.share_popup_bottom .link_field {
align-items: center;
cursor: pointer;
display: flex;
height: 45px;
padding: 0;
position: relative;
z-index: 2;
}
.share_popup_bottom .link_field .field_left {
align-items: center;
background-color: #fff;
border: 1px solid #292f36;
display: flex;
padding: 11px;
position: relative;
width: 80%;
z-index: 2;
height: 45px;
}
.share_popup_bottom .link_field .link {
color: #626262;
font-size: 16px;
line-height: 16px;
max-width: 225px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.share_popup_bottom .link_field .like_a_button {
background-color: #bf964a;
color: #fff;
font-size: 16px;
line-height: 17px;
margin-right: -1px;
padding: 14px;
text-align: center;
width: 20%;
transition: all .2s ease;
}
.share_popup_bottom .link_field:hover .like_a_button {
color: #fff;
background: #1C9BB3;
}
.share_popup_bottom .link_field .copied {
color: green;
font-size: 18px;
left: 0;
line-height: 22px;
position: absolute;
top: 0;
transition: all .2s ease;
z-index: 1;
}
.share_popup_bottom .link_field .copied.true {
top: 110%;
}
.stars .js-rmp-results {
display: none;
}