:root {
    --color-grey-light: #eee;
    --color-grey-mid: #d2d8e0;
    --color-grey-dark: #333;
    --color-gold: #ebc781;
    --color-green: #daedb0;
    --color-blue-bright: #255be3;
    --color-blue-dark: #0f1632;
    --color-blue-mid: #056dae;
    --color-blue-light: #77BDF0;
    --color-topic-light: rgba(70,183,230,.25);
    --color-topic-dark: rgba(70,183,230,.5);
    --color-red: #b92026;
    --color-red-dark: #7b1315;
    --color-orange: #ec5529;
    --color-yellow-light: #ebc781;
    --color-yellow: #f8e77d;
    --color-yellow-dark: #fbd393;
    --color-pink: #f5ded8;
    --color-cream: #FFEFC6;
    --color-cream-dark: #fde3cb;
    --gradient-gold: linear-gradient(90deg, rgba(163,132,96,1) 0%, rgba(240,204,134,1) 17%);
    --gradient-gold-reverse: linear-gradient(90deg, rgba(240,204,134,1) 0%, rgba(163,132,96,1)87%);
    --gradient-orange: linear-gradient(to bottom, rgba(241,111,46,99), #ec5529);
}

@font-face {
    font-family: 'citi-sans-condensed';
    src: url('../fonts/citi-sans-condensed-regular.woff2') format('woff2'), url('../fonts/citi-sans-condensed-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'citi-sans-condensed';
    src: url('../fonts/citi-sans-condensed-regular-italic.woff2') format('woff2'), url('../fonts/citi-sans-condensed-regular-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}




@font-face {
    font-family: 'citi-sans-display';
    src: url('../fonts/citi-sans-display-bold.woff2') format('woff2'), url('../fonts/citi-sans-display-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}




@font-face {
    font-family: 'citi-sans-display';
    src: url('../fonts/citi-sans-display-bold-italic.woff2') format('woff2'), url('../fonts/citi-sans-display-bold-italic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}




@font-face {
    font-family: 'citi-sans-display';
    src: url('../fonts/citi-sans-display-regular.woff2') format('woff2'), url('../fonts/citi-sans-display-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'citi-sans-display';
    src: url('../fonts/citi-sans-display-regular-italic.woff2') format('woff2'), url('../fonts/citi-sans-display-regular-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}




@font-face {
    font-family: 'citi-sans-text';
    src: url('../fonts/citi-sans-text-bold.woff2') format('woff2'), url('../fonts/citi-sans-text-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}




@font-face {
    font-family: 'citi-sans-text';
    src: url('../fonts/citi-sans-text-bold-italic.woff2') format('woff2'), url('../fonts/citi-sans-text-bold-italic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}




@font-face {
    font-family: 'citi-sans-text';
    src: url('../fonts/citi-sans-text-regular.woff2') format('woff2'), url('../fonts/citi-sans-text-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'citi-sans-text';
    src: url('../fonts/citi-sans-text-regular-italic.woff2') format('woff2'), url('../fonts/citi-sans-text-regular-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}




@font-face {
    font-family: 'citi-serif-display';
    src: url('../fonts/citi-serif-display-regular.woff2') format('woff2'), url('../fonts/citi-serif-display-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'citi-serif-display';
    src: url('../fonts/citi-serif-display-regular-italic.woff2') format('woff2'), url('../fonts/citi-serif-display-regular-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}


.bg-white {
    background-color: #fff;
}

.bg-red {
    background-color: var(--color-red);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-blue-dark {
    background-color: var(--color-blue-dark)
}

.bg-blue-bright {
    background-color: var(--color-blue-bright);
    color: #fff;
}

.bg-blue-mid {
    background-color: var(--color-blue-mid);
}

.bg-blue-light {
    background-color: var(--color-blue-light);
}

.bg-grey-dark {
    background-color: var(--color-grey-dark);
}

.bg-grey {
    background-color: var(--color-grey-light);
}

.bg-grey-mid {
    background-color: var(--color-grey-mid);
}

.bg-grey-light {
    background-color: var(--color-grey-light);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-pink {
    background-color: var(--color-pink);
    color: var(--color-grey-dark);
}

.bg-cream {
    background-color: var(--color-cream);
}

.text-larger {
    font-size: 1.2em
}

.text-22 {
    font-size: 1.375rem !important;
}

.text-red {
    color: var(--color-red) !important;
}

.text-blue {
    color: var(--color-blue-bright) !important;
}

.text-blue-mid {
    color: var(--color-blue-mid) !important;
}

.text-blue-light {
    color: var(--color-blue-light) !important;
}

.text-gold {
    color: var(--color-gold) !important;
}

.text-grey {
    color: var(--color-grey-dark) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

.text-dark {
    color: #000 !important;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 400;
    font-family: 'citi-sans-display'
}


hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}


b, strong {
    font-weight: 700;
}

body, html {
    font-family: 'citi-sans-text',sans-serif;
    font-weight: 200;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: #056dae
}

    a:hover {
        text-decoration: none;
    }


.bg-blue {
    background-color: #056dae
}

.bg-black {
    background-color: #333
}

.roundend-full {
    border-radius: 100%
}

.list-reset {
    margin: 0;
    padding: 0;
    list-style: none
}

button.close {
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
}

#cookie-policy {
    padding: 3rem 2rem 2rem 2rem
}

    #cookie-policy .close {
        margin-top: 1rem;
        margin-right: 1rem;
    }

svg.blue {
    color: var(--color-blue-bright);
    fill: var(--color-blue-bright);
}

.offcanvas {
    max-width: 80%;
    background-color: var(--color-grey-dark);
}

.brand {
    border-bottom: solid 1px rgba(0,0,0,.5);
}

    .brand svg {
        width: 20px;
        height: 20px
    }

    .brand .logo {
        width: auto;
        height: 24px
    }

#header {
    background-color: #fff;
}

    #header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }

nav {
    overflow-y: scroll;
    position: relative;
}


    nav ul li ul {
        padding: 0;
        margin: 0;
    }

    nav > ul {
        list-style: none;
        padding: 0 .8rem;
        margin: 0;
        position: initial;
    }

    nav ul li {
        display: block;
        width: 100%;
        padding: 1rem;
    }

    nav ul > li {
        padding: 0;
        margin: 0;
        border-bottom: solid 1px rgba(0,0,0,.5);
        position: relative;
    }

        nav ul > li:last-of-type {
            border-bottom: none;
            padding-bottom: 0;
        }

    nav > ul > li .submenu {
        display: none;
        border-top: solid 1px rgba(0, 0, 0, .5);
    }

    nav > ul > li.expanded .submenu {
        display: block;
    }

    nav > ul > li > ul {
        border-top: solid 1px rgba(0,0,0,.5);
    }

    nav ul li a img {
        height: 1.3rem;
        margin-right: 1rem;
    }

    nav ul li a,
    nav ul li h4 {
        color: rgba(0, 0, 0, 0.87);
        padding: .8rem 1rem;
        display: inline-block;
        line-height: 1.5rem;
    }

    nav ul li h4 {
        font-size: .8rem;
        font-weight: bold;
        margin: 0;
    }

a {
    cursor: pointer;
}

img {
    max-width: 100%;
}



.menu-expand {
    line-height: 1;
    display: block;
    position: absolute;
    top: 1rem;
    right: 0;
    color: #000;
}

    .menu-expand:before {
        content: '\2540';
    }

.expanded .menu-expand:before {
    content: '\2501';
}


footer {
    color: #fff;
    padding-top: 12px;
    padding-bottom: 100px;
    background-color: var(--color-grey-dark)
}

    footer a, footer a:active, footer a:focus, footer a:hover {
        color: #666
    }

    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

#footer-menu a {
    padding: .5rem 0;
    border-bottom: solid 1px #333;
    color: #fff;
}

#footer-menu li {
    display: inline-block;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

@media (min-width: 576px) {
}

@media (min-width:768px) {
}


@media (min-width:992px) {
    #cookie-policy {
        padding: 2rem 4rem;
    }

        #cookie-policy .close {
            font-size: .6rem;
            margin-top: 1.5rem;
            margin-right: 2rem;
        }

    #footer-menu li {
        display: list-item;
        margin-bottom: .5rem;
        margin-right: 0;
    }
}

@media (min-width:1200px ) {
    .brand .logo {
        height: 26px;
    }

    #header.sticky {
        border-top: solid .3rem var(--color-blue-bright);
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    }

        #header.sticky .brand {
            display: none !important;
        }

    #menu-main.offcanvas {
        display: flex;
        flex-direction: column;
        position: relative;
        visibility: visible;
        margin: unset;
        width: 100%;
        height: fit-content;
        top: unset;
        left: unset;
        max-width: unset;
        transform: unset;
        background-color: #fff;
    }

    nav {
        overflow-y: unset;
        display: flex;
        flex-direction: row;
        padding: 0 0 0 2rem;
        justify-content: space-between;
    }

        nav > ul > li.expanded .submenu {
            display: none;
        }

        nav ul > li.expanded:active .submenu,
        nav ul > li.expanded:focus .submenu,
        nav ul > li.expanded:hover .submenu,
        nav ul > li:active .submenu,
        nav ul > li:focus .submenu,
        nav ul > li:hover .submenu {
            display: block;
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            height: unset;
            z-index: 999999;
            background: #fff;
            padding: 0 2rem 2rem 2rem;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
        }

        nav ul > li > .submenu ul {
            float: left;
            min-width: 25%;
            padding: 0 1rem;
            width: fit-content
        }

        nav > ul > li {
            display: inline-block;
            width: unset;
            border-bottom: unset;
            margin-right: 2rem;
            position: initial;
        }

        nav .submenu ul > li:last-of-type {
            border-bottom: solid 1px rgba(0, 0, 0, .5);
        }

        nav > ul > li:last-of-type {
            margin-right: 0;
        }

        nav ul li a:active,
        nav ul li a:focus,
        nav ul li a:hover {
            color: rgba(0, 0, 0, 0.87);
        }

        nav > ul > li > a {
            border-bottom: .3rem solid #fff;
            transition: all .2s ease;
        }

            nav > ul > li > a:active,
            nav > ul > li > a:focus,
            nav > ul > li > a:hover {
                border-bottom: .3rem solid var(--color-blue-bright);
            }


    .menu-expand {
        display: none;
    }
}

@media (min-width: 1500px) {
    .container {
        width: 1440px;
    }
}

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

    .container,
    .container.wide {
        max-width: 1600px;
    }
}