/*Default Styles*/
* {
    box-sizing: border-box;
}
/* Block text selection */
*:not(input):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(255, 255, 255);
    background-color: #E3DEDD;
    min-width: 320px;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    color: rgb(20, 27, 77);
    overflow-x: hidden;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE and Edge */
body {
    -ms-overflow-style: none;
}
ul {
    display: inline-block;
}
li {
    margin: 0.5rem 0;
    font-size: 1rem;
}
p:not(.noDefault), h1:not(.noDefault), h2:not(.noDefault), h3:not(.noDefault), h4:not(.noDefault), h5:not(.noDefault), h6:not(.noDefault), li:not(.noDefault) {
    cursor: default;
}
p, h1, h2, h3, h4, h5, h6, li {
    color: rgb(20, 27, 77);
}
a.link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}
a.link:hover {
    border-bottom: 3px solid rgb(181, 133, 0);
}


/* Navigation Bar Styles */
#navBar {
    position: fixed;
    width: 100%;
    height: 8rem;
    background-color: rgb(255, 255, 255);
    transition: 0.3s;
    overflow: hidden;
    z-index: 99;
    color: rgb(153, 153, 153);
}
#navBar.navBarClose {
    height: 6rem;
}
#navBarBox {
    position: relative;
    width: 100%;
    top: 50%;
}
.navInfo {
    margin: 0;
    color: rgb(153, 153, 153);
}
.navLogo {
    width: 30px;
    height: 30px;
    margin-bottom: 0.1rem;
}
#navLeft {
    position: relative;
    float: left;
    margin-left: 4%;
    top: 50%;
    transform: translate(0%, -50%);
}
#navName {
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
    text-align: center;
    color: rgb(37, 47, 128);
}
.navInfo > h5 {
    margin: 0;
    font-size: 0.83rem;
    text-align: center;
    color: rgb(153, 153, 153);
}
#navRight {
    position: relative;
    float: right;
    margin-right: 2%;
    top: 50%;
    transform: translate(0%, -50%);
}
#navRight > a {
    float: left;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: rgb(153, 153, 153);
    width: 5.3rem;
    margin: 0.1rem;
    background-color: transparent;
}
#navRight > a:hover, .active {
    color: rgb(179, 131, 0);
    filter: invert(61%) sepia(50%) saturate(5822%) hue-rotate(24deg) brightness(95%) contrast(101%);
    cursor: pointer;
}
.navHide.hidden {
    display: none;
}
.navHide.show {
    display: unset;
}


/* Section Body Styles */
section {
    position: absolute;
    width: 100%;
    display: none;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
}
.currentSection {
    display: block;
}
.sectionTopFill {
    height: 8rem;
    transition: 0.2s;
    background-color: rgb(20, 27, 77);
}
.sectionTopFill.sectionTopFillClose {
    height: 6rem;
}
.sectionBar {
    position: relative;
    width: 100%;
    height: 6rem;
    text-align: center;
    background-color: rgb(20, 27, 77);
}
.sectionBar > h2 {
    position: relative;
    font-size: 1.5rem;
    color: rgb(181, 133, 0);
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}
.sectionBody {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 4rem auto 2rem;
}


/* Card Styles */
.cardRow {
    position: relative;
    margin: 0 auto 3.5rem;
}
.card {
    position: relative;
    height: 100%;
    padding: 1.6rem 2rem 2.2rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: 0.3s;
    background-color: rgb(255, 255, 255);
}
.card:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.32), 0 2px 10px 0 rgba(0, 0, 0, 0.24);
}
.cardGrid {
    position: relative;
    display: grid;
    grid-gap: 3.5rem 4%;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}


/* Media Queries Styles */
@media screen and (max-width: 1200px) {
    .sectionBody {
        width: 83%;
        margin: 3.5rem auto 2rem;
    }
}
@media screen and (max-width: 900px) {
    #navBar {
        height: 6rem;
    }
    #navBar.navBarClose {
        height: 4rem;
    }
    .navLogo {
        width: 25px;
        height: 25px;
    }
    #navLeft {
        margin-left: 3%;
    }
    #navName {
        font-size: 1.2rem;
    }
    .navInfo > h5 {
        font-size: 0.73rem;
    }
    #navRight {
        margin-right: 1%;
    }
    #navRight > a {
        font-size: 0.7rem;
        width: 4rem;
        margin: 0.1rem;
    }
    .sectionTopFill {
        height: 6rem;
    }
    .sectionTopFill.sectionTopFillClose {
        height: 4rem;
    }
    .sectionBar {
        height: 4rem;
    }
    .sectionBar > h2 {
        font-size: 1.2rem;
    }
    .sectionBody {
        width: 86%;
        margin: 3rem auto 2rem;
    }
    .cardRow {
        margin: 0 auto 3rem;
    }
    .card {
        padding: 1.35rem 1.75rem 1.95rem;
    }
    .cardGrid {
        grid-gap: 3rem 4%;
    }
}
@media screen and (max-width: 600px) {
    .sectionBody {
        width: 89%;
        margin: 2rem auto 2rem;
    }
    .cardRow {
        margin: 0 auto 2rem;
    }
    .card {
        padding: 1.1rem 1.5rem 1.7rem;
    }
    .cardGrid {
        grid-gap: 2rem 4%;
    }
}
@media screen and (max-width: 560px) {
    #navBar {
        height: 7rem;
    }
    #navBar.navBarClose {
        height: 4.2rem;
    }
    #navBarBox {
        top: 0;
    }
    .navLogo {
        width: 25px;
        height: 25px;
    }
    #navLeft {
        margin: 2%;
        padding: 0 6rem 0 0;
        top: 0;
        transform: translate(0%, 0%);
    }
    #navName {
        text-align: unset;
    }
    .navInfo > h5 {
        display: inline-block;
    }
    #navRight {
        margin-right: 0%;
        top: 0;
        transform: translate(0%, 0%);
    }
    .sectionTopFill {
        height: 7rem;
    }
    .sectionTopFill.sectionTopFillClose {
        height: 4.2rem;
    }
    .sectionBar {
        height: 4.2rem;
    }
}
@media screen and (max-width: 420px) {
    #navBar {
        height: 6.5rem;
    }
    #navBar.navBarClose {
        height: 3.6rem;
    }
    #navRight > a {
        font-size: 0.45rem;
        width: 3.4rem;
        margin: 0rem;
    }
    .sectionTopFill {
        height: 6.5rem;
    }
    .sectionTopFill.sectionTopFillClose {
        height: 3.6rem;
    }
    .sectionBar {
        height: 3.6rem;
    }
}
@media screen and (max-width: 320px) {
    li {
        font-size: 0.8rem;
    }
    #navRight > a {
        font-size: 0.4rem;
        width: 3.3rem;
    }
    .sectionBody {
        width: 93%;
        margin: 1rem auto 1rem;
    }
    .cardRow {
        margin: 0 auto 1rem;
    }
    .card {
        padding: 0.85rem 1.25rem 1.45rem;
    }
    .cardGrid {
        grid-gap: 1rem 4%;
    }
}