:root {
    --min-width-reference--desktop: 1440;
    --max-width-reference--desktop: 2880;
    --dim-x: 1px;
    --dim-x-const: calc(100vw / var(--min-width-reference--desktop))
}

@media screen and (min-width: 1025px) {
    :root {
        --dim-x: calc(100vw / var(--min-width-reference--desktop))
    }
}

@media screen and (min-width: 2880px) {
    :root {
        --dim-x: 2px;
        --dim-x-const: 2px
    }
}

:root {
    --theme-colour-text: #001e3e;
    --theme-colour-white: white;
    --theme-colour-primary: #005478;
    --theme-colour-primary--20: #ccdde4;
    --theme-colour-primary--40: #99bbc9;
    --theme-colour-primary--80: #337693;
    --theme-colour-grey: #cec6be;
    --theme-colour-grey--20: #f5f4f2;
    --theme-colour-alt3: #f6de4d;
    --theme-colour-alt7: #00405b;
    --theme-colour-action: #f6de4d;
    --button-colour--primary: var(--theme-colour-white);
    --button-bg--primary: var(--theme-colour-primary);
    --button-colour--primary--hover: var(--theme-colour-primary);
    --button-bg--primary--hover: var(--theme-colour-alt3);
    --button-colour--primary--inverted: var(--theme-colour-primary);
    --button-bg--primary--inverted: var(--theme-colour-white);
    --button-colour--primary--inverted--hover: var(--theme-colour-primary);
    --button-bg--primary--inverted--hover: var(--theme-colour-alt3)
}

.button {
    display: inline-block;
    padding: 17px 40px;
    color: white;
    color: var(--button-colour--primary);
    font-weight: normal;
    font-size: 16px;
    font-family: 'YourNowSans-Bold', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-bold);
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #005478;
    background-color: var(--button-bg--primary);
    border: none;
    outline: 0;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

.button:hover,
.button:focus {
    color: #005478;
    color: var(--button-colour--primary--hover);
    background-color: #f6de4d;
    background-color: var(--button-bg--primary--hover)
}

.button.button-inverted {
    color: #005478;
    color: var(--button-colour--primary--inverted);
    background-color: white;
    background-color: var(--button-bg--primary--inverted);
    border: 1px solid #005478;
    border: 1px solid var(--button-bg--primary)
}

.button.button-inverted:hover,
.button.button-inverted:focus {
    color: #005478;
    color: var(--button-colour--primary--inverted--hover);
    background-color: #f6de4d;
    background-color: var(--button-bg--primary--inverted--hover)
}

.button.button-secondary {
    color: var(--button-colour--secondary);
    background-color: var(--button-bg--secondary)
}

.button.button-secondary:hover,
.button.button-secondary:focus {
    color: var(--button-colour--secondary--hover);
    background-color: var(--button-bg--secondary--hover)
}

.button.button-secondary.button-inverted {
    color: var(--button-colour--secondary--inverted);
    background-color: var(--button-bg--secondary--inverted)
}

.button.button-secondary.button-inverted:hover,
.button.button-secondary.button-inverted:focus {
    color: var(--button-colour--secondary--inverted--hover);
    background-color: var(--button-bg--secondary--inverted--hover)
}

.button.button-highlight {
    color: var(--button-colour--highlight);
    background-color: var(--button-bg--highlight)
}

.button.button-highlight:hover,
.button.button-highlight:focus {
    color: var(--button-colour--highlight--hover);
    background-color: var(--button-bg--highlight--hover)
}

.button.button-highlight.button-inverted {
    color: var(--button-colour--highlight--inverted);
    background-color: var(--button-bg--highlight--inverted)
}

.button.button-highlight.button-inverted:hover,
.button.button-highlight.button-inverted:focus {
    color: var(--button-colour--highlight--inverted--hover);
    background-color: var(--button-bg--highlight--inverted--hover)
}

@media screen and (min-width: 1025px) {
    .button {
        padding-top: calc(12 * 1px);
        padding-top: calc(12 * var(--dim-x));
        padding-right: calc(32 * 1px);
        padding-right: calc(32 * var(--dim-x));
        padding-bottom: calc(12 * 1px);
        padding-bottom: calc(12 * var(--dim-x));
        padding-left: calc(32 * 1px);
        padding-left: calc(32 * var(--dim-x));
        font-size: calc(16 * 1px);
        font-size: calc(16 * var(--dim-x))
    }
}

@font-face {
    font-family: 'YourNowSans-Black';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Black.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Black%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Black.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Black.woff") format("woff")
}

:root {
    --brand-font-stack-black: 'YourNowSans-Black', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-BlackItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-BlackItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-BlackItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-BlackItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-BlackItalic.woff") format("woff")
}

:root {
    --brand-font-stack-blackitalic: 'YourNowSans-BlackItalic', 'Helvetica Neue',
        'Arial', sans-serif
}

@font-face {
    font-family: 'YourNowSans-Bold';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Bold.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Bold%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Bold.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Bold.woff") format("woff")
}

:root {
    --brand-font-stack-bold: 'YourNowSans-Bold', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-BoldItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-BoldItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-BoldItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-BoldItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-BoldItalic.woff") format("woff")
}

:root {
    --brand-font-stack-bolditalic: 'YourNowSans-BoldItalic', 'Helvetica Neue',
        'Arial', sans-serif
}

@font-face {
    font-family: 'YourNowSans-Light';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Light.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Light%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Light.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Light.woff") format("woff")
}

:root {
    --brand-font-stack-light: 'YourNowSans-Light', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-LightItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-LightItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-LightItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-LightItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-LightItalic.woff") format("woff")
}

:root {
    --brand-font-stack-lightitalic: 'YourNowSans-LightItalic', 'Helvetica Neue',
        'Arial', sans-serif
}

@font-face {
    font-family: 'YourNowSans-Medium';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Medium.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Medium%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Medium.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Medium.woff") format("woff")
}

:root {
    --brand-font-stack-medium: 'YourNowSans-Medium', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-MediumItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-MediumItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-MediumItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-MediumItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-MediumItalic.woff") format("woff")
}

:root {
    --brand-font-stack-mediumitalic: 'YourNowSans-MediumItalic', 'Helvetica Neue',
        'Arial', sans-serif
}

@font-face {
    font-family: 'YourNowSans-Regular';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Regular.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Regular%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Regular.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Regular.woff") format("woff")
}

:root {
    --brand-font-stack-regular: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-RegularItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-RegularItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-RegularItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-RegularItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-RegularItalic.woff") format("woff")
}

:root {
    --brand-font-stack-regularitalic: 'YourNowSans-RegularItalic',
        'Helvetica Neue', 'Arial', sans-serif
}

@font-face {
    font-family: 'YourNowSans-Thin';
    src: url("../assets/fonts/YourNowSans/YourNowSans-Thin.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-Thin%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-Thin.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-Thin.woff") format("woff")
}

:root {
    --brand-font-stack-thin: 'YourNowSans-Thin', 'Helvetica Neue', 'Arial',
        sans-serif
}

@font-face {
    font-family: 'YourNowSans-ThinItalic';
    src: url("../assets/fonts/YourNowSans/YourNowSans-ThinItalic.eot");
    src: url("../assets/fonts/YourNowSans/YourNowSans-ThinItalic%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../assets/fonts/YourNowSans/YourNowSans-ThinItalic.woff2") format("woff2"), url("../assets/fonts/YourNowSans/YourNowSans-ThinItalic.woff") format("woff")
}

:root {
    --brand-font-stack-thinitalic: 'YourNowSans-ThinItalic', 'Helvetica Neue',
        'Arial', sans-serif
}

:root {
    --body-font-stack: 'Helvetica Neue', 'Arial', sans-serif;
    --body-font-size: 14px;
    --body-line-height: 22px;
    --para-line-height: 24px
}

body {
    color: #001e3e;
    color: var(--theme-colour-text);
    font-size: 14px;
    font-size: var(--body-font-size);
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--body-font-stack)
}

.f-h0,
.f-h0 p {
    margin: 0;
    color: #005478;
    color: var(--theme-colour-primary);
    font-weight: normal;
    font-size: 32px;
    font-family: 'YourNowSans-Bold', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-bold);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.13;
    letter-spacing: -0.2px
}

@media screen and (min-width: 1025px) {

    .f-h0,
    .f-h0 {
        font-size: calc(50 * 1px);
        font-size: calc(50 * var(--dim-x));
        line-height: 1.1
    }
}

h1,
h1 p,
.f-h1,
.f-h1 p,
.f-h1--small,
.f-h1--small p {
    margin: 0;
    color: #005478;
    color: var(--theme-colour-primary);
    font-weight: normal;
    font-size: 32px;
    font-family: 'YourNowSans-Bold', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-bold);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.13;
    letter-spacing: -0.2px
}

*+h1,
*+.f-h1,
*+.f-h1--small {
    margin-top: 1.13em
}

@media screen and (min-width: 1025px) {

    h1,
    .f-h1,
    h1 p,
    .f-h1 p {
        font-size: calc(32 * 1px);
        font-size: calc(32 * var(--dim-x));
        line-height: 1.1
    }

    h1,
    .f-h1--small,
    h1 p,
    .f-h1--small p {
        font-size: calc(32 * 1px);
        font-size: calc(32 * var(--dim-x))
    }

    *+h1,
    *+.f-h1 {
        margin-top: 1.1em
    }
}

h2,
.f-h2,
h2 p,
.f-h2 p {
    margin: 0;
    color: #337693;
    color: var(--theme-colour-primary--80);
    font-weight: normal;
    font-size: calc(21 * 1px);
    font-size: calc(21 * var(--dim-x));
    font-family: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-regular);
    font-style: normal;
    font-stretch: normal;
    line-height: 0.86em;
    letter-spacing: -0.2px
}

.f-h2--small,
.f-h2--small p {
    margin: 0;
    color: #337693;
    color: var(--theme-colour-primary--80);
    font-weight: normal;
    font-size: calc(18 * 1px);
    font-size: calc(18 * var(--dim-x));
    font-family: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-regular);
    font-style: normal;
    font-stretch: normal;
    line-height: 0.86em;
    letter-spacing: -0.2px
}

*+h2,
*+.f-h2,
*+.f-h2--small {
    margin-top: 0.86em
}

@media screen and (min-width: 1025px) {

    h2,
    .f-h2,
    h2 p,
    .f-h2 p {
        font-size: calc(21 * 1px);
        font-size: calc(21 * var(--dim-x));
        line-height: 1.24
    }

    *+h2,
    *+.f-h2 {
        margin-top: 1.24em
    }
}

h3,
.f-h3,
h3 p,
.f-h3 p {
    margin: 0;
    color: #337693;
    color: var(--theme-colour-primary--80);
    font-weight: normal;
    font-size: calc(21 * 1px);
    font-size: calc(21 * var(--dim-x));
    font-family: 'YourNowSans-Medium', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-medium);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.14;
    letter-spacing: normal
}

*+h3,
*+.f-h3 {
    margin-top: 1.33em
}

h4,
.f-h4,
h4 p,
.f-h4 p {
    margin: 0;
    color: #005478;
    color: var(--theme-colour-primary);
    font-weight: normal;
    font-size: calc(24 * 1px);
    font-size: calc(24 * var(--dim-x));
    font-family: 'YourNowSans-Bold', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-bold);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.17;
    letter-spacing: normal
}

*+h4,
* .f-h4 {
    margin-top: 1.17em
}

h5,
.f-h5,
h5 p,
.f-h5 p,
.f-h5--small,
.f-h5--small p {
    margin: 0;
    color: var(--palette-aesthetic-blue);
    font-weight: normal;
    font-size: calc(18 * 1px);
    font-size: calc(18 * var(--dim-x));
    font-family: 'YourNowSans-Medium', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-medium);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: -0.2px
}

*+h5,
* .f-h5,
* .f-h5--small {
    margin-top: 1.33em
}

a {
    color: #005478;
    color: var(--theme-colour-primary);
    font-weight: bold;
    text-decoration: none
}

p a {
    padding-bottom: 1px;
    color: #005478;
    color: var(--theme-colour-primary);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #005478;
    border-bottom: 2px solid var(--theme-colour-primary)
}

p a:hover {
    color: #f6de4d;
    color: var(--theme-colour-action);
    border-color: #f6de4d;
    border-color: var(--theme-colour-action)
}

p {
    margin: 0;
    color: #001e3e;
    color: var(--theme-colour-text);
    font-weight: normal;
    font-size: calc(18 * 1px);
    font-size: calc(18 * var(--dim-x));
    font-family: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-regular);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal
}

*+p {
    margin-top: 1.33em
}

body {
    margin: 0
}

.container--max-width {
    max-width: calc(1px * 2880);
    max-width: calc(1px * var(--max-width-reference--desktop))
}

.container--center {
    margin: 0 auto
}

@media screen and (min-width: 550px) {
    .two-columns {
        text-align: left;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px
    }

    .container--padding-mobile {
        padding-right: 0;
        padding-left: 0
    }
}

@media screen and (min-width: 1025px) {
    .two-columns {
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px
    }
}

.o-footer {
    padding-bottom: 20px;
    background: #00405b;
    background: var(--theme-colour-alt7)
}

.o-footer__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 20px
}

.o-footer__content-container {
    background-color: #ccdde4;
    background-color: var(--theme-colour-primary--20);
    border-bottom: 1px solid #00405b;
    border-bottom: 1px solid var(--theme-colour-alt7);
    height: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: max-height 1s ease, padding 0.4s ease 0.2s;
    transition: max-height 1s ease, padding 0.4s ease 0.2s
}

.o-footer__content-container .o-footer__content {
    opacity: 0;
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease
}

.o-footer__content-container.is-active {
    max-height: 10000px;
    padding: 40px 20px 60px
}

.o-footer__content-container.is-active .o-footer__content {
    -webkit-transition: opacity 0.6s ease 0.6s;
    transition: opacity 0.6s ease 0.6s;
    opacity: 1
}

.o-footer__copyright p {
    margin: 0;
    padding: 20px 0;
    color: #99bbc9;
    color: var(--theme-colour-primary--40);
    font-size: 16px;
    text-align: center
}

.o-footer__copyright button {
    color: #99bbc9;
    color: var(--theme-colour-primary--40);
    background: none;
    text-decoration: none;
    border: none;
    padding: 0;
    vertical-align: middle
}

.o-footer__copyright button:hover {
    color: #f6de4d;
    color: var(--theme-colour-action);
    border-bottom: 2px solid #f6de4d;
    border-bottom: 2px solid var(--theme-colour-action)
}

@media screen and (min-width: 750px) {
    .o-footer__inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1580px;
        padding: 0 60px
    }

    .o-footer__content-container {
        margin: 0 auto;
        max-width: 1580px;
        padding: 0
    }

    .o-footer__content-container.is-active {
        padding: 40px 60px 60px
    }
}

@media screen and (min-width: 1025px) {
    .o-footer {
        padding-bottom: 0
    }

    .o-footer__copyright p {
        padding: 0;
        font-size: calc(16 * 1px);
        font-size: calc(16 * var(--dim-x));
        line-height: calc(103 * 1px);
        line-height: calc(103 * var(--dim-x));
        text-align: right
    }
}

.m-footer-navigation {
    background: #00405b;
    background: var(--theme-colour-alt7)
}

.m-footer-navigation__status-icon {
    background-color: white;
    background-color: var(--theme-colour-white);
    border: 4px solid #cec6be;
    border: 4px solid var(--theme-colour-grey);
    border-radius: 1em;
    display: inline-block;
    height: 1.25em;
    margin-left: 0.5em;
    position: relative;
    -webkit-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
    width: 1.25em
}

.m-footer-navigation__status-icon::before,
.m-footer-navigation__status-icon::after {
    content: '';
    background-color: #005478;
    background-color: var(--theme-colour-primary);
    left: 0.25em;
    position: absolute;
    top: calc(50% - 1px);
    width: 0.75em;
    height: 2px
}

.m-footer-navigation__status-icon::after {
    -webkit-transform: rotate(90deg) scale(1, 1);
    transform: rotate(90deg) scale(1, 1);
    -webkit-transition: -webkit-transform 1.2s ease;
    transition: -webkit-transform 1.2s ease;
    transition: transform 1.2s ease;
    transition: transform 1.2s ease, -webkit-transform 1.2s ease
}

.m-footer-navigation>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

@media screen and (min-width: 500px) {
    .m-footer-navigation>ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 0
    }
}

.m-footer-navigation>ul li {
    font-size: 18px;
    font-family: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial', sans-serif;
    font-family: var(--brand-font-stack-regular);
    padding: 15px 0
}

@media screen and (min-width: 500px) {
    .m-footer-navigation>ul li {
        margin-right: 1em;
        padding: 60px 0
    }
}

.m-footer-navigation>ul li button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;
    border: none;
    color: white;
    color: var(--theme-colour-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    margin-top: 0;
    text-transform: uppercase;
    -webkit-transition: color 0.6s ease;
    transition: color 0.6s ease;
    vertical-align: middle
}

@media screen and (max-width: 500px) {
    .m-footer-navigation>ul li button {
        font-size: calc(16 * 1px);
        font-size: calc(16 * var(--dim-x))
    }
}

.m-footer-navigation>ul li button:focus {
    outline: none
}

.m-footer-navigation>ul li button.is-active>.m-footer-navigation__status-icon {
    background-color: #ccdde4;
    background-color: var(--theme-colour-primary--20)
}

.m-footer-navigation>ul li button.is-active>.m-footer-navigation__status-icon::after {
    -webkit-transform: rotate(90deg) scale(0, 1);
    transform: rotate(90deg) scale(0, 1)
}

.m-footer-navigation>ul li button:not(.is-active):hover {
    color: #f6de4d;
    color: var(--theme-colour-action);
    text-decoration: underline
}

.m-footer-navigation>ul li button:not(.is-active):hover .m-footer-navigation__status-icon {
    background-color: #f6de4d;
    background-color: var(--theme-colour-action)
}

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header .language-switcher {
    font-size: calc(12 * 1px);
    font-size: calc(12 * var(--dim-x));
    padding: 1.5em 2em 1.25em 20px
}

@media screen and (min-width: 800px) {
    .header .language-switcher {
        font-size: calc(16 * 1px);
        font-size: calc(16 * var(--dim-x));
        padding: 2em 2em 1.75em 60px
    }
}

.header .language-switcher a {
    font-weight: normal
}

.header .language-switcher a:hover {
    text-decoration: underline
}

.header .your-now-logo__container {
    max-width: 390px;
    min-width: 130px;
    padding: 1em 20px 1.5em 0;
    width: 70vw
}

@media screen and (min-width: 450px) {
    .header .your-now-logo__container {
        width: 60vw
    }
}

@media screen and (min-width: 650px) {
    .header .your-now-logo__container {
        width: 40vw
    }
}

@media screen and (min-width: 800px) {
    .header .your-now-logo__container {
        padding: 2em 60px 3em 0;
        width: 35vw
    }
}

.header .your-now-logo__container-inner {
    position: relative;
    padding-bottom: 10.954%
}

.header .your-now-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto
}

.m-heading-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    text-align: center
}

.m-heading-group__heading {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    max-width: calc(980 * 1px);
    max-width: calc(980 * var(--dim-x));
    margin-bottom: 30px;
    padding: 0;
    text-transform: uppercase
}

.m-heading-group__overlay-text {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    margin: 0 0 15px;
    padding: 0;
    color: #337693;
    color: var(--theme-colour-primary--80);
    text-transform: uppercase
}

.m-heading-group__subheading {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    max-width: calc(780 * 1px);
    max-width: calc(780 * var(--dim-x));
    margin: 0;
    padding: 0 0 40px;
    color: #337693;
    color: var(--theme-colour-primary--80)
}

.m-heading-group__text {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    max-width: calc(780 * 1px);
    max-width: calc(780 * var(--dim-x));
    margin: 29px 0 0 0;
    padding: 0 0 40px;
    text-align: left
}

.m-heading-group__text.two-columns {
    max-width: calc(980 * 1px);
    max-width: calc(980 * var(--dim-x))
}

@media screen and (min-width: 481px) {
    .m-heading-group {
        padding: 0
    }

    .m-heading-group__heading {
        margin-bottom: 0.42em
    }

    .m-heading-group__heading.f-h0 {
        margin-bottom: 0.6em
    }

    .m-heading-group__overlay-text {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: calc(15 * 1px);
        margin-bottom: calc(15 * var(--dim-x));
        margin-left: 0
    }

    .m-heading-group__text p {
        margin-top: 0
    }

    .m-heading-group__subheading {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: calc(40 * 1px);
        padding-bottom: calc(40 * var(--dim-x));
        padding-left: 0
    }
}

/* .logo-element__charge,
.logo-element__free {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0
} */
/* 
.logo-element__charge {
    -webkit-animation: charge__frames 4800ms ease infinite;
    animation: charge__frames 4800ms ease infinite
}

.logo-element__free {
    -webkit-animation: free__frames 4800ms ease infinite;
    animation: free__frames 4800ms ease infinite
} */

@-webkit-keyframes charge__frames {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }

    10% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    60% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }

    65% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@keyframes charge__frames {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }

    10% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    60% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }

    65% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@-webkit-keyframes free__frames {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    10% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }

    50% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }

    60% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes free__frames {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    10% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }

    50% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }

    60% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.main-image-container {
    background-image: url(../assets/S-YOUR_NOW_13_OPT.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 1px solid #cec6be;
    border-top: 1px solid var(--theme-colour-grey);
    height: 80vw;
    max-height: 40em;
    -webkit-transform: skewY(-1.2deg);
    transform: skewY(-1.2deg)
}

@media screen and (min-width: 500px) {
    .main-image-container {
        height: 60vw
    }
}

@media screen and (min-width: 800px) {
    .main-image-container {
        background-image: url(../assets/L-YOUR_NOW_13_OPT.jpg)
    }
}

@media screen and (min-width: 1280px) {
    .main-image-container {
        background-image: url(../assets/XL-YOUR_NOW_13_OPT.jpg)
    }
}

.o-page-heading {
    position: relative
}

.o-page-heading__content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.o-page-heading__content {
    z-index: 1;
    padding: 15px
}

.o-page-heading:not(.o-page-heading--has-bg) .o-page-heading__content-wrapper {
    padding: 65px 17px 30px 17px
}

@media screen and (min-width: 1025px) {
    .o-page-heading__content {
        max-width: calc(980 * 1px);
        max-width: calc(980 * var(--dim-x))
    }

    .o-page-heading:not(.o-page-heading--has-bg) .o-page-heading__content-wrapper {
        margin-bottom: calc(100 * 1px);
        margin-bottom: calc(100 * var(--dim-x));
        padding-top: calc(135 * 1px);
        padding-top: calc(135 * var(--dim-x));
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0
    }
}

.services__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto calc(100 * 1px);
    margin: 0 auto calc(100 * var(--dim-x));
    max-width: 100vw;
    padding: 0 30px
}

@media screen and (min-width: 1024px) {
    .services__container {
        padding: 0 60px
    }
}

@media screen and (min-width: 1580px) {
    .services__container {
        max-width: 1580px
    }
}

.services__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 700px;
    min-width: 0;
    padding: 60px 3% 0;
    text-align: center;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out
}

.services__link:hover {
    background-color: #f5f4f2;
    background-color: var(--theme-colour-grey--20)
}

@media screen and (min-width: 600px) {
    .services__link {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 60px 3%
    }
}

@media screen and (min-width: 1025px) {
    .services__link {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 44%;
        flex: 0 1 44%
    }
}

.services__link .f-h3 {
    font-size: calc(16 * 1px);
    font-size: calc(16 * var(--dim-x));
    line-height: 1.3;
    text-align: center;
    margin-bottom: 30px
}

.services__logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 53%;
    flex: 0 1 53%;
    margin-top: 8px;
    max-width: 250px;
    width: 100%
}

@media screen and (min-width: 600px) {
    .services__logo {
        max-width: none
    }
}

.services__text-container {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 44%;
    flex: 0 1 44%;
    margin: 30px 0 0 0
}

@media screen and (min-width: 600px) {
    .services__text-container {
        margin: 0 0 0 3%
    }
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1
}

.modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 500px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.modal__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.modal__close {
    background: transparent;
    border: 0
}

.modal__header .modal__close:before {
    content: "\2715"
}

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8)
}

@-webkit-keyframes mmfadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mmfadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes mmfadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes mmslideIn {
    from {
        -webkit-transform: translateY(15%);
        transform: translateY(15%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes mmslideIn {
    from {
        -webkit-transform: translateY(15%);
        transform: translateY(15%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes mmslideOut {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }
}

@keyframes mmslideOut {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }
}

.micromodal-slide {
    display: none
}

.micromodal-slide.is-open {
    display: block
}

@media screen and (prefers-reduced-motion: no-preference) {
    .micromodal-slide[aria-hidden="false"] .modal__overlay {
        -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
        animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1)
    }

    .micromodal-slide[aria-hidden="false"] .modal__container {
        -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
        animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1)
    }

    .micromodal-slide[aria-hidden="true"] .modal__overlay {
        -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
        animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1)
    }

    .micromodal-slide[aria-hidden="true"] .modal__container {
        -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
        animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1)
    }
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform
}


TEXTAREA,
INPUT,
BUTTON,
SELECT {
	resize: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-font-smoothing: inherit;
    font-family: 'YourNowSans-Regular', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 18px;
	color: var(--fontColor);
	padding: 15px 10px;
	border: 0;
	border: 1px solid #d6d6d6;
	background: #FFF;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
    border-radius: 5px;
}

TEXTAREA {
	border: 1px solid #d6d6d6;
}

SELECT {
	position: relative;
	cursor: pointer;
	outline: none;
	-o-text-overflow: '';
	text-overflow: '';
}

select::-ms-expand {
	display: none;
}

BUTTON {
	border: none;
	cursor: pointer;
}

INPUT[type=text],
INPUT[type=tel],
TEXTAREA,
INPUT[type=password],
INPUT[type=email],
SELECT,
BUTTON {
	width: 100%;
}


INPUT[type=checkbox] {
	border: 1px solid #d6d6d6;
	padding: 0;
	width: 25px;
	height: 25px;
	overflow: hidden;
}

INPUT[type=checkbox]:focus {
	border-bottom-color: #d6d6d6;
}

INPUT[type=checkbox]:checked {
	border-color: #000;
	position: relative;
}

INPUT[type=checkbox]:checked:after,
INPUT[type=checkbox]:checked:before {
	content: "";
	display: block;
	width: 1px;
	height: 19px;
	background: #000;
	position: absolute;
	top: 2px;
	left: 11px;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

INPUT[type=checkbox]:checked:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

INPUT[type=radio] {
	padding: 4px;
	line-height: normal;
	vertical-align: middle;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}

INPUT[type=submit],
INPUT[type=reset],
.button {
    color: #fff;
	/* padding: 15px 40px; */
    margin-top: 30px;
}


INPUT[type=submit]:hover,
INPUT[type=reset]:hover,
.button:hover {
	color: var(--mainColor);
	border-color: var(--mainColor);
	text-decoration: none;
	cursor: pointer;
}

INPUT:focus,
SELECT:focus {
	border-bottom-color: var(--mainColor);
}

INPUT:-webkit-autofill,
TEXTAREA:-webkit-autofill {
	box-shadow: 0 0 0 1000px #FFF inset;
	-webkit-box-shadow: 0 0 0 1000px #FFF inset;
	-webkit-text-fill-color: #000;
}


#contactform .field.privacy A {
	border-bottom: 2px solid var(--fontColor);
}

#contactform .field.privacy A {
	color: var(--fontColor);
}

#contactform .field.privacy A:hover {
	border-bottom: 2px solid var(--mainColor);
}

.no-js #contactform {
	display: none;
}

#contactform {
	margin-top: 80px;
}
#contactform h3 {
	margin-bottom: 30px;
	text-align: center;
}
#contactform .field {
	margin: 5px 0;
	width: 100%;
}
#contactform .field.privacy INPUT {
	margin-right: 5px;
}
#contactform .field.privacy INPUT:hover {
	cursor: pointer;
}
#contactform .field.privacy span {
	position: relative;
	top: -10px;
}

/*formular*/
.no-js #contactform {
	display: none;
}

#contactform {
	margin-top: 80px;
}
#contactform h3 {
	margin-bottom: 30px;
	text-align: center;
}
#contactform .field {
	margin: 5px 0;
	width: 100%;
}
#contactform .field.privacy INPUT {
	margin-right: 5px;
}
#contactform .field.privacy INPUT:hover {
	cursor: pointer;
}
#contactform .field.privacy span {
	position: relative;
	top: -10px;
}

.success_mail H3,
.noscript_mail H3 {
	padding: 50px 0;
	background: var(--backgroundColor);
}

.gridrow + .gridrow,
.col + .col {
    margin-top: 20px;
}

input {
    + p {
        margin-top: 5px;
    }
}

p.smalltext {
    font-size: 16px;
    margin-bottom: 15px;
}

.pflicht.smalltext {
    margin-top: 20px;
}