:root {
    --white: #ffffff;
    --default-font-color: #01416d;
    --brand-sub-title-colour: #149bd7;
    --default-font-family: 'Montserrat';
    --brand-title-font-family: var(--default-font-family);
    --brand-non-title-font-family: var(--default-font-family);
    --brand-title-font-weight: 500;
    --brand-title-text-transform: uppercase;

    --brand-body-bg-color: #f6f9fc;
    --brand-section-bg-color: #a87ff0;
    --brand-default-non-title-font-color: #575756;
    --brand-bullet-bg-color: #BCA3F1;
    --brand-overlay-shadow: rgba(87, 87, 86, 0.2);
    --brand-bullet-bg-font-color: var(--white);
    --brand-bullet-border-color: var(--brand-sub-title-colour);
    --brand-logo-width: 20%;
}

* {
    font-family: var(--default-font-family);
    box-sizing: border-box;
}

body {
    background-color: var(--brand-body-bg-color);
    display: flex;
    flex-direction: column;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-align-content: center;
    -o-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    margin: auto;
}

header {
    width: 100%;
    margin: auto;
    background-color: var(--white);
    display: flex;
    flex-direction: row;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center
}

header .content {
    max-width: 964px;
    width: 100%;
    padding: 1rem;
}

header .content .logo {
    width: var(--brand-logo-width);
    margin: auto;
}

main {
    display: flex;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    -o-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 10rem;
}

    footer .content {
        max-width: 964px;
        width: 100%;
        padding: 1rem;
    }

footer .footer-title {
    font-weight: var(--brand-title-font-weight);
}

footer .footer-disclaimer {
    font-weight: 300;
}

.section-container {
    width: 100%;
    max-width: 964px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 2rem 2.5rem 2rem 2.5rem;
    -ms-border-radius: 2rem;
    border-radius: 2rem;
    background-color: var(--white);
    line-height: 2rem;
    color: var(--brand-default-non-title-font-color);
}

.section-container.brand-special-bg {
    background-color: var(--brand-section-bg-color);
    color: var(--white);
}

.section-container.brand-special-bg .section-title {
    color: var(--white);
}

.section {
    display: flex;
    flex-direction: row;
    -o-justify-content: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.section-text, .section-float-text {
    padding-right: 3rem;
}

.section-float-text {
    padding: 2rem 0 2rem 0;
    position: relative;
}

.section-image {
    -o-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-basis: 50%;
    -o-flex-basis: 50%;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    padding: 2rem;
}

.section-image img {
    width: 100%;
}

.section-title {
    font-weight: var(--brand-title-font-weight);
    color: var(--default-font-color);
}

.main-title {
    font-size: 32px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    color: var(--default-font-color);
}

.section-sub-title {
    color: var(--brand-sub-title-colour);
    font-weight: 500;
}

.section-text-full-length {
    width: 100%;
    letter-spacing: normal;
}

.negative-color {
    color: var(--white);
}

.section-2 .section-bullets,
.section-4 .section-bullets {
    display: grid;
    grid-template-areas:
                       "box box"
                       "box box";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1rem;
}

.section-2 .section-bullets .bullet-box {
    display: grid;
    grid-template-areas: "num title"
                         "empty detail";
    grid-template-columns: 0.03fr 1fr;
    grid-gap: 0.2rem;
    padding: 0.5rem;
}

.section-2 .bullet-box .bullet-num {
    grid-area: num;
    display: flex;
    flex-direction: row;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    font-size: 0.8rem;
    height: 1.5rem;
    width: 1.5rem;
    color: var(--brand-bullet-bg-font-color);
    background-color: var(--brand-bullet-bg-color);
    -ms-border-radius: 100% 100% 100% 100%;
    border-radius: 100% 100% 100% 100%;
    -webkit-align-self: center;
    -o-align-self: center;
    align-self: center
}

.section-2 .bullet-box .bullet-title {
    grid-area: title;
    padding-left: 1rem;
    display: flex;
    -o-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.section-2 .bullet-box .bullet-detail {
    grid-area: detail;
    padding-left: 1rem;
    display: flex;
    -o-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.section-description-container {
    display: flex;
    flex-direction: row;

    -o-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.section-description {
    display: flex;
    flex-direction: column;
    width: 48%;

    margin-right: 4%;

    -o-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    -moz-align-content: flex-start;
    -o-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.section-desc-title {
    color: var(--brand-sub-title-colour);
    font-weight: 500;
    font-size: 1rem;
}

.section-4 .section-bullets .bullet-box {
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-gap: 0.3rem;
    padding: 0.5rem;
}

.section-4 .bullet-box .bullet-num {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.8rem;
    height: 1.5rem;
    width: 1.5rem;
    border-style: solid;
    border-width: 0.1rem;
    border-color: var(--brand-bullet-border-color);
    -ms-border-radius: 100% 100% 100% 100%;
    border-radius: 100% 100% 100% 100%;
    -webkit-align-self: center;
    -o-align-self: center;
    align-self: center;
}

.section-4 .bullet-box .bullet-title {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    -o-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.section-4 .bullet-box .bullet-detail {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    -o-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.informational-overlay {
    z-index: 9;
    box-shadow: 0 0 12px 0 var(--brand-overlay-shadow);
    padding: 2rem;
    position: absolute;
    left: 51%;
    top: 10%;
    right: 0;
    bottom: 0;
    width: 45%;
    height: fit-content;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: visible;
}

.overlay-text {
    -o-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -o-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    padding-bottom: 1.5rem;
}

.overlay-image {
    -o-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -o-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    max-width: 100%;
    padding: 1rem;
}

.overlay-image img {
    max-width:100%;
    max-height:80%;
}

@media screen and (max-width: 600px) {
    header .content .logo {
        width: calc(var(--brand-logo-width)*2);
        margin: auto;
    }

    .section-container {
        padding: 1rem 1rem 2rem 1rem;
    }

    .section-1 .section-text {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .section-1 .section-image {
        display: none;
    }

    .section-2 .section-bullets,
    .section-4 .section-bullets {
        display: grid;
        grid-template-areas:
                           "box";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-gap: 1rem;
    }

    .section-3 .section-description-container {
        -moz-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
        -o-flex-flow: column wrap;
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
    }

    .section-3 .section-description {
        width: 100%;
        margin: auto;
    }

    .section.section-5 .section-float-text {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .section.section-5 .section-float-text .section-description {
        width: 100%;
    }

    .section-5 .informational-overlay {
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        padding: inherit;
        z-index: inherit;
        box-shadow: none;
        position: inherit;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        -ms-align-items: center;
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
        overflow: visible;

    }
    .section-5 .overlay-image {
        display: none;
    }

    .section-5 .overlay-text {
        padding: 0;
    }

    .footer {
        margin: auto;
        padding: 1rem;
    }
}