/*
Theme Name: South Tyneside Council
Theme URI: https://www.southtyneside.gov.uk
Author: South Tyneside Council Digital Team
Author URI: https://www.southtyneside.gov.uk
Description: Custom theme for the South Tyneside Council website.
Version: 2.0
Tags: responsive, accesible, html5, css3
*/

@charset "utf-8";

::after, ::before {
    vertical-align: baseline
}

* {
    box-sizing: border-box
}

:focus {
    outline: 0
}

::-moz-focus-inner {
    border: 0
}

::-moz-selection, ::selection {
    color: #fff;
    background-color: #2d862d
}

.dark-mode ::-moz-selection, .dark-mode ::selection {
    color: #fff;
    background-color: #164316
}

body, html {
    padding: 0;
    margin: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-size: 62.5%;
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    color: #333;
    background-color: #fff
}

    body.dark-mode {
        background-color: #333;
        color: #fff
    }

    body.fixed {
        overflow: hidden
    }

article, aside, blockquote, div, figcaption, figure, footer, header, nav, section {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 920px
}

.id-content-bottom.container {
    padding: 6em 0
}

.id-content-top + .id-content-bottom.container {
    padding-top: 0
}

@media all and (min-width:720px) {
    .id-content-bottom.container > * {
        margin-right: calc(((100% - 1.25rem)/ 3) + .625rem);
        margin-right: calc(((100% - 1.25rem)/ 3) + 1.25rem)
    }

    .id-content-bottom.container > .expand {
        margin-right: 0
    }
}

.id-content-bottom.container > :first-child {
    margin-top: 0
}

.id-content-bottom.container > :last-child {
    margin-bottom: 0
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE7g0.woff) format('woff'),url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2')
}

@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3msJoA.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGUOWwJoA.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXNis.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K8nQNis.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3msJoA.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGUOWwJoA.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXNis.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K8nQNis.woff) format('woff'),url(https://fonts.gstatic.com/s/worksans/v8/QGY9z_wNahGAdqQ43Rh_ebrnlwyYfEPxPoGU3ms5q4fYGyA.woff2) format('woff2')
}

@font-face {
    font-family: FontAwesome;
    src: url(/assets/fonts/fontawesome/light/fa-light-300.woff) format('woff'),url(/assets/fonts/fontawesome/light/fa-light-300.woff2) format('woff2');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'FontAwesome Brands';
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/webfonts/fa-brands-400.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/webfonts/fa-brands-400.woff2) format('woff2');
    font-weight: 400;
    font-style: normal
}

mark {
    background-color: #fc0;
    color: #333
}

.h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    line-height: 1.2em;
    margin: 2.5rem 0 1.25rem
}

    .h2.loading::after, .h3.loading::after, .h4.loading::after, .h5.loading::after, .h6.loading::after, h1.loading::after, h2.loading::after, h3.loading::after, h4.loading::after, h5.loading::after, h6.loading::after {
        content: '\f013';
        font-family: FontAwesome;
        animation: spin 2s linear infinite;
        margin: 0 0 0 .313em;
        display: inline-block;
        font-size: .75em;
        opacity: .5
    }

p + .h2, p + .h3, p + .h4, p + .h5, p + .h6, p + h2, p + h3, p + h4, p + h5, p + h6, p + ol, p + ul {
    margin-top: 2.5rem
}

h1 {
    font-size: 3.6em;
    margin-top: 1.667em
}

.h2, h2 {
    font-size: 3em
}

.h3, h3 {
    font-size: 2.4em
}

.h4, h4 {
    font-size: 2em
}

.h5, .h6, h5, h6 {
    font-size: 1.6em
}

p {
    font-size: 1.6em;
    line-height: 1.5em;
    margin: 1.25em 0
}

    p em {
        font-style: normal
    }

.h2 em, .h3 em, .h4 em, .h5 em, .h6 em, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    display: inline-block;
    font-style: normal;
    color: #fff;
    background-color: #333;
    line-height: 1.1em;
    padding: .05em .25em
}

.dark-mode .h2 em, .dark-mode .h3 em, .dark-mode .h4 em, .dark-mode .h5 em, .dark-mode .h6 em, .dark-mode h1 em, .dark-mode h2 em, .dark-mode h3 em, .dark-mode h4 em, .dark-mode h5 em, .dark-mode h6 em {
    background-color: #fff;
    color: #333
}

.h2 + .buttons, .h2 + dl, .h2 + ol, .h2 + p, .h2 + ul, .h3 + .buttons, .h3 + dl, .h3 + ol, .h3 + p, .h3 + ul, .h4 + .buttons, .h4 + dl, .h4 + ol, .h4 + p, .h4 + ul, .h5 + .buttons, .h5 + dl, .h5 + ol, .h5 + p, .h5 + ul, .h6 + .buttons, .h6 + dl, .h6 + ol, .h6 + p, .h6 + ul, h2 + .buttons, h2 + dl, h2 + ol, h2 + p, h2 + ul, h3 + .buttons, h3 + dl, h3 + ol, h3 + p, h3 + ul, h4 + .buttons, h4 + dl, h4 + ol, h4 + p, h4 + ul, h5 + .buttons, h5 + dl, h5 + ol, h5 + p, h5 + ul, h6 + .buttons, h6 + dl, h6 + ol, h6 + p, h6 + ul {
    margin-top: 0
}

ol, ul {
    font-size: 1em;
    margin: 4em 0;
    padding: 0 3em
}

    ol ol, ol ul, ul ol, ul ul {
        margin: 2em 0 0 0
    }

    ul li {
        list-style-type: disc
    }

    ol li, ul li {
        font-size: 1.6em;
        line-height: 1.5em;
        margin: 1.25em 0
    }

.highlight > ol > li li, .highlight > ul > li li, .id-content-bottom > ol li li, .id-content-bottom > ul li li {
    font-size: 1em
}

ol, ul.icons {
    counter-reset: item;
    list-style: none;
    margin-left: 0;
    padding-left: 2em;
    position: relative
}

    ul.icons li {
        list-style: none
    }

    ol ol {
        padding-left: 3em
    }

        ol ol ol {
            padding-left: 4em
        }

            ol ol ol ol {
                padding-left: 5em
            }

                ol ol ol ol ol {
                    padding-left: 6em
                }

                    ol ol ol ol ol ol {
                        padding-left: 8em
                    }

    ol > li::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        position: absolute;
        left: 0;
        font-size: inherit;
        line-height: inherit
    }

    ul.icons > li::before {
        content: '\f111';
        font-family: FontAwesome;
        font-weight: 300;
        position: absolute;
        left: 0;
        font-size: inherit;
        line-height: inherit
    }

    ul.icons.ticks > li::before {
        content: '\f00c'
    }

    ul.icons.crosses > li::before {
        content: '\f00d'
    }

@media all and (min-width:720px) {
    h1 {
        font-size: 4em;
        margin-top: 1.5em
    }

    .h2, h2 {
        font-size: 3.6em
    }

    .h3, h3 {
        font-size: 3em
    }

    .h4, h4 {
        font-size: 2.4em
    }

    .h5, .h6, h5, h6 {
        font-size: 2em
    }

    p {
        font-size: 1.8em
    }

    ol li, ul li {
        font-size: 1.8em
    }

    p + .h2, p + .h3, p + .h4, p + .h5, p + .h6, p + h2, p + h3, p + h4, p + h5, p + h6 {
        margin-top: 3.75rem
    }
}

@media all and (min-width:960px) {
    h1 {
        font-size: 4.8em;
        margin-top: 1.25em
    }

    p {
        font-size: 2em
    }

    ol li, ul li {
        font-size: 2em
    }
}

dl, dl dd, dl dt {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0
}

dl {
    margin: 4em 0;
    font-size: 1em
}

    dl dd, dl dt {
        font-size: 1.6em;
        line-height: 1.25em;
        padding: .625em;
        border: 1px solid #ccc;
        border-top: none
    }

        dl dd:first-child, dl dt:first-child {
            border-top: 1px solid #ccc
        }

    dl:not(.side) dt {
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        background-color: #eee
    }

.dark-mode dl:not(.side) dt {
    background-color: #111
}

dl.side dd + dd {
    color: #c00;
    background-color: pink
}

    dl.side dd + dd::before {
        content: 'Incorrect HTML structure, please remove. '
    }

dl.side dt, dl.side.reverse dd {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    background-color: #eee
}

dl.side.reverse dt {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    background-color: transparent
}

.dark-mode dl.side dt, .dark-mode dl.side.reverse dd {
    background-color: #111
}

.dark-mode dl.side.reverse dt {
    background-color: transparent
}

@media all and (min-width:720px) {
    dl.side {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }

        dl.side.reverse {
            flex-direction: row-reverse
        }

    .id-content-bottom.container > dl.side.expand {
        margin-right: 0
    }

    dl.side.reverse dt, dl.side:not(.reverse) dd {
        border-left: none
    }

    dl.side dd:first-of-type, dl.side dt:first-of-type {
        border-top: 1px solid #ccc
    }

    dl.side dd, dl.side dt {
        width: 50%;
        border-top: none;
        border-bottom: 1px solid #ccc
    }

    dl.side.expand dt, dl.side.expand.reverse dd {
        width: 25%
    }

    dl.side.expand dd, dl.side.expand.reverse dt {
        width: 75%
    }
}

hr {
    height: .5em;
    width: 100%;
    display: block;
    overflow: hidden;
    font-size: 1em;
    margin: 4em 0;
    background-color: #e5e5e5;
    clear: both;
    outline: 0;
    border: none
}

.id-content-bottom.container span.class {
    font-family: 'Courier New',monospace;
    font-weight: 400;
    background-color: #eee;
    font-size: .8em;
    display: inline-block;
    padding: .1em .5em
}

.dark-mode .id-content-bottom.container span.class {
    background-color: #111
}

.dark-mode .id-content-bottom.container .highlight span.class, .dark-mode .id-content-bottom.container blockquote span.class, .id-content-bottom.container .highlight span.class {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.5)
}

.id-content-bottom.container blockquote span.class {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,.5)
}

h2.contents-header {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    text-align: left;
    padding: 1.25em 1.25em 1.25em 3.125em;
    border: 1px solid #ccc;
    position: relative;
    margin: 0;
    background-color: #eee
}

.dark-mode h2.contents-header {
    background-color: #111
}

h2.contents-header::before {
    content: '\f03a';
    font-family: FontAwesome;
    font-weight: 300;
    display: block;
    overflow: visible;
    position: absolute;
    top: 1.25em;
    left: 1.25em
}

ol.contents-list, ol.contents-list li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

ol.contents-list {
    border-top: 1px solid #ddd;
    margin: 4em 0
}

h2.contents-header + ol.contents-list {
    border-top: none;
    margin-top: 0
}

ol.contents-list li {
    font-size: 1.6em;
    padding: .625em 1.25em .625em 3.125em;
    border: 1px solid #ddd;
    border-top: none;
    position: relative
}

    ol.contents-list li::before {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3.125em;
        text-align: center;
        padding-top: .625em
    }

blockquote {
    background-color: #eee;
    position: relative;
    padding: 8em 2em;
    margin: 4em 0
}

.dark-mode blockquote {
    background-color: #111
}

blockquote::after, blockquote::before {
    content: '\f10d';
    display: block;
    font-size: 4em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome;
    font-weight: 300;
    color: #ccc
}

blockquote::after {
    content: '\f10e';
    left: auto;
    right: 0;
    top: auto;
    bottom: 0
}

blockquote > :first-child {
    margin-top: 0
}

blockquote > :last-child {
    margin-bottom: 0
}

blockquote * {
    color: #666
}

blockquote h2 em, blockquote h3 em, blockquote h4 em, blockquote h5 em, blockquote h6 em {
    background-color: #666;
    color: #eee
}

.dark-mode blockquote * {
    color: #ccc
}

.dark-mode blockquote h2 em, .dark-mode blockquote h3 em, .dark-mode blockquote h4 em, .dark-mode blockquote h5 em, .dark-mode blockquote h6 em {
    background-color: #ccc;
    color: #eee
}

blockquote p {
    font-size: 2em;
    line-height: 1.25em;
    margin-bottom: .5em;
    font-style: italic;
    color: #333
}

.dark-mode blockquote p {
    color: #fff
}

blockquote cite {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    font-style: normal;
    margin-top: 1em
}

    blockquote cite span {
        font-weight: 400;
        font-family: 'Work Sans',sans-serif
    }

@media all and (min-width:640px) {
    blockquote:not(.right) {
        padding: 4em 8em
    }
}

@media all and (min-width:720px) {
    blockquote:not(.left):not(.right) {
        margin-right: 0
    }

    .id-content-bottom.container > blockquote.right {
        margin: 0 0 0 1em;
        float: right;
        max-width: calc((100% - 2em)/ 3);
        width: 100%
    }

    blockquote.right h2 {
        font-size: 3em
    }

    blockquote.right h3 {
        font-size: 2.4em
    }

    blockquote.right h4 {
        font-size: 2em
    }

    blockquote.right h5 {
        font-size: 1.6em
    }

    blockquote.right h6 {
        font-size: 1.6em
    }

    blockquote.right p {
        font-size: 1.6em
    }
}

.datetime {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 2em;
    line-height: 1em;
    padding: 0;
    margin: 2em 0;
    background-color: #287cb3;
    color: #fff
}

    .datetime span {
        margin: 1em 0;
        display: inline-block
    }

.dark-mode .datetime {
    background-color: #143e59
}

.datetime .dayofweek::after {
    content: ','
}

.datetime .dayofweek, .datetime .year {
    font-family: 'Work Sans';
    font-weight: 400;
    font-size: 1em
}

@media all and (min-width:720px) {
    .datetime span {
        display: block;
        margin: 0
    }

    .datetime .dayofweek {
        margin-top: 1em
    }

    .datetime .year {
        margin-bottom: 1em
    }

    .datetime .month {
        position: relative;
        top: -.25em
    }
}

@media all and (min-width:720px) {
    .id-content-bottom > .datetime {
        margin: 0 0 0 1em;
        float: right;
        max-width: calc((100% - 2em)/ 3);
        width: 100%;
        padding: 0
    }

        .id-content-bottom > .datetime + * {
            margin-top: 0
        }

    .datetime .day, .datetime .month {
        font-size: 2em;
        line-height: 1.25em
    }

    .datetime .dayofweek::after {
        content: none
    }
}

.datetime .warning {
    background-color: #fff;
    font-size: .5em;
    padding: 2em 2em 2em 8em;
    border: .1em solid #287cb3;
    position: relative
}

.dark-mode .datetime .warning {
    background-color: #333;
    border: .1em solid #143e59
}

.datetime .warning::before {
    content: '\f071';
    font-family: FontAwesome;
    font-weight: 300;
    font-size: 4em;
    display: block;
    width: 100%;
    height: auto;
    height: 1em;
    width: 1em;
    line-height: 1em;
    text-align: center;
    margin: 0 auto;
    color: #287cb3;
    position: absolute;
    top: .5em;
    left: .5em
}

.dark-mode .datetime .warning::before {
    color: #fff
}

.datetime .warning p {
    color: #287cb3;
    font-size: 1.6em;
    text-align: left;
    margin: 0
}

.dark-mode .datetime .warning p {
    color: #fff
}

.datetime .warning p em {
    background-color: #287cb3;
    color: #fff;
    font-style: normal;
    display: inline-block;
    padding: 0 .25em
}

.dark-mode .datetime .warning p em {
    background-color: #fff;
    color: #333
}

@media all and (min-width:720px) {
    .datetime .warning {
        padding: 2em
    }

        .datetime .warning::before {
            position: static;
            top: auto;
            left: auto;
            margin-bottom: .25em
        }

        .datetime .warning p {
            text-align: center
        }
}

a {
    color: #2570a2
}

    a:active, a:focus, a:hover {
        color: #fff;
        background-color: #2570a2
    }

.dark-mode a {
    color: #f4a425
}

    .dark-mode a:active, .dark-mode a:focus, .dark-mode a:hover {
        color: #333;
        background-color: #f4a425
    }

a:not([href]), a:not([href]):active, a:not([href]):focus, a:not([href]):hover {
    color: inherit;
    background-color: inherit
}

.doc span, .external span {
    color: #666;
    margin-left: .5em;
    display: inline-block;
    font-weight: 400;
    font-size: .9em
}

.dark-mode .doc span, .dark-mode .external span {
    color: #aaa
}

.btn.doc span, .btn.external span {
    color: #fff;
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: .9em
}

.doc::before, .email::before, .external::before {
    content: '\f15b';
    display: inline-block;
    font-family: FontAwesome;
    font-weight: 300;
    font-size: 1em;
    background-color: #666;
    margin-right: .313em;
    color: #fff;
    font-size: .625em;
    padding: .3em;
    text-align: center;
    text-decoration: none;
    padding: .25em;
    width: 1em;
    vertical-align: text-bottom
}

.email::before {
    content: '\f0e0'
}

.external::before {
    content: '\f08e'
}

.doc.excel::before {
    content: '\f1c3';
    background-color: #05733a
}

.doc.csv::before {
    content: '\f1c3';
    background-color: #05733a
}

.doc.powerpoint::before {
    content: '\f1c4';
    background-color: #dc5a25
}

.doc.word::before {
    content: '\f1c2';
    background-color: #2472b9
}

.doc.pdf::before {
    content: '\f1c1';
    background-color: #e94b39
}

.doc.ics::before {
    content: '\f271'
}

.doc span::before {
    content: '['
}

.doc.excel span::before, .doc.ics span::before, .doc.pdf span::before, .doc.powerpoint span::before, .doc.word span::before {
    margin-right: .313em
}

.doc.excel span::before {
    content: '[Excel - '
}

.doc.csv span::before {
    content: '[CSV - '
}

.doc.powerpoint span::before {
    content: '[Powerpoint - '
}

.doc.word span::before {
    content: '[Word - '
}

.doc.pdf span::before {
    content: '[PDF - '
}

.doc.ics span::before {
    content: '[ICS - '
}

.doc span::after {
    content: ']'
}

.unavailable {
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none
}

    .unavailable, .unavailable span {
        text-decoration: line-through !important
    }

        .doc.unavailable span::before, .email.unavailable span::before, .external.unavailable span::before, .unavailable span::before {
            content: '[Unavailable - ' !important
        }

.doc:focus span, .doc:hover span, .external:focus span, .external:hover span {
    color: #fff
}

.dark-mode .doc:focus span, .dark-mode .doc:hover span, .dark-mode .external:focus span, .dark-mode .external:hover span {
    color: #333
}

.doc:focus::before, .doc:hover::before, .email:focus::before, .email:hover::before, .external:focus::before, .external:hover::before {
    background-color: transparent
}

.dark-mode .doc:focus::before, .dark-mode .doc:hover::before, .dark-mode .email:focus::before, .dark-mode .email:hover::before, .dark-mode .external:focus::before, .dark-mode .external:hover::before {
    color: #333
}

.linklist {
    margin: 4em 0
}

.id-content-bottom.container > .linklist.expand, .id-content-bottom.container > section .linklist.expand {
    margin-right: 0
}

.linklist .btn {
    font-size: 1em
}

.linklist a {
    font-weight: 400
}

.linklist h1, .linklist h2, .newslist h1, .newslist h2, .resultssummary h1, .resultssummary h2, .vacancylist h1, .vacancylist h2 {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    text-align: left;
    padding: 1.25em 1.25em 1.25em 3.125em;
    border: 1px solid #ccc;
    position: relative;
    margin: 0;
    background-color: #eee
}

.dark-mode .linklist h1, .dark-mode .linklist h2, .dark-mode .newslist h1, .dark-mode .newslist h2, .dark-mode .resultssummary h1, .dark-mode .resultssummary h2, .dark-mode .vacancylist h1, .dark-mode .vacancylist h2 {
    background-color: #111
}

.linklist h1::before, .linklist h2::before, .newslist h1::before, .newslist h2::before, .resultssummary h1::before, .resultssummary h2::before, .vacancylist h1::before, .vacancylist h2::before {
    content: '\f03a';
    font-family: FontAwesome;
    font-weight: 300;
    display: block;
    overflow: visible;
    position: absolute;
    top: 1.25em;
    left: 1.25em
}

.newslist h1::before, .newslist h2::before {
    content: '\f1ea'
}

.resultssummary h1::before, .resultssummary h2::before {
    content: '\f002'
}

.linklist h1 em, .linklist h2 em, .newslist h1 em, .newslist h2 em, .resultssummary h1 em, .resultssummary h2 em, .vacancylist h1 em, .vacancylist h2 em {
    color: #eee;
    background-color: #333
}

.dark-mode .linklist h1 em, .dark-mode .linklist h2 em, .dark-mode .newslist h1 em, .dark-mode .newslist h2 em, .dark-mode .resultssummary h1 em, .dark-mode .resultssummary h2 em, .dark-mode .vacancylist h1 em, .dark-mode .vacancylist h2 em {
    background-color: #fff;
    color: #111
}

.resultssummary h1 span, .resultssummary h2 span {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400
}

    .resultssummary h2 span::before {
        content: '['
    }

    .resultssummary h2 span::after {
        content: ']'
    }

.linklist li, .linklist ul {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none
}

.linklist ul {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.linklist h1 + ul, .linklist h2 + ul {
    border-top: none
}

.linklist li {
    font-size: 1.6em;
    padding: 1.25em;
    border-bottom: 1px solid #ccc
}

.id-content-bottom .linklist ul li::before {
    content: none
}

.linklist .dayofweek {
    display: none
}

.linklist .description {
    color: #333;
    text-decoration: none
}

.newslist {
    margin: 4em 0
}

    .newslist h2 + .pagination, .resultssummary + .pagination {
        margin-top: 0;
        border-top: none
    }

    .newslist .item {
        padding: 2em;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc
    }

        .newslist .item:first-child {
            border: 1px solid #ccc
        }

        .newslist .item a {
            text-decoration: none
        }

        .newslist .item time {
            font-family: 'Work Sans',sans-serif;
            font-weight: 400;
            display: block;
            font-size: 1.6em;
            color: #333;
            margin: 0;
            float: left;
            margin-bottom: .625em
        }

.dark-mode .newslist .item time {
    color: #fff
}

.newslist .item a > span {
    text-decoration: underline;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    clear: both;
    float: left
}

.newslist .item a:active > span, .newslist .item a:focus > span, .newslist .item a:hover > span {
    background-color: #287cb3;
    color: #fff
}

.dark-mode .newslist .item a:active > span, .dark-mode .newslist .item a:focus > span, .dark-mode .newslist .item a:hover > span {
    background-color: #f4a425;
    color: #333
}

@media all and (min-width:720px) {
    .newslist .item a > span {
        font-size: 1.8em
    }
}

@media all and (min-width:960px) {
    .newslist .item a > span {
        font-size: 2em
    }
}

#home-template h1, .details dt, .hidden, .id-mainlogo, .id-skipheader a:not(:focus):not(:active), .screenreader, legend.icmhide span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.id-skipheader, .id-skipnavigation {
    position: fixed;
    top: 2em;
    left: 2em;
    z-index: 100
}

    .id-categories .id-skipnavigation a, .id-skipheader a {
        display: block;
        padding: 1.25em;
        color: #fff;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        text-decoration: none;
        font-size: 1.6em;
        line-height: 1.25em;
        float: left;
        background-color: #000;
        border-radius: .313em
    }

        .id-categories .id-skipnavigation a:active, .id-categories .id-skipnavigation a:focus, .id-categories .id-skipnavigation a:hover, .id-skipheader a:active, .id-skipheader a:focus, .id-skipheader a:hover {
            color: #fff;
            position: static
        }

.dark-mode .id-categories .id-skipnavigation a, .dark-mode .id-skipheader a {
    background-color: #fff;
    color: #000
}

.id-categories .id-skipnavigation a::after, .id-skipheader a::after {
    font-family: FontAwesome;
    font-weight: 300;
    content: '\f138';
    margin-left: .625em
}

.id-skipnavigation a:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

button {
    cursor: pointer;
    cursor: hand
}

    button::-moz-focus-inner {
        border: 0
    }

.btn, .icmbutton input[type=button], .icmbutton input[type=submit] {
    display: inline-block;
    overflow: hidden;
    border: .063em solid transparent;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: .5em 1.25em;
    margin: 0 .125em .125em 0;
    background-color: #287cb3;
    color: #fff;
    transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    border-radius: .313em;
    box-shadow: .125em .125em 0 rgba(0,0,0,.1);
    text-decoration: none
}

.icmbutton input[type=button], .icmbutton input[type=submit] {
    cursor: pointer;
    cursor: hand
}

    .btn:focus, .btn:hover, .icmbutton input[type=button]:focus, .icmbutton input[type=button]:hover, .icmbutton input[type=submit]:focus, .icmbutton input[type=submit]:hover {
        color: #fff;
        background-color: #143e59;
        border-color: #143e59;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1)
    }

.dark-mode .btn, .dark-mode .icmbutton input[type=button], .dark-mode .icmbutton input[type=submit] {
    color: #fff;
    background-color: #143e59;
    border-color: #143e59
}

    .dark-mode .btn:focus, .dark-mode .btn:hover, .dark-mode .icmbutton input[type=button]:focus, .dark-mode .icmbutton input[type=button]:hover, .dark-mode .icmbutton input[type=submit]:focus, .dark-mode .icmbutton input[type=submit]:hover {
        color: #fff;
        background-color: #287cb3;
        border-color: #287cb3
    }

.btn.minor, .icmbutton input[type=button].minor, .icmbutton input[type=submit].minor {
    background-color: #eee;
    border-color: #ddd;
    color: #666
}

    .btn.minor:focus, .btn.minor:hover, .icmbutton input[type=button].minor:focus, .icmbutton input[type=button].minor:hover, .icmbutton input[type=submit].minor:focus, .icmbutton input[type=submit].minor:hover {
        background-color: #ddd;
        border-color: #999;
        color: #333
    }

.dark-mode .btn.minor, .dark-mode .icmbutton input[type=button].minor, .dark-mode .icmbutton input[type=submit].minor {
    background-color: #111;
    border-color: #666;
    color: #fff
}

    .dark-mode .btn.minor:focus, .dark-mode .btn.minor:hover, .dark-mode .icmbutton input[type=button].minor:focus, .dark-mode .icmbutton input[type=button].minor:hover, .dark-mode .icmbutton input[type=submit].minor:focus, .dark-mode .icmbutton input[type=submit].minor:hover {
        background-color: #666;
        border-color: #eee;
        color: #fff
    }

.btn:active, .icmbutton input[type=button]:active, .icmbutton input[type=submit]:active {
    transform: translate(.125em,.125em);
    box-shadow: none
}

.btn.large {
    font-size: 2em;
    line-height: 1.5em;
    padding: .4em 1em;
    margin: 0 .1em .1em 0;
    border-radius: .25em;
    border-width: .05em;
    box-shadow: .1em .1em 0 rgba(0,0,0,.1)
}

    .btn.large:active {
        transform: translate(.1em,.1em);
        box-shadow: none
    }

p .btn {
    font-size: 1rem
}

    p .btn.large {
        font-size: 1.25rem
    }

.buttons {
    margin: 4em 0
}

.id-content-bottom.container > .buttons {
    margin-right: 0
}

.buttons > .btn {
    display: block;
    margin-top: .625em
}

    .buttons > .btn.large {
        margin-top: .5em
    }

    .buttons > .btn:first-child {
        margin-top: 0
    }

@media all and (min-width:720px) {
    .buttons > .btn {
        display: block;
        float: left;
        margin-top: 0;
        margin-left: .625em
    }

        .buttons > .btn.large {
            margin-top: 0;
            margin-left: .5em
        }

        .buttons > .btn:first-child {
            margin-top: 0;
            margin-left: 0
        }
}

.buttons li, .buttons ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.highlight ul.buttons, ul.buttons {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin-left: 0;
    font-size: 1em
}

.buttons li, .highlight .buttons li {
    font-size: 1em
}

    .buttons li .btn {
        display: block;
        float: none
    }

.buttons li {
    margin-top: 1em
}

    .buttons li:first-child {
        margin-top: 0
    }

@media all and (min-width:720px) {
    .buttons li {
        float: left;
        margin-top: 0;
        margin-left: 1em
    }

        .buttons li:first-child {
            margin-top: 0;
            margin-left: 0
        }
}

a.btn {
    text-decoration: none
}

.btn.facebook {
    border-color: #3c5a98;
    background-color: #3c5a98
}

    .btn.facebook:active, .btn.facebook:focus, .btn.facebook:hover {
        border-color: #1d2c4c;
        background-color: #1d2c4c
    }

.dark-mode .btn.facebook {
    border-color: #1d2c4c;
    background-color: #1d2c4c
}

    .dark-mode .btn.facebook:active, .dark-mode .btn.facebook:focus, .dark-mode .btn.facebook:hover {
        border-color: #3c5a98;
        background-color: #3c5a98
    }

.btn.twitter {
    border-color: #287cb3;
    background-color: #287cb3
}

    .btn.twitter:active, .btn.twitter:focus, .btn.twitter:hover {
        border-color: #143e59;
        background-color: #143e59
    }

.dark-mode .btn.twitter {
    border-color: #143e59;
    background-color: #143e59
}

    .dark-mode .btn.twitter:active, .dark-mode .btn.twitter:focus, .dark-mode .btn.twitter:hover {
        border-color: #287cb3;
        background-color: #287cb3
    }

.btn.doc::before, .btn.email::before, .btn.external::before {
    padding: 0;
    font-size: 1em
}

.btn::after, .btn::before {
    transition: color .25s ease-out,background-color .25s ease-out;
    position: static
}

.btn.browserview::before, .btn.doc::before, .btn.email::before, .btn.external::before, .btn.facebook::before, .btn.listview::before, .btn.loading::after, .btn.pdf::before, .btn.print::before, .btn.twitter::before, .icmbutton.loading::after {
    content: '\f15b';
    font-family: FontAwesome;
    font-weight: 300;
    height: auto;
    width: auto;
    margin-right: .313em;
    background: 0 0 !important;
    padding: 0;
    line-height: normal
}

.btn.facebook::before, .btn.twitter::before {
    font-family: 'FontAwesome Brands';
    font-weight: 400
}

.btn.facebook::before {
    content: '\f09a'
}

.btn.twitter::before {
    content: '\f099'
}

.btn.email::before {
    content: '\f0e0'
}

.btn.print::before {
    content: '\f02f'
}

.btn.listview::before {
    content: '\f07d'
}

.btn.browserview::before {
    content: '\f07e'
}

.btn.external::before {
    content: '\f08e'
}

.btn.doc::before {
    content: '\f15b'
}

.btn.doc.pdf::before {
    content: '\f1c1'
}

.btn.doc.powerpoint::before {
    content: '\f1c4'
}

.btn.doc.excel::before {
    content: '\f1c3'
}

.btn.doc.word::before {
    content: '\f1c2'
}

.btn.loading {
    position: static
}

    .btn.loading::after, .icmbutton.loading::after {
        content: '\f013';
        animation: spin 2s linear infinite;
        margin: 0 0 0 .313em;
        display: inline-block;
        font-size: .75em
    }

.icmbutton.loading {
    position: relative;
    padding-right: 2.25em
}

    .icmbutton.loading::after {
        display: block;
        float: left;
        color: #666;
        clear: none;
        font-size: 2em;
        height: 2em;
        width: 1em;
        margin: 0 0 0 .25em;
        line-height: 2em;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0
    }

.btn.disabled, .icmbutton input.disabled, .icmbutton input[disabled] {
    pointer-events: none;
    opacity: .25;
    cursor: not-allowed;
    -moz-user-select: none;
    -webkit-user-select: none
}

    .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover, .icmbutton input.disabled:active, .icmbutton input.disabled:focus, .icmbutton input.disabled:hover, .icmbutton input[disabled]:active, .icmbutton input[disabled]:focus, .icmbutton input[disabled]:hover {
        background-color: #287cb3
    }

.dark-mode .btn.disabled:active, .dark-mode .btn.disabled:focus, .dark-mode .btn.disabled:hover, .dark-mode .icmbutton input.disabled:active, .dark-mode .icmbutton input.disabled:focus, .dark-mode .icmbutton input.disabled:hover, .dark-mode .icmbutton input[disabled]:active, .dark-mode .icmbutton input[disabled]:focus, .dark-mode .icmbutton input[disabled]:hover {
    background-color: #143e59
}

.icmbutton-surround.reset .icmbutton input {
    color: #666;
    background-color: #ccc
}

    .icmbutton-surround.reset .icmbutton input:active, .icmbutton-surround.reset .icmbutton input:focus, .icmbutton-surround.reset .icmbutton input:hover {
        background-color: #bbb
    }

.linklist li .btn {
    display: block;
    float: left
}

.dark-mode .btn.doc:active span, .dark-mode .btn.doc:focus span, .dark-mode .btn.doc:hover span, .dark-mode .btn.external:active span, .dark-mode .btn.external:focus span, .dark-mode .btn.external:hover span {
    color: #fff
}

.dark-mode .btn.doc:active::before, .dark-mode .btn.doc:focus::before, .dark-mode .btn.doc:hover::before, .dark-mode .btn.external:active::before, .dark-mode .btn.external:focus::before, .dark-mode .btn.external:hover::before {
    color: #fff
}

.block-btns, .block-btns > li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.block-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .block-btns > li {
        width: 100%
    }

        .block-btns > li:not(:first-child) {
            margin-top: 1em
        }

        .block-btns > li a {
            display: block;
            border-radius: .5em;
            border: .1em solid transparent;
            margin: 0 .2em .2em 0;
            box-shadow: .2em .2em 0 rgba(0,0,0,.2);
            padding: 2em;
            background-color: #287cb3;
            cursor: pointer;
            cursor: hand;
            transition: background-color .25s ease-out;
            text-decoration: none;
            position: relative
        }

            .block-btns > li a:focus, .block-btns > li a:hover {
                background-color: #143e59
            }

.dark-mode .block-btns > li a {
    background-color: #143e59
}

    .dark-mode .block-btns > li a:focus, .dark-mode .block-btns > li a:hover {
        background-color: #287cb3
    }

.block-btns > li a:focus {
    transform: translate(.2em,.2em);
    box-shadow: none
}

.block-btns > li a::before, .highlight.information .block-btns > li a::before {
    font-family: FontAwesome;
    font-weight: 300;
    content: '\f138';
    position: absolute;
    font-size: 2em;
    top: 1em;
    right: 1em;
    line-height: 1em;
    color: #fff;
    background-color: transparent
}

.highlight .block-btns > li li {
    font-size: 1.6em
}

.block-btns > li a * {
    color: #fff;
    text-decoration: none
}

.block-btns li a > :first-child {
    margin-top: 0
}

.block-btns li a > :last-child {
    margin-bottom: 0
}

.block-btns > li h3, .block-btns > li h4 {
    font-size: 2em
}

.block-btns > li li, .block-btns > li p {
    font-size: 1.6em
}

.highlight.information .block-btns a {
    border: .1em solid #fff;
    background-color: transparent
}

    .highlight.information .block-btns a:focus, .highlight.information .block-btns a:hover {
        background-color: #fff
    }

        .highlight.information .block-btns a:focus *, .highlight.information .block-btns a:hover *, .highlight.information .block-btns > li a:focus::before, .highlight.information .block-btns > li a:hover::before {
            color: #287cb3
        }

.dark-mode .highlight.information .block-btns a:focus *, .dark-mode .highlight.information .block-btns a:hover *, .dark-mode .highlight.information .block-btns > li a:focus::before, .dark-mode .highlight.information .block-btns > li a:hover::before {
    color: #143e59
}

.id-header > .container > a {
    display: block;
    overflow: hidden;
    width: 294px;
    height: 81px;
    background-image: url('/assets/images/stc-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 4em auto;
    position: relative
}

.dark-mode .id-header > .container > a {
    background-image: url('/assets/images/stc-logo-white.svg')
}

.id-header > .container > a:active, .id-header > .container > a:focus, .id-header > .container > a:hover {
    background-color: transparent
}

.id-header > .container > a::after {
    content: '\f138';
    font-family: FontAwesome;
    font-weight: 300;
    color: #2d862d;
    font-size: 2em;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity .25s ease-out
}

.id-header > .container > a:active::after, .id-header > .container > a:focus::after, .id-header > .container > a:hover::after {
    opacity: 1
}

.id-header li, .id-header ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-myaccount {
    margin: 2em 0
}

    .id-myaccount .btn {
        width: 100%
    }

@media all and (min-width:960px) {
    .id-header > .container {
        display: flex;
        justify-content: space-between
    }

        .id-header > .container > a {
            margin: 4em 0
        }

    .id-myaccount {
        margin-top: 6em
    }

    .id-header form {
        margin-top: 6em
    }
}

.id-header .field, .id-searchbar .field {
    width: calc(100% - 14em);
    float: left
}

    .id-header .field input, .id-searchbar .field input {
        width: 100%
    }

.id-header .submitfield, .id-searchbar .submitfield {
    float: right;
    width: 13em;
    padding-right: .2em
}

.id-header .btn.submit, .id-searchbar .btn.submit {
    width: 100%
}

.id-header .btn.submit, .id-searchbar .btn.submit {
    font-family: Montserrat,sans-serif;
    font-weight: 700
}

.id-toolbar {
    background-color: #eee;
    border-bottom: 1px solid #e5e5e5;
    padding: 1em 0
}

.dark-mode .id-toolbar {
    background-color: #111
}

.id-toolbar li, .id-toolbar ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-toolbar ul {
    display: flex;
    justify-content: center
}

.id-toolbar li {
    margin-left: 1em
}

    .id-toolbar li:first-child {
        margin: 0
    }

.id-toolbar button {
    font-size: 1em;
    display: block;
    overflow: visible;
    width: 4em;
    height: 4em;
    border: none;
    outline: 0;
    text-indent: 4em;
    padding: 0;
    background: 0 0;
    cursor: pointer;
    cursor: hand
}

    .id-toolbar button::before {
        content: '';
        font-size: 2em;
        line-height: 1.8em;
        height: 1.8em;
        width: 1.8em;
        background-color: #eee;
        display: block;
        overflow: hidden;
        text-align: center;
        font-family: FontAwesome;
        font-weight: 300;
        text-indent: 0;
        border-radius: .25em;
        margin: 0 .1em .1em 0;
        border: 1px solid #ddd;
        color: #666;
        box-shadow: .1em .1em 0 rgba(0,0,0,.1);
        transition: background-color .25s ease-out,border-color .25s ease-out,color .25s ease-out
    }

.id-toolbar .home::before {
    content: '\f015'
}

.id-toolbar .search::before {
    content: '\f002'
}

.id-toolbar .darkmode::before {
    content: '\f186'
}

.dark-mode .id-toolbar .darkmode::before {
    content: '\f892'
}

.id-toolbar button:focus::before, .id-toolbar button:hover::before {
    background-color: #ddd;
    border-color: #999;
    color: #333
}

.id-toolbar button:active::before {
    transform: translate(.1em,.1em);
    box-shadow: none
}

.dark-mode .id-toolbar button::before {
    background-color: #333;
    border-color: #666;
    color: #fff
}

.dark-mode .id-toolbar button:focus::before, .dark-mode .id-toolbar button:hover::before {
    background-color: #666;
    border-color: #eee;
    color: #fff
}

.id-searchbar {
    display: none
}

    .id-searchbar.open {
        display: block;
        opacity: 0;
        animation: fadein .25s linear forwards
    }

    .id-searchbar form {
        margin: 2em 0
    }

@media all and (min-width:640px) {
    .id-toolbar {
        padding: 2em 0
    }

        .id-toolbar .search {
            display: none
        }

        .id-toolbar ul {
            float: left
        }

        .id-toolbar li:nth-child(2) {
            margin: 0
        }

    .id-searchbar {
        display: block !important;
        float: right
    }

        .id-searchbar form {
            margin: 0
        }
}

.id-footer li, .id-footer ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-footer .btn {
    display: block
}

.id-buttons {
    border-top: 1px solid #e5e5e5;
    background-color: #eee;
    border-bottom: 1px solid #e5e5e5
}

.dark-mode .id-buttons {
    background-color: #111
}

.id-buttons .container {
    padding: 4em 0
}

.id-btns .btn {
    text-align: center
}

.id-btns li {
    margin-top: 1em
}

    .id-btns li:first-child {
        margin-top: 0
    }

.id-sentence {
    padding: 4em 0
}

    .id-sentence p {
        margin: 0
    }

ul.id-socialmedia {
    margin-bottom: 2em;
    margin-top: 2em;
    display: flex;
    flex-wrap: none;
    justify-content: center
}

.id-socialmedia li {
    margin-left: 1em
}

    .id-socialmedia li:first-child {
        margin-left: 0
    }

.dark-mode .id-socialmedia a, .id-socialmedia a {
    display: block;
    overflow: hidden;
    font-size: 1em;
    height: 5.8em;
    width: 5.8em;
    border-radius: .5em;
    white-space: nowrap;
    background-color: #ccc;
    position: relative;
    text-indent: 100%;
    color: #fff;
    padding: 0;
    margin: 0 auto;
    transition: background-color .25s ease-out;
    text-decoration: none;
    margin: 0 .2em .2em 0;
    box-shadow: .2em .2em 0 rgba(0,0,0,.1)
}

    .id-socialmedia a:active {
        position: relative;
        top: .2em;
        left: .2em
    }

    .id-socialmedia a.twitter {
        background-color: #287cb3
    }

        .id-socialmedia a.twitter:active, .id-socialmedia a.twitter:focus, .id-socialmedia a.twitter:hover {
            background-color: #143e59
        }

    .dark-mode .id-socialmedia a.twitter {
        background-color: #143e59
    }

        .dark-mode .id-socialmedia a.twitter:active, .dark-mode .id-socialmedia a.twitter:focus, .dark-mode .id-socialmedia a.twitter:hover {
            background-color: #287cb3
        }

    .id-socialmedia a.facebook {
        background-color: #3c5a98
    }

        .id-socialmedia a.facebook:active, .id-socialmedia a.facebook:focus, .id-socialmedia a.facebook:hover {
            background-color: #1d2c4c
        }

    .dark-mode .id-socialmedia a.facebook {
        background-color: #1d2c4c
    }

        .dark-mode .id-socialmedia a.facebook:active, .dark-mode .id-socialmedia a.facebook:focus, .dark-mode .id-socialmedia a.facebook:hover {
            background-color: #3c5a98
        }

    .id-socialmedia a.pinterest {
        background-color: #cb2027
    }

        .id-socialmedia a.pinterest:active, .id-socialmedia a.pinterest:focus, .id-socialmedia a.pinterest:hover {
            background-color: #651013
        }

    .dark-mode .id-socialmedia a.pinterest {
        background-color: #651013
    }

        .dark-mode .id-socialmedia a.pinterest:active, .dark-mode .id-socialmedia a.pinterest:focus, .dark-mode .id-socialmedia a.pinterest:hover {
            background-color: #cb2027
        }

    .id-socialmedia a.youtube {
        background-color: #e00
    }

        .id-socialmedia a.youtube:active, .id-socialmedia a.youtube:focus, .id-socialmedia a.youtube:hover {
            background-color: #700
        }

    .dark-mode .id-socialmedia a.youtube {
        background-color: #700
    }

        .dark-mode .id-socialmedia a.youtube:active, .dark-mode .id-socialmedia a.youtube:focus, .dark-mode .id-socialmedia a.youtube:hover {
            background-color: #e00
        }

    .id-socialmedia a.instagram {
        background-color: purple
    }

        .id-socialmedia a.instagram:active, .id-socialmedia a.instagram:focus, .id-socialmedia a.instagram:hover {
            background-color: #400040
        }

    .dark-mode .id-socialmedia a.instagram {
        background-color: #400040
    }

        .dark-mode .id-socialmedia a.instagram:active, .dark-mode .id-socialmedia a.instagram:focus, .dark-mode .id-socialmedia a.instagram:hover {
            background-color: purple
        }

    .id-socialmedia a::after {
        content: '';
        font-family: 'FontAwesome Brands';
        font-weight: 400;
        text-align: center;
        overflow: hidden;
        font-size: 3em;
        position: absolute;
        top: 0;
        left: 0;
        height: 1.933em;
        width: 1.933em;
        line-height: 1.933em;
        margin: 0;
        text-indent: 0;
        display: block;
        overflow: hidden
    }

    .id-socialmedia a.twitter::after {
        content: '\f099'
    }

    .id-socialmedia a.facebook::after {
        content: '\f09a'
    }

    .id-socialmedia a.youtube::after {
        content: '\f167'
    }

    .id-socialmedia a.pinterest::after {
        content: '\f0d2'
    }

    .id-socialmedia a.instagram::after {
        content: '\f16d'
    }

@media all and (min-width:720px) {
    .id-buttons > .container > div {
        display: flex;
        justify-content: space-between
    }

    .id-btns {
        width: calc(100% - 36em)
    }

    ul.id-socialmedia {
        margin: 0
    }
}

@media all and (min-width:1080px) {
    ul.id-btns {
        margin-top: 1em
    }

        ul.id-btns li {
            margin-top: 0;
            margin-left: 1em;
            float: left
        }

            ul.id-btns li:first-child {
                margin-left: 0
            }
}

.id-sublinks {
    border-top: 1px solid #e5e5e5
}

    .id-sublinks ul {
        width: 90%;
        margin: 0 auto;
        padding: 4em 0 8em;
        max-width: 920px
    }

    .id-sublinks li {
        font-size: 1.6em;
        line-height: 1.875em
    }

        .id-sublinks li:first-child {
            width: 100%;
            margin-bottom: 1.25em
        }

.table {
    padding: 0;
    margin: 4em 0
}

.id-content-bottom.container > .table {
    margin-right: 0
}

.table table {
    margin: 0
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 4em auto
}

    table td p, table th p {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 1em
    }

    table td > ol, table td > ul, table th > ol, table th > ul {
        margin: .625em 0
    }

        table td > ol > li, table td > ul > li, table th > ol > li, table th > ul > li {
            font-size: 1em;
            margin: .625em 0
        }

    table td > :first-child, table th > :first-child {
        margin-top: 0
    }

    table td > :last-child, table th > :last-child {
        margin-bottom: 0
    }

.table.overflowing {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 0
}

    .table.overflowing .scrollpane {
        overflow-x: scroll;
        padding-top: 4em
    }

        .table.overflowing .scrollpane::before {
            content: '\f337';
            font-family: FontAwesome;
            font-weight: 300;
            font-size: 1.6em;
            line-height: 1.25em;
            padding: .625em;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
            background-color: #eee;
            border-bottom: 1px solid #ccc
        }

.dark-mode .table.overflowing .scrollpane::before {
    background-color: #222
}

.table.overflowing .scrollpane > div {
    border: 2em solid transparent;
    box-sizing: content-box
}

.table.overflowing::after, .table.overflowing::before {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.5em;
    background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.1))
}

.table.overflowing::before {
    left: 0;
    right: auto;
    background-image: linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0))
}

.dark-mode .table.overflowing::after {
    background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.8))
}

.dark-mode .table.overflowing::before {
    background-image: linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0))
}

table caption {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    text-align: left;
    padding: 1.25em 1.25em 1.25em 3.125em;
    border: 1px solid #ccc;
    border-bottom: 0;
    position: relative
}

    table caption::before {
        content: '\f05a';
        font-family: FontAwesome;
        font-weight: 300;
        display: block;
        overflow: visible;
        position: absolute;
        top: 1.25em;
        left: 1.25em
    }

table th {
    font-family: Montserrat,sans-serif;
    font-weight: 700
}

table [data-unit]::after {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: .8em;
    content: " (" attr(data-unit) ")";
    margin-left: .313em
}

table td, table th {
    border: 1px solid #ccc;
    text-align: left;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: .625em
}

    table td .btn, table th .btn {
        font-size: 1em;
        display: block;
        float: left
    }

table thead th {
    background-color: #444;
    color: #fff;
    border-color: #fff;
    border-top-color: #444;
    border-bottom-color: #444
}

table thead tr:not(:last-child) th {
    border-bottom-color: #fff
}

table thead tr th[rowspan] {
    border-bottom-color: #444
}

table thead tr:not(:first-child) th {
    border-top-color: #fff
}

table thead tr > th:first-child {
    border-left-color: #444
}

table thead th:last-child {
    border-right-color: #444
}

table tbody th {
    background-color: #eee
}

table tfoot td, table tfoot th {
    background-color: #666;
    color: #fff;
    border-color: #fff;
    border-bottom-color: #666;
    border-top-color: #666
}

    table tfoot td:first-child, table tfoot th:first-child {
        border-left-color: #666
    }

    table tfoot td:last-child, table tfoot th:last-child {
        border-right-color: #666
    }

table tfoot tr:first-child td, table tfoot tr:first-child th {
    border-top: none
}

.tablesorter-header {
    cursor: pointer
}

    .tablesorter-header.sorter-false {
        cursor: default
    }

.tablesorter-headerUnSorted div::after {
    content: '\f111';
    display: block;
    font-family: FontAwesome;
    font-weight: 300;
    float: right;
    color: #262a30
}

.tablesorter-headerUnSorted.sorter-false div::after {
    content: none
}

.tablesorter-headerDesc div::after {
    content: '\f13a';
    display: block;
    font-family: FontAwesome;
    font-weight: 300;
    float: right;
    color: #fff
}

.tablesorter-headerAsc div::after {
    content: '\f139';
    display: block;
    font-family: FontAwesome;
    font-weight: 300;
    float: right;
    color: #fff
}

@media all and (max-width:640px) {
    .table.list table, .table.list tbody, .table.list td, .table.list tfoot, .table.list th, .table.list thead, .table.list tr {
        display: block;
        overflow: hidden
    }

    .table.list caption {
        display: block;
        border-bottom: 1px solid #ccc
    }

    .table.list thead {
        display: none
    }

    .table.list tbody td, .table.list tbody th {
        border-bottom: 0
    }

    .table.list tbody tr td:last-child, .table.list tbody tr th:last-child {
        border-bottom: 5px solid #ccc
    }

    .table.list tbody td::before, .table.list tbody th::before, .table.list tfoot td::before, .table.list tfoot th::before {
        content: attr(data-heading);
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        font-size: .75em;
        margin-bottom: .417em;
        display: block
    }

    .table.list tfoot td, .table.list tfoot th {
        border-left-color: #666;
        border-right-color: #666;
        border-top: 1px solid #fff
    }

    .dark-mode .table.list tfoot td, .dark-mode .table.list tfoot th {
        border-top: 1px solid #333
    }

    .table.list tfoot td:first-child, .table.list tfoot th:first-child {
        border-top: none
    }

    .table.list tbody tr, .table.list tfoot tr {
        margin-top: 2em
    }
}

.dark-mode table thead th {
    background-color: #eee;
    color: #000;
    border-color: #333;
    border-bottom-color: #eee;
    border-top-color: #eee
}

    .dark-mode table thead th:first-child {
        border-left-color: #eee
    }

    .dark-mode table thead th:last-child {
        border-right-color: #eee
    }

.dark-mode table tbody th {
    background-color: #222
}

.dark-mode table tfoot td, .dark-mode table tfoot th {
    background-color: #666;
    color: #fff;
    border-color: #fff;
    border-bottom-color: #666;
    border-top-color: #666
}

    .dark-mode table tfoot td:first-child, .dark-mode table tfoot th:first-child {
        border-left-color: #666
    }

    .dark-mode table tfoot td:last-child, .dark-mode table tfoot th:last-child {
        border-right-color: #666
    }

.dark-mode table tfoot tr:first-child td, .dark-mode table tfoot tr:first-child th {
    border-top: none
}

.dark-mode table thead tr:not(:last-child) th {
    border-bottom-color: #333
}

.dark-mode table thead tr th[rowspan] {
    border-bottom-color: #eee
}

.dark-mode table thead tr:not(:first-child) th {
    border-top-color: #fff
}

.dark-mode table thead tr > th:first-child {
    border-left-color: #eee
}

.dark-mode .table.overflowing::after {
    background-image: linear-gradient(90deg,rgba(0,0,0,0),#000)
}

@media all and (min-width:640px) {
    .zebra tbody tr:nth-child(even) th {
        background-color: #ccc
    }

    .zebra tbody tr:nth-child(even) td {
        background-color: #eee
    }

    .dark-mode .zebra tbody tr:nth-child(even) th {
        background-color: #111
    }

    .dark-mode .zebra tbody tr:nth-child(even) td {
        background-color: #222
    }

    tbody tr.highlight th {
        background-color: #ccc
    }

    tbody tr.highlight td {
        background-color: #eee;
        font-family: Montserrat;
        font-weight: 700
    }

    .dark-mode tbody tr.highlight th {
        background-color: #111
    }

    .dark-mode tbody tr.highlight td {
        background-color: #222
    }
}

.footnote {
    padding: 1em;
    border: 1px solid #ccc;
    background-color: #eee
}

table + .footnote {
    border-top: none
}

.dark-mode .footnote {
    background-color: #111
}

.footnote p {
    font-size: 1.6em
}

.footnote > :first-child {
    margin-top: 0
}

.footnote > :last-child:not(.btn) {
    margin-bottom: 0
}

.id-alert, .id-content-bottom > .alert {
    background-color: #c00
}

.dark-mode .id-alert, .dark-mode .id-content-bottom > .alert {
    background-color: #600
}

.id-content-bottom > .alert {
    border: none;
    padding: 2em 2em 2em 9em;
    margin: 4em 0;
    position: relative
}

    .id-content-bottom > .alert::before {
        content: '\f071';
        color: #fff;
        font-family: FontAwesome;
        font-weight: 300;
        font-size: 4em;
        position: absolute;
        top: .5em;
        left: .5em
    }

.id-alert *, .id-content-bottom > .alert {
    color: #fff
}

.id-alert h2 {
    font-size: 2.4em
}

@media all and (min-width:640px) {
    .id-alert h2 {
        font-size: 3em
    }
}

@media all and (min-width:720px) {
    .id-alert h2 {
        font-size: 3.6em
    }
}

.id-alert .container {
    padding-top: 4em;
    padding-bottom: 4em
}

    .id-alert .container > :first-child, .id-alert .container > :first-child :first-child, .id-content-bottom > .alert > :first-child {
        margin-top: 0
    }

    .id-alert .container > :last-child, .id-alert .container > :last-child :last-child, .id-content-bottom > .alert > :last-child {
        margin-bottom: 0
    }

.id-alert a {
    color: #fff
}

    .id-alert a:focus, .id-alert a:hover {
        background-color: #fff;
        color: #c00
    }

.dark-mdoe .id-alert a:hover, .dark-mode .id-alert a:focus {
    background-color: #fff;
    color: #600
}

.id-alert ::-moz-selection, .id-alert ::selection {
    background-color: #fff;
    color: #c00
}

.dark-mode .id-alert ::-moz-selection, .dark-mode .id-alert ::selection {
    color: #600
}

.id-alert .btn {
    text-decoration: none;
    background-color: #c00;
    color: #fff;
    border-color: #fff
}

.dark-mode .id-alert .btn {
    background-color: #600
}

.id-alert .btn:focus, .id-alert .btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: #c00
}

.dark-mode .id-alert .btn:focus, .dark-mode .id-alert .btn:hover {
    color: #600
}

.id-alert .btn:focus::after, .id-alert .btn:focus::before, .id-alert .btn:hover::after, .id-alert .btn:hover::before {
    color: #c00
}

.dark-mode .id-alert .btn:focus::after, .dark-mode .id-alert .btn:focus::before, .dark-mode .id-alert .btn:hover::after, .dark-mode .id-alert .btn:hover::before {
    color: #600
}

@media all and (min-width:720px) {
    .id-alert .container > * {
        margin-right: calc(((100% - 1.25rem)/ 3) + .625rem)
    }
}

.id-alert .container > :first-child, .id-alert .container > :first-child > :first-child {
    margin-top: 0
}

.id-alert .container > :last-child, .id-alert .container > :last-child > :last-child {
    margin-bottom: 0
}

.highlight {
    padding: 2em;
    background-color: #eee;
    margin: 4em 0
}

.dark-mode .highlight {
    background-color: #111
}

.highlight > :first-child {
    margin-top: 0 !important
}

.highlight > :last-child {
    margin-bottom: 0 !important
}

.highlight .buttons {
    margin: 2em 0
}

.double > .highlight h2, .highlight.smaller h2, .quad > .highlight h2, .triple > .highlight h2 {
    font-size: 3em
}

.double > .highlight h3, .highlight.smaller h3, .quad > .highlight h3, .triple > .highlight h3 {
    font-size: 2.4em
}

.double > .highlight h4, .double > .highlight h5, .double > .highlight h6, .highlight.smaller h4, .highlight.smaller h5, .highlight.smaller h6, .quad > .highlight h4, .quad > .highlight h5, .quad > .highlight h6, .triple > .highlight h4, .triple > .highlight h5, .triple > .highlight h6 {
    font-size: 2em
}

.double > .highlight p, .highlight.smaller p, .quad > .highlight p, .triple > .highlight p {
    font-size: 1.6em
}

.double .highlight ol li, .double .highlight ul li, .highlight.smaller ol li, .highlight.smaller ul li, .quad .highlight ol li, .quad .highlight ul li, .triple .highlight ol li, .triple .highlight ul li {
    font-size: 1.6em
}

.highlight.success {
    background-color: #2d862d
}

.dark-mode .highlight.success {
    background-color: #164316
}

.highlight.failure {
    background-color: #c00
}

.dark-mode .highlight.failure {
    background-color: #600
}

.highlight.information {
    background-color: #287cb3
}

.dark-mode .highlight.information {
    background-color: #143e59
}

.highlight.failure a::before, .highlight.information a::before, .highlight.success a::before {
    background-color: #fff
}

.dark-mode .highlight.success a::before {
    color: #164316
}

.dark-mode .highlight.failure a::before {
    color: #600
}

.dark-mode .highlight.information a::before {
    color: #143e59
}

.highlight.failure a span, .highlight.information a span, .highlight.success a span {
    color: #fff
}

.highlight h2 em, .highlight h3 em, .highlight h4 em, .highlight h5 em, .highlight h6 em {
    color: #eee
}

.dark-mode .highlight h2 em, .dark-mode .highlight h3 em, .dark-mode .highlight h4 em, .dark-mode .highlight h5 em, .dark-mode .highlight h6 em {
    color: #111
}

.highlight.success h2 em, .highlight.success h3 em, .highlight.success h4 em, .highlight.success h5 em, .highlight.success h6 em {
    color: #2d862d;
    background-color: #fff
}

.dark-mode .highlight.success h2 em, .dark-mode .highlight.success h3 em, .dark-mode .highlight.success h4 em, .dark-mode .highlight.success h5 em, .dark-mode .highlight.success h6 em {
    color: #164316
}

.highlight.failure h2 em, .highlight.failure h3 em, .highlight.failure h4 em, .highlight.failure h5 em, .highlight.failure h6 em {
    color: #c00;
    background-color: #fff
}

.dark-mode .highlight.failure h2 em, .dark-mode .highlight.failure h3 em, .dark-mode .highlight.failure h4 em, .dark-mode .highlight.failure h5 em, .dark-mode .highlight.failure h6 em {
    color: #600
}

.highlight.information h2 em, .highlight.information h3 em, .highlight.information h4 em, .highlight.information h5 em, .highlight.information h6 em {
    color: #287cb3;
    background-color: #fff
}

.dark-mode .highlight.information h2 em, .dark-mode .highlight.information h3 em, .dark-mode .highlight.information h4 em, .dark-mode .highlight.information h5 em, .dark-mode .highlight.information h6 em {
    color: #143e59
}

.highlight.minor:not(.filled) h2 em, .highlight.minor:not(.filled) h3 em, .highlight.minor:not(.filled) h4 em, .highlight.minor:not(.filled) h5 em, .highlight.minor:not(.filled) h6 em {
    color: #fff;
    background-color: #666
}

.dark-mode .highlight.minor:not(.filled) h2 em, .dark-mode .highlight.minor:not(.filled) h3 em, .dark-mode .highlight.minor:not(.filled) h4 em, .dark-mode .highlight.minor:not(.filled) h5 em, .dark-mode .highlight.minor:not(.filled) h6 em {
    color: #333;
    background-color: #aaa
}

.highlight.success a::before {
    color: #2d862d
}

.dark-mode .highlight.success a::before {
    color: #2d862d
}

.highlight.failure a::before {
    color: #c00
}

.dark-mode .highlight.information a::before {
    color: #600
}

.highlight.information a::before {
    color: #287cb3
}

.dark-mode .highlight.information a::before {
    color: #143e59
}

.highlight.failure *, .highlight.information *, .highlight.success * {
    color: #fff
}

.highlight.failure a, .highlight.information a, .highlight.success a {
    color: #fff
}

    .highlight.success a:focus, .highlight.success a:hover {
        background-color: #fff;
        color: #2d862d
    }

        .highlight.success a:focus span, .highlight.success a:hover span {
            color: #2d862d
        }

.dark-mode .highlight.success a:focus, .dark-mode .highlight.success a:focus span, .dark-mode .highlight.success a:hover, .dark-mode .highlight.success a:hover span {
    color: #164316
}

.highlight.failure a:focus, .highlight.failure a:hover {
    background-color: #fff;
    color: #c00
}

    .highlight.failure a:focus span, .highlight.failure a:hover span {
        color: #c00
    }

.dark-mode .highlight.failure a:focus, .dark-mode .highlight.failure a:focus span, .dark-mode .highlight.failure a:hover, .dark-mode .highlight.failure a:hover span {
    color: #600
}

.highlight.information a:active, .highlight.information a:focus, .highlight.information a:hover {
    background-color: #fff;
    color: #287cb3
}

    .highlight.information a:focus span, .highlight.information a:hover span {
        color: #287cb3
    }

.dark-mode .highlight.information a:focus, .dark-mode .highlight.information a:focus span, .dark-mode .highlight.information a:hover, .dark-mode .highlight.information a:hover span {
    color: #143e59
}

.highlight.success ::-moz-selection, .highlight.success ::selection {
    background-color: #fff;
    color: #2d862d
}

.dark-mode .highlight.success ::-moz-selection, .dark-mode .highlight.success ::selection {
    color: #164316
}

.highlight.failure ::-moz-selection, .highlight.failure ::selection {
    background-color: #fff;
    color: #c00
}

.dark-mode .highlight.failure ::-moz-selection, .dark-mode .highlight.failure ::selection {
    color: #600
}

.highlight.information ::-moz-selection, .highlight.information ::selection {
    background-color: #fff;
    color: #287cb3
}

.dark-mode .highlight.information ::-moz-selection, .dark-mode .highlight.information ::selection {
    color: #143e59
}

.dark-mode .highlight.success .btn, .highlight.success .btn {
    text-decoration: none;
    background-color: #2d862d;
    color: #fff;
    border-color: #fff
}

.dark-mode .highlight.success .btn {
    background-color: #164316
}

.dark-mode .highlight.failure .btn, .highlight.failure .btn {
    text-decoration: none;
    background-color: #c00;
    color: #fff;
    border-color: #fff
}

.dark-mode .highlight.failure .btn {
    background-color: #600
}

.dark-mode .highlight.information .btn, .highlight.information .btn {
    text-decoration: none;
    background-color: #287cb3;
    color: #fff;
    border-color: #fff
}

.dark-mode .highlight.information .btn {
    background-color: #143e59
}

    .dark-mode .highlight.failure .btn::after, .dark-mode .highlight.failure .btn::before, .dark-mode .highlight.information .btn::after, .dark-mode .highlight.information .btn::before, .dark-mode .highlight.success .btn::after, .dark-mode .highlight.success .btn::before, .highlight.failure .btn::after, .highlight.failure .btn::before, .highlight.information .btn::after, .highlight.information .btn::before, .highlight.success .btn::after, .highlight.success .btn::before {
        color: #fff
    }

.highlight.failure .btn:focus, .highlight.failure .btn:hover, .highlight.information .btn:focus, .highlight.information .btn:hover, .highlight.success .btn:focus, .highlight.success .btn:hover {
    background-color: #fff
}

.dark-mode .highlight.success .btn:focus, .dark-mode .highlight.success .btn:hover {
    color: #164316
}

.dark-mode .highlight.failure .btn:focus, .dark-mode .highlight.failure .btn:hover {
    color: #600
}

.dark-mode .highlight.information .btn:focus, .dark-mode .highlight.information .btn:hover {
    color: #143e59
}

.highlight.success .btn:focus::after, .highlight.success .btn:focus::before, .highlight.success .btn:hover::after, .highlight.success .btn:hover::before {
    color: #2d862d
}

.dark-mode .highlight.success .btn:focus::after, .dark-mode .highlight.success .btn:focus::before, .dark-mode .highlight.success .btn:hover::after, .dark-mode .highlight.success .btn:hover::before {
    color: #164316
}

.highlight.failure .btn:focus::after, .highlight.failure .btn:focus::before, .highlight.failure .btn:hover::after, .highlight.failure .btn:hover::before {
    color: #c00
}

.dark-mode .highlight.failure .btn:focus::after, .dark-mode .highlight.failure .btn:focus::before, .dark-mode .highlight.failure .btn:hover::after, .dark-mode .highlight.failure .btn:hover::before {
    color: #600
}

.highlight.information .btn:focus::after, .highlight.information .btn:focus::before, .highlight.information .btn:hover::after, .highlight.information .btn:hover::before {
    color: #287cb3
}

.dark-mode .highlight.information .btn:focus::after, .dark-mode .highlight.information .btn:focus::before, .dark-mode .highlight.information .btn:hover::after, .dark-mode .highlight.information .btn:hover::before {
    color: #143e59
}

.highlight.minor {
    background-color: transparent;
    border: 1px solid #ddd
}

    .highlight.minor.filled {
        background-color: #eee;
        border: none
    }

.dark-mode .highlight.minor {
    border-color: #666
}

    .dark-mode .highlight.minor.filled {
        background-color: #111
    }

.highlight.minor h2, .highlight.minor h3, .highlight.minor h4, .highlight.minor h5, .highlight.minor h6 {
    color: #666
}

.highlight.minor.filled h2, .highlight.minor.filled h3, .highlight.minor.filled h4, .highlight.minor.filled h5, .highlight.minor.filled h6 {
    color: #333
}

.dark-mode .highlight.minor h2, .dark-mode .highlight.minor h3, .dark-mode .highlight.minor h4, .dark-mode .highlight.minor h5, .dark-mode .highlight.minor h6 {
    color: #aaa
}

.dark-mode .highlight.minor.filled h2, .dark-mode .highlight.minor.filled h3, .dark-mode .highlight.minor.filled h4, .dark-mode .highlight.minor.filled h5, .dark-mode .highlight.minor.filled h6 {
    color: #fff
}

.highlight.minor:not(.filled) .btn {
    background-color: #eee;
    border-color: #ddd;
    color: #666
}

    .highlight.minor:not(.filled) .btn:focus, .highlight.minor:not(.filled) .btn:hover {
        background-color: #ddd;
        border-color: #999;
        color: #333
    }

.dark-mode .highlight.minor:not(.filled) .btn {
    background-color: #111;
    border-color: #666;
    color: #fff
}

.highlight.minor:not(.filled) .btn::after, .highlight.minor:not(.filled) .btn::before {
    color: #666
}

.dark-mode .highlight.minor:not(.filled) .btn::after, .dark-mode .highlight.minor:not(.filled) .btn::before {
    color: #fff
}

.dark-mode .highlight.minor:not(.filled) .btn:focus, .dark-mode .highlight.minor:not(.filled) .btn:hover {
    background-color: #666;
    border-color: #eee;
    color: #fff
}

.double, .quad, .triple {
    margin: 4em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.id-content-bottom > .quad, .id-content-bottom > .triple {
    margin-right: 0
}

.double > .highlight, .quad > .highlight, .triple > .highlight {
    margin: 1em 0 0 0;
    width: 100%
}

    .double > .highlight:first-child, .quad > .highlight:first-child, .triple > .highlight:first-child {
        margin-top: 0
    }

@media all and (min-width:640px) {
    .id-content-bottom > .double {
        margin-right: 0
    }

    .double > .highlight, .double > .highlight:first-child, .quad > .highlight, .quad > .highlight:first-child, .triple > .highlight, .triple > .highlight:first-child {
        margin-top: 1em;
        width: calc((100% - 1em)/ 2)
    }

        .double > .highlight:nth-child(-n+2), .quad > .highlight:nth-child(-n+2), .triple > .highlight:nth-child(-n+2) {
            margin-top: 0
        }

        .double > .highlight:last-child:nth-child(odd), .quad > .highlight:last-child:nth-child(odd), .triple > .highlight:last-child:nth-child(odd) {
            flex-grow: 1
        }
}

@media all and (min-width:960px) {
    .id-content-bottom > .double {
        margin-right: calc(((100% - 1.25rem)/ 3) + .625rem)
    }

        .id-content-bottom > .double.expand {
            margin-right: 0
        }

    .triple > .highlight, .triple > .highlight:first-child, .triple > .highlight:last-child:nth-child(odd) {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 2em)/ 3)
    }

        .triple > .highlight:nth-child(-n+3), .triple > .highlight:nth-child(-n+3):last-child {
            margin-top: 0
        }

        .triple > .highlight:nth-child(3n+1) {
            margin-left: 0
        }

        .triple > .highlight:last-child:nth-child(3n+1), .triple > .highlight:last-child:nth-child(3n+2) {
            flex-grow: 1
        }

    .quad > .highlight, .quad > .highlight:first-child, .quad > .highlight:last-child:nth-child(odd) {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 3em)/ 4)
    }

        .quad > .highlight:nth-child(-n+4), .quad > .highlight:nth-child(-n+4):last-child {
            margin-top: 0
        }

        .quad > .highlight:nth-child(4n+1) {
            margin-left: 0
        }

        .quad > .highlight:last-child:nth-child(4n+1), .quad > .highlight:last-child:nth-child(4n+2) {
            flex-grow: 1
        }
}

.highlight > h2:first-child::before, .highlight > h3:first-child::before {
    display: inline-block;
    font-family: FontAwesome;
    font-weight: 300;
    margin-right: .25em
}

.highlight.success > h2:first-child::before, .highlight.success > h3:first-child::before {
    content: '\f058'
}

.highlight.failure > h2:first-child::before, .highlight.failure > h3:first-child::before {
    content: '\f057'
}

.highlight.information > h2:first-child::before, .highlight.information > h3:first-child::before {
    content: '\f06a'
}

.highlight.question > h2:first-child::before, .highlight.question > h3:first-child::before {
    content: '\f059'
}

.highlight.warning > h2:first-child::before, .highlight.warning > h3:first-child::before {
    content: '\f071'
}

.highlight.leaf > h2:first-child::before, .highlight.leaf > h3:first-child::before {
    content: '\f06c'
}

.highlight.recycle > h2:first-child::before, .highlight.recycle > h3:first-child::before {
    content: '\f1b8'
}

.highlight.noicon > h2:first-child::before, .highlight.noicon > h3:first-child::before {
    content: none !important
}

.image {
    margin: 4em 0;
    display: flex;
    flex-direction: row;
    justify-content: center
}

    .image .caption {
        font-size: 1.4em;
        line-height: 1.7em;
        display: block;
        padding: .714em;
        background-color: #eee;
        color: #333
    }

    .image img {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto
    }

.dark-mode .image .caption {
    background-color: #111;
    color: #fff
}

@media all and (min-width:720px) {
    .image:not(.left) {
        margin-left: 0;
        margin-right: 0
    }

    .image.right {
        margin: 0 0 0 1em;
        float: right;
        max-width: calc((100% - 2em)/ 3)
    }
}

.gallery {
    margin: 4em 0
}

    .gallery .carousel {
        margin: 0
    }

        .gallery .carousel img {
            width: 100%
        }

        .gallery .carousel .items {
            display: flex;
            flex-wrap: wrap;
            justify-content: start
        }

            .gallery .carousel .items li {
                width: 100%;
                margin: 0
            }

    .gallery .caption {
        display: none
    }

    .gallery .carousel .items li::before {
        content: none
    }

    .gallery .carousel .items figure {
        position: relative;
        width: 100%;
        padding-bottom: 75%;
        background-color: #eee;
        cursor: pointer;
        cursor: hand
    }

    .gallery .carousel .items li:active figure img, .gallery .carousel .items li:focus figure img, .gallery .carousel .items li:hover figure img {
        transform: scale(1.1)
    }

    .gallery .carousel .items figure::after {
        content: '\f002';
        font-family: FontAwesome;
        font-weight: 300;
        font-size: 1.6em;
        position: absolute;
        top: 1.25em;
        right: 1.25em;
        color: #fff
    }

    .gallery .carousel .items figure img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1);
        transition: transform .25s ease-out
    }

@media all and (min-width:640px) {
    .gallery .carousel .items li {
        width: 50%
    }
}

@media all and (min-width:720px) {
    .gallery:not(.left):not(.right) {
        margin-right: 0
    }

    .gallery.right {
        margin: 0 0 0 1em;
        float: right;
        max-width: calc((100% - 2em)/ 3);
        width: 100%
    }

    .gallery:not(.right) .carousel .items li {
        width: calc(100% / 3)
    }
}

@media all and (min-width:960px) {
    .gallery:not(.left):not(.right) .carousel .items li {
        width: calc(100% / 5)
    }
}

.id-imageoverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    z-index: 300
}

    .id-imageoverlay * {
        pointer-events: none
    }

    .id-imageoverlay button {
        pointer-events: all
    }

    .id-imageoverlay .inner {
        height: 90vh;
        width: calc(100vw - 10vh);
        margin: 5vh;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative
    }

        .id-imageoverlay .inner img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%
        }

    .id-imageoverlay.hasvideo .inner {
        height: 80vh;
        width: calc(100vw - 20vh);
        margin: 10vh
    }

        .id-imageoverlay.hasvideo .inner iframe {
            display: block;
            overflow: hidden;
            height: 80vh;
            width: calc(100vw - 20vh);
            background: 0 0 !important
        }

    .id-imageoverlay .sbtn {
        display: block;
        overflow: hidden;
        position: fixed;
        top: 2em;
        right: 2em;
        background: 0 0;
        border: none;
        outline: 0;
        z-index: 11;
        cursor: pointer;
        cursor: hand
    }

    .id-imageoverlay .caption {
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 1em;
        line-height: 1em;
        padding: 2em;
        background-color: rgba(0,0,0,.5)
    }

    .id-imageoverlay .id-index {
        color: #fff;
        font-size: 1.6em;
        line-height: 1.25em;
        position: absolute;
        top: 1.25em;
        left: 1.25em
    }

    .id-imageoverlay .caption h3, .id-imageoverlay .caption p {
        text-align: center
    }

    .id-imageoverlay .caption h3 {
        font-size: 1.6em;
        line-height: 1.25em;
        margin: 0
    }

    .id-imageoverlay .caption p {
        font-size: 1.4em;
        line-height: 1.7em;
        margin: 0
    }

    .id-imageoverlay .caption em {
        display: block;
        font-size: .4em;
        line-height: 1em
    }

    .id-imageoverlay .caption span {
        display: block;
        font-family: 'Work Sans',sans-serif;
        font-weight: 400;
        font-size: .6em;
        margin-top: .5em
    }

    .id-imageoverlay .previous {
        top: 50%;
        transform: translateY(-50%);
        right: auto;
        left: 0
    }

    .id-imageoverlay .next {
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        left: auto
    }

    .id-imageoverlay .sbtn span {
        font-size: 1em;
        height: 4em;
        width: 4em;
        line-height: 4em;
        text-indent: 100%;
        white-space: nowrap;
        color: #fff;
        position: relative;
        display: block;
        overflow: hidden;
        transition: background-color .25s ease-out
    }

    .id-imageoverlay .sbtn:active span, .id-imageoverlay .sbtn:focus span, .id-imageoverlay .sbtn:hover span {
        background-color: rgba(255,255,255,.2)
    }

    .id-imageoverlay .sbtn span::before {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 3em;
        line-height: 1.333em;
        height: 1.333em;
        width: 1.333em;
        text-align: center;
        font-family: FontAwesome;
        font-weight: 300;
        display: block;
        overflow: hidden;
        text-indent: 0
    }

    .id-imageoverlay .close span::before {
        content: '\f00d'
    }

    .id-imageoverlay .previous span::before {
        content: '\f053'
    }

    .id-imageoverlay .next span::before {
        content: '\f054'
    }

.id-content-top.hasimage {
    background-color: #eee;
    margin-top: 2em;
    margin-bottom: 2em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 20em 2em 0
}

    .id-content-top.hasimage h1 {
        margin-bottom: 0;
        display: block;
        overflow: visible
    }

        .id-content-top.hasimage h1 span {
            display: block;
            float: left;
            background-color: #fff;
            padding: .4em;
            position: relative;
            left: -.4em
        }

@media all and (min-width:640px) {
    .id-content-top.hasimage {
        padding: 30em 2em 0
    }
}

@media all and (min-width:720px) {
    .id-content-top.hasimage {
        padding: 40em 4em 0
    }
}

@media all and (min-width:960px) {
    .id-content-top.hasimage {
        padding: 50em 4em 0;
        margin-bottom: 4em
    }

        .id-content-top.hasimage h1 {
            font-size: 5em;
            margin-bottom: 0
        }
}

.fadein {
    opacity: 0;
    animation: fadein .5s forwards
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.id-news li, .id-news ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-news {
    padding: 4em 0;
    border-top: 1px solid #e5e5e5
}

    .id-news ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: start
    }

    .id-news li {
        margin-top: 1em;
        width: 100%;
        display: flex;
        justify-content: start
    }

        .id-news li:first-child {
            margin-top: 0;
            width: 100%;
            position: relative
        }

            .id-news li:first-child a {
                display: block;
                clear: both;
                background-color: transparent;
                text-decoration: none
            }

    .id-news .btn {
        display: block;
        background-color: #eee;
        border-color: #ddd;
        color: #666;
        position: absolute;
        top: 0;
        right: 0;
        white-space: nowrap
    }

    .id-news li:first-child a:active, .id-news li:first-child a:focus, .id-news li:first-child a:hover {
        background-color: rgba(0,0,0,0);
        text-decoration: none
    }

    .id-news a h2 {
        margin-top: 0;
        float: left;
        color: #333;
        transition: color .25s ease-out
    }

    .id-news a:active h2, .id-news a:focus h2, .id-news a:hover h2 {
        color: #000
    }

.dark-mode .id-news a h2 {
    color: #fff
}

.id-news a:active .btn, .id-news a:focus .btn, .id-news a:hover .btn {
    background-color: #ddd;
    border-color: #999;
    color: #333
}

.dark-mode .id-news .btn {
    background-color: #111;
    border-color: #666;
    color: #fff
}

.dark-mode .id-news a:focus .btn, .dark-mode .id-news a:hover .btn {
    background-color: #666;
    border-color: #eee;
    color: #fff
}

.id-news a:active .btn {
    transform: translate(.125em,.125em);
    box-shadow: none
}

.id-news li:not(:first-child) a {
    flex-grow: 1;
    display: block;
    overflow: hidden;
    border: .1em solid #2d862d;
    font-size: 1em;
    line-height: 1em;
    padding: 1.9em 5em 1.9em 2em;
    margin: 0 .2em .2em 0;
    border-radius: .5em;
    box-shadow: .2em .2em 0 rgba(0,0,0,.1);
    background-color: #2d862d;
    color: #fff;
    transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    text-decoration: none;
    position: relative
}

    .id-news li:not(:first-child) a:active, .id-news li:not(:first-child) a:focus, .id-news li:not(:first-child) a:hover {
        background-color: #164316;
        border-color: #164316;
        color: #fff
    }

.dark-mode .id-news li:not(:first-child) a {
    background-color: #164316;
    border-color: #164316
}

    .dark-mode .id-news li:not(:first-child) a:active, .dark-mode .id-news li:not(:first-child) a:focus, .dark-mode .id-news li:not(:first-child) a:hover {
        background-color: #2d862d;
        border-color: #2d862d
    }

.id-news li:not(:first-child) a:active {
    transform: translate(.1em,.1em);
    box-shadow: none
}

.id-news li:not(:first-child) a::after {
    font-family: FontAwesome;
    font-weight: 300;
    content: '\f138';
    position: absolute;
    font-size: 1.6em;
    top: 1.25em;
    right: 1.25em;
    line-height: 1.25em;
    color: #fff
}

.id-news h3 {
    font-size: 2em;
    line-height: 1.2em;
    margin: 0 0 .5em 0
}

.id-news time {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.25em;
    margin: 0;
    display: block
}

@media all and (min-width:640px) {
    .id-news li, .id-news li:first-child {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 1em)/ 2)
    }

        .id-news li:nth-child(-n+3) {
            margin-top: 0
        }

        .id-news li:nth-child(1), .id-news li:nth-child(2n) {
            margin-left: 0
        }

    .id-news time {
        position: absolute;
        bottom: .714em;
        left: 1.429em
    }

    .id-news li:not(:first-child) a {
        padding: 1.9em 5em 5em 2em
    }
}

@media all and (-ms-high-contrast:active) and (-ms-high-contrast:none) and (min-width:640px) {
    .id-news li, .id-news li:first-child {
        width: calc((100% - 10px)/ 2)
    }
}

@media all and (min-width:960px) {
    .id-news li, .id-news li:nth-child(-n+3), .id-news li:nth-child(2n) {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 2em)/ 3)
    }

        .id-news li:nth-child(-n+4) {
            margin-top: 0
        }

        .id-news li:nth-child(1), .id-news li:nth-child(3n+2) {
            margin-left: 0
        }
}

@media all and (-ms-high-contrast:active) and (-ms-high-contrast:none) and (min-width:640px) {
    .id-news li, .id-news li:nth-child(-n+3), .id-news li:nth-child(2n) {
        width: calc((100% - 20px)/ 3)
    }
}

.id-news li:first-child {
    margin-top: 0;
    width: 100%
}

.id-breadcrumb {
    background-color: #2d862d
}

.dark-mode .id-breadcrumb {
    background-color: #164316
}

.id-breadcrumb li, .id-breadcrumb ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
    color: #fff
}

.id-breadcrumb ul {
    padding: 2em 0
}

.id-breadcrumb li {
    display: block;
    font-size: 1.6em;
    margin-top: .5em
}

    .id-breadcrumb li:first-child {
        margin-top: 0
    }

.id-breadcrumb a, .id-breadcrumb span {
    color: #fff;
    line-height: 1.25em
}

.id-breadcrumb a {
    text-decoration: none
}

    .id-breadcrumb a:active, .id-breadcrumb a:focus, .id-breadcrumb a:hover {
        background-color: #fff;
        color: #2d862d
    }

.dark-mode .id-breadcrumb a:active, .dark-mode .id-breadcrumb a:focus, .dark-mode .id-breadcrumb a:hover {
    color: #164316
}

.id-breadcrumb li::before, .id-breadcrumb li:first-child::before {
    content: '\f3bf';
    font-family: FontAwesome;
    font-weight: 300;
    width: 1.25em;
    text-align: center;
    display: inline-block;
    margin-right: .313em
}

.id-breadcrumb li:not(:first-child)::before {
    transform: rotate(90deg);
    margin-left: .313em
}

@media all and (min-width:720px) {
    .id-breadcrumb li {
        float: left;
        margin-top: 0
    }

        .id-breadcrumb li::before, .id-breadcrumb li:not(:first-child)::before {
            content: '\f054';
            transform: none
        }
}

.id-breadcrumb li:first-child::before {
    content: '\f015'
}

.id-banner {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ddd
}

.dark-mode .id-banner {
    border-top-color: #333
}

.id-banner img {
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0 auto
}

.id-banner .container {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

    .id-banner .container.left {
        background-position: top left
    }

    .id-banner .container.right {
        background-position: top right
    }

.id-categories {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: #eee
}

.dark-mode .id-categories {
    background-color: #111
}

.id-categories ::selection {
    color: #2d862d;
    background-color: #fff
}

.id-categories ::-moz-selection {
    color: #2d862d;
    background-color: #fff
}

.id-categories .container {
    padding-top: 4em;
    padding-bottom: 4em;
    position: relative
}

.id-categories li, .id-categories ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-categories ul {
    display: flex;
    flex-wrap: wrap
}

.id-categories li {
    margin-top: 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0
}

    .id-categories li:first-child {
        margin-top: 0
    }

    .dark-mode .id-categories li a, .id-categories li a {
        display: block;
        overflow: hidden;
        border: .063em solid #2d862d;
        font-size: 1.6em;
        line-height: 1.25em;
        padding: .5em 2.875em .5em 1.25em;
        margin: 0 .125em .125em 0;
        background-color: #2d862d;
        color: #fff;
        transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        border-radius: .313em;
        text-decoration: none;
        position: relative;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1);
        text-decoration: none;
        flex-grow: 1
    }

        .id-categories li a:focus, .id-categories li a:hover {
            background-color: #164316;
            border-color: #164316
        }

.dark-mode .id-categories li a {
    background-color: #164316;
    border-color: #164316
}

    .dark-mode .id-categories li a:focus, .dark-mode .id-categories li a:hover {
        background-color: #2d862d;
        border-color: #2d862d
    }

.id-categories li a:active {
    transform: translate(.125em,.125em);
    box-shadow: none
}

.id-categories li a::after {
    font-family: FontAwesome;
    font-weight: 300;
    content: '\f138';
    position: absolute;
    top: .5em;
    right: 1.25em;
    line-height: 1.25em
}

@media all and (min-width:640px) {
    .id-categories li, .id-categories li:first-child {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 1em)/ 2)
    }

        .id-categories li:nth-child(-n+2) {
            margin-top: 0
        }

        .id-categories li:nth-child(2n+1) {
            margin-left: 0
        }
}

@media all and (-ms-high-contrast:active) and (-ms-high-contrast:none) and (min-width:640px) {
    .id-categories li, .id-categories li:first-child {
        width: calc((100% - 10px)/ 2)
    }
}

@media all and (min-width:960px) {
    .id-categories li, .id-categories li:nth-child(-n+2), .id-categories li:nth-child(2n+1) {
        margin-top: 1em;
        margin-left: 1em;
        width: calc((100% - 2em)/ 3)
    }

        .id-categories li:nth-child(-n+3) {
            margin-top: 0
        }

        .id-categories li:nth-child(3n+1) {
            margin-left: 0
        }
}

@media all and (-ms-high-contrast:active) and (-ms-high-contrast:none) and (min-width:960px) {
    .id-categories li, .id-categories li:nth-child(-n+2), .id-categories li:nth-child(2n+1) {
        width: calc((100% - 20px)/ 3)
    }
}

fieldset, form, label, legend {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 1em
}

fieldset {
    outline: 0;
    border: none
}

input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]) {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 1.6em;
    font-family: 'Work Sans',sans-serif;
    line-height: 1.25em;
    padding: .5em .625em;
    border: .125em solid #ddd;
    background-color: #fff;
    appearance: none;
    border-radius: 0;
    transition: background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out;
    width: 100%
}

    .dark-mode .error input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]):focus, .dark-mode .error select:focus, .dark-mode .error textarea:focus, .dark-mode input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]):focus, .dark-mode select:focus, .dark-mode textarea:focus, .error input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]):focus, .error select:focus, .error textarea:focus, input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]):focus, select:focus, textarea:focus {
        border-color: #287cb3
    }

textarea {
    display: block;
    font-size: 1.6em;
    font-family: 'Work Sans',sans-serif;
    line-height: 1.25em;
    padding: .5em .625em;
    border: .125em solid #ddd;
    background-color: #fff;
    appearance: none;
    border-radius: 0;
    width: 100%;
    transition: background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out
}

.dark-mode input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]), .dark-mode textarea {
    background-color: #111;
    color: #fff
}

.dark-mode input::placeholder {
    color: #fff
}

select {
    border-radius: 0
}

.icmform ol, .icmform ol > li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

    .icmform ol > li::after, .icmform ol > li::before {
        content: none
    }

.icmform fieldset ol {
    padding: 1em 1em 4em;
    border-left: .5em solid #eee;
    border-right: .5em solid #eee
}

.dark-mode .icmform fieldset ol {
    border-color: #666
}

.icmform fieldset fieldset ol, .icmform fieldset ol ol {
    padding: 0;
    border: none
}

.icmform .errorblock ol {
    padding: 0;
    border: none
}

.formstart {
    display: none
}

label {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    vertical-align: middle;
    padding: .625em 2.5em .625em 0;
    position: relative
}

    label em, legend em {
        font-style: normal;
        color: #c00
    }

        label em[title=required], legend em[title=required] {
            text-indent: 1em;
            display: block;
            float: right;
            overflow: hidden;
            width: 4em;
            height: 4em;
            white-space: nowrap;
            text-indent: 4em;
            margin-left: .125em;
            position: relative;
            font-size: .625em;
            position: absolute;
            top: 0;
            right: 0
        }

            label em[title=required]::before, legend em[title=required]::before {
                content: '\f069';
                font-family: FontAwesome;
                font-weight: 300;
                text-indent: 0;
                text-align: center;
                font-size: 1.6em;
                position: absolute;
                top: .625em;
                right: 0;
                width: 1.25em;
                height: 1.25em;
                line-height: 1.25em
            }

.icmsinglecheckbox label {
    position: static
}

    .icmsinglecheckbox label em[title=required] {
        top: .625em;
        right: .625em
    }

button, input, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0
}

fieldset, form, label, legend {
    display: block;
    overflow: hidden;
    box-sizing: border-box
}

.id-content form {
    width: 100%;
    padding: 0
}

.id-content fieldset {
    padding: 0
}

legend {
    display: block;
    position: static;
    font-size: 2em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    border: none;
    outline: 0;
    color: #666;
    width: 100%;
    box-sizing: border-box;
    padding: .5em;
    background-color: #eee
}

.dark-mode legend {
    background-color: #666;
    color: #eee
}

legend.icmhide {
    padding: .25em 0 0 0
}

fieldset fieldset legend {
    padding: 1em 0 0 0;
    background-color: transparent;
    color: #333
}

fieldset .error fieldset legend {
    color: #c00
}

.dark-mode .error fieldset legend {
    color: #f99
}

.icmform ol > .requiredmessage {
    margin-bottom: 1em
}

.icmform ol > li > fieldset > ol > li:not(:last-child):not(.buttons-next) {
    margin-bottom: 1em
}

@media all and (min-width:640px) {
    legend {
        padding: .5em 1em
    }

    .icmform fieldset ol {
        padding: 1.5em 1.5em 4em
    }

    .icmform ol > li > fieldset > ol > li:not(:last-child):not(.buttons-next) {
        margin-bottom: 2em
    }
}

.requiredmessage {
    border-bottom: .1em solid #ddd
}

    .requiredmessage p {
        margin: 0;
        font-size: 1.6em;
        line-height: 2.5em
    }

    .requiredmessage span {
        font-family: FontAwesome;
        font-weight: 300;
        color: #c00;
        font-style: normal
    }

.error label {
    color: #c00
}

.dark-mode .error label {
    color: #f99
}

:invalid {
    box-shadow: none
}

.dark-mode input.readonly, .dark-mode input.readonly:focus, .dark-mode input[readonly=readonly], .dark-mode input[readonly=readonly]:focus, input.readonly, input.readonly:focus, input[readonly=readonly], input[readonly=readonly]:focus {
    background-color: #eee;
    color: #666;
    cursor: default;
    pointer-events: none
}

.errorblock {
    padding: 1em 1em 1em 4em;
    background-color: #c00;
    position: relative
}

    .errorblock::before {
        content: '\f071';
        display: block;
        overflow: hidden;
        font-size: 2em;
        font-family: FontAwesome;
        font-weight: 300;
        position: absolute;
        top: .5em;
        left: .5em;
        color: #fff
    }

    .errorblock * {
        color: #fff
    }

    .errorblock ul, .errorblock ul li {
        display: block;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 1em
    }

        .errorblock ul li::before {
            content: none !important
        }

.error .errorblock {
    margin: 2em 0 0 0
}

.errorblock legend {
    padding: 0;
    margin: 0;
    background: 0 0;
    color: #fff
}

.field_valerrors strong {
    font-family: Montserrat,sans-serif;
    font-weight: 700
}

.icmform .errorblock li {
    font-size: 1.4em;
    line-height: 1.7em
}

    .icmform .errorblock li li {
        font-size: 1em
    }

.icmform .errorblock ul li {
    list-style: none;
    display: list-item
}

.errorblock ul {
    padding: 0;
    margin: 0
}

.icmsinglecheckbox {
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    background-color: #ffc;
    border: .2em solid #ff9;
    transition: all .25s ease-out
}

.field_checkbox .icmsinglecheckbox label {
    display: block;
    overflow: hidden;
    padding: 1.25em 1.25em 1.25em 2.5em
}

.dark-mode .icmsinglecheckbox {
    background-color: #515100
}

.icmsinglecheckbox.checked {
    background-color: #e6f6e6;
    border: .2em solid #9c9
}

.dark-mode .icmsinglecheckbox.checked {
    background-color: #1d3c1d
}

.error .icmsinglecheckbox, .error .icmsinglecheckbox.checked {
    background-color: #fee;
    border: .2em solid #c00
}

.dark-mode .error .icmsinglecheckbox, .dark-mode .error .icmsinglecheckbox.checked {
    background-color: #300
}

.icmsinglecheckbox.focused {
    border-color: #287cb3 !important
}

    .icmsinglecheckbox.focused::before {
        border-color: #287cb3 !important
    }

    .icmsinglecheckbox.focused.checked::after {
        color: #287cb3 !important
    }

.field_checkbox label {
    line-height: 1.25em;
    padding: 0
}

.field_checkbox input[type=checkbox] {
    position: absolute;
    top: .625em;
    left: .625em
}

.icmform ::after, .icmform ::before {
    pointer-events: none
}

.field_checkbox input[type=checkbox], .field_checkgroup input[type=checkbox], .field_radiogroup input[type=radio] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.icmsinglecheckbox {
    position: relative
}

.field_checkbox .icmsinglecheckbox::after, .field_checkbox .icmsinglecheckbox::before {
    font-size: 1.6em
}

.field_checkbox .icmsinglecheckbox::after, .field_checkbox .icmsinglecheckbox::before, .field_checkgroup input[type=checkbox] + label::after, .field_checkgroup input[type=checkbox] + label::before {
    content: '';
    position: absolute;
    top: 1.25em;
    left: .625em;
    border-radius: .625em;
    transition: border-color .25s ease-out,background-color .25s ease-out
}

.field_checkbox .icmsinglecheckbox::before, .field_checkgroup input[type=checkbox] + label::before {
    height: 1em;
    width: 1em;
    box-sizing: content-box;
    border-radius: .2em;
    border: 2px solid #eee
}

.field_checkbox .icmsinglecheckbox::after, .field_checkgroup input[type=checkbox] + label::after {
    content: '\f00c';
    font-family: FontAwesome;
    font-weight: 400;
    text-align: center;
    color: transparent;
    border: none;
    height: calc(1em - 4px);
    line-height: calc(1em - 4px);
    width: calc(1em - 4px);
    margin: 4px 4px 4px 3px;
    background-color: transparent;
    transition: color .25s ease-out,border-color .25s ease-out
}

.field_checkgroup input[type=checkbox] + label::after {
    font-size: .8em;
    top: 1.7em;
    left: .9em
}

.field_checkbox .icmsinglecheckbox.checked::after, .field_checkgroup input[type=checkbox]:checked + label::after {
    color: #2d862d
}

.field_checkgroup input[type=checkbox]:checked + label::before {
    border-color: #2d862d
}

.field_checkbox.error .icmsinglecheckbox::before {
    border-color: #c00
}

.field_checkgroup.error input[type=checkbox]:checked + label::after {
    color: #c00
}

.field_checkbox .icmsinglecheckbox::before {
    border-color: #cc6
}

.field_checkbox .icmsinglecheckbox.checked::before {
    border-color: #2d862d
}

.field_checkgroup input[type=checkbox]:focus + label::before, .field_radiogroup input[type=checkbox]:focus:checked + label::before {
    border-color: #287cb3
}

.field_checkgroup input[type=checkbox]:focus:checked + label::after {
    color: #287cb3
}

.field_checkbox .icmsinglecheckbox.checked:focus::before, .field_checkbox .icmsinglecheckbox:focus::before {
    border-color: #287cb3
}

.field_radiogroup input[type=radio] + label::after, .field_radiogroup input[type=radio] + label::before, .id-dynamiclist .option::after, .id-dynamiclist .option::before {
    content: '';
    position: absolute;
    top: 1.25em;
    left: .625em;
    border-radius: 50%;
    transition: border-color .25s ease-out,background-color .25s ease-out
}

.field_radiogroup input[type=radio] + label::before, .id-dynamiclist .option::before {
    height: 1em;
    width: 1em;
    box-sizing: content-box;
    border: 2px solid #eee
}

.field_radiogroup input[type=radio] + label::after, .id-dynamiclist .option::after {
    border: none;
    height: calc(1em - 4px);
    width: calc(1em - 4px);
    margin: 4px;
    background-color: transparent
}

.field_radiogroup input[type=radio]:checked + label::after, .id-dynamiclist .option.selected::after {
    background-color: #2d862d
}

.field_radiogroup input[type=radio]:checked + label::before {
    border-color: #2d862d
}

.field_radiogroup.error input[type=radio]:checked + label::after, .id-dynamiclist.error .option.selected::after {
    color: #c00
}

.field_radiogroup input[type=radio]:focus + label::before, .field_radiogroup input[type=radio]:focus:checked + label::before {
    border-color: #287cb3
}

.field_radiogroup input[type=radio]:focus:checked + label::after {
    background-color: #287cb3
}

.field_checkgroup li.selected, .field_radiogroup li.selected {
    background-color: #eee
}

.dark-mode .field_checkgroup li.selected, .dark-mode .field_radiogroup li.selected {
    background-color: #111
}

.id-dynamiclist li, .id-dynamiclist ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0
}

.id-dynamiclist li {
    position: relative;
    border-bottom: .2em solid #ddd;
    border-left: .2em solid #ddd;
    border-right: .2em solid #ddd
}

    .id-dynamiclist li:first-child {
        border-top: .2em solid #ddd
    }

.id-dynamiclist button {
    display: block;
    overflow: hidden;
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: .625 2.5em;
    background-color: transparent;
    width: 100%;
    height: auto;
    text-align: left
}

.field_select.dynamic::after {
    content: none !important
}

@media all and (min-width:640px) {
    .id-dynamiclist.horizontallist ul {
        border: .2em solid #ddd
    }

    .id-dynamiclist.horizontallist li {
        width: 50%;
        float: left;
        box-sizing: border-box;
        border: none;
        border-top: .2em solid #ddd
    }

        .id-dynamiclist.horizontallist li:nth-child(even) {
            border-left: .2em solid #ddd;
            border-top: .2em solid #ddd
        }

        .id-dynamiclist.horizontallist li:nth-child(-n+2) {
            border-top: none
        }

        .id-dynamiclist.horizontallist li:nth-child(odd):last-child {
            width: 100%
        }
}

.field_checkgroup legend, .field_radiogroup legend {
    font-size: 1.6em;
    line-height: 1.25em;
    background: 0 0;
    color: #333;
    padding: .625em 0;
    position: relative
}

.dark-mode .field_checkgroup legend, .dark-mode .field_radiogroup legend {
    color: #fff
}

.field_checkgroup label, .field_radiogroup label {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    line-height: 1.25em;
    padding: 1.25em 1.25em 1.25em 2.5em;
    transition: background-color .25s ease-out
}

.icmform .field_checkgroup fieldset ol, .icmform .field_radiogroup fieldset ol {
    border: .2em solid #ddd;
    transition: border-color .25s ease-out
}

.icmform .field_checkgroup.error fieldset ol, .icmform .field_radiogroup.error fieldset ol {
    border-color: #c00
}

.icmform .field_checkgroup.focused fieldset ol, .icmform .field_checkgroup.focused.error fieldset ol, .icmform .field_radiogroup.focused fieldset ol, .icmform .field_radiogroup.focused.error fieldset ol {
    border-color: #287cb3
}

.field_checkgroup fieldset ol li, .field_radiogroup fieldset ol li {
    position: relative;
    border-top: .1em solid #ddd
}

    .field_checkgroup fieldset ol li:first-child, .field_radiogroup fieldset ol li:first-child {
        border-top: none
    }

.field_checkgroup input[type=checkbox], .field_radiogroup input[type=radio] {
    position: absolute;
    top: 0;
    left: 0
}

.field_checkgroup.readonly fieldset ol li, .field_radiogroup.readonly fieldset ol li, .icmform .field_checkgroup.readonly fieldset ol, .icmform .field_radiogroup.readonly fieldset ol {
    background-color: #eee;
    border-color: #ccc;
    color: #333
}

.date, .field_date, .field_select, .field_telephone, .select {
    position: relative
}

    .datereplacement, .field_select select, .select select, .selectreplacement {
        width: 100%;
        outline: 0;
        border: none;
        height: 40px;
        line-height: 20px;
        padding: .5em .5em;
        border: .125em solid #ddd;
        transition: all .25s ease-out;
        font-size: 1.6em;
        font-family: 'Work Sans',sans-serif;
        font-weight: 400;
        vertical-align: middle;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none
    }

.dark-mode .datereplacement, .dark-mode .field_select select, .dark-mode .select select, .dark-mode .selectreplacement {
    background-color: #111;
    color: #fff
}

.datereplacement, .selectreplacement {
    box-sizing: border-box;
    padding: 10px;
    position: relative
}

    .datereplacement:focus, .field_select select:focus, .select select:focus, .selectreplacement:focus {
        border-color: #287cb3
    }

    .datereplacement::after, .field_date::after, .field_select::after, .field_telephone::after, .select::after, .selectreplacement::after {
        pointer-events: none;
        display: block;
        content: '\f078';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-family: FontAwesome;
        font-weight: 400;
        font-size: 1.429em;
        color: #999
    }

    .date::after, .datereplacement::after, .field_date::after {
        content: '\f073'
    }

.field_telephone::after {
    content: '\f095'
}

.date::after, .field_date::after, .field_select::after, .field_telephone::after, .select::after {
    top: auto;
    bottom: 1px;
    right: 1px
}

.date:focus::after, .datereplacement:focus::after, .select:focus::after, .selectreplacement:focus::after {
    color: #333
}

option {
    vertical-align: middle;
    -moz-appearance: none;
    -webkit-appearance: none
}

.horizontal select::-ms-expand {
    display: none
}

.field_select select::-ms-expand {
    display: none
}

.field_multiselect select {
    border: 1px solid #ccc;
    transition: all .25s ease-out;
    font-size: 14px;
    display: block;
    width: 100%
}

    .field_multiselect select option {
        padding: 5px
    }

    .field_multiselect select:focus {
        border-color: #333
    }

.icmbutton-surround {
    background-color: #eee;
    padding: 1em 1.5em
}

    .icmbutton-surround.upload {
        background-color: transparent;
        padding: 0
    }

.icmwizardbuttongroup {
    background-color: #eee;
    padding: 1em 1.5em
}

.dark-mode .icmbutton-surround, .dark-mode .icmwizardbuttongroup {
    background-color: #666
}

.icmwizardbuttongroup .icmbutton-surround {
    padding: 1em 0 0 0
}

    .icmwizardbuttongroup .icmbutton-surround:first-child {
        padding: 0
    }

.field_locationpicker .icmwizardbuttongroup .icmbutton-surround {
    padding: 1em 1em 1em 0
}

fieldset .icmbutton-surround {
    padding: 1em
}

.icmbutton-surround p {
    margin: 0;
    float: right;
    padding: 0;
    line-height: 2.5em
}

@media all and (min-width:640px) {
    .icmbutton-surround, .icmwizardbuttongroup {
        padding: 1em 2em
    }
}

.icmguidance {
    position: relative;
    box-sizing: border-box;
    display: block;
    font-size: 1.4em;
    line-height: 1.5em;
    overflow: hidden;
    background-color: #333;
    margin: 0;
    padding: .714em .714em .714em 2.857em;
    color: #fff
}

    .icmguidance::before {
        color: #fff;
        font-family: FontAwesome;
        content: '\f06a';
        font-weight: 300;
        display: block;
        position: absolute;
        top: .5em;
        left: .5em;
        font-size: 1.25rem
    }

    .icmguidance a {
        color: #fff;
        text-decoration: underline
    }

        .icmguidance a:active, .icmguidance a:focus, .icmguidance a:hover {
            background-color: #fff;
            color: #333
        }

.dark-mode .icmguidance {
    background-color: #fff;
    color: #333
}

    .dark-mode .icmguidance a, .dark-mode .icmguidance::before {
        color: #333
    }

        .dark-mode .icmguidance a:active, .dark-mode .icmguidance a:focus, .dark-mode .icmguidance a:hover {
            color: #fff;
            background-color: #333
        }

.icmguidancehint {
    color: #333;
    font-size: 1.4em;
    line-height: 1.5em;
    position: relative;
    background-color: transparent;
    padding: 0 2.857em 0 1.429em;
    margin: 0 0 .357em 0
}

    .icmguidancehint::before {
        content: '\f06a';
        font-family: FontAwesome;
        font-weight: 300;
        color: #333;
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        line-height: 1.5em;
        display: block;
        font-size: 1rem;
        margin-right: .25em
    }

.error .icmguidancehint::before {
    color: #c00
}

.dark-mode .error .icmguidancehint, .dark-mode .error .icmguidancehint::before {
    color: #f99
}

.icmguidancehint a {
    color: #333
}

    .icmguidancehint a:focus, .icmguidancehint a:hover {
        background-color: #333;
        color: #fff
    }

.dark-mode .icmguidancehint, .dark-mode .icmguidancehint::before {
    color: #fff;
    background: 0 0
}

    .dark-mode .icmguidancehint a {
        color: #fff
    }

        .dark-mode .icmguidancehint a:focus, .dark-mode .icmguidancehint a:hover {
            background-color: #fff;
            color: #333
        }

.error .icmguidancehint {
    color: #c00
}

    .error .icmguidancehint a {
        color: #c00
    }

        .error .icmguidancehint a:focus, .error .icmguidancehint a:hover {
            background-color: #c00;
            color: #fff
        }

.dark-mode .error .icmguidancehint a {
    color: #f99
}

    .dark-mode .error .icmguidancehint a:focus, .dark-mode .error .icmguidancehint a:hover {
        background-color: #f99;
        color: #333
    }

.icmlocationmap {
    width: 100% !important
}

    .icmlocationmap div {
        overflow: visible
    }

.field_locationpicker .icmwizardbuttongroup {
    padding: 0 1em
}

.icmform .highlight {
    margin: 0
}

.icmwizardbuttongroup .icmbutton-surround {
    float: left;
    padding: 0 1em 0 0
}

    .icmwizardbuttongroup .icmbutton-surround.back {
        float: right;
        padding: 0 0 0 1em
    }

.field_locationpicker .icmwizardbuttongroup .icmbutton-surround {
    float: none
}

.error input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]), .error select, .error textarea {
    color: #c00;
    border: 2px solid #c00;
    background-color: #fee
}

.dark-mode .error input:not([type=radio]):not([type=check]):not([type=submit]):not([type=button]), .dark-mode .error select, .dark-mode .error textarea {
    color: #f99;
    border: 2px solid #c00;
    background-color: #300
}

.field_checkbox, .field_checkgroup, .field_date, .field_locationpicker, .field_multiselect, .field_number, .field_password, .field_passwordnostor, .field_radiogroup, .field_select, .field_text, .field_textarea, .field_textnostore, .icmform .icmvertical > ol > li, .icmguidance, .id-dynamiclist ul, .requiredmessage, fieldset .icmbutton-surround {
    max-width: 36.875rem
}

.id-ajaxfield {
    margin: 4em 0
}

.horizontal {
    position: relative;
    padding-top: 5em;
    border-left: .5em solid #eee;
    border-right: .5em solid #eee;
    margin: 4em 0
}

.dark-mode .horizontal {
    border-color: #666
}

.horizontal legend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: .5em
}

.horizontal fieldset {
    padding: 5em 0 2em
}

.horizontal .field {
    padding: 0 .9em
}

    .horizontal .field .field {
        padding: 0
    }

.horizontal .submitfield {
    background-color: #eee;
    padding: 1em
}

.dark-mode .horizontal .submitfield {
    background-color: #666
}

#eventsearchheader .errorblock {
    padding: 1em;
    margin-top: 2em
}

    #eventsearchheader .errorblock span {
        font-size: 1.3em;
        line-height: 1.2em
    }

.horizontal.hidelegend legend {
    display: none
}

.horizontal.hidelegend {
    border-top: 5px solid #eee
}

    .horizontal.hidelegend fieldset {
        padding-top: 0
    }

    .horizontal.hidelegend .submitfield {
        padding-top: 4em
    }

    .horizontal.hidelegend .field_date::after {
        top: 40px
    }

.icmvertical .icmhorizontal legend {
    display: block
}

    .icmvertical .icmhorizontal legend.icmhide {
        display: none
    }

@media all and (min-width:640px) {
    .icmvertical .icmhorizontal ol, .icmvertical .icmhorizontal.icmcheckcontainer ol, .icmvertical .icmhorizontal.icmradiocontainer ol {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

        .icmvertical .icmhorizontal ol li {
            width: calc((100% - 2em)/ 2)
        }

        .icmvertical .icmhorizontal.icmcheckcontainer ol li, .icmvertical .icmhorizontal.icmradiocontainer ol li {
            width: 50%
        }

            .icmvertical .icmhorizontal ol li:nth-child(odd), .icmvertical .icmhorizontal.icmcheckcontainer ol li:nth-child(odd), .icmvertical .icmhorizontal.icmradiocontainer ol li:nth-child(odd) {
                clear: both
            }

            .icmvertical .icmhorizontal.icmcheckcontainer ol li:nth-child(even), .icmvertical .icmhorizontal.icmradiocontainer ol li:nth-child(even) {
                border-left: 1px solid #e5e5e5
            }

                .icmvertical .icmhorizontal.icmcheckcontainer ol li:nth-child(even):nth-child(2), .icmvertical .icmhorizontal.icmradiocontainer ol li:nth-child(even):nth-child(2) {
                    border-top: none
                }

            .icmvertical .icmhorizontal ol li:nth-child(odd):last-child, .icmvertical .icmhorizontal.icmcheckcontainer ol li:nth-child(odd):last-child, .icmvertical .icmhorizontal.icmradiocontainer ol li:nth-child(odd):last-child {
                padding: 0;
                margin: 0;
                width: 100%
            }
}

@media all and (min-width:720px) {
    .horizontal {
        border-bottom: .5em solid #eee
    }

        .horizontal label {
            white-space: nowrap
        }

        .horizontal fieldset {
            width: 80%;
            float: left;
            padding-bottom: 0
        }

        .horizontal legend {
            padding-left: .75em;
            padding-right: .75em
        }

        .horizontal fieldset > .field {
            width: 100%;
            float: left;
            padding: 0 0 2em 2em;
            margin-top: 0
        }

            .horizontal fieldset > .field:first-of-type {
                padding: 0 0 2em 1.5em
            }

        .horizontal .fields2 > .field {
            width: 50%
        }

        .horizontal .fields3 > .field {
            width: 33.33333%
        }

        .horizontal .fields4 > .field {
            width: 25%
        }

        .horizontal .submitfield {
            padding: 9em 0 2em 2em;
            margin: 0;
            width: 20%;
            float: left;
            background-color: transparent
        }

    .dark-mode .horizontal .submitfield {
        background-color: transparent
    }
}

.field_locationpicker .icmbutton-surround.locationsearch:not(:first-of-type) {
    padding-top: 0
}

@media all and (min-width:640px) {
    .field_locationpicker .icmwizardbuttongroup .icmbutton-surround.locationsearch {
        float: left;
        padding-top: 1em
    }

    li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=FIRSTNAME], li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=LASTNAME], li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=TITLE] {
        clear: none;
        padding: 0
    }

        li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=TITLE] select {
            padding-right: 2em
        }

    li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=TITLE] {
        width: 22%
    }

    li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=FIRSTNAME], li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=LASTNAME] {
        width: 39%
    }

        li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=LASTNAME], li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=LASTNAME]:last-child {
            padding-right: 0;
            clear: none;
            width: 39%
        }

    li[id*=NAMEDETAILS] .icmhorizontal > ol > li[id*=FIRSTNAME] {
        padding: 0 2em
    }
}

#ui-datepicker-div {
    z-index: 100 !important;
    padding: 1em;
    background-color: #287cb3
}

    #ui-datepicker-div table {
        margin: 0;
        border: 0
    }

    #ui-datepicker-div .ui-datepicker-title > span {
        line-height: 2em
    }

.dark-mode .ui-datepicker-calendar thead th, .ui-datepicker-calendar thead th {
    background-color: #fff;
    color: #287cb3
}

#ui-datepicker-div td, #ui-datepicker-div th {
    border: 0
}

.ui-datepicker-header {
    position: relative;
    margin-bottom: .5em
}

    .ui-datepicker-header > a {
        position: absolute;
        display: block;
        overflow: hidden;
        top: 0;
        font-size: 2em;
        line-height: 2em;
        width: 2em;
        height: 2em;
        transition: background-color .25s ease-out;
        cursor: pointer;
        cursor: hand
    }

        .ui-datepicker-header > a:active, .ui-datepicker-header > a:focus, .ui-datepicker-header > a:hover {
            background-color: #143e59
        }

        .ui-datepicker-header > a::before {
            font-family: FontAwesome;
            line-height: 2em;
            width: 2em;
            height: 2em;
            text-align: center;
            text-indent: 0;
            color: #fff
        }

    .ui-datepicker-header > .ui-datepicker-prev::before {
        content: '\f053'
    }

    .ui-datepicker-header > .ui-datepicker-next::before {
        content: '\f054';
        right: 0
    }

    .ui-datepicker-header > .ui-datepicker-prev {
        left: 0
    }

    .ui-datepicker-header > .ui-datepicker-next {
        right: 0
    }

.ui-datepicker-title {
    width: calc(100% - 8em);
    margin: 0 4em;
    height: 4em;
    display: flex
}

#eventsearch-template .ui-datepicker-title {
    display: block;
    text-align: center
}

    #eventsearch-template .ui-datepicker-title span {
        color: #fff;
        font-weight: 700;
        font-family: Montserrat,sans-serif;
        font-size: 1.6em;
        line-height: 2.5em
    }

.ui-datepicker-title select {
    display: block;
    border: none;
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    color: #fff;
    width: 35%;
    font-size: 1.6em;
    line-height: 2.5em;
    transition: background-color .25s ease-out;
    padding: 0 .625em
}

    .ui-datepicker-title select:active, .ui-datepicker-title select:focus, .ui-datepicker-title select:hover {
        background-color: #143e59
    }

.ui-datepicker-title::after, .ui-datepicker-title::before {
    content: '\f078';
    font-family: FontAwesome;
    font-weight: 300;
    position: absolute;
    top: 0;
    pointer-events: none;
    color: #fff;
    font-size: 1.6em;
    line-height: 2.5em
}

#eventsearch-template .ui-datepicker-title::after, #eventsearch-template .ui-datepicker-title::before {
    content: none
}

.ui-datepicker-title::before {
    left: calc(50% - 1.5em)
}

.ui-datepicker-title::after {
    right: calc(15% + 2.5em)
}

.ui-datepicker-title select:first-of-type {
    margin-left: 15%
}

.ui-datepicker-title select:last-of-type {
    margin-right: 15%
}

.ui-datepicker-title select::-ms-expand {
    display: none
}

.ud-datepicker-title select::-ms-value {
    color: #000
}

.ui-datepicker-calendar {
    border-collapse: collapse
}

    .ui-datepicker-calendar td, .ui-datepicker-calendar th {
        padding: 0;
        font-size: 1.6em
    }

    .ui-datepicker-calendar a, .ui-datepicker-calendar span {
        display: block;
        overflow: hidden;
        height: 3.125em;
        width: 3.125em;
        line-height: 3.125em;
        text-align: center;
        text-decoration: none;
        border-left: .125em solid #287cb3
    }

    .dark-mode .ui-datepicker-calendar tbody a, .dark-mode .ui-datepicker-calendar tbody span, .ui-datepicker-calendar tbody a, .ui-datepicker-calendar tbody span {
        background-color: rgba(0,0,0,.1);
        color: #fff
    }

    .ui-datepicker-calendar tbody a, .ui-datepicker-calendar tbody span {
        border-top: .125em solid #287cb3
    }

    .ui-datepicker-calendar a, .ui-datepicker-calendar tbody td a {
        color: #fff;
        transition: background-color .25s ease-out,color .25s ease-out
    }

        .dark-mode .ui-datepicker-calendar tbody td a:active, .dark-mode .ui-datepicker-calendar tbody td a:focus, .dark-mode .ui-datepicker-calendar tbody td a:hover, .ui-datepicker-calendar tbody td a:active, .ui-datepicker-calendar tbody td a:focus, .ui-datepicker-calendar tbody td a:hover {
            background-color: #143e59
        }

    .ui-datepicker-calendar .ui-state-disabled, .ui-datepicker-calendar .ui-state-disabled *, .ui-state-disabled, .ui-state-disabled * {
        pointer-events: none;
        user-select: none
    }

    .ui-datepicker-calendar .ui-state-disabled, .ui-datepicker-next .ui-state-disabled, .ui-datepicker-prev .ui-state-disabled, .ui-state-disabled {
        opacity: .5
    }

    .dark-mode .ui-datepicker-calendar .ui-state-active, .dark-mode .ui-datepicker-calendar .ui-state-active:active, .dark-mode .ui-datepicker-calendar .ui-state-active:focus, .dark-mode .ui-datepicker-calendar .ui-state-active:hover, .ui-datepicker-calendar .ui-state-active, .ui-datepicker-calendar .ui-state-active:active, .ui-datepicker-calendar .ui-state-active:focus, .ui-datepicker-calendar .ui-state-active:hover {
        background-color: #fff;
        color: #287cb3;
        font-family: Montserrat,sans-serif;
        font-weight: 700
    }

.id-actions {
    margin-bottom: 4em
}

.id-content-bottom > .id-actions {
    margin-right: 0
}

.id-actions .tabs {
    display: none
}

.id-actions.activated {
    display: block
}

.id-actions .container {
    padding: 0
}

.id-actions ul, .id-actions ul li {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1em
}

.id-actions .links > li:not(:last-child) {
    margin-bottom: 1em
}

.id-actions:not(.active) .links > li::before {
    content: '';
    display: block;
    overflow: hidden;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: 1.25em;
    background-color: #e5e5e5;
    color: #666
}

.id-actions:not(.active) .links > li:nth-child(1)::before {
    content: 'Make a payment'
}

.id-actions:not(.active) .links > li:nth-child(2)::before {
    content: 'Request a service'
}

.id-actions:not(.active) .links > li:nth-child(3)::before {
    content: 'Report an issue'
}

.id-actions button {
    display: block;
    overflow: hidden;
    width: 100%;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: 1.25em;
    margin: 0;
    background-color: #666;
    color: #fff;
    border: none;
    outline: 0;
    cursor: pointer;
    cursor: hand;
    text-align: left;
    position: relative;
    transition: background-color .25s ease-out,color .25s ease-out
}

.dark-mode .id-actions button {
    background-color: #444
}

.id-actions.active button {
    border-radius: .313em
}

.id-actions button:active, .id-actions button:focus, .id-actions button:hover {
    background-color: #333
}

.dark-mode .id-actions button:active, .dark-mode .id-actions button:focus, .dark-mode .id-actions button:hover {
    background-color: #666
}

.id-actions.active .open button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

    .id-actions.active .open button + div {
        transition: border-color .25s ease-out;
        border: 1px solid #666;
        border-bottom-right-radius: .5em;
        border-bottom-left-radius: .5em
    }

    .id-actions.active .open button:active + div, .id-actions.active .open button:focus + div, .id-actions.active .open button:hover + div {
        border-color: #666
    }

.dark-mode .id-actions.active .open button + div {
    border-color: #444
}

.dark-mode .id-actions.active .open button:active + div, .dark-mode .id-actions.active .open button:focus + div, .dark-mode .id-actions.active .open button:hover + div {
    border-color: #666
}

.id-actions button::after, .id-actions button::before {
    content: '';
    font-family: FontAwesome;
    font-weight: 300;
    display: inline-block;
    margin-right: .313em;
    padding: 0
}

.id-actions button::after {
    content: '\f078';
    margin: 0;
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    transition: transform .25s ease-out
}

.id-actions button.make-a-payment::before {
    content: '\f09d'
}

.id-actions button.request-a-service::before {
    content: '\f040'
}

.id-actions button.report-an-issue::before {
    content: '\f06e'
}

.id-actions .open button::after {
    transform: rotate(180deg)
}

.id-actions .closed button::after {
    transform: rotate(0)
}

.id-actions .links {
    padding: 0
}

.links li ul {
    padding: 2em 2em 1em
}

.links li li {
    float: left;
    padding: 0 1em 1em 0
}

.links > li.closed > div {
    display: none
}

.links > li.open > div {
    display: block
}

.links > li.closed ul {
    opacity: 0
}

.links > li.open ul {
    animation: fadein .25s linear forwards
}

.links li li:last-child {
    padding-left: 0
}

.links a {
    display: block;
    overflow: hidden;
    border: .063em solid #ddd;
    font-size: 1.4em;
    line-height: 1.25em;
    padding: .5em 1.25em;
    margin: 0 .125em .125em 0;
    transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    border-radius: .313em;
    box-shadow: .125em .125em 0 rgba(0,0,0,.1);
    text-decoration: none;
    background-color: #eee;
    color: #666
}

    .links a:focus, .links a:hover {
        background-color: #ddd;
        border-color: #999;
        color: #333;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1)
    }

.dark-mode .links a {
    background-color: #111;
    border-color: #666;
    color: #fff
}

    .dark-mode .links a:active, .dark-mode .links a:focus, .dark-mode .links a:hover {
        background-color: #666;
        border-color: #eee;
        color: #fff
    }

.links a:active {
    transform: translate(.125em,.125em);
    box-shadow: none
}

.links .viewall a {
    clear: both;
    background-color: #fff
}

.dark-mode .links .viewall a {
    background-color: #333;
    color: #fff
}

    .dark-mode .links .viewall a:active, .dark-mode .links .viewall a:focus, .dark-mode .links .viewall a:hover {
        background-color: #666;
        border-color: #eee;
        color: #fff
    }

.carousel {
    margin: 4em 0
}

.id-content-bottom.container > .carousel {
    margin-right: 0
}

.carousel li, .carousel ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

    .carousel li > a, .carousel li > div {
        display: block;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
        background: 0 0
    }

        .carousel li > a .caption {
            border-radius: .5em;
            text-decoration: none;
            transition: background-color .25s ease-out,border-color .25s ease-out;
            margin: 0 .2em .2em 0;
            box-shadow: .2em .2em 0 rgba(0,0,0,.1);
            border: .1em solid #ddd;
            background-color: #eee;
            padding: 2em 7em 2em 2em;
            position: relative
        }

        .carousel li > div .caption {
            background-color: #eee;
            padding: 2em 7em 2em 2em
        }

.carousel a .caption::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: calc((700/1920) * 100%);
    background-color: #ddd;
    width: 5em;
    top: 0;
    left: auto;
    transition: background-color .25s ease-out
}

.dark-mode .carousel .caption::before {
    background-color: #222
}

.carousel a:focus .caption::before, .carousel a:hover .caption::before, .dark-mode .carousel a:focus .caption::before, .dark-mode .carousel a:hover .caption::before {
    background-color: #287cb3
}

.carousel a .caption::after {
    font-family: FontAwesome;
    font-weight: 300;
    content: '\f138';
    position: absolute;
    font-size: 1.6em;
    top: 1.25em;
    right: 1.25em;
    line-height: 1.25em;
    transition: color .25s ease-out
}

.carousel a:focus .caption::after, .carousel a:hover .caption::after {
    color: #fff
}

.dark-mode .carousel li > a .caption, .dark-mode .carousel li > div .caption {
    background-color: #111;
    border-color: #666
}

.dark-mode .carousel li > a {
    background-color: transparent
}

.carousel figure {
    position: relative;
    padding: 0
}

.carousel h3 {
    font-size: 2em;
    margin: 0 0 .25em 0;
    color: #666;
    padding-right: 4em;
    transition: color .25s ease-out
}

.dark-mode .carousel h3 {
    color: #fff
}

.carousel a:focus h3, .carousel a:hover h3 {
    color: #333
}

.dark-mode .carousel a:focus h3, .dark-mode .carousel a:hover h3 {
    color: #fff
}

.carousel p {
    font-size: 1.6em
}

.carousel li {
    margin-top: 2em
}

    .carousel li:first-child {
        margin-top: 0
    }

    .carousel li > a:focus .caption, .carousel li > a:hover .caption {
        background-color: #ddd;
        border-color: #999;
        border-color: #287cb3
    }

.dark-mode .carousel li > a:focus .caption, .dark-mode .carousel li > a:hover .caption {
    background-color: #666;
    border-color: #eee;
    border-color: #287cb3;
    color: inherit
}

.dark-mode .carousel li > a:focus p, .dark-mode .carousel li > a:hover p {
    color: #fff
}

.carousel li > a:active .caption {
    transform: translate(.2em,.2em);
    box-shadow: none
}

.carousel .image {
    display: block;
    width: 100%;
    margin: 0 0 1em 0
}

    .carousel .image img {
        display: block;
        width: 100%;
        height: auto
    }

.carousel .caption > :first-child {
    margin-top: 0
}

.carousel figcaption > :last-child {
    margin-bottom: 0
}

@media all and (min-width:720px) {
    .carousel .items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .carousel .image {
        width: calc((100% - 1em)/ 2);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #eee;
        margin: 0
    }

    .carousel li.no-image {
        display: flex;
        flex-direction: column
    }

        .carousel li.no-image figure, .carousel li.no-image > a, .carousel li.no-image > div {
            flex-grow: 1;
            display: flex;
            flex-direction: column
        }

        .carousel li.no-image .caption {
            flex-grow: 1
        }

    .carousel .image {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .carousel .inner {
        width: 100%;
        height: 100%;
        padding: 0;
        position: relative
    }

    .carousel .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .carousel li {
        margin-top: 1em
    }

    .carousel .has-image .image {
        width: calc((100% - 1em)/ 2);
        float: right;
        margin: 0
    }

    .carousel .no-image:first-child + .no-image:nth-child(2), .carousel li.no-image:first-child {
        margin-top: 0
    }

    .carousel li:not(.no-image) .caption {
        width: calc(((100% - 1em)/ 2) - .2em)
    }

    .carousel li {
        width: 100%
    }

        .carousel li.no-image {
            width: calc((100% - 1em)/ 2)
        }

            .carousel li.no-image:last-child {
                width: auto;
                flex-grow: 1
            }

        .carousel li.expand {
            width: 100%
        }

    .carousel .image + .caption {
        min-height: 320px
    }
}

.id-contact {
    position: relative;
    background-color: transparent
}

    .id-contact .contact {
        border-top: .1em solid #e5e5e5;
        background-color: transparent
    }

.id-news + .id-contact {
    padding-top: 4em
}

.contact h3 {
    margin: 1em 0 0 0
}

.contact {
    padding: 2em 0
}

    .contact.map {
        padding: 0
    }

.id-content .contact {
    background-color: #eee;
    position: relative;
    margin: 4em 0
}

.dark-mode .id-content .contact {
    background-color: #111
}

.contact .googlemap {
    display: none
}

.contact.map .googlemap {
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden
}

    .contact.map .googlemap iframe {
        width: 100%;
        height: 100%;
        border: none
    }

.contact.map .container {
    padding: 2em;
    max-width: none;
    width: auto
}

.contact a.btn {
    float: none;
    text-align: center
}

.contact .buttons {
    padding: 0;
    margin: 2em 0 0 0;
    width: 100%
}

    .contact .buttons li {
        float: none;
        margin-left: 0
    }

        .contact .buttons li:not(:first-child) {
            margin-top: 1em
        }

.contactdetails, .contactdetails li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1em
}

    .contactdetails li p {
        font-size: 1.6em;
        margin: 0
    }

.contactdetails {
    width: 100%
}

    .contactdetails a:active, .contactdetails a:focus, .contactdetails a:hover {
        color: #eee
    }

.dark-mode .contactdetails a:active, .dark-mode .contactdetails a:focus, .dark-mode .contactdetails a:hover {
    color: #111
}

.id-contact .contactdetails a:active, .id-contact .contactdetails a:focus, .id-contact .contactdetails a:hover {
    color: #fff
}

.dark-mode .id-contact .contactdetails a:active, .dark-mode .id-contact .contactdetails a:focus, .dark-mode .id-contact .contactdetails a:hover {
    color: #333
}

.contactdetails li.title {
    padding: 0;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 2em;
    line-height: 2em;
    min-height: 0
}

    .contactdetails li.title + li.address {
        border-top: none
    }

    .contactdetails li.title a {
        text-decoration: none
    }

.contactdetails li {
    position: relative;
    padding: 1.25em 0 1.25em 4em
}

    .contactdetails li:first-child {
        border-top: none
    }

    .contactdetails li h4, .contactdetails li h5, .contactdetails li h6 {
        margin-bottom: .313em
    }

    .contactdetails li p {
        line-height: 1.2em
    }

.contactdetails .address::before, .contactdetails .email::before, .contactdetails .fax::before, .contactdetails .phone::before, .contactdetails .website::before {
    content: '\f041';
    font-family: FontAwesome;
    font-weight: 300;
    display: block;
    font-size: 1.6em;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    text-rendering: auto;
    position: absolute;
    border-radius: 0;
    top: .125em;
    left: 0;
    pointer-events: none;
    user-select: none;
    margin: 0;
    padding: 0
}

.contactdetails .phone::before {
    content: '\f095'
}

.contactdetails .email::before {
    content: '\f0e0'
}

.contactdetails .website::before {
    content: '\f108'
}

.contactdetails .fax::before {
    content: '\f1ac'
}

@media all and (min-width:720px) {
    .contact .container {
        display: flex;
        justify-content: space-between
    }

    .contact .contactdetails {
        width: calc(70% - 2em);
        margin-right: 2em
    }

    .contact .buttons {
        margin: 0;
        width: 30%
    }
}

#eventsearch-template .wrapper > * {
    max-width: none
}

#eventsearch-template .datetime {
    max-width: none
}

.itemlist, .itemlist ul, .itemlist ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    overflow: hidden;
    font-size: 1em
}

    .itemlist li:first-child {
        border: none
    }

    .item.single, .itemlist .item {
        font-size: 1em;
        position: relative;
        background-color: #eee
    }

.dark-mode .item.single, .dark-mode .itemlist .item {
    background-color: #111
}

.item.single {
    margin: 4em 0
}

.itemlist > ul > li {
    margin: 1em 0
}

.item.single, .itemlist .item {
    padding: 2em
}

    .item.single .datetime, .itemlist .item .datetime {
        max-width: none;
        margin: 1em 0 0 0;
        position: relative;
        color: #fff;
        background-color: #287cb3
    }

.dark-mode .item.single .datetime, .dark-mode .itemlist .item .datetime {
    color: #fff;
    background-color: #143e59
}

.itemlist .item.single {
    margin: 0 0 4em 0
}

.item.single .details, .itemlist .item .details {
    margin: 0
}

.itemlist .item.single .details {
    padding: 0
}

.item .image img {
    display: block;
    width: 100%;
    height: auto
}

.item a:active, .item a:focus, .item a:hover {
    color: #eee
}

.dark-mode .item a:active, .dark-mode .item a:focus, .dark-mode .item a:hover {
    color: #111
}

#map_canvas {
    margin-top: 2em
}

.tabpanel .btn {
    margin: 0 0 .625em 0;
    float: none;
    text-align: center
}

.details {
    margin: 0 2em 1em
}

.item .details {
    margin: 0 2em
}

.details, .details dd, .details dt {
    border: none
}

    .details dd, .details dt {
        font-size: 1.6em;
        line-height: 1.25em
    }

    .details dd {
        padding: 0
    }

    .details p {
        display: inline-block;
        font-size: 1em;
        vertical-align: text-top
    }

    .details dd {
        padding: 0;
        margin: 0
    }

        .details dd:not(.name) {
            padding: .313em 0 .313em 1.875em
        }

        .details dd:not([class]) {
            font-size: 1.4em;
            padding: .714em 0 0;
            margin-top: .714em;
            border-top: .071em solid #ccc
        }

.dark-mode .details dd:not([class]) {
    border-color: #999
}

.details dd:not([class]):nth-child(4) {
    border: none;
    padding: 0;
    margin: 0
}

.item.event .image {
    display: none
}

.item.event.single .image {
    display: block;
    margin: 0 0 2em 0
}

@media all and (min-width:640px) {
    .item.event.single .image {
        display: none
    }
}

.details dd {
    position: relative
}

.details .address p {
    margin: 0
}

.details .name, .item.location .location {
    border: none;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding: 0
}

.item .details .location, .item .details .name {
    padding-bottom: .5em
}

.contactdetails li.email::before, .contactdetails li.title::before, .contactdetails > li::before, .details dd.email::before, .details dd::before {
    color: #333;
    background: 0 0;
    pointer-events: none;
    user-select: none
}

.dark-mode .contactdetails li.email::before, .dark-mode .contactdetails li.title::before, .dark-mode .contactdetails > li::before, .dark-mode .details dd.email::before, .dark-mode .details dd::before {
    color: #ccc
}

.details .name a, .item.location .location a {
    overflow: visible;
    line-height: 1.25em
}

:not(.item.single) .details .name {
    line-height: 1em
}

.details .address::before, .details .cost::before, .details .facebook::before, .details .fax::before, .details .location::before, .details .phone::before, .details .time::before, .details .twitter::before, .details .website::before, .details li.email::before {
    content: none;
    display: block;
    overflow: visible;
    font-family: FontAwesome;
    font-weight: 300;
    text-rendering: auto;
    text-align: center;
    text-decoration: none;
    line-height: 1em;
    width: 1em;
    position: absolute;
    top: .4em;
    left: 0
}

@media all and (-ms-high-contrast:active) and (-ms-high-contrast:none) {
    .contactdetails li.email::before, .details dd.email::before {
        font-size: 1.6em
    }
}

.details .address, .details .cost, .details .facebook, .details .fax, .details .location, .details .phone, .details .time, .details .twitter, .details .website, .details li.email {
    line-height: 1.25em
}

#eventlisttab a::before, #eventmaptab a::before {
    font-size: 1em;
    width: auto
}

.details .location::before {
    content: '\f041'
}

.item.location .details .location::before {
    content: none
}

.details .time::before {
    content: '\f017'
}

.details .cost::before {
    content: '\f154'
}

.details .address::before {
    content: '\f041'
}

.details .phone::before {
    content: '\f095'
}

.details .fax::before {
    content: '\f1ac'
}

.details .email::before {
    content: '\f0e0'
}

.details .website::before {
    content: '\f108'
}

.details .facebook::before {
    content: '\f09a'
}

.details .twitter::before {
    content: '\f099'
}

#search-facets, .id-facets {
    background-color: #eee;
    padding: 2em
}

.dark-mode #search-facets, .dark-mode .id-facets {
    background-color: #111
}

#search-facets h2, .id-facets h2 {
    font-size: 2.4em;
    margin-top: 0
}

.facet h3 {
    font-size: 2em;
    padding: .5em 0;
    color: #333;
    margin: 0
}

.dark-mode .facet h3 {
    color: #ccc
}

.facet ul, .facet ul li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0
}

    .facet ul li {
        position: relative;
        font-size: 1.6em;
        line-height: 1.25em;
        padding: .313em 0 .313em 1.875em;
        font-family: Montserrat,sans-serif;
        font-weight: 700
    }

        .facet ul li li {
            font-size: 1.6em
        }

            .facet ul li li li {
                font-size: 1.4em;
                padding: .313em 0 .313em 1.25em
            }

    .facet ul ul {
        position: relative;
        top: .357em
    }

    .facet ul li::before {
        content: none
    }

    .facet ul li a {
        text-decoration: none
    }

        .facet ul li a:active, .facet ul li a:focus, .facet ul li a:hover {
            color: #eee;
            text-decoration: underline
        }

.dark-mode .facet ul li a:active, .dark-mode .facet ul li a:focus, .dark-mode .facet ul li a:hover {
    color: #111
}

.facet ul li a .count {
    font-weight: 400;
    font-family: 'Work Sans',sans-serif;
    font-size: .8em;
    color: #666
}

.facet ul li a:active .count, .facet ul li a:focus .count, .facet ul li a:hover .count {
    color: #eee
}

.dark-mode .facet ul li a .count {
    color: #999
}

.dark-mode .facet ul li a:active .count, .dark-mode .facet ul li a:focus .count, .dark-mode .facet ul li a:hover .count {
    color: #111
}

.facet ul li li {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400
}

    .facet ul li li li {
        color: #ccc
    }

.expander, .removeIndicator {
    position: absolute;
    top: .313em;
    left: 0;
    color: #fff;
    display: block;
    overflow: hidden;
    height: 1.25em;
    width: 1.25em;
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 1.25em;
    cursor: pointer;
    cursor: hand;
    border-radius: .313em;
    box-shadow: .125em .125em 0 rgba(0,0,0,.1);
    background-color: #287cb3;
    transition: background-color .25s ease-out
}

    .expander:active, .removeIndicator:active {
        transform: translate(.125em,.125em)
    }

    .expander:active, .expander:focus, .expander:hover, .removeIndicator:active, .removeIndicator:focus, .removeIndicator:hover {
        background-color: #143e59
    }

.dark-mode .expander, .dark-mode .removeIndicator {
    background-color: #143e59
}

    .dark-mode .expander:active, .dark-mode .expander:focus, .dark-mode .expander:hover, .dark-mode .removeIndicator:active, .dark-mode .removeIndicator:focus, .dark-mode .removeIndicator:hover {
        background-color: #287cb3
    }

.expander::before {
    content: '+'
}

.expander.active::before {
    content: '-'
}

.removeIndicator {
    left: auto;
    right: 0;
    background-color: transparent;
    color: #fff
}

    .removeIndicator::before {
        content: '\f00d';
        display: block;
        overflow: hidden;
        height: 1.143em;
        width: 1.143em;
        font-family: FontAwesome;
        font-weight: 300
    }

.facet {
    padding-bottom: 2em
}

#map_canvas {
    min-height: 500px;
    margin: 2em 0 0 0
}

    #map_canvas div {
        overflow: visible
    }

.id-content-bottom.container > .embeddedlist {
    margin: 4em 0
}

    .id-content-bottom.container > .embeddedlist:last-child {
        margin-bottom: 0
    }

.embeddedlist h2 {
    margin: 0
}

.embeddedlist .itemlist li:first-child .item {
    margin-top: 0
}

.embeddedlist .itemlist li:last-child .item {
    margin-bottom: 0
}

.showMoreHeading {
    margin-top: .625em
}

    .showMoreHeading::after {
        font-family: FontAwesome;
        font-weight: 300;
        content: '\f067';
        margin-left: .25em
    }

    .showMoreHeading.active::after {
        content: '\f068'
    }

.moreresults.btn {
    width: 100%;
    text-align: center;
    margin-top: .625em
}

#tabsnav.focused {
    border-color: #287cb3
}

    #tabsnav.focused li.active a {
        border-color: #287cb3;
        background-color: #287cb3
    }

.results-map {
    width: 100%;
    padding-bottom: 100%
}

    .results-map h4 a {
        text-decoration: none
    }

    .results-map .gm-style-iw .date::after {
        content: none;
        background: 0 0 !important
    }

    .results-map div {
        border-radius: 0 !important
    }

    .results-map table {
        margin-bottom: 0
    }

.gm-style, .gm-style .gm-style-iw {
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: 1em
}

    .gm-style .footnote {
        background-color: #e5e5e5;
        padding: 1em;
        overflow: hidden !important;
        top: 0
    }

        .gm-style .footnote .btn {
            font-size: 1.4em
        }

.maptooltipcontent {
    padding: 1em
}

#tabpanels {
    margin-bottom: 4em
}

.horizontal .errorblock {
    font-size: 1.4em;
    padding: .714em;
    margin: .714em 0 0 0;
    color: #fff;
    display: none
}

.item.event dl {
    clear: none
}

.item.event .datetime * {
    display: inline-block;
    font-size: 1em;
    color: #fff
}

.item.event .datetime .dayofweek, .item.event .datetime .year {
    font-size: 1em
}

.item .datetime span {
    margin: .5em 0
}

.item.single {
    margin-left: auto;
    margin-right: auto
}

.item.event .datetime .dayofweek::after {
    content: ', '
}

@media all and (min-width:720px) {
    #tabpanels {
        margin-bottom: 0
    }

    .item.event.single .image {
        display: none
    }

        .item.event.single .image .inner {
            width: 100%;
            height: 100%;
            padding: 0 0 100% 0;
            position: relative
        }

        .item.event.single .image img {
            object-fit: cover;
            object-position: center;
            height: 100%;
            width: 100%
        }

    #search-results.has-facets {
        float: left;
        width: calc((((100% - 1.25rem)/ 3) * 2) + .625rem);
        margin: 0
    }

    #search-facets {
        float: right;
        width: calc((100% - 1.25rem)/ 3);
        margin: 0
    }

    .item .datetime span {
        display: inline-block;
        margin: .5em 0
    }

    .item .datetime .dayofweek {
        margin-top: 0
    }

    .item .datetime .year {
        margin-bottom: 0
    }

    .item .datetime .month {
        position: static;
        top: 0
    }

    #search-results.has-facets {
        margin: 0 0 4em 0
    }

    #search-facets {
        margin: 0
    }
}

@media all and (min-width:960px) {
    .item.single, .itemlist .item:not(.location):not(.service) {
        padding: 0
    }

    .item.event.single .details {
        width: calc(100% - 7.5em);
        margin-right: calc((100% - 1.25rem)/ 3);
        padding: 2em
    }

    .item.event.single .image {
        display: flex;
        flex-direction: column;
        width: calc((100% - 1.25rem)/ 3);
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0
    }

    .item.event {
        display: flex;
        flex-direction: row-reverse
    }

    .item .datetime span {
        margin: 0
    }

    .item .datetime .month {
        position: relative;
        top: -.25em
    }

    .item.event .datetime {
        min-width: 7.5em;
        margin: 0
    }

    .item.event .details {
        box-sizing: border-box;
        padding: 2em;
        margin: 0;
        width: calc(100% - 7.5em)
    }

    .item.event .datetime {
        padding: 1.25em 0
    }

        .item.event .datetime * {
            display: block;
            font-size: 1em
        }

        .item.event .datetime .day {
            color: #fff
        }

        .item.event .datetime .month {
            font-weight: 400
        }

        .item.event .datetime .dayofweek::after {
            content: none
        }

        .item.event .datetime .day {
            display: inline-block;
            font-size: 2em;
            width: 2em
        }
}

.tabs, .tabs li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    overflow: hidden;
    font-size: 1em
}

.tabs {
    display: flex;
    flex-direction: row;
    position: relative;
    border-bottom: .5em solid #333;
    transition: border-color .25s ease-out
}

.id-content-bottom > .tabs {
    margin-right: 0
}

.tabs li {
    font-size: 1em;
    margin: 0 0 0 .5em
}

    .tabs li:first-child {
        margin-left: 0
    }

    .tabs li a, .tabs li button {
        display: block;
        overflow: visible;
        border: .063em solid transparent;
        border-bottom: none;
        font-size: 1.6em;
        line-height: 2.5em;
        padding: .5em 1.25em;
        margin: 0;
        background-color: #eee;
        border-color: #ddd;
        color: #666;
        transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        border-top-left-radius: .313em;
        border-top-right-radius: .313em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        cursor: hand;
        text-align: center
    }

        .tabs li a:active, .tabs li a:focus, .tabs li a:hover, .tabs li button:active, .tabs li button:focus, .tabs li button:hover {
            background-color: #ddd;
            border-color: #999;
            color: #333
        }

    .tabs li.active a, .tabs li.active button {
        background-color: #333;
        border-color: #333;
        color: #fff
    }

        .tabs li.active a:active, .tabs li.active a:focus, .tabs li.active a:hover, .tabs li.active button:active, .tabs li.active button:focus, .tabs li.active button:hover {
            background-color: #287cb3;
            border-color: #287cb3
        }

.dark-mode .tabs li a, .dark-mode .tabs li button {
    background-color: #111;
    border-color: #666;
    color: #fff
}

    .dark-mode .tabs li a:active, .dark-mode .tabs li a:focus, .dark-mode .tabs li a:hover, .dark-mode .tabs li button:active, .dark-mode .tabs li button:focus, .dark-mode .tabs li button:hover {
        background-color: #666;
        border-color: #eee;
        color: #fff
    }

.dark-mode .tabs li.active a, .dark-mode .tabs li.active button {
    color: #333;
    border-color: #eee;
    background-color: #eee
}

    .dark-mode .tabs li.active a:active, .dark-mode .tabs li.active a:focus, .dark-mode .tabs li.active a:hover, .dark-mode .tabs li.active button:active, .dark-mode .tabs li.active button:focus, .dark-mode .tabs li.active button:hover {
        background-color: #287cb3;
        border-color: #287cb3;
        color: #fff
    }

.has-tabs {
    margin: 4em 0;
    transition: border-color .25s ease-out
}

    .has-tabs.activated {
        border-bottom: .5em solid #333
    }

.dark-mode .tabs {
    border-color: #eee
}

.dark-mode .has-tabs.activated {
    border-color: #eee
}

.has-tabs.focused, .has-tabs.focused .tabs {
    border-color: #287cb3
}

.dark-mode .has-tabs.focused, .dark-mode .has-tabs.focused .tabs {
    border-color: #287cb3
}

.id-content-bottom > .has-tabs.expand {
    margin-right: 0
}

.has-tabs > * {
    margin: 4em 0
}

.has-tabs > .tabs {
    margin-top: 0
}

.has-tabs > img {
    display: block;
    height: auto;
    width: 100%
}

.has-tabs:not(.activated) > :first-child, .has-tabs > div > :first-child {
    margin-top: 0
}

.has-tabs:not(.activated) > :last-child, .has-tabs > div > :last-child {
    margin-bottom: 0
}

.has-tabs > .hidden {
    display: none
}

.fadein {
    animation: fadein 1s ease-out forwards
}

@media all and (max-width:720px) {
    .tabs:not(.fixed) {
        border-left: .5em solid #333;
        display: block
    }

        .tabs:not(.fixed) li {
            float: none;
            margin: 0 0 1em 0
        }

            .tabs:not(.fixed) li:last-child {
                margin-bottom: 2em
            }

            .tabs:not(.fixed) li a, .tabs:not(.fixed) li button {
                width: calc(100% - 2em);
                border-top-left-radius: 0;
                border-top-right-radius: .313em;
                border-bottom-right-radius: .313em;
                border: .063em solid transparent;
                border-left: none
            }
}

.id-govmetric {
    padding: 2em;
    margin: 8em 0 4em;
    border: .1em solid #ddd;
    clear: both
}

.id-content-bottom.container > .id-govmetric {
    margin-right: 0
}

.dark-mode .id-govmetric {
    border-color: #666
}

.id-govmetric li, .id-govmetric ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-govmetric ul {
    margin: 2em auto 0;
    width: 20em
}

.id-govmetric li {
    float: left;
    margin-left: 1em
}

    .id-govmetric li:first-child {
        margin: 0
    }

.id-govmetric p {
    margin: 0;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    color: #666;
    text-align: center
}

.dark-mode .id-govmetric p {
    color: #aaa
}

.id-govmetric p em {
    color: #fff;
    background-color: #666;
    font-style: normal;
    display: inline-block;
    padding: 0 .25em
}

.dark-mode .id-govmetric p em {
    color: #333;
    background-color: #aaa
}

.dark-mode .id-govmetric a, .id-govmetric a {
    display: block;
    overflow: hidden;
    font-size: 1em;
    height: 5.8em;
    width: 5.8em;
    border-radius: .5em;
    white-space: nowrap;
    background-color: #ccc;
    position: relative;
    text-indent: 100%;
    color: #fff;
    padding: 0;
    margin: 0 auto;
    transition: background-color .25s ease-out,color .25s ease-out;
    text-decoration: none;
    margin: 0 .2em .2em 0;
    box-shadow: .2em .2em 0 rgba(0,0,0,.1)
}

    .id-govmetric a:active {
        position: relative;
        top: .2em;
        left: .2em
    }

    .id-govmetric a::after {
        content: '';
        font-family: FontAwesome;
        font-weight: 300;
        text-align: center;
        overflow: hidden;
        font-size: 3em;
        position: absolute;
        top: 0;
        left: 0;
        height: 1.933em;
        width: 1.933em;
        line-height: 1.933em;
        margin: 0;
        text-indent: 0;
        display: block;
        overflow: hidden
    }

.id-govmetric .good a::after {
    content: '\f118'
}

.id-govmetric .average a::after {
    content: '\f11a'
}

.id-govmetric .poor a::after {
    content: '\f119'
}

.id-govmetric .good a {
    background-color: #2d862d
}

    .id-govmetric .good a:focus, .id-govmetric .good a:hover {
        background-color: #164316
    }

.dark-mode .id-govmetric .good a {
    background-color: #164316
}

    .dark-mode .id-govmetric .good a:focus, .dark-mode .id-govmetric .good a:hover {
        background-color: #2d862d
    }

.id-govmetric .average a {
    background-color: #f4a425;
    color: #513406
}

    .id-govmetric .average a:focus, .id-govmetric .average a:hover {
        background-color: #855406;
        color: #fff
    }

.dark-mode .id-govmetric .average a {
    background-color: #855406;
    color: #fff
}

    .dark-mode .id-govmetric .average a:focus, .dark-mode .id-govmetric .average a:hover {
        background-color: #f4a425;
        color: #513406
    }

.id-govmetric .poor a {
    background-color: #c00
}

    .id-govmetric .poor a:focus, .id-govmetric .poor a:hover {
        background-color: #600
    }

.dark-mode .id-govmetric .poor a {
    background-color: #600
}

    .dark-mode .id-govmetric .poor a:focus, .dark-mode .id-govmetric .poor a:hover {
        background-color: #c00
    }

.pagination {
    background-color: #eee;
    border: .1em solid #ccc;
    margin: 4em 0;
    padding: 1em;
    position: relative
}

.dark-mode .pagination {
    background-color: #111
}

.resultssummary + .pagination {
    margin-top: 0;
    border-top: none
}

.paging, .paging li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

@media all and (max-width:480px) {
    .paging li:nth-child(n+5) {
        display: none
    }
}

.paging {
    width: calc(100% - 10em);
    margin: 0 auto;
    display: flex;
    justify-content: center
}

    .paging li a, .paging li span {
        font-size: 1.6em;
        text-decoration: none
    }

.pagination .btn {
    padding: 0;
    display: block;
    line-height: 2.375em;
    height: 2.375em;
    width: 2.375em;
    text-align: center
}

.paging span {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    display: block;
    overflow: hidden;
    line-height: 2.375em;
    height: 2.375em;
    width: 2.375em;
    border: .063em solid #287cb3;
    background-color: #fff;
    color: #287cb3;
    border-radius: .313em;
    box-shadow: .125em .125em 0 rgba(0,0,0,.1);
    margin: 0 .125em .125em 0;
    text-decoration: none;
    pointer-events: none;
    user-select: none
}

.dark-mode .paging span {
    border-color: #143e59;
    background-color: #fff;
    color: #143e59
}

.pnext, .pprev {
    position: absolute;
    display: block;
    overflow: hidden;
    font-size: 1.6em;
    font-family: FontAwesome;
    font-weight: 300;
    text-align: center;
    line-height: 2.375em;
    height: 2.375em;
    width: 2.375em;
    color: #fff !important
}

.pnext {
    right: .625em;
    top: .625em
}

.pprev {
    left: .625em;
    top: .625em
}

.grid > div {
    border: 1px solid #ccc;
    padding: 2em
}

    .grid > div:not(:first-child) {
        border-top: none
    }

.grid .summary {
    margin-top: .5em
}

    .grid .summary p {
        font-size: 1.6em;
        margin: 0
    }

.grid a.title {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.5em;
    margin: 0
}

@media all and (min-width:720px) {
    .grid a.title {
        font-size: 1.8em
    }
}

@media all and (min-width:960px) {
    .grid a.title {
        font-size: 2em
    }
}

#vacancyv2search-template .side {
    margin-bottom: 0
}

.vacancylist ul:not(.paging), .vacancylist ul:not(.paging) li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.vacancylist .side {
    margin: 0
}

.id-howtoapply.highlight ul, .id-howtoapply.highlight ul li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

    .id-howtoapply.highlight ul li:not(:first-child) {
        margin-top: 1em
    }

.id-howtoapply.highlight a {
    display: block;
    overflow: hidden;
    border: .063em solid transparent;
    padding: 2em 2em 2em 9em;
    margin: 0 .2em .2em 0;
    background-color: #287cb3;
    color: #fff;
    transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
    border-radius: .313em;
    box-shadow: .2em .2em 0 rgba(0,0,0,.1);
    text-decoration: none;
    position: relative
}

    .id-howtoapply.highlight a:hover {
        color: #fff;
        background-color: #143e59;
        border-color: #143e59;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1)
    }

    .id-howtoapply.highlight a:active {
        transform: translate(.2em,.2em);
        box-shadow: none
    }

.dark-mode .id-howtoapply.highlight a {
    color: #fff;
    background-color: #143e59;
    border-color: #143e59
}

.item.internal h3::after {
    content: 'Internal position';
    display: block;
    font-family: 'Work Sans',sans-serif;
    font-weight: 400;
    font-size: .625em;
    margin-top: .313em;
    color: #c00
}

.dark-mode .item.internal h3::after {
    color: #f99
}

.dark-mode .id-howtoapply.highlight a:focus, .dark-mode .id-howtoapply.highlight a:hover {
    color: #fff;
    background-color: #287cb3;
    border-color: #287cb3
}

.id-howtoapply.highlight a::before {
    content: '';
    display: block;
    font-size: 4em;
    font-family: FontAwesome;
    font-weight: 300;
    position: absolute;
    top: .5em;
    left: .5em
}

.id-howtoapply.highlight .id-apply-online a::before {
    content: '\f109'
}

.id-howtoapply.highlight .id-apply-post a::before {
    content: '\f0e0'
}

.id-howtoapply.highlight a h3 {
    margin: 0 0 .417em
}

.id-howtoapply.highlight a p {
    margin-bottom: 0
}

.id-howtoapply > h4 {
    margin-top: 1em
}

.id-howtoapply p {
    font-size: 1.6em
}

.id-share {
    border-top: 1px solid #e5e5e5;
    padding: 1em 0 2em
}

    .id-share h2 {
        font-size: 1.6em;
        line-height: 2.5em;
        margin: 0;
        text-align: center;
        color: #666
    }

.dark-mode .id-share h2 {
    color: #ccc
}

.id-share li, .id-share ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.id-share ul {
    display: flex;
    justify-content: center
}

.id-share li {
    margin-left: 1em
}

    .id-share li:first-child {
        margin: 0
    }

.id-share button {
    font-size: 1em;
    display: block;
    overflow: visible;
    width: 4em;
    height: 4em;
    border: none;
    outline: 0;
    text-indent: 4em;
    padding: 0;
    background: 0 0;
    cursor: pointer;
    cursor: hand
}

    .id-share button::before {
        content: '';
        font-size: 2em;
        line-height: 1.8em;
        height: 1.8em;
        width: 1.8em;
        background-color: transparent;
        display: block;
        overflow: hidden;
        text-align: center;
        font-family: FontAwesome;
        font-weight: 300;
        text-indent: 0;
        border-radius: .25em;
        margin: 0 .1em .1em 0;
        border: 1px solid #ddd;
        color: #666;
        box-shadow: .1em .1em 0 rgba(0,0,0,.1);
        transition: background-color .25s ease-out,border-color .25s ease-out,color .25s ease-out;
        padding: 0
    }

.id-share .facebook::before {
    content: '\f09a';
    font-family: 'FontAwesome Brands'
}

.id-share .twitter::before {
    content: '\f099';
    font-family: 'FontAwesome Brands'
}

.id-share .email::before {
    content: '\f2b6'
}

.id-share .print::before {
    content: '\f02f'
}

.id-share button:focus::before, .id-share button:hover::before {
    background-color: #ddd;
    border-color: #999;
    color: #333
}

.id-share button:active::before {
    transform: translate(.1em,.1em);
    box-shadow: none
}

.dark-mode .id-share button::before {
    background-color: #333;
    border-color: #666;
    color: #fff
}

.dark-mode .id-share button:focus::before, .dark-mode .id-share button:hover::before {
    background-color: #666;
    border-color: #eee;
    color: #fff
}

@media all and (min-width:640px) {
    .id-share {
        padding: 2em 0
    }

        .id-share h2 {
            float: left;
            margin-right: .625em
        }

        .id-share ul {
            float: left
        }
}

.youtube, .youtubewrapper {
    margin: 4em 0;
    background-color: #eee;
    position: relative;
    padding: 0
}

    .youtube.expand, .youtubewrapper.expand {
        margin-right: 0
    }

    .youtube > div, .youtubewrapper > div {
        width: 100%;
        padding-bottom: calc((315/560) * 100%)
    }

    .youtube iframe, .youtubewrapper iframe {
        border: none;
        outline: 0;
        display: block;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

#CORPORATEFEEDBACKFORMGWB_MESSAGE_OUTER {
    margin-bottom: 0
}

.id-counter {
    background-image: none !important
}

.redesign .contact.author.assetmanagement .contactdetails li::before {
    background-color: transparent;
    color: #fff
}

.redesign .contact.author.assetmanagement .container {
    padding: 0 2em;
    width: auto;
    display: block
}

.redesign .contact.author.assetmanagement .btn {
    background-color: #233e8e;
    color: #fff;
    border-color: #fff;
    clear: none
}

    .redesign .contact.author.assetmanagement .btn:focus, .redesign .contact.author.assetmanagement .btn:hover {
        background-color: #fff;
        color: #233e8e;
        border-color: #fff
    }

.redesign .contact.author.assetmanagement a {
    color: #fff
}

    .redesign .contact.author.assetmanagement a:active, .redesign .contact.author.assetmanagement a:focus, .redesign .contact.author.assetmanagement a:hover {
        background-color: #fff;
        color: #233e8e
    }

.redesign .contact.author.assetmanagement figure {
    max-width: 200px;
    margin: 2em auto 0
}

@media all and (min-width:640px) {
    .redesign .contact.author.assetmanagement .contactdetails {
        float: left
    }

    .redesign .contact.author.assetmanagement figure {
        float: left;
        padding: 0;
        margin: 0 0 2em 0;
        max-width: none
    }
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('PT Serif'),local('PTSerif-Regular'),url(https://fonts.gstatic.com/s/ptserif/v12/EJRVQgYoZZY2vCFuvAFWzrk.woff) format('woff'),url(https://fonts.gstatic.com/s/ptserif/v12/EJRVQgYoZZY2vCFuvAFbzr-tdg.woff2) format('woff2')
}

body.fixed {
    overflow: hidden
}

.id-notification-cover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .id-notification-cover figure {
        margin: 0 auto;
        padding: 2em;
        position: relative
    }

    .id-notification-cover .h2, .id-notification-cover .h3 {
        font-family: 'PT Serif',serif;
        color: #fff;
        text-align: center;
        text-transform: none;
        font-weight: 400;
        line-height: 1.5em
    }

    .id-notification-cover .h2 {
        font-size: 2.4em;
        margin-bottom: 0
    }

    .id-notification-cover .h3 {
        font-size: 1.6em;
        white-space: nowrap;
        margin-top: 0
    }

    .id-notification-cover img {
        display: block;
        overflow: hidden;
        height: 175px;
        width: auto;
        margin: 0 auto 2em;
        transition: all .25s ease-out
    }

    .id-notification-cover .container {
        max-width: none
    }

.london-bridge .note .button {
    display: block;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-family: 'PT Serif',serif;
    border: .063em solid rgba(255,255,255,.5);
    font-size: 1.6em;
    line-height: 1.25em;
    padding: .5em 1.25em;
    margin: 0 .125em .125em 0;
    transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
    box-shadow: .125em .125em 0 rgba(255,255,255,.2);
    border-radius: .313em;
    width: 100%
}

    .london-bridge .note .button::after {
        content: '\f138';
        font-family: FontAwesome;
        font-weight: 300;
        display: inline-block;
        margin-left: .313em
    }

    .london-bridge .note .button:active {
        box-shadow: none;
        transform: translate(.125em,.125em)
    }

.london-bridge .note button.button {
    background-color: #fff;
    border-color: #fff;
    color: #000
}

    .london-bridge .note .button:focus, .london-bridge .note .button:hover, .london-bridge .note button.button:focus, .london-bridge .note button.button:hover {
        background-color: rgba(255,255,255,.2);
        border-color: #fff;
        color: #fff
    }

.london-bridge .note li, .london-bridge .note ul {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em
}

.dark-mode .id-header > .container > a::after, .london-bridge.full .id-header > .container > a::after {
    color: #fff
}

.london-bridge .note li:not(:first-child) {
    margin-top: 1em
}

.london-bridge.full .id-myaccount .btn, .london-bridge.full .id-searchbar .btn.submit {
    background-color: #333;
    color: #fff;
    border-color: #666;
    box-shadow: .125em .125em 0 rgba(255,255,255,.2)
}

    .london-bridge.full .id-myaccount .btn:active, .london-bridge.full .id-searchbar .btn.submit:active {
        box-shadow: none
    }

    .london-bridge.full .id-myaccount .btn:focus, .london-bridge.full .id-myaccount .btn:hover, .london-bridge.full .id-searchbar .btn.submit:focus, .london-bridge.full .id-searchbar .btn.submit:hover {
        background-color: #666;
        color: #fff;
        border-color: #666
    }

.london-bridge.full .id-footer .btn, .london-bridge.full .id-footer .id-socialmedia a {
    background-color: #666;
    color: #fff;
    border-color: #666
}

    .london-bridge.full .id-footer .btn:focus, .london-bridge.full .id-footer .btn:hover, .london-bridge.full .id-footer .id-socialmedia a:focus, .london-bridge.full .id-footer .id-socialmedia a:hover {
        background-color: #333;
        color: #fff;
        border-color: #333
    }

.london-bridge.dark-mode.full .id-footer .btn, .london-bridge.dark-mode.full .id-footer .id-socialmedia a {
    background-color: #333;
    color: #fff;
    border-color: #333
}

    .london-bridge.dark-mode.full .id-footer .btn:focus, .london-bridge.dark-mode.full .id-footer .btn:hover, .london-bridge.dark-mode.full .id-footer .id-socialmedia a:focus, .london-bridge.dark-mode.full .id-footer .id-socialmedia a:hover {
        background-color: #666;
        color: #fff;
        border-color: #666
    }

.london-bridge .id-alert {
    border-bottom: 1px solid #fff
}

@media all and (min-width:720px) {
    .london-bridge .id-notification-cover ul {
        display: flex;
        justify-content: center
    }

    .london-bridge .id-notification-cover li:not(:first-child) {
        margin: 0 0 0 2em
    }
}

@media all and (min-width:720px) and (min-height:500px) {
    .id-notification-cover .h2 {
        font-size: 3em
    }

    .id-notification-cover .h3 {
        font-size: 2em
    }

    .id-notification-cover img {
        height: 200px
    }
}

@media all and (min-width:720px) and (min-height:600px) {
    .id-notification-cover img {
        height: 300px
    }
}

@media all and (min-width:720px) and (min-height:700px) {
    .id-notification-cover img {
        height: 350px
    }
}

.id-notification-banner {
    background-color: #000;
    padding: 2em 0;
    border-top: .1em solid #333
}

    .id-notification-banner img {
        display: block;
        width: auto;
        height: 160px;
        margin: 0 auto 2em
    }

    .id-notification-banner .h2, .id-notification-banner .h3 {
        color: #fff;
        font-family: 'PT Serif',serif;
        font-weight: 400;
        text-align: center;
        line-height: 1.25em
    }

    .id-notification-banner .h2 {
        font-size: 2.4em;
        margin-bottom: 0
    }

    .id-notification-banner .h3 {
        font-size: 1.6em;
        white-space: nowrap;
        margin-bottom: 1.25em;
        margin-top: 0
    }

@media all and (min-width:960px) {
    .id-notification-banner li {
        float: left
    }

        .id-notification-banner li:not(:first-child) {
            margin: 0 0 0 2em
        }

    .id-notification-banner img {
        margin: 0 2em 0 0;
        float: left
    }

    .id-notification-banner .container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        flex-direction: row;
        max-width: none
    }

    .id-notification-banner figure {
        margin-right: 8em
    }

    .id-notification-banner button.button {
        margin: 0;
        white-space: nowrap;
        height: 100%;
        line-height: 1.75em
    }

    .id-notification-banner.note ul {
        margin-top: 5em
    }

    .id-notification-banner .h2 {
        margin-top: 2.083em
    }
}

.london-bridge.full ::-moz-selection, .london-bridge.full ::selection {
    color: #fff;
    background-color: #000
}

.london-bridge.dark-mode.full ::-moz-selection, .london-bridge.dark-mode.full ::selection {
    background-color: #fff;
    color: #000
}

.dark-mode .id-header > .container > a, .london-bridge.full .id-header > .container > a {
    background-image: url('https://www.southtyneside.gov.uk/media/44409/South-Tyneside-Council-Logo-(White)/SVG/logo-stc-white.svg')
}

.london-bridge.full .id-header {
    background-color: #000 !important
}

.dark-mode.london-bridge .id-breadcrumb, .london-bridge .id-breadcrumb {
    border-top: .1em solid #333;
    background-color: #000
}

    .london-bridge .id-breadcrumb a:focus, .london-bridge .id-breadcrumb a:hover {
        background-color: #fff;
        color: #000
    }

.london-bridge.full .id-toolbar {
    background-color: #111
}

    .london-bridge.full .id-toolbar button::before {
        background-color: #333;
        border-color: #666;
        color: #fff
    }

    .london-bridge.full .id-toolbar button:focus::before, .london-bridge.full .id-toolbar button:hover::before {
        background-color: #666;
        border-color: #eee;
        color: #fff
    }

    .london-bridge.full .id-toolbar #search-field {
        background-color: #111;
        color: #fff
    }

.id-addressconfirmation.highlight {
    padding: 1em;
    margin: 0;
    position: relative
}

.id-addressconfirmation p {
    font-size: 1.6em;
    line-height: 1.25em;
    margin: 0;
    display: block;
    overflow: hidden
}

.id-addressconfirmation h4 {
    margin: 0 0 .5em 0;
    display: block;
    font-size: 2em;
    line-height: 1em
}

    .id-addressconfirmation h4 span {
        text-transform: capitalize
    }

.id-addressconfirmation p:first-child {
    margin-bottom: .313em
}

.id-addressconfirmation .change {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 1em
}

    .id-addressconfirmation .change a, .id-addressconfirmation button.change {
        display: inline-block;
        overflow: hidden;
        border: .063em solid transparent;
        font-size: 1.2em;
        line-height: 1.25em;
        padding: .5em 1.25em;
        margin: 0 .125em .125em 0;
        background-color: #287cb3;
        color: #fff;
        transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        border-radius: .313em;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1);
        text-decoration: none
    }

        .id-addressconfirmation .change a:focus, .id-addressconfirmation .change a:hover, .id-addressconfirmation button.change:active, .id-addressconfirmation button.change:hover {
            color: #fff;
            background-color: #143e59;
            border-color: #143e59;
            box-shadow: .125em .125em 0 rgba(0,0,0,.1)
        }

        .id-addressconfirmation .change a:active, .id-addressconfirmation button.change:active {
            transform: translate(.125em,.125em)
        }

.dark-mode .id-addressconfirmation .change a, .dark-mode .id-addressconfirmation button.change {
    background-color: #143e59
}

    .dark-mode .id-addressconfirmation .change a:focus, .dark-mode .id-addressconfirmation .change a:hover, .dark-mode .id-addressconfirmation button.change:active, .dark-mode .id-addressconfirmation button.change:hover {
        background-color: #287cb3
    }

.id-address h3 {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    vertical-align: middle;
    padding: .625em 2.5em .625em 0;
    position: relative;
    margin: 0
}

    .id-address h3 em {
        font-style: normal;
        color: #c00;
        background-color: transparent
    }

        .id-address h3 em[title=required] {
            text-indent: 1em;
            display: block;
            float: right;
            overflow: hidden;
            width: 4em;
            height: 4em;
            white-space: nowrap;
            text-indent: 4em;
            margin-left: .125em;
            position: relative;
            font-size: .625em;
            position: absolute;
            top: 0;
            right: 0
        }

            .id-address h3 em[title=required]::before {
                content: '\f069';
                font-family: FontAwesome;
                font-weight: 300;
                text-indent: 0;
                text-align: center;
                font-size: 1.6em;
                position: absolute;
                top: .625em;
                right: 0;
                width: 1.25em;
                height: 1.25em;
                line-height: 1.25em
            }

.id-streetconfirmation.highlight {
    padding: 1em;
    margin: 0;
    position: relative
}

.id-streetconfirmation p {
    font-size: 1.6em;
    line-height: 1.25em;
    margin: 0;
    display: block;
    overflow: hidden
}

.id-streetconfirmation h4 {
    margin: 0 0 .5em 0;
    display: block;
    font-size: 2em;
    line-height: 1em;
    text-transform: capitalize
}

.id-streetconfirmation p:first-child {
    margin-bottom: .313em
}

.id-streetconfirmation .change {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 1em
}

    .id-streetconfirmation .change a, .id-streetconfirmation button.change {
        display: inline-block;
        overflow: hidden;
        border: .063em solid transparent;
        font-size: 1.2em;
        line-height: 1.25em;
        padding: .5em 1.25em;
        margin: 0 .125em .125em 0;
        background-color: #287cb3;
        color: #fff;
        transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
        font-family: Montserrat,sans-serif;
        font-weight: 700;
        border-radius: .313em;
        box-shadow: .125em .125em 0 rgba(0,0,0,.1);
        text-decoration: none
    }

        .id-streetconfirmation .change a:focus, .id-streetconfirmation .change a:hover, .id-streetconfirmation button.change:active, .id-streetconfirmation button.change:hover {
            color: #fff;
            background-color: #143e59;
            border-color: #143e59;
            box-shadow: .125em .125em 0 rgba(0,0,0,.1)
        }

        .id-streetconfirmation .change a:active, .id-streetconfirmation button.change:active {
            transform: translate(.125em,.125em)
        }

.dark-mode .id-streetconfirmation .change a, .dark-mode .id-streetconfirmation button.change {
    background-color: #143e59
}

    .dark-mode .id-streetconfirmation .change a:focus, .dark-mode .id-streetconfirmation .change a:hover, .dark-mode .id-streetconfirmation button.change:active, .dark-mode .id-streetconfirmation button.change:hover {
        background-color: #287cb3
    }

.id-street h3 {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.25em;
    vertical-align: middle;
    padding: .625em 2.5em .625em 0;
    position: relative;
    margin: 0
}

    .id-street h3 em {
        font-style: normal;
        color: #c00;
        background-color: transparent
    }

        .id-street h3 em[title=required] {
            text-indent: 1em;
            display: block;
            float: right;
            overflow: hidden;
            width: 4em;
            height: 4em;
            white-space: nowrap;
            text-indent: 4em;
            margin-left: .125em;
            position: relative;
            font-size: .625em;
            position: absolute;
            top: 0;
            right: 0
        }

            .id-street h3 em[title=required]::before {
                content: '\f069';
                font-family: FontAwesome;
                font-weight: 300;
                text-indent: 0;
                text-align: center;
                font-size: 1.6em;
                position: absolute;
                top: .625em;
                right: 0;
                width: 1.25em;
                height: 1.25em;
                line-height: 1.25em
            }

@media print {
    *, ::after, ::before {
        color: #000 !important;
        background: 0 0 !important;
        box-sizing: border-box !important;
        border-color: #000 !important
    }

    .id-scrollcontent, body, html {
        height: auto;
        overflow: auto
    }

    .id-scrollcontent {
        padding: 0 !important
    }

    body {
        font-size: 10px
    }

    #search-facets, #tabsnav, #ui-datepicker-div, .carousel, .gallery, .id-actions, .id-alert, .id-atoz, .id-banner, .id-breadcrumb, .id-categories, .id-contact, .id-footer, .id-header, .id-howtoapply, .id-leaderboard, .id-marker, .id-mpu, .id-news, .id-share, .id-sitemap, .id-toolbar, .id-user, .pagination, .paging .moreresults, form.horizontal {
        display: none !important
    }

    .id-content-bottom, .id-content-top {
        padding: 0 !important
    }

    table {
        border-color: #000 !important;
        margin: 2em 0 !important
    }

        .btn, .contact, .highlight, .highlight h1 em, .highlight h2 em, aside, hr, table td, table th {
            border: 1px solid #000 !important
        }

            .highlight h1 em, .highlight h2 em {
                display: inline-block
            }

    ol li::before {
        border-width: 1px;
        border-style: solid;
        border-color: #000 !important
    }

    ::after, ::before {
        color: #000 !important
    }

    .contactdetails li::before {
        border: 1px solid #000 !important
    }

    blockquote {
        border-color: #000 !important
    }

    .contact, .highlight, .id-counciltaxband, .image, .item, .linklist, aside, blockquote, table {
        page-break-inside: avoid
    }

        .contact .contactdetails, .contact .contactdetails li, .linklist ul, .linklist ul li {
            border-color: #000 !important
        }

        .linklist h1, .linklist h2 {
            border: 1px solid #000 !important
        }

            .linklist h1 em, .linklist h2 em {
                border: 1px solid #000 !important
            }

    .itemlist, .itemlist li {
        border: none !important
    }

    .list {
        border: none !important
    }

    a {
        text-decoration: none !important;
        color: #000 !important
    }

    .tags a {
        border: 1px solid #000 !important
    }

    .image .caption {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000
    }

    #search-results {
        border: none !important;
        width: auto;
        padding: 0;
        float: none
    }

    #tabpanels {
        border: none !important
    }

    .id-counciltaxband, .id-counciltaxband .band p {
        border: 1px solid #000 !important
    }

    .item {
        border: 1px solid #000
    }

        .item .details * {
            border-color: #000 !important
        }

        .item.event .details {
            width: 60%;
            margin-left: 40%;
            float: left
        }

        .item.event .datetime {
            width: 40%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
            border-bottom: none
        }

        .item.event .image {
            display: none !important
        }

        .item.location .details, .item.service .details {
            padding: 0 2em
        }

    .newslist .item time, .newslist h2, .newslist h2 em, .resultssummary, .resultssummary em, .searchlist .item time, .searchlist h2, .searchlist h2 em, .vacancylist h2, .vacancylist h2 em {
        border: 1px solid #000 !important
    }

    .newslist .item, .searchlist .item {
        border-top: none
    }

    dl.side, dl.side dd, dl.side dt {
        border-color: #000 !important
    }

    .vacancylist span {
        text-indent: 0 !important;
        display: inline !important
    }

    .id-key {
        border-top: 1px solid #000
    }

    .statistics li {
        border: 1px solid #000 !important
    }

    .calendar .weekend, .id-key .weekend {
        font-style: italic
    }

    .id-schoolholiday .holiday::after {
        content: '\f274';
        display: block;
        float: right;
        font-size: 1em;
        height: 1em;
        width: 1em;
        display: block;
        overflow: visible;
        font-family: FontAwesome;
        font-weight: 400;
        text-align: center;
        margin-right: .313em
    }

    .id-content aside.left, .id-content blockquote.left {
        float: left;
        width: 50%;
        margin: 0 2em 2em 0
    }

    .id-content aside.right, .id-content blockquote.right {
        float: right;
        width: 50%;
        margin: 0 0 2em 2em
    }

    .id-content blockquote.left, .id-content blockquote.right {
        margin: 0 0 2em 0
    }

    .datetime {
        width: 20%;
        float: left;
        margin: 0 1em 1em 0;
        border: 1px solid #000
    }

        .datetime.right {
            float: right;
            margin: 0 0 1em 1em
        }

        .datetime span {
            display: block
        }

        .datetime .day {
            font-size: 2em;
            line-height: .9em
        }

        .datetime .dayofweek::after {
            content: none
        }

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

    .image.left {
        width: auto;
        float: left;
        max-width: 50%;
        padding-right: 2em
    }

    .image.right {
        width: auto;
        float: right;
        max-width: 50%;
        padding-left: 2em
    }

    .icmvertical > fieldset {
        border: 5px solid #000
    }
}