@import url('https://fonts.googleapis.com/css2?family=Bitter:ital@0;1&family=Mulish:ital,wght@0,300;0,600;1,300;1,600&family=Rajdhani:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Mulish', sans-serif;
    color: #333;
    font-size: 1.8rem;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #fff;
}

.screenreader-text {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

    .screenreader-text:focus {
        background: #fff;
        color: #333;
        display: inline-block;
        height: auto;
        width: auto;
        position: static;
        margin: auto;
    }

.main-body {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: "header" "navigation" "content" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 63px 71px 1fr 80px;
}

main .container {
    margin-bottom: 50px;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
}

h1,
h2 {
    color: #061037;
    margin-bottom: 20px;
}

h1 {
    font-size: 3.7rem;
    font-family: 'Bitter', sans-serif;
}

h2 {
    font-size: 3rem;
}

a.logo {
    position: relative;
    top: 7px;
}

main table {
    width: 100%;
    padding: 0;
    margin: 30px 0;
    border-spacing: 0;
    border: 1px solid #1599c6;
}

    main table caption {
        font-size: 2.8rem;
        text-align: left;
        padding: 5px;
    }

    main table th[scope="colgroup"] {
        font-size: 1.8rem;
        background-color: #ade1f6;
        padding: 10px;
    }

    main table tbody tr:nth-child(odd) {
        background-color: #efefef;
    }

    main table td.numeric {
        text-align: right;
    }

    main table thead {
        background-color: #1599c6;
    }

        main table thead th {
            color: #fff;
            font-weight: 700;
            font-size: 1.8rem;
            padding: 10px;
        }

    main table tbody td,
    main table tbody th,
    main table tfoot td {
        font-size: 1.5rem;
        padding: 10px;
    }

    main table tfoot tr {
        background-color: #1599c6;
    }

        main table tfoot tr td a {
            margin-right: 5px;
            color: #fff;
        }

            main table tfoot tr td a:hover {
                color: #fff;
            }
.pronounce {
    font-weight: bold;
}

.required:after {
    content: " *";
    color: red;
}

.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

.throbber {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(21,153,198,.3);
    border-radius: 50%;
    border-top-color: rgb(21, 153, 198);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }

a[href$=".doc"]::before,
a[href$=".docx"]::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: bootstrap-icons;
    font-weight: 300;
    content: "\F38D";
    padding-right: 5px;
    color: #1599c6;
}

a[href$=".xls"]::before,
a[href$=".xlsx"]::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: bootstrap-icons;
    font-weight: 300;
    content: "\F368";
    padding-right: 5px;
    color: #1599c6;
}

a[href$=".pdf"]::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: bootstrap-icons;
    font-weight: 300;
    content: "\F63E";
    padding-right: 5px;
    color: #1599c6;
}

a[href$=".jpeg"]::before,
a[href$=".tif"]::before,
a[href$=".tiff"]::before,
a[href$=".gif"]::before,
a[href$=".png"]::before,
a[href$=".jpg"]::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: bootstrap-icons;
    font-weight: 300;
    content: "\F36D";
    padding-right: 5px;
    color: #1599c6;
}

p a[href$=".doc"]::before,
p a[href$=".docx"]::before,
p a[href$=".jpeg"]::before,
p a[href$=".tif"]::before,
p a[href$=".tiff"]::before,
p a[href$=".gif"]::before,
p a[href$=".png"]::before,
p a[href$=".jpg"]::before,
p a[href$=".pdf"]::before,
p a[href$=".xls"]::before,
p a[href$=".xlsx"]::before {
    padding-right: initial;
    content: none;
}


a[href$=".doc"]:hover::before,
a[href$=".docx"]:hover::before,
a[href$=".jpeg"]:hover::before,
a[href$=".tif"]:hover::before,
a[href$=".tiff"]:hover::before,
a[href$=".gif"]:hover::before,
a[href$=".png"]:hover::before,
a[href$=".jpg"]:hover::before,
a[href$=".pdf"]:hover::before,
a[href$=".xls"]:hover::before,
a[href$=".xlsx"]:hover::before {
    color: #23527c;
}

p.list-group-item-text {
    font-size: 15px;
    line-height: 159%;
    margin: 10px;
}

.list-group-item.active,
.list-group-item.active:hover {
    color: #caf2ff;
    background-color: #1599c6;
}

.visually-hidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.background-blue {
    background: linear-gradient(290deg,rgba(246,247,194,0.8) 9%,rgba(0,155,223,0.8) 41%);
}

.background-green {
    background: linear-gradient(290deg,rgba(246,247,194,0.8) 9%,rgba(0,168,142,0.8) 41%);
}

.background-pink {
    background: linear-gradient(290deg,rgba(246,247,194,0.8) 6%,rgba(237,192,244,0.7) 41%);
}

nav.main-nav li {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: .2rem;
    padding: 0 10px;
}

    nav.main-nav li.active {
        text-decoration: underline;
    }

.shim {
    display: block;
    width: 0;
}

.shim-5 {
    height: 5px;
}

.shim-10 {
    height: 10px;
}

.shim-15 {
    height: 15px;
}

.shim-20 {
    height: 20px;
}

.hr-line-dashed {
    margin-bottom: 20px;
    height: 20px;
    border-bottom: 1px dashed #dedede;
}

header {
    grid-area: header;
    padding: 10px 0 5px 0;
    background-color: #f6f6f6;
}

    header .menu-toggle {
        display: none;
    }

nav.main-nav {
    grid-area: navigation;
    background-color: #fff;
    box-shadow: #00000045 0 0 5px;
    z-index: 1;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

    nav ul li {
        display: inline-block;
    }

.main-nav ul li a:hover {
    border-top: 2px solid #002e54;
    text-decoration: none;
    transition: all .5s ease-out;
}

nav.main-nav ul li.active a:hover {
    border-top: 2px solid transparent;
}

nav.main-nav ul li.active {
    border-image: linear-gradient(90deg,#2b5e97 0%,#2b5e97 0%,#54c8e9 74.66%,#dae79a 100%) 1;
    border-style: solid;
    border-width: 0.3em 0 0 0;
    color: #002E54;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: .2rem;
    font-weight: 400;
    padding: 18px 10px;
}

nav.main-nav ul li a {
    border-top: 2px solid transparent;
    display: block;
    color: #002E54;
    font-size: 18px;
    letter-spacing: .2rem;
    font-weight: 400;
    padding: 18px 0;
    transition: all .5s ease-in;
}

nav.main-nav ul li > a {
    padding-left: 0;
}

.jumbotron {
    background: linear-gradient(290deg,rgba(246,247,194,0.8) 9%,rgba(0,155,223,0.8) 41%);
    background-position: center;
    background-size: cover;
    text-align: center;
    padding-top: 75px;
    padding-bottom: 75px;
}

    .jumbotron h1 {
        color: #fff;
        font-size: 60px;
        font-weight: 700;
        letter-spacing: .2rem;
        padding-bottom: 45px;
        text-shadow: 0 0 7px rgba(0,0,0,0.5);
    }

.input-group input[type="text"],
.input-group button {
    width: 100%;
    height: 100%;
    border: 1px solid #1599c6;
    border-radius: 0;
    padding: 15px;
    font-size: 18px;
    letter-spacing: .2rem;
}

.jumbotron button,
.jumbotron input[type="text"] {
    width: 100%;
    border: none;
    padding: 20px;
    font-size: 22px;
    letter-spacing: .2rem;
    border-radius: 0;
    border: none;
}

.jumbotron .search-box {
    height: 100%;
}

.jumbotron .input-group {
    box-shadow: 0 0 10px #000;
}

.main-dropdown {
    box-shadow: 0 0 10px #000;
}

.btn-group.main-toggle {
    width: 100%;
}

span.category {
    color: #666;
    font-style: italic;
}

main {
    grid-area: content;
}

button.main-dropdown {
    background-color: #fff;
    text-align: left;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: relative;
}

    button.main-dropdown i.fa {
        display: block;
        margin-top: 5px;
        float: right;
    }

.dropdown-links {
    position: absolute;
    z-index: 10;
    width: 100%;
    list-style-type: none;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0;
}

    .dropdown-links li {
        display: block;
        margin-left: 15px;
        margin-right: 15px;
        text-align: left;
    }

        .dropdown-links li a {
            text-decoration: none;
            display: block;
            background-color: #efefef;
            padding: 5px 20px;
            font-size: 18px;
        }

            .dropdown-links li a:hover {
                background-color: #1599c6;
                color: #fff;
            }

.jumbotron button.search-button {
    background-color: #1599c6;
    color: #fff;
    font-weight: 700;
}

footer {
    grid-area: footer;
    background-color: #009bdfe6;
    color: #fff;
    padding: 40px 0 0 20px;
    font-size: 1.3rem;
}

.btn {
    letter-spacing: .3px;
    padding: 18px 30px;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s;
    border-radius: 0;
}

    .btn.inline {
        display: inline-block;
    }

.btn-primary,
.btn-primary:focus {
    background-color: #1289b2;
    border-color: #1289b2;
}

    .btn-primary:hover,
    .btn-default:hover {
        background-color: #015CA4;
        transition: all 0.3s;
    }

.btn-default {
    background-color: #494949;
    border-color: #494949;
}

    .btn-default:hover,
    .btn-default:active:focus,
    .btn-default:active,
    .btn-default:focus,
    .btn-default.focus,
    .open > .dropdown-toggle.btn-default:focus,
    .open > .dropdown-toggle.btn-default:hover {
        background-color: #015CA4;
        color: #fff;
        border-color: #494949;
    }

.form-control {
    border-radius: 0;
    height: 35px;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 50px;
}

.dropdown .btn {
    margin-bottom: 0;
}

.dropdown-menu {
    border-radius: 0;
}

.btn .caret {
    color: #fff;
    margin-left: 10px;
}

.btn-xs {
    padding: 1px 5px;
}

.btn-sm {
    padding: 5px 10px;
}

.btn-lg {
    padding: 22px 36px;
}

.input-group-addon {
    border-radius: 0;
    border-color: #aaa;
}

.input-group input[type="text"],
.input-group button {
    padding: 10px;
    font-size: 16px;
}

.breadcrumb {
    border-radius: 0;
}

ol.breadcrumb li,
ol.breadcrumb li a {
    font-size: 14px;
}

dl dd {
    font-style: italic;
    padding-left: 15px;
    margin-bottom: 20px;
    font-size: 16px;
}

dl a {
    font-size: 16px;
}

/*.pagination li a,
.pagination li a span {
    font-size: 14px;
}*/

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    padding: 5px 12px 7px 12px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: #1599c6;
    border-color: #1599c6;
}

.modal-content {
    border-radius: 0;
}

.modal-header {
    background-color: #1599c6;
    color: #fff;
}

.close {
    opacity: .5;
}

@media screen and (max-width:992px) {
    .container {
        width: 100%;
    }

    .jumbotron {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 15px;
    }

        .jumbotron h1 {
            font-size: 45px;
        }

        .jumbotron button,
        .jumbotron input[type="text"] {
            font-size: 22px;
            padding: 15px;
        }
}

@media screen and (max-width: 767px) {

    .main-body {
        grid-template-areas: "header" "content" "footer";
        grid-template-rows: 63px 1fr 80px;
    }

    header {
        border-bottom: 1px solid #1599c6;
    }

        header .menu-toggle {
            display: block;
            float: right;
            color: #1599c6;
            font-size: 20px;
            padding: 10px;
        }

    nav ul {
        margin: 0 -15px 0 -15px;
    }

    .main-nav {
        position: absolute;
        width: 100%;
        top: 63px;
        z-index: 10;
        display: none;
    }

        .main-nav ul li {
            width: 100%;
            display: block;
            padding: 0;
        }

    nav.main-nav ul li a {
        font-size: 18px;
        padding: 20px;
        background-color: #fff;
    }

    .main-dropdown {
        margin-top: 10px;
    }

        .main-dropdown.active {
            position: relative;
            left: 0;
            right: 0;
            width: 100%;
            transition: background 0.3s;
            background-color: #1599c6;
            font-weight: 700;
            color: #fff;
        }

            .main-dropdown.active i.fa {
                color: #fff;
            }

    .jumbotron {
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .jumbotron h1 {
            font-size: 32px;
            padding-bottom: 20px;
        }

        .jumbotron button,
        .jumbotron input[type="text"] {
            font-size: 18px;
            padding: 10px;
        }

    .breadcrumb {
        margin: 0 -15px;
        border-bottom: 1px solid #ddd;
    }
}