/* rewrite basic styles */
body { overflow-x: hidden; }
.article.col-1:not(.three-col) { padding-right: 0; }
@media screen and (min-width: 941px) and (max-width: 1230px) {
    main {
        padding-left: 0px;
        padding-right: 0px;
    }
    article .center {
        margin-left: 40px;
        margin-right: 40px;
        width: calc(100% - 80px);
    }
    article .center.col-2 {
        margin-left: auto;
        margin-right: auto;
    }
    .col-2 {
        max-width: 770px;
    }
}

/* overlay for popup window */
/*.overlay { width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.25); z-index: 1; }*/

/* margins */
.article .head { margin-top: 41px; }
.article .head .statistic { margin-top: 73px; }
.article .picture { margin-top: 72px; }
.article .featured-by { margin-top: 104px; }
.article .featured-by p { margin-top: 24px; }
.article .featured-by .flex { margin-top: 17px; }
.article .content { margin-top: 117px; }
.article .content p { margin-bottom: 38px; }
.article .authors { margin-top: 211px; }
.article .authors > .list { margin-top: 71px; }
.article .contact { margin-top: 72px; }
.article .contact p { margin-top: 35px; }
.article .contact form { margin-top: 20px; }
@media screen and (max-width: 940px) {
    main { padding-top: 31px; }
    .article .head .col-2 h1 { margin-top: 48px; margin-left: 59px; width: calc(100% - 59px); }
    .article .head .statistic { margin-top: 40px; }
    .article .picture { margin-top: 58px; }
    .article .featured-by { margin-top: 10px; margin-left: -40px; }
    .article .featured-by p { margin-top: 20px; }
    .article .content { margin-top: 93px; }
    .article .content p { margin-bottom: 128px; }
    .article .authors { margin-top: 134px; }
    .article .authors > .list { margin-top: 38px; }
    .article .contact { margin-top: 91px; }
}
@media screen and (max-width: 500px) {
    .article .featured-by { margin-left: -30px; }
}
@media screen and (max-width: 400px) {
    .article .featured-by { margin-left: -20px; }
}

/* paddings */
.article .featured-by { padding: 24px 0 91px; }
.article .content author > name { padding-left: 24px; }
@media screen and (max-width: 940px) {
    .article .featured-by { padding: 20px 20px 34px; }
}

/* fonts */
.article .head h1, .article .content p.txt-large { font-size: 50px; font-weight: 100; line-height: 150%; }
.article .statistic .item { color: #484848; font-size: 20px; font-weight: 700; line-height: 35px; }
.article .statistic .item > .count { font-size: 35px; font-weight: 100; }
.article .txt-big { font-size: 44px; font-weight: 100; line-height: 50px; }
.article .featured-by p { color: #484848; font-size: 16px; font-weight: 700; line-height: 50px; }
author { font-size: 16px; font-weight: 400; line-height: 26px; }
author > name { font-weight: 700; white-space: nowrap; }
.article .content author > name { line-height: 80px; }
@media screen and (max-width: 940px) {
    .article .head h1, .article .content p.txt-large { font-size: 30px; }
    .article .content author > name { line-height: 60px; }
}
.article .contact p { color: #484848; }

/* width, height */
.article .content p.txt-large { max-width: 659px; }
@media screen and (max-width: 940px) {
    .article .head h1 { max-width: 450px; }
    .article .content p.txt-large { max-width: 336px; }
    .article .featured-by { width: calc(100% + 80px); }
}
@media screen and (max-width: 500px) {
    .article .featured-by { width: calc(100% + 60px); }
}
@media screen and (max-width: 400px) {
    .article .featured-by { width: calc(100% + 40px); }
}

/* images */
.article img { vertical-align: top; }

/* statistic section */
.article .statistic { height: 158px; align-items: center; overflow: hidden; }
.article .statistic > .split { width: 1px; flex-grow: 1; transform: rotate(-90deg)  translate(-600px, 0px); }
.article .statistic > .split > hr { width: 1200px; height: 1px; background-color: #cecdcf; }

@media screen and (max-width: 940px) {
    .article .statistic { flex-direction: column; height: auto; }
    .article .statistic > .split { height: 1px; width: 150px; flex-grow: 1; transform: none; margin: 27px 0px; }
    .article .statistic > .split > hr { width: auto; }
}

/* head square */
.article .head::after {
    content: "";
    position: absolute;
    width: 465px;
    height: 465px;
    left: 0px;
    top: -48px;
    background: rgba(24, 160, 251, 0.05);
}
@media screen and (max-width: 940px) {
    .article .head::after {
        width: 219px;
        height: 219px;
    }
}

/* main picture square */
.article picture::after {
    content: "";
    position: absolute;
    width: 271px;
    height: 271px;
    top: -52px;
    right: -97px;
    background: rgba(255, 234, 122, 0.2);
}
@media screen and (max-width: 940px) {
    .article picture::after {
        top: -27px;
        right: -40px;
        width: 177px;
        height: 177px;
    }
}
@media screen and (max-width: 500px) {
    .article picture::after {
        top: -27px;
        right: -30px;
        width: 177px;
        height: 177px;
    }
}
@media screen and (max-width: 400px) {
    .article picture::after {
        top: -27px;
        right: -20px;
        width: 177px;
        height: 177px;
    }
}

/* main picture */
.article .picture > picture {
    position: relative;
    height: 398px;
    max-width: 1144px;
    background-image: url("../../assets/img/main-76bcf8.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% 30%;
}
/*.article .picture > picture > img { width: 100%; }*/
@media screen and (max-width: 940px) {
    .article .picture > picture { height: 262px; }
    .article .picture > picture > img { width: auto; height: 120%; }
}

/* featured by */
.featured-by { background: #F8F8F8; }
.featured-by .list { column-gap: 5px; row-gap: 35px; align-items: center; flex-wrap: wrap; }
.featured-by .list > div > img { height: 30px; }
@media screen and (max-width: 1230px) {
    .featured-by .list > div { flex: 1 0 30%; text-align: center; }
}
@media screen and (max-width: 940px) {
    .featured-by .list { justify-content: space-evenly; }
    .featured-by .list > div { flex: 1 0 45%; text-align: center; }
    .featured-by .list > div > img { height: 22px; }
}

/* quote squares */
.article .content .col-1 { position: relative; }
.article .content .col-1 .square {
    content: "";
    position: absolute;
    width: 465px;
    height: 465px;
    top: -48px;
    right: 0px;
    background: rgba(59, 194, 57, 0.05);
}
@media screen and (max-width: 940px) {
    .article .content .col-1 .square {
        top: 148px;
        left: 119px;
        width: calc(100% - 119px + 40px);
        max-width: 283px;
        height: 283px;
    }
}
@media screen and (max-width: 500px) {
    .article .content .col-1 .square {
        width: calc(100% - 119px + 30px);
    }
}
@media screen and (max-width: 400px) {
    .article .content .col-1 .square {
        width: calc(100% - 119px + 20px);
    }
}

.article .content .col-1 .square::after {
    content: "";
    position: absolute;
    width: calc(50vw - 679px + 770px / 2);
    height: 420px;
    top: 223px;
    left: 194px;
    background-image: url("../../assets/img/quote-b14286.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% 30%;
}
@media screen and (max-width: 940px) {
    .article .content .col-1 .square::after {
        top: 148px;
        left: 119px;
        width: calc(100vw - 119px - 119px - 40px);
        overflow: hidden;
        height: 255px;
    }
}
@media screen and (max-width: 500px) {
    .article .content .col-1 .square::after {
        width: calc(100vw - 119px - 119px - 30px);
    }
}
@media screen and (max-width: 400px) {
    .article .content .col-1 .square::after {
        width: calc(100vw - 119px - 119px - 20px);
    }
}

/* author */
author > avatar > img { width: 80px; height: 80px; border-radius: 40px; }
author > hr, author > .articles-count, author > .description, author > .social { display: none; }

.content author.flex { justify-content: left; }
@media screen and (max-width: 940px) {
    .content author > avatar > img { width: 60px; height: 60px; border-radius: 30px; }
}

/* section authors, list of them */
.authors > .list { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.authors > .list > author {
    flex-direction: column;
    align-items: center;
    align-content: center;
    cursor: pointer;
    width: calc(25% - 20px * 3 / 4 - 30px);
    height: 116px;
    padding: 30px 15px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
@media screen and (max-width: 940px) {
    .authors > .list > author {
        width: calc(50% - 10px - 30px);
        padding: 20px 15px;
    }
}
.authors > .list > author:hover, .authors > .list > author:target {
    transition: box-shadow 200ms linear 0ms;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

/* popup author */
.authors > .details {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}
.authors > .details.flex {
    justify-content: center;
    align-items: center;
}
.authors > .details.flex > author {
    position: relative;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: 356px;
    max-width: calc(100% - 20px - 28px * 2);
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 32px 28px 40px;
}
.authors > .details.flex > author > .close {
    position: absolute;
    top: 20px;
    right: 20px;
}
.authors > .details.flex > author > name { margin-top: 14px; }
.authors > .details.flex > author > .articles-count { display: block; }
.authors > .details.flex > author > .description {
    display: block;
    max-height: calc(100vh - 32px - 40px - 80px - 40px - 26px - 37px - 20px);
    overflow-y: auto;
    margin-right: -5px;
    padding-right: 5px;
}
.authors > .details.flex > author > .description::-webkit-scrollbar { width: 6px; }
.authors > .details.flex > author > .description::-webkit-scrollbar-track { box-shadow: inset 0 0 3px #848484; border-radius: 3px; }
.authors > .details.flex > author > .description::-webkit-scrollbar-thumb { background: #848484; border-radius: 3px; }
.authors > .details.flex > author > .description::-webkit-scrollbar-thumb:hover { background: #484848; }
.authors > .details.flex > author > hr { display: block; width: 110px; margin: 18px 0; border: 2px solid #18A0FB; }
.authors > .details.flex > author .social a {
    margin-top: 20px;
    width: 40px;
    height: 40px;
    display: block;
}
.authors > .details.flex > author .social a.linkedin {
    background-image: url('../../assets/img/social-linkedin-50bb4c.png');
    background-size: 100%;
}

/* social icons */
.contact .social { text-align: center; }
.contact .social > a { width: 48px; height: 48px; border-radius: 24px; display: inline-block; margin: 0 10px; }
.contact .social > a:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
a.facebook {background-image: url('../../assets/img/socila-facebook-848424.svg');}
a.twitter {background-image: url('../../assets/img/socila-twitter-81c0bb.svg');}

modal-box author.flex {
    flex-direction: column;
    align-items: center;
}

modal-box author > name { margin-top: 14px; }
modal-box author > hr { display: block; width: 110px; margin: 18px 0; border: 2px solid #18A0FB; }
modal-box author > .articles-count { display: block; }
modal-box author > .description { display: block; }
modal-box author > .social { display: block; }
modal-box author .social a {margin-top: 20px;width: 40px;height: 40px;display: block;}
modal-box author .social a.linkedin {background-image: url('../../assets/img/social-linkedin-50bb4c.png');background-size: 100%;}