/* GLOBALS */
.CONTENT-MAIN .social-group,
.HEADER-SINGLE .social-group {
    display: flex;
    width: fit-content;
    height: fit-content;
}

.CONTENT-MAIN .social-group > .social-btn,
.HEADER-SINGLE .social-group > .social-btn {
    box-sizing: border-box;
    /* padding: 15px; */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #FFFFFF;
    box-shadow: 0 5px 15px 0 rgba(0,0,0,0.07);
    transition: 0.25s;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.CONTENT-MAIN .social-group > .social-btn > svg,
.HEADER-SINGLE .social-group > .social-btn > svg {
    fill: #A5A5BE;
    transition: 0.2s;
}
.CONTENT-MAIN .social-group > .social-btn:hover > svg,
.HEADER-SINGLE .social-group > .social-btn:hover > svg { fill: #1C6BFF; }

.HEADER-SINGLE .feature-image,
.CONTENT-MAIN .feature-image {
    overflow: visible;
    border-radius: 10px;
}

.CONTENT-MAIN .date,
.HEADER-SINGLE .date {
    box-sizing: border-box;
    padding: 15px 20px;
    width: fit-content;
    border-radius: 10px;
    background-color: #003282;
    position: absolute;
    top: -65px;
    right: 43px;
    z-index: 1;
}

.CONTENT-MAIN .date > p,
.HEADER-SINGLE .date > p {
    margin: 0;
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
}

.CONTENT-MAIN .date > p:nth-of-type(1),
.HEADER-SINGLE .date > p:nth-of-type(1) { font-size: 36px; line-height: 44px; }

.CONTENT-MAIN .date > p:nth-of-type(2),
.HEADER-SINGLE .date > p:nth-of-type(2) { font-size: 15px; line-height: 19px; }

.HEADER-SINGLE .author > .avatar,
.CONTENT-MAIN .author > .avatar {
    overflow: hidden;
    border-radius: 100%;
    background-size: cover;
}

/* HEADER */
.HEADER-SINGLE { position: relative; }
.HEADER-SINGLE .background { position: relative; }
.HEADER-SINGLE .background::before {
    content: '';
    background-color: #F6F6FB;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: 40%;
    z-index: 0;
    overflow: hidden;
}
/* .HEADER-SINGLE::before {
    content: "";
    width: 100%;
    height: calc(70% + 110px);
    background-color: #F6F6FB;
    position: absolute;
    top: -110px;
    left: 0;
} */

.HEADER-SINGLE .b-frame-head { margin-bottom: 0; }

.HEADER-SINGLE .author > .avatar {
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
}

.HEADER-SINGLE .avatar + p {
    margin: 0;
    display: inline-block;
}

.HEADER-SINGLE .b-media {overflow: visible; border-radius: 10px;}
.HEADER-SINGLE .b-media::after { padding-bottom: calc((540/1070) * 100%); }



.HEADER-SINGLE .social-group { flex-direction: column; }

.HEADER-SINGLE .social-group > .social-btn:not(:last-of-type) { margin: 0; margin-bottom: 10px; }

@media screen and (max-width: 900px ) {
    .HEADER-SINGLE .b-column.b-columns.alt-collapse > .b-column:first-of-type {display: none; }
    .HEADER-SINGLE .date { top: -65px; right: 16px; }
}

/* CONTENT */
.CONTENT-MAIN ol,
.CONTENT-MAIN ul {
    list-style-type: none;
    padding-left: 35px;
}

.CONTENT-MAIN ol > li,
.CONTENT-MAIN ul > li { position: relative; }

.CONTENT-MAIN ol > li::before, 
.CONTENT-MAIN ul > li::before {
    content: "";
    position: absolute;
    background-color: #1C6BFF;
}

.CONTENT-MAIN ul > li::before {
    height: 10px;
    width: 10px;
    border-radius: 3px;
    top: 5px;
    left: -20px;
}

.CONTENT-MAIN .table-of-contents {
    box-sizing: border-box;
    padding: 30px;
    width: 100%;
    height: fit-content;
    border-radius: 10px;
    background-color: #F6F6FB;
}

.CONTENT-MAIN .table-of-contents h4 { margin: 0 0 25px; }
.CONTENT-MAIN .table-of-contents h4 + p { margin: 0 0 10px ; }

.CONTENT-MAIN .table-of-contents p,
.CONTENT-MAIN .table-of-contents ul > li {
    margin-bottom: 6px;
    color: #0E1924;
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
}


.CONTENT-MAIN .table-of-contents ul { margin: 0; padding-left: 20px; }

.CONTENT-MAIN .table-of-contents ul > li:not(:last-of-type) { margin: 0 0 20px; }

.CONTENT-MAIN .table-of-contents ul > li > a {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    color: #0E1924;
}
.CONTENT-MAIN .table-of-contents ul > li > a:hover { color: #0D50CD; }

/* .CONTENT-MAIN .table-of-contents ul > li:not(:last-of-type) { margin-bottom: 15px; } */

.CONTENT-MAIN .content * { max-width: 100%; }

.CONTENT-MAIN .content h3 { font-size: 30px; }

.CONTENT-MAIN .content blockquote {
    box-sizing: border-box;
    margin: 60px 0;
    padding: 70px 70px 70px 100px;
    background-color: #003282;
    border-radius: 10px;
    color: #FFFFFF;
}

.CONTENT-MAIN .content ol,
.CONTENT-MAIN .content ul {
    margin-top: 40px;
    margin-bottom: 40px;
}

.CONTENT-MAIN .content ol {
    padding-left: 50px;
    counter-reset: li-index;
}
.CONTENT-MAIN .content ol > li { counter-increment: li-index; }

.CONTENT-MAIN .content ul > li::before {
    height: 12px;
    width: 12px;
    top: 8px;
    left: -25px;
}

.CONTENT-MAIN .content ol > li::before {
    content: counter(li-index);
    height: 25px;
    width: 25px;
    border-radius: 100%;
    top: 2px;
    left: -40px;

    color: #FFFFFF;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 27px;
    text-align: center;
}

@media screen and (max-width: 900px) {
    .CONTENT-MAIN .content blockquote { padding: 30px; }
    .CONTENT-MAIN .content ul > li::before { top: 6px; }
    .CONTENT-MAIN .content ol > li::before { top: 0; }
}





/* POST-TYPE: Blog */
/* section: Head */
.HEADER-SINGLE.alt-blog .head > h1 { position: relative; z-index: 1; }
.HEADER-SINGLE.alt-blog .author { position: relative; }

.HEADER-SINGLE.alt-blog .b-media .background { position: relative; }
/* background will always be on top ??? */
/* .HEADER-SINGLE.alt-blog .b-media .background::before {
    content: '';
    background-color: #F6F6FB;
    position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: 50%;
    z-index: -5;
} */

/* section: Content */

.CONTENT-MAIN.alt-blog .b-column > .content > * { margin: 60px 0;}
.CONTENT-MAIN.alt-blog .b-column > .content > *:first-child { margin-top: 0; }
.CONTENT-MAIN.alt-blog .b-column > .content > *:last-child { margin-bottom: 0; }

.CONTENT-MAIN.alt-blog .quote-block {
    position: relative;
    box-sizing: border-box;
    padding: 70px 70px 70px 100px;
    background-color: #003282;
    border-radius: 10px;
    color: #FFFFFF;
}
.CONTENT-MAIN.alt-blog .quote-block::before {
    content: url('./../../img/testimonial-quote.svg');
    height: 20px;
    width: 26px;
    position: absolute;
    top: 78px;
    left: 50px;
}

.CONTENT-MAIN.alt-blog .quote-block > p {
    font-size: 24px;
    line-height: 38px;
}

.CONTENT-MAIN.alt-blog .quote-block > p:last-child {
    opacity: 0.6;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
}

.CONTENT-MAIN.alt-blog .list-block,
.CONTENT-MAIN.alt-blog .checked-list-block,
.CONTENT-MAIN.alt-blog .number-list-block { margin: -30px 0 !important; }

.CONTENT-MAIN.alt-blog .cta-block {
    box-sizing: border-box;
    padding: 50px;
    background-color: #003282;
    color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.CONTENT-MAIN.alt-blog .cta-block > p {
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
}

.CONTENT-MAIN.alt-blog .cta-block > a {
    width: fit-content;
}

.CONTENT-MAIN.alt-blog .b-frame { padding-top: 0; padding-bottom: 60px; }

.CONTENT-MAIN.alt-blog .author {
    box-sizing: border-box;
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
}

.CONTENT-MAIN.alt-blog .author > .avatar {
    flex: 0 0 90px;
    margin-right: 30px;
    width: 90px;
    height: 90px;
}

.CONTENT-MAIN.alt-blog .author h4 { text-decoration: underline; }

.CONTENT-MAIN.alt-blog .author p {
    margin-top: 10px;
    color: #0E1924;
    font-size: 16px;
    line-height: 28px;
}

.CONTENT-MAIN.alt-blog .author .social-group > .social-btn {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    background-color: #F3F3F3;
}
.CONTENT-MAIN.alt-blog .author .social-group > .social-btn:not(:last-of-type) { margin-right: 8px; }
.CONTENT-MAIN.alt-blog .author .social-group > .social-btn:hover { background-color: #0D1318; }
.CONTENT-MAIN.alt-blog .author .social-group > .social-btn:hover > svg { fill: #FFFFFF; }

@media screen and (max-width: 900px) {
    .CONTENT-MAIN.alt-blog .author {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .CONTENT-MAIN.alt-blog .author .avatar {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .CONTENT-MAIN.alt-blog .author .social-group { margin: 0 auto; }

    .CONTENT-MAIN.alt-blog .quote-block { padding: 20px; }

    .CONTENT-MAIN.alt-blog .quote-block::before { display: none; }
}


/* section: Continue Reading */
.CONTINUE-READING.alt-blog .b-frame {
    padding-top: 0;
    padding-bottom: 25px;
}
.CONTINUE-READING.alt-blog .b-card > .media {
    padding-bottom: 77%;
    border-radius: 10px; 
}

.CONTINUE-READING.alt-blog .b-card > .content {
    padding-left: 0;
    padding-right: 0;
}





/* SECTION-POSTS  */
@media screen and (min-width: 901px) {
    .SECTION-POSTS.alt-blog .b-frame { padding: 0 40px 60px; }
}