/*--------------------------------------------------------------
# Article
--------------------------------------------------------------*/

.article {
    display: block;
    position: relative;
    max-width: 100%;
    z-index: 25;
}
.article:not(.compact) {
    line-height: 1.6em;
}
.article.enhanced {
    font-size: 1.25rem;
}
.article:not(.has-list) ul:not(.list),
.article:not(.has-list) ol:not(.list) {
    padding-left: 16px;
}




/*--------------------------------------------------------------
# Article sizes
--------------------------------------------------------------*/

.article.article-sm {
    width: 525px;
}
.article.article-smd {
    width: 768px;
}
.article.article-md {
    width: 820px;
}
.article.article-lg {
    width: 992px;
}


/*--------------------------------------------------------------
# Article headings
--------------------------------------------------------------*/



.article h1,
.article h2,
.article h3,
.article h4 {
    color: inherit;
    line-height: 1.2em;
    font-weight: 500;
}


.article h1 {
    font-size: 2.25rem;
}
.article h2 {
    font-size: 2.25rem;
}
.article h3 {
    font-size: 1.85rem;
}





.shape-wrapper .article.slogan p > b,
.shape-wrapper .article.slogan p > strong {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
}




@media all and (min-width: 992px) {

    .article.shape-00-article h1:first-child,
    .article.shape-00-article h2:first-child,
    .article.shape-00-article h3:first-child,
    .article.shape-00-article h4:first-child {
        width: 40vw;
        max-width: 100%;
    }

}



.article h1:first-child:not(:last-child),
.article h2:first-child:not(:last-child),
.article h3:first-child:not(:last-child),
.article h4:first-child:not(:last-child) {
    margin-bottom: 0.75em;
}


.article b,
.article strong {
    font-weight: 800;
}
.article.title-bold h1,
.article.title-bold h2,
.article.title-bold h3,
.article.title-bold h4 {
    font-weight: 600;
}

.article.heading-large h2 {
    font-size: 3rem;
    font-size: 2.5rem;
}
.article.heading-large h4 {
    font-size: 1.5rem;
}


/* Article title colours */

.article.title-blue h1,
.article.title-blue h2,
.article.title-blue h3,
.article.title-blue h4 {
    color: var(--blue);
}

.article.has-title h1,
.article.has-title h2,
.article.has-title h3,
.article.has-title h4 {

}

.article.uppercase-title h1,
.article.uppercase-title h2,
.article.uppercase-title h3,
.article.uppercase-title h4 {
    text-transform: uppercase;
}




/* Article title */

.article-title {
    font-size: 1.05rem;
}
.article-title h1,
.article-title h2 {
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1.2em;
}
.article-title h1:first-child:not(:last-child),
.article-title h2:first-child:not(:last-child) {
    margin-bottom: 30px;
}
.article-title.h1 h1,
.article-title.h1 h2 {
    font-size: 2.25rem;
}
.article-title.h2 h1,
.article-title.h2 h2 {
    font-size: 2rem;
}


/* Article slogan */

.article.slogan h1 {
    font-size: 4rem;
    font-weight: 600;
    color: #fff;
}


/* Heading spacings */

.article.title-bottom h2,
.article.title-bottom h3 {
    margin-bottom: 1.5rem;
}

.article.title-bottom-medium h1 {
    margin-bottom: 3rem;
}


/*--------------------------------------------------------------
# Article variants
--------------------------------------------------------------*/

.article.main h1,
.article.main h2,
.article.main h3 {
    line-height: 1.15;
}

.article.main h1:not(:last-child),
.article.main h2:not(:last-child),
.article.main h3:not(:last-child) {
    margin-bottom: 3rem;
}


/*.article.main h1 {*/
/*    font-size: 2.5rem;*/
/*}*/

/*.article.main h2 {*/
/*    font-size: 2.5rem;*/
/*}*/




.article.main .button {
    margin: 3rem 0;
}


/* Article special text */

.article.has-em em > strong,
.article.has-em strong > em {
    font-size: 1.35rem;
    color: #000;
}
.article.has-em em {
    color: var(--red);
    font-weight: 400;
}


/*--------------------------------------------------------------
# Article job detail
--------------------------------------------------------------*/

.article.job-detail h2 {
    font-size: 1.95rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.article.job-detail ul li {
    margin: 15px 0;
}


/*--------------------------------------------------------------
# Article spacings
--------------------------------------------------------------*/

.article-wrap.top,
.article-wrap.top-desktop {
    margin-top: 50px;
}
.article-wrap.bottom {
    margin-bottom: 50px;
}

.article-wrap.offset-top {
    margin-top: 100px;
}
.article-wrap.offset-bottom {
     margin-bottom: 100px;
 }



/*--------------------------------------------------------------
# Article utility classes
--------------------------------------------------------------*/

.article.center {
    text-align: center;
}
.article.centered {
    margin-left: auto;
    margin-right: auto;
}


/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 992px) {


    /* Main article */

    .article h1,
    .article.main h1 {
        font-size: 2.25rem;
    }

    .article h2,
    .article.main h2 {
        font-size: 2.25rem;
    }




    /* Article slogan */

    .article.slogan h1 {
        font-size: 3rem;
    }




    /* Article headings */

    .article.heading-large h2 {
        font-size: 2.25rem;
    }




    /* Article wrap spacings */

    .article-wrap.top-desktop {
        margin-top: 0;
    }


}


@media all and (max-width: 768px) {

    .article:not(.compact) {
        line-height: 1.5em;
    }
    .article.enhanced {
        font-size: 1.2rem;
    }


    /* Article slogan */

    .article.slogan h1 {
        font-size: 2.25rem;
    }




    /* Main article */

    .article h1,
    .article.main h1 {
        font-size: 2.25rem;
    }

    .article h2,
    .article.main h2 {
        font-size: 2.25rem;
    }

    .article h3,
    .article.main h3 {
        font-size: 1.75rem;
    }




    /* Article headings */

    .article.heading-large h2 {
        font-size: 2rem;
    }

    .article.main .button {
        margin: 2rem 0;
    }

    .article.has-em em > strong,
    .article.has-em strong > em {
        font-size: 1.25rem;
    }

    .article.job-detail h2 {
        font-size: 1.75rem;
    }




    .shape-wrapper .article.slogan p > b,
    .shape-wrapper .article.slogan p > strong {
        font-size: 1.25rem;
    }



}


@media all and (max-width: 575px) {


    .article.enhanced {
        font-size: 1.05rem;
    }


    .article-wrap.top {
        margin-top: 30px;
    }
    .article-wrap.bottom {
        margin-bottom: 30px;
    }

    .article-wrap.offset-top {
        margin-top: 60px;
    }
    .article-wrap.offset-bottom {
        margin-bottom: 60px;
    }






    /* Article slogan */

    .article.slogan h1 {
        font-size: 2.25rem;
        font-size: 1.85rem;
    }




    /* Main article */


    .article h1,
    .article.main h1 {
        font-size: 1.85rem;
    }

    .article h2,
    .article.main h2 {
        font-size: 1.5rem;
    }

    .article h3,
    .article.main h3 {
        font-size: 1.45rem;
    }


    .article.job-detail h2 {
        font-size: 1.5rem;
    }




    /* Article headings */

    .article.heading-large h2 {
        font-size: 1.75rem;
    }




    /* Article job detail */

    .article.job-detail ul {
        padding: 0 1.25rem;
    }



    /* Article wrap - utility classes */

    .article.main .button {
        margin: 1rem 0;
    }

    .article.has-em em > strong,
    .article.has-em strong > em {
        font-size: 1.15rem;
        line-height: 1.2;
    }




    .shape-wrapper .article.slogan p > b,
    .shape-wrapper .article.slogan p > strong {
        font-size: 1.15rem;
    }


}