/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/Roboto/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../Fonts/Roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Roboto/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Roboto/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/Roboto/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('../Fonts/Roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Roboto/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/Roboto/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../Fonts/Roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Roboto/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Roboto/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Roboto/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* lato-300 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/Lato/lato-v16-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Lato Light'), local('Lato-Light'),
    url('../Fonts/Lato/lato-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Lato/lato-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Lato/lato-v16-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/Lato/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Lato Regular'), local('Lato-Regular'),
    url('../Fonts/Lato/lato-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Lato/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Lato/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../Fonts/Lato/lato-v16-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Lato Bold'), local('Lato-Bold'),
    url('../Fonts/Lato/lato-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Lato/lato-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Lato/lato-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Lato/lato-v16-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}



@media all {

    body {
        font-family: "Roboto", sans-serif;
        line-height: 1.5rem;
        color: #1f1f1f;
        background: #fff;
        hyphens: auto;
    }

    body:after {
        content: 'viewport-xs';
        display: none;
    }
    head {
        font-family: 'viewport-xs';
    }
    p, li {
        font-size: 1rem;
        line-height: 1.75rem;
    }
    ol.lower-alpha {
        list-style: lower-alpha;
    }

    #container {
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
    }

    #container.hovered {
        -webkit-transform: translate(20rem, 0px);
        -moz-transform: translate(20rem, 0px);
        -o-transform: translate(20rem, 0px);
        -ms-transform: translate(20rem, 0px);
        transform: translate(20rem, 0px);

    }

    .clearer { clear: both; }

    .align-right {
        text-align: right;
    }
    .bold {
        font-weight: bold;
    }
    .hidden {
        display: none;
    }
    b, strong {
        font-weight: 400;
    }

    /* header */
    #header-container {
        width: 100%;
        background: hsl(207,48%,97%);
        background: linear-gradient(180deg, hsl(207,78%,93%) 15%, hsl(207,78%,97%) 100%) no-repeat;
    }

    #header {
        display: flex;
        flex-flow: column wrap;
        max-width: 20rem;
        margin: 0 auto;
        padding: 2rem 0;

    }
    #header h1 {
        font-family: Lato, Arial, sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        color: hsl(207,78%,36%);
        line-height: 1.25em;
        margin: 0;
        text-align: center;
    }
    #header h2 {
        font-family: Roboto, Arial, sans-serif;
        font-size: 1.375rem;
        font-weight: 300;
        color: hsl(207,78%,46%);
        line-height: 1.25em;
        margin: 1rem 0 0;
        text-align: center;
    }
    #header .ce-textpic {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-row-gap: 1rem;
    }
    #header .ce-gallery {
        grid-column: span 24;
        margin: 0;
        align-self: center;
    }
    #header .ce-gallery .ce-column {
        float: none;
    }
    #header .ce-gallery .ce-column figure {
        width: 100%;
    }
    #header .ce-gallery .ce-column figure a {
        display: block;
    }
    #header .ce-gallery .ce-column figure a img {
        padding: 0 1rem;
        margin: auto;
    }
    #header .ce-bodytext {
        grid-column: span 24;
        align-self: center;
        padding: 0 0.5rem;
    }
    #logo {
        order: 2;
    }
    #meta-navigation {
        order: 1;
        padding: 0 0 3rem;
        position: relative;
    }
    #meta-navigation ul {
        margin: 0 1rem 0 0;
        padding: 0;
        list-style-type: none;
        text-align: right;
    }
    #meta-navigation ul li {
        display: inline-block;
        margin-right: 0.5rem;
    }
    #meta-navigation ul li.last {
        margin: 0;
    }
    #meta-navigation ul li a {
        color: #1462a2;
        text-decoration: none;
        font-size: 0.8125rem;
        font-weight: 300;
    }
    #meta-navigation ul li a:hover {
        text-decoration: underline;
    }

    #contentainer {
        width: 100%;
        background: #fff;
    }

    #content-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 0;
        grid-row-gap: 2rem;
        max-width: 20rem;
        margin: 0 auto;
        padding: 3rem 1rem;
    }
    #content {
        grid-column: span 12;
    }
    #content h2 {
        font-family: Roboto, Arial, sans-serif;
        font-size: 1.25rem;
        line-height: 1.375em;
        font-weight: 300;
        color: hsl(207,28%,36%);
        margin: 0 0 1.25em;
    }
    #content h3 {
        font-family: Lato, Arial, sans-serif;
        font-size: 1.625rem;
        font-weight: 400;
        line-height: 1.375em;
        color: hsl(354,83%,41%);
        margin: 1em 0;
    }
    #content h4,
    #content h4 a {
        font-family: Lato, Arial, sans-serif;
        font-size: 1.375rem;
        font-weight: 400;
        line-height: 1.375em;
        color: hsl(207,48%,46%);
        margin: 1em 0;
    }
    #content h5 {
        font-family: Lato, Arial, sans-serif;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.375em;
        color: hsl(207,38%,36%);
        margin: 1em 0;
    }
    #content p, #content li {
        font-size: 1rem;
        font-weight: 300;
        line-height: 2em;
        color: hsl(207,28%,26%);
        margin: 0 0 1.5em;
    }
    #content li {
        line-height: 1.75em;
        margin: 0;
    }
    #content a {
        font-size: 1rem;
        color: hsl(207,48%,46%);
        text-decoration: none;
    }
    #content a:hover {
        text-decoration: underline;
    }
    #content .contenttable {
        width: 100%;
        border: 1px solid hsl(207,48%,86%);
    }
    #content .contenttable td {
        padding: 0.5rem;
    }
    #content .contenttable tr {
        display: grid;
        grid-template-columns: repeat(12,1fr);
    }
    #content .contenttable tr:nth-child(odd) {
        background: hsl(207,68%,95%);
    }
    #content .contenttable td:nth-of-type(1) {
        grid-column: span 10;
        align-self: center;
        color: hsl(207,48%,36%);
        font-weight: 300;
    }
    #content .contenttable td:nth-of-type(2) {
        grid-column: span 2;
        text-align: right;
        align-self: center;
        color: hsl(207,48%,36%);

    }
    #content .page-navigation {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    #content .page-navigation p {
        grid-column: span 6;
    }
    #content .page-navigation ul {
        grid-column: span 6;
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: right;
    }
    #content .page-navigation ul li {
        display: inline-block;
        margin-left: 1rem;
    }
    #content .news-related-wrap {

    }
    #content .news-related {
        border-top: 1px solid hsl(207,48%,86%);
        margin: 5rem 0;
    }

    #content .news-img-wrap {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 1.5rem;
        grid-row-gap: 2rem;
    }
    #content .news-img-wrap .outer {
        grid-column: span 6;
    }

    #sidebar {
        grid-column: span 12;
        background: hsla(207, 78%, 95%, 0.5);
        padding: 2rem 1.5rem;
        align-self: start;
        hyphens: auto;
        word-break: break-word;
    }
    #sidebar h2 {
        font-family: Roboto, Arial, sans-serif;
        font-size: 1.5rem;
        line-height: 1.375em;
        font-weight: 300;
        color: hsl(207, 38%, 46%);
        margin: 0 0 1.25em;
    }
    #sidebar h3 {
        font-family: Lato, Arial, sans-serif;
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.375em;
        color: hsl(207,38%,36%);
        margin: 1em 0;
    }
    #sidebar h3 a {
        text-decoration: none;
        color: hsl(207,38%,36%);
    }
    #sidebar p, #sidebar li {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5em;
        color: hsl(207,38%,36%);
        margin: 0 0 1.5em;
    }
    #sidebar a {
        color: hsl(207,38%,36%);
    }
    #sidebar ul {
        margin: 0 0 2rem;
        padding: 0 0 0 1rem;
    }
    #sidebar li {
        line-height: 1.75em;
        margin: 0;
    }
    #sidebar a.more {
        display: inline-block;
        text-decoration: none;
        background: hsl(207,48%,76%);
        color: hsl(207,8%,26%);
        padding: 0.25rem 0.5rem;
    }
    #sidebar a.more:hover {
        background: hsl(207,48%,66%);
        color: hsl(207,8%,16%);
    }


    /* mobile nav */

    #nav-toggle {
        position: absolute;
        left: 1rem;
        top: 0;
    }
    #nav-toggle a {
    }

    #nav-close a,
    #nav-toggle a {
        color: hsl(207,48%,36%);
        text-decoration: none;
        padding: 0.25rem;
        display: inline-block;
    }

    #nav-close a {
        padding: 2rem 1rem;
        color: #fff;
    }

    #nav-close a .icon,
    #nav-toggle a .icon {
        padding: 0.25rem 0;
        border-top: 0.25rem solid currentColor;
        border-bottom: 0.25rem solid currentColor;
        display: inline-block;
        width: 1.75rem;
        vertical-align: middle;
        position: relative;
    }
    #nav-toggle a .icon:before {
        content: "";
        background: currentColor;
        display: block;
        height: 0.25rem;
    }

    #nav-close a .icon,
    #nav-toggle a.active .icon { border: none; top: -0.15em; }
    #nav-close a .icon:before,
    #nav-close a .icon:after,
    #nav-toggle a.active .icon:before,
    #nav-toggle a.active .icon:after {
        content: "";
        background: currentColor;
        display: block;
        height: 0.3125em;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: 0;}
    #nav-close a .icon:after,
    #nav-toggle a.active .icon:after {
        transform: rotate(-45deg);
    }

    #main-navigation {
        display: none;
    }

    #main-navigation.offcanvas {
        display: block;
        position: absolute;
        top: 0;
        width: 20rem;
        left: -20rem;
        min-height: 100%;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background: hsl(207,48%,36%);
        z-index: 2001;
    }
    #main-navigation.offcanvas.active {
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    #main-navigation.offcanvas #main-nav {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #main-navigation.offcanvas #main-nav li {
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    #main-navigation.offcanvas #main-nav li a {
        color: hsl(207,88%,86%);
        text-decoration: none;
        display: block;
        padding: 1rem;
        font-weight: 300;
    }

    #main-navigation.offcanvas #main-nav > .sublevel {
        display: none;
    }
    #main-navigation.offcanvas #main-nav .parent.hover > .sublevel {
        display: block;
    }

    #main-navigation.offcanvas #main-nav .sublevel li {

    }
    #main-navigation.offcanvas #main-nav .sublevel li a {
        padding-left: 2rem;
    }
    #main-navigation.offcanvas #main-nav .sublevel li li a {
        padding-left: 4rem;
    }

    #main-navigation.offcanvas #main-nav li.parent a {
        margin-right: 3rem;
        position: relative;
    }

    #main-navigation.offcanvas #main-nav li a span.more {
        position: absolute;
        left: 100%;
        right: -3rem;
        top: 0;
        bottom: 0;
        cursor: pointer;
        z-index: 1;
        background: transparent;
    }
    #main-navigation.offcanvas #main-nav li a.active span.more {

    }

    #main-navigation.offcanvas #main-nav li a span.more span.icon {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.625rem;
        height: 0.625rem;
        border: 2px solid currentColor;
        border-width: 0 2px 2px 0;
        transition: all 0.2s;
        transform: translate(-50%, -50%) rotate(45deg);
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
    }

    #main-navigation.offcanvas #main-nav li.hover a span.more span.icon,
    #main-navigation.offcanvas #main-nav li.hover li.hover a span.more span.icon {
        transform: translate(-50%, -50%) rotate(-135deg);
        -webkit-transform: translate(-50%, -50%) rotate(-135deg);
        -moz-transform: translate(-50%, -50%) rotate(-135deg);
        -ms-transform: translate(-50%, -50%) rotate(-135deg);
    }

    #main-navigation.offcanvas #main-nav li.hover li a span.more span.icon {
        transform: translate(-50%, -50%) rotate(45deg);
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
    }
    #main-navigation.offcanvas ul li.active {
        background: rgba(255, 255, 255, 0.25);
    }

    #main-navigation.offcanvas ul li > a.active {
        font-weight: 400;
    }
    #main-navigation.offcanvas ul ul.sublevel {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: none;
    }
    #main-navigation.offcanvas ul li.hover > ul.sublevel {
        display: block;
    }

    #main-navigation ul.sublevel {
        display: none;
    }


    /* grid elements */

    .grid-25,
    .grid-33,
    .grid-40,
    .grid-50,
    .grid-60,
    .grid-66,
    .grid-75
    {
        float: none; width: 100%;
    }

    /* images */

    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: calc((100% / 2) - (1 * (30px / 2)));
    }
    .ce-gallery[data-ce-columns="3"] .ce-column {
        width: calc((100% / 3) - (2 * (30px / 3)));
    }
    .ce-gallery[data-ce-columns="4"] .ce-column {
        width: calc((100% / 2) - (2 * (30px / 2)));
    }
    .ce-gallery[data-ce-columns="5"] .ce-column {
        width: 100%
    }
    .ce-gallery[data-ce-columns="6"] .ce-column {
        width: calc((100% / 3) - (3 * (30px / 3)));
    }
    .ce-gallery[data-ce-columns="7"] .ce-column {
        width: 100%;
    }
    .ce-gallery[data-ce-columns="8"] .ce-column {
        width: calc((100% / 2) - (2 * (30px / 2)));
    }
}