/*  HERO  */
.hero {
    background: url(/assets/hero/about_us-mobile.jpg),var(--green);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100svh;
    margin: 0 0 50px 0;
}
/*  HERO END  */

/*  CONTENT  */
h1 {
font-size: var(--fs-subheading);
padding: 25px 0;
}
h2 {
font-size: var(--fs-h2);
padding: 20px 0;
}
h3 {
font-size: var(--fs-h3);
padding: 15px 0;
}
h4 {
font-size: var(--fs-h4);
padding: 10px 0;
}
.orange {
color: var(--orange) !important;
padding: 30px 0 25px 0;
}
.midGrey {
color: var(--midGrey);
}
.midGrey {
color: var(--darkGrey);
}
.title {
display: inline-block;
color: var(--darkBlue);
font-size: 7em;
padding: 25px 0;
}
.content {
display: flex;
flex-direction: column;
}
.content .contentTitle {
padding: 15px;
}
.content .contentTitle span.active {
color: var(--darkBlue);
}
.content .contentTitle span {
font-size: var(--fs-overview);
padding: 10px 0;
display: block;
color: var(--midGrey);
text-transform: uppercase;
}
.content .contentTitle span sup{
    color: var(--midGrey);
    text-transform: lowercase;
}
.content .contentBody {
padding: 0 15px 50px 15px;
}
.content .contentBody p {
font-size: var(--fs-body);
line-height: var(--lh-body);
padding: 0 0 25px 0;
}
.content .contentBody img.wideImage {
width: 100%;
padding: 50px 0;
}
.tableofcontents {
display: none;
}
/*  CONTENT END  */

/*  PARTNERS  */
.partners {
display: flex;
justify-content: center;
padding: 50px 15px;
column-gap: 20px;
row-gap: 20px;

flex-wrap: wrap;
}
.partners span {
display: flex;
}
.partners span img {
width: 100px;
}
/*  PARTNERS END  */

/*    LARGE SCREEN    */
@media only screen and (min-width: 650px) 
{
/*  COMMON  */
/*  COMMON END  */

/*  HERO  */
.hero {
    background: url(/assets/hero/about_us-desktop.jpg), var(--green);
    background-size: cover;
    background-repeat: no-repeat;

}
/*  HERO END  */

/*  CONTENT  */
h1 {
    padding: 0 0 25px 0;
    font-size: var(--fs-subheading);
}
h2 {
    font-size: var(--fs-h2);
    padding: 20px 0;
}
h3 {
    font-size: var(--fs-h3);
    padding: 15px 0;
}
h4 {
    font-size: var(--fs-h4);
    padding: 10px 0;
}
.content {
    flex-direction: row;
}
.contentTitle {
    width: 30%;
    padding: 0 0 0 25px !important;
}
.contentBody {
    width: 70%;
}
.content .contentBody p {
    padding: 0 15% 25px 0;
}
.tableofcontents {
    display: block;
    font-size: 0.7em;
    position: sticky;
    top: 0;
}
/*  CONTENT END  */

/*  PARTNERS  */
.partners {
    justify-content: space-evenly;
}

}