/* General + Sticky Navigation */
html {
    font-family: 'Gotham', Arial, Verdana, sans-serif;
    font-size: 12pt;
    letter-spacing: 0.03125em;
    line-height: 1.3;
}

body {
    background-color: white;
}

#main {
    width: 100%;
}

header, footer {
    padding: 1em;
    color: black;
    clear: left;
    text-align: center;
    background-color: white;
}

footer {
    border-top: 2px solid #414042;
}

article {
    margin: 1em 12.5%;
    background-color: #ecf3f9;
    padding: 1em;
    overflow: hidden;
}

.content {
    padding: 16px;
    margin-top: 1em;
    border-radius: 5px;
    margin-left: 230px;
}

    .content.nosidebar {
        margin-left: 12.5%;
    }

article p a {
    text-decoration: none;
}

    article p a:hover {
        text-decoration: underline;
    }

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

    .sticky + .content {
        margin-top: 72px;
        margin-left: 238px;
    }

        .sticky + .content.nosidebar {
            margin-left: 12.5%;
        }

/* Top Navigation */
.nav-container {
    background-color: #414042;
    border-top: 2px solid #414042;
    border-bottom: 2px solid #414042;
}

.dropMenu {
    list-style-type: none;
    display: flex;
    width: 75%;
    margin: auto;
    padding: 0;
    justify-content: space-between;
}

    .dropMenu li {
        display: inline-block;
        float: left;
    }

        .dropMenu li a {
            padding: 14px 16px;
            display: block;
            color: #f2f2f2;
            text-align: center;
            text-decoration: none;
            font-size: 17px;
        }

            .dropMenu li a:hover {
                background-color: #ffffff;
                color: black;
                font-weight: bolder;
            }

    .dropMenu ul {
        position: absolute;
        left: -9999px;
        top: -9999px;
        list-style-type: none;
        background-color: #f2f2f2;
        border-top: none;
    }

    .dropMenu li:hover {
        position: relative;
        background-color: #ffffff;
    }

        .dropMenu li:hover a {
            color: black;
        }

        .dropMenu li:hover ul {
            top: auto;
            left: 0px;
            border: 2px solid #414042;
            border-top: 1px solid #414042;
            background-color: #414042;
            padding: 0;
            margin: 1px -1px 0 -1px;
        }

            .dropMenu li:hover ul a {
                color: #f2f2f2;
                text-align: left;
            }

            .dropMenu li:hover ul li {
                width: 100%;
            }

                .dropMenu li:hover ul li a {
                    display: block;
                }

                    .dropMenu li:hover ul li a:hover {
                        background-color: #ffffff;
                        color: black !important;
                        font-weight: bolder;
                    }

.hiddenNav {
    display: none;
}

.navigation .icon {
    display: none;
}

.mainLogo {
    height: 200px;
}

#Mobile {
    display: none;
}

/* Side Navigation */
.sidenav {
    background: #414042;
    overflow-x: hidden;
    float: left;
    margin: 1em;
    width: 200px;
    height: auto;
    border-radius: 5px;
    border: 2px solid #414042;
    box-shadow: 0 0 0 2px #f2f2f2;
}

    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 17px;
        color: #f2f2f2;
        display: block;
    }

        .sidenav a:hover {
            background-color: #ffffff;
            color: black;
            font-weight: bolder;
        }

    .sidenav.responsive.sticky {
        display: none;
    }

/* Mobile Navigation */
.navMobile {
    width: 100%;
}

.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid #414042;
    border-bottom: 2px solid #414042;
    border-collapse: collapse;
}

    .submenu:last-child {
        border-bottom: none;
    }

    .mainmenu a {
        display: block;
        background-color: #414042;
        text-decoration: none;
        padding: 0.5em 0.5em 0.5em 1em;
        color: #f2f2f2;
    }

        .mainmenu a:hover {
            background-color: #ffffff;
            color: black;
            font-weight: bolder;
        }

    .submenu a {
        background-color: #414042;
        color: #f2f2f2;
    }

        .submenu a:hover {
            background-color: #ffffff;
            color: black;
            font-weight: bolder;
        }

    .submenu.hideSubNav {
        display: none;
    }

    .submenu:not(.hideSubNav) {
        max-height: 300px;
        display: block;
    }

.thumbnail {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
    padding: 0;
}

    .thumbnail a {
        margin: auto;
        display: table-cell;
    }

        .thumbnail a img {
            height: 63px;
        }

@media screen and (max-width: 875px) {
    .thumbnail {
        display: block;
    }

        .thumbnail a {
            width: 32.33%;
            display: inline-block;
            margin: 0;
            padding: 0;
        }
}

@media screen and (max-width: 515px) {
    .thumbnail a {
        width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .mainLogo {
        height: 125px;
    }

    article {
        margin: 1em 6.25%;
    }

    .content {
        margin-left: 6.25%;
    }

    .sticky + .content {
        margin-left: 6.25%;
    }

    .nav-container {
        display: block;
    }

        .nav-container a {
            padding: 14px 16px;
            padding-left: 6.25%;
            text-decoration: none;
            color: #f2f2f2;
            display: block;
            text-align: left;
            width: 100%;
        }

            .nav-container a:hover {
                background-color: #ffffff;
                color: black;
                font-weight: bolder;
            }

        .nav-container.responsive {
            position: relative;
        }

            .nav-container.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
    /* Override: No sidebar */
    .nosidebar {
        margin-left: 6.25% !important;
    }

    #Tablet-Desktop {
        display: none;
    }

    #Mobile {
        display: block;
    }

    .navMobile:not(.responsive) {
        display: none;
    }

    .navMobile ul li a {
        padding-left: 6.25%;
    }
}

@media screen and (max-width: 480px) {
    .mainLogo {
        height: auto;
        width: 100%;
    }

    #Tablet-Desktop {
        display: none;
    }

    #Mobile {
        display: block;
    }

    .content {
        margin-left: 1em !important;
        margin-right: 1em !important;
    }

    .nav-container a {
        padding-left: 1em;
    }

    .navMobile:not(.responsive) {
        display: none;
    }

    .sticky + .content {
        margin-left: 1em;
    }

    .languageLink {
        font-size: smaller;
    }

    article {
        margin: 1em !important;
    }

    .siteMenu {
        display: block;
        height: auto !important;
        column-fill: auto !important;
        column-count: 1 !important;
        width: 100% !important;
        margin: 0 2em 0 0;
    }

    .siteMenuSection {
        width: 100% !important;
    }
}

/* Data Table*/
.dataTable {
    border-collapse: collapse;
}

    .dataTable, .dataTable th, .dataTable td {
        border: 1px solid #ecf3f9;
        padding: 0.25em 0.5em;
    }

        .dataTable tr td:first-child {
            background-color: #672C8B;
            color: white;
            font-weight: bolder;
        }

        .dataTable tr td:not(:first-child) {
            background-color: #D4C7E1;
        }

/* Click through fix for links under nav div */
#FullNav {
    pointer-events: none;
}

    #FullNav div {
        pointer-events: auto;
    }

.languageLink {
    text-align: right;
    float: right;
    font-weight: bolder;
}

.boldMe {
    font-weight: bolder;
}

.textImportant {
    color: #672C8B;
    font-weight: bolder;
}

.siteMenu ul {
    list-style-type: none;
}

.siteMenu {
    column-fill: balance;
    column-count: 3;
    width: 100%;
}

.siteMenuSection {
    display: block;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column; /* CSS3, IE10+ */
    width: 90%;
    margin-left: 1em;
}

    .siteMenuSection div {
        text-align: left;
    }

        .siteMenuSection div a {
            text-decoration: none;
            color: black;
        }

            .siteMenuSection div a:hover {
                text-decoration: underline;
            }

        .siteMenuSection div:first-child a {
            font-weight: bolder;
            color: #672C8B;
            margin-left: -0.5em;
        }

        .siteMenuSection div:first-child {
            padding: 1.5em 0 0 0;
        }

        .siteMenuSection div:not(:first-child) a {
            margin-left: -3.5em;
            padding-left: 3em;
        }

    .siteMenuSection:last-child {
        text-align: center;
    }

        .siteMenuSection:last-child div img {
            width: 100%;
            max-width: 350px;
        }

.copyright {
    margin-top: 25px;
}

.footer {
    margin: 0 12.5%;
}

@media screen and (max-width: 1024px) {
    .footer {
        margin: 0 6.25%;
    }
}

@media screen and (max-width: 480px) {
    .footer {
        margin: 0 1em;
    }
}