/* ***********************************************************************/

/*                         CSS for Page Layout                           */

/* ***********************************************************************/
/* Light Teal:      #ECF4F5                                              */
/* Teal:            #8CC1C1                                              */
/* Medium Teal:     #64ACAA                                              */
/* Link Teal:       #47A9A7                                              */
/* Dark Teal:       #328281                                              */
/* DDC Blue:        #32327A                                              */

*, *:before, *:after {
    box-sizing: inherit; /* Required for Sticky Footer */
}
html {
    box-sizing: border-box; /* Required for Sticky Footer */
    height: 100%; /* Required for Sticky Footer */
}
body {
	margin: 0;
}

/* ***********************************************************************/
/* *************************** Page Sections *****************************/
/* ***********************************************************************/
body {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 320px;
}
.userStatus, header, main, footer {
    width: 100%;
    min-width: 100%;
}
/* Having userStatus, header, main, and footer be parents for the actual content containers */
/* is required to get the background colors / borders to stretch across the entire screen */
/* when resolution is high. */
.userStatusContainer, .headerContainer, .gridContainer, .footerContainer {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.125vw;
    padding-left: 1.125vw;
}
.userStatus {
    height: 36px;
}
main { 
    flex: 1 0 auto;
}
footer {
    height: 280px;
    flex-shrink: 0;
}

@media (max-width: 768px) {  
    .userStatusContainer, .headerContainer, .gridContainer, .footerContainer {
        padding-right: 2vw;
        padding-left: 2vw;
    }
}
@media (max-width: 600px) {
    .headerContainer { padding: 0; }
    .headerContainer > a {
        padding-left: 2vw;
        padding-right: 2vw;
        display: inline-block;
    }
}
@media (max-width: 480px) {
    .userStatusContainer, .headerContainer > a, .gridContainer, .footerContainer {
      padding-right: 8px;
      padding-left: 8px;
      min-width: 304px;
    }
    footer {
        height: 260px;
    }
}


/* ***********************************************************************/
/* *************************** User Status *******************************/
/* ***********************************************************************/
.userStatus {
    background-color: #444444;
}
.userStatusContainer, .userStatusContainer a, .userStatusContainer span {
    font-family: 'Lexend Deca';
    color: #FFFFFF;
    font-size: .8rem;
    text-align: right;
    line-height: 2.25rem;
    font-weight: 400;
}
.userStatusContainer a, .userStatusContainer span {
    padding: 0 6px;
}
.userStatusContainer a, .userStatusContainer a:visited, .userStatusContainer a i, .userStatusContainer a:visited i {
    color: #FFFFFF;
    text-decoration: none;
}
.userStatusContainer a:hover, .userStatusContainer a:active, .userStatusContainer a:hover i, .userStatusContainer a:active i {
    color: #8CC1C1;
    text-decoration: none;
}
.userStatusContainer i {
    font-size: 1.1rem;
    position: relative;
    top: 3px;
}
.userStatusContainer i.iconLeft { 
    padding-right: 10px;
}
.userStatusContainer i.iconRight { 
    padding-left: 10px;
}

/* When we hit 600px and switch to mobile mode, add a border at the top of the page, since */
/* Our background color is the same as the Apple UI and they bleed together without this. */
@media (max-width: 600px) {  
    .userStatus {
        border-top: 1px solid #888888;
    }
}
@media (max-width: 480px) {  
    .userStatusContainer, .userStatusContainer a, .userStatusContainer span {
        font-size: .7rem;
    }
}


/* ***********************************************************************/
/* *************************** Header ************************************/
/* ***********************************************************************/
header {
    padding: 15px 0 15px 0;
    border-bottom: 1px solid #EEEEEE;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
}
.headerContainer > a, .headerContainer > a:hover, .headerContainer > a:active, .headerContainer > a:visited {
    text-decoration: none;
    color: #444444;
}
.logoBox {
    display: flex;
}
.logoImage {
    border: 1px solid #999999;
    margin: 0 15px 0 0;
}
.logoTitle {
    width: 100%;
}
.logoTitleSuper {
    font-family: "Crimson Text", serif;
    font-size: 11px;
    text-shadow: 1px 0 2px #CCCCCC;
    padding: 5px 0 0 12px;
    line-height: 100%;
}
.logoTitleMain { 
    font-family: "Crimson Text", serif;
    font-size: 29px;
    text-shadow: 1px 1px 4px #CCCCCC;
    line-height: 60%;
    white-space: nowrap;
    padding: 2px;
}
.internalMenu .logoTitleMain {
    font-size: 23px;
}
.logoTitleSub {
    font-family: "Crimson Text", serif;
    font-size: 19px;
    text-shadow: 1px 1px 2px #CCCCCC;
    padding: 2px 0 0 236px;
    line-height: 100%;
    white-space: nowrap;
}

@media (max-width: 1200px) {  
    .logoTitleMain { 
        font-size: 26px;
    }
    .internalMenu .logoTitleMain {
        font-size: 19px;
    }
    .noTopMenu .logoTitleMain {
        font-size: 29px;
    }
    .logoTitleSub {
        font-size: 14px;
        padding-left: 190px;
    }
    .noTopMenu .logoTitleSub {
        font-size: 19px;
        padding-left: 236px;
    }
}
@media (max-width: 1024px) {  
    .logoTitleMain {
        position: relative;
        font-size: 29px;
    }
    .internalMenu .logoTitleMain {
        font-size: 26px;
    }
    .logoTitleSub {
        font-size: 19px;
        padding-left: 236px;
    }
}
@media (max-width: 768px) {  
    .internalMenu .logoTitleMain {
        font-size: 21px;
    }
    .logoTitleSub {
        font-size: 17px;
        padding-left: 216px;
    }
}
@media (max-width: 600px) { 
    header {
        padding-bottom: 0;
    }
    .logoTitleMain, .noTopMenu .logoTitleMain { 
        font-size: 21px;
    }
    .internalMenu .logoTitleMain {
        visibility: hidden;
    }
    .internalMenu .logoTitleMain:after {
        content: "D.A.S.E.F.";
        font-size: 33px;
        position: absolute;
        visibility: visible;
        top: -1px;
        left: 0;
        text-shadow: 1px 1px 4px #CCCCCC;
        line-height: 80%;
    }
    .logoTitleSuper {
        padding: 2px 0 2px 12px;
    }
    .logoTitleSub, .noTopMenu .logoTitleSub  {
        font-size: 17px;
        padding: 1px 0 0 135px;
    }
    .internalMenu .logoTitleSub {
        padding: 10px 0 0 40px;
    }
    .logoImage {
        margin-right: 8px;
    }
}
@media (max-width: 439px) { 
    .logoImage {
        width: 46px;
        height: 43px;
        margin-right: 4px;
    }
    .internalMenu .logoImage {
        width: 65px;
        height: 60px;
        margin-right: 10px;
    }
    .internalMenu .logoTitleMain:after {
        font-size: 29px;
    }
    .logoTitleMain, .noTopMenu .logoTitleMain { 
        font-size: 19px;
    }
    .logoTitleSub, .noTopMenu .logoTitleSub {
        font-size: 14px;
        padding: 1px 0 0 130px;
    }
}
@media (max-width: 380px) { 
    .logoTitleMain, .noTopMenu .logoTitleMain { 
        font-size: 16px;
    }
    .logoTitleSub, .noTopMenu .logoTitleSub {
        padding: 1px 0 0 76px;
    }
}

/* ***********************************************************************/
/* ****************************** Menu ***********************************/
/* ***********************************************************************/
nav {
    text-align: center;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    padding: 0 25px;
}
nav input, nav label {
    display: none;
}
nav ul {
    list-style: none;
    border: 0;
    margin: 0;
    padding: 0;
}
nav > ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.menuDropdown {
    display: flex;
}
nav li {
    font-family: "Lexend Deca";
}
nav a.menuItem {
    font-size: 1.1rem;
    line-height: 2rem;
    border: none;
    outline: none;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    padding: 14px 0;
    text-decoration: none;
    white-space: nowrap;
    display: block;
    font-weight: 500;
}
nav a.menuItem, nav a.menuItem:visited {
    color: #444444;
    text-shadow: 1px 1px 4px #EEEEEE;
    text-decoration: none;
}
nav a.menuItem:active, nav a.menuItem:hover {
    color: #8CC1C1;
    text-shadow: 1px 1px 4px #ECF4F5;
    text-decoration: none;
}
/* Highlight Parent Menu Item when a Dropdown Item is Hovered */
nav:has(.sM1:hover) #mI1, nav:has(.sM2:hover) #mI2, nav:has(.sM3:hover) #mI3, nav:has(.sM4:hover) #mI4, nav:has(.sM5:hover) #mI5, nav:has(.sM6:hover) #mI6, nav:has(.sM7:hover) #mI7 {
    color: #8CC1C1;
    text-shadow: 1px 1px 4px #ECF4F5;
}
.subMenu {
    display: none;
    position: absolute;
    margin: 52px 0 0 -25px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}
.subMenu a {
    border-radius: 0;
}
.subMenu li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.subMenu li:last-child {
    border-bottom: 0 none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.subMenu li {
    background-color: #444444;
    border-bottom: 1px solid #555555;
}
.subMenu li:hover {
    background-color: #8CC1C1;
}
.subMenu::before {
    content: " ";
    background-color: #444444;
    display: block;
    height: 10px;
    width: 10px;
    rotate: 45deg;
    position: absolute;
    top: -5px;
    z-index: 10;
    left: 30px;
}
nav:has(.subMenu li:first-child:hover) .subMenu::before {
    background-color: #8CC1C1;
}
.subMenu a, .subMenu a:visited {
    font-family: "Lexend Deca";
    font-size: 0.85rem;
    color: #FFFFFF;
    font-weight: 400;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.subMenu a:hover, .subMenu a:active {
    color: #FFFFFF;
    text-decoration: none;
}
.menuDropdown:hover .subMenu {
    display: block;
} 
.menuToggle {
    display: none;
}

@media (min-width: 1200px) { 
    nav a.menuItem > a {
        padding: 14px 0;
    }
}
@media (max-width: 1200px) { 
    nav a.menuItem {
        padding: 12px 0;
        font-size: 0.9rem;
    }
    .subMenu, .subMenu a {
        font-size: .8rem;
    }
}
@media (max-width: 1024px) {  
    nav a.menuItem {
        font-size: 1rem;
    }
    /* Push the Main Menu to a new line beneath the logo for more space */
    .headerContainer {
        display: block;
    }
    /* Add padding between the Logo to account for the new Menu beneath it */
    .hasTopMenu .logoBox {
        padding-bottom: 10px;
    }
    /* Unless we're on a No-Menu Page, at which point we don't want that padding */
    .noTopMenu .logoBox {
        padding-bottom: 0;
    }
}
@media (max-width: 768px) {  
    nav a.menuItem {
        font-size: .9rem;
        padding: 8px 0 2px 0;
    }
    .subMenu::before {
        height: 7px;
        width: 7px;
        top: -3px;
    }
    .subMenu {
        margin-top: 42px;
    }
}


/* ***********************************************************************/
/* ************************** Mobile Nav Menu ****************************/
/* ***********************************************************************/

/* This is where we make our Nav Toggle button visible again and switch Nav styles */
@media (max-width: 600px) {
    nav {
        display: block;
        text-align: left;
        padding: 0;
    }
    nav label {
        display: inline-block;
        cursor: pointer;
        width: 100%;
        padding-left: 15px;
        margin-bottom: 9px;
        color: #555555;
    }
    nav label:hover, nav label:active {
        color: #64ACAA;
    }
    nav label i {
        font-size: 32px;
        color: inherit;
    }
    nav label span {
        font-family: "Outfit";
        font-weight: 600;
        font-size: 1.1rem;
        position: relative;
        top: -5px;
        left: 8px;
        color: inherit;
    }




    /* Open and Close the Menu when the Menu Open Checkbox is Checked */
    #cbxNavToggle:not(:checked) ~ ul {
        display: none;
    }
    #cbxNavToggle:checked ~ ul {
        display: block;
    }
    /* Show / Hide the 'Hamburger' and X depending on whether the Menu is Open or Closed */
    #cbxNavToggle:not(:checked) + .lblNavToggle .bi-list-ul { 
        display: initial; 
        position: relative;
        top: 1px;
    }
    #cbxNavToggle:not(:checked) + .lblNavToggle .bi-dash-square { display: none; }
    #cbxNavToggle:checked + .lblNavToggle .bi-list-ul { display: none; }
    #cbxNavToggle:checked + .lblNavToggle .bi-dash-square { display: initial; }

    nav ul { box-shadow: none; }
    nav > ul {
        border-top: 1px solid #EEEEEE;
    }
    nav ul li {
        background-color: #FFFFFF;
        color: white;
        padding: 0;
        line-height: 32px;
        display: block;
        border-bottom: 1px solid #EEEEEE;
    }
    nav ul li:hover, nav ul li:active {
        background-color: #F9F9F9;
    }
    nav a.menuItem, nav a.menuItem:visited, nav a.menuItem:active, nav a.menuItem:hover {
        text-shadow: none;
        color: #555555;
        width: 100%;
        padding: 8px 16px;
        font-size: 1.05rem;
    }
    nav a.menuItem:active, nav a.menuItem:hover {
        color: #64ACAA;
    }
    nav ul li:last-child {
        border: none;
    }
    /* Undo the Display:Flex from the Main Nav */
    .menuDropdown {
        display: block;
        position: relative;
    }
    /* Undo the Hover from the Main Nav */
    .menuDropdown:hover .subMenu {
        display: none;
    }
    .menuDropdown .lblMenuToggle {
        position: absolute;
        top: 4px;
        right: -84vw;
        font-size: 26px;
    }
    .menuToggle {
        display: inline-block;
    }

    /* ************************** Now for the Sub-Menu ****************************/
    nav ul.subMenu {
        display: none;
        position: relative;
        margin: 0;
        min-width: auto;
        box-shadow: none;
        z-index: 1;
    }
    nav ul.subMenu li {
        display: block;
        border-bottom: 1px solid #DDD;
    }
    nav ul label.lblMenuToggle {
        margin: 0;
    }
    nav ul label.lblMenuToggle i {
        font-size: 28px;
        padding: 3px 12px;
        color: #666666;
    }
    nav ul label.lblMenuToggle i:active, ul label.lblMenuToggle i:hover {
        color: #64ACAA;
    }
    nav ul ul li {
        border-bottom: 1px solid #DDDDDD;
    }
    .subMenu::before {
        content: none;
        display: none;
    }
    .subMenu li, .subMenu li:first-child, .subMenu li:last-child {
        border-radius: 0;
        background-color: #F2F2F2;
    }
    .subMenu li:hover {
        background-color: #BBBBBB;
    }
    .subMenu a, .subMenu a:visited {
        font-size: .85rem;
        padding-left: 7.5vw;
        color: #444444;
        text-shadow: 1px 1px 3px #CCCCCC;
    }
    .subMenu a:active, .subMenu a:hover {
        color: #FFFFFF;
        text-shadow: 1px 1px 3px #BBBBBB;
    }

    /* Open and Close the Menu when the Menu Open Checkbox is Checked */
    /* The following two lines -should- work, as far as I can tell, but produce a strange behavior */
    /* where the menu only expands and collapses if the focus is not on the menu. Obviously that's */
    /* not acceptable, so the solution is to target each item by ID instead of by class. */
    /* .cbxMenuToggle:not(:checked) ~ ul { display: none; } */
    /* .cbxMenuToggle:checked ~ ul { display: initial; } */
    #cbxMenuToggle1:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle1:checked ~ ul { display: block; }
    #cbxMenuToggle2:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle2:checked ~ ul { display: block; }
    #cbxMenuToggle3:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle3:checked ~ ul { display: block; }
    #cbxMenuToggle4:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle4:checked ~ ul { display: block; }
    #cbxMenuToggle5:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle5:checked ~ ul { display: block; }
    #cbxMenuToggle6:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle6:checked ~ ul { display: block; }
    #cbxMenuToggle7:not(:checked) ~ ul { display: none; }
    #cbxMenuToggle7:checked ~ ul { display: block; }

    /* Show / Hide the Up and Down Arrows depending on whether the Menu is Open or Closed */
    .cbxMenuToggle:not(:checked) + .lblMenuToggle .bi-caret-down-square { display: initial; }
    .cbxMenuToggle:not(:checked) + .lblMenuToggle .bi-caret-up-square { display: none; }
    .cbxMenuToggle:checked + .lblMenuToggle .bi-caret-down-square { display: none; }
    .cbxMenuToggle:checked + .lblMenuToggle .bi-caret-up-square { display: initial; }

}
@media (max-width: 480px) {
    .menuDropdown .lblMenuToggle {
        right: -81vw;
    }
    nav ul label.lblMenuToggle i {
        font-size: 26px;
    }
}
@media (max-width: 400px) {
    .menuDropdown .lblMenuToggle {
        right: -78vw;
    }
}



/* ***********************************************************************/
/* ************************** Content Layout *****************************/
/* ***********************************************************************/
.gridContainer {
    display: grid;
    grid-template-areas:
      "leftBar theContent";
    grid-template-columns: minmax(160px, 250px) 1fr;
}
.gridContainer .leftBar { grid-area: leftBar; }
.gridContainer .theContent { grid-area: theContent; }
.leftBar {
    margin: 0;
    padding: 0 20px 20vh 0;
    font-size: 1.05rem;
    line-height: 180%;
    list-style-type: none;
}
.theContent {
    width: 100%;
    min-height: 450px;
    padding: 20px 1.125vw 100px 1.125vw;
}
/* .theContent Outside of the Grid Container */
.noLeftMenu {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.contentCentered {
    text-align: center;
}
.noLeftMenu.contentCollapsed {
    max-width: 75%;
}
.noLeftMenu.contentPadded {
    max-width: 90%;
}

@media (min-width: 1440px) { 
    .noLeftMenu.contentCollapsed {
        max-width: 1440px;
        padding-left: 194px;
        padding-right: 194px;
    }
}
@media (min-width: 1024px) { 
    .gridContainer {
        grid-template-columns: minmax(210px, 250px) 1fr;
    }
}
@media (max-width: 1024px) { 
    .gridContainer {
        grid-template-columns: 1fr 3fr;
    }
    .gridContainer .leftBar {
        font-size: 0.95rem;
    }
}
@media (max-width: 768px) { 
    .gridContainer .leftBar {
        font-size: 0.8rem;
        padding-right: 12px;
        min-width: 170px;
    }
    .theContent {
        padding: 20px 2vw 50px 2vw;
    }
}
@media (max-width: 600px) { 
    .noLeftMenu.contentCollapsed {
        max-width: 90%;
    }
}
@media (max-width: 480px) { 
    .theContent {
        padding: 12px 6px 50px 6px;
    }
    .noLeftMenu.contentCollapsed {
        max-width: 95%;
    }
}
@media (max-width: 400px) { 
    .noLeftMenu.contentCollapsed {
        max-width: initial;
    }
}


/* ***********************************************************************/
/* ***************************** Left Menu *******************************/
/* ***********************************************************************/
.leftBar a, .leftBar a:visited {
    font-family: "Lexend Deca";
    font-weight: 400;
    color: #FFFFFF;
    font-size: 1rem;
    text-decoration: none;
    background-color: #555555;
    display: block;
    padding-left: 1.5vw;
    padding-right: 5vw;
    height: 64px;
    line-height: 64px;
    white-space: nowrap;
}
.leftBar a:hover, .leftBar a:active, .leftBar li.activeLeftMenu a {
    color: #FFFFFF;
    background-color: #8CC1C1;
    text-decoration: none;
}
.leftBar li.activeLeftMenu a {
    color: #FFFFFF;
    background-color: #8CC1C1;
    text-decoration: none;
}
.leftBar li.activeLeftMenu::after {
    content: " ";
    background-color: #FFFFFF;
    display: block;
    height: 12px;
    width: 12px;
    top: 26px;
    z-index: 50;
    position: absolute;
    rotate: 45deg;
    left: -6px;
}
.leftBar li {
    margin: 0 0 1px 0;
    position: relative;
}

@media (min-width: 1440px) { 
    .leftBar a {
        padding-left: 18px;
    }
}
@media (max-width: 1024px) { 
    .leftBar a {
        height: 56px;
        line-height: 56px;
    }
    .leftBar li.activeLeftMenu::after {
        height: 11px;
        width: 11px;
        top: 23px;
    }
}
@media (max-width: 768px) { 
    .leftBar a {
        font-size: 0.9rem;
        height: 48px;
        line-height: 48px;
    }
    .leftBar li.activeLeftMenu::after {
        height: 10px;
        width: 10px;
        top: 19px;
    }
}
/* Hide the Left Menu under 600px */
@media (max-width: 600px) { 
    .gridContainer {
        grid-template-columns: 0px 3fr;
    }
    .leftBar {
        display: none;
    }
}


/* ***********************************************************************/
/* ******************************* Footer ********************************/
/* ***********************************************************************/
footer {
    background-color: #444444;
    border-top: 5px solid #8CC1C1;
}
footer a {
    font-family: 'Lexend Deca';
    font-weight: 400;
}
footer a, footer a:visited, footer a i, footer a:visited i {
    color: #FFFFFF;
    text-decoration: none;
}
footer a:active, footer a:hover, footer a:active i, footer a:hover i {
    color: #8CC1C1;
    text-decoration: none;
}
.footerLinks {
    min-height: 4rem;
    padding-top: 4rem;
    white-space: nowrap;
}
.footerLinks a {
    font-size: 1rem;
    line-height: 2rem;
    display: block;
}
.footerLinks a::before, .footerLinks a:visited::before {
    display: inline-block;
    content: "";
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="%23FFFFFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.74 15.53L14.26 12L10.74 8.46997" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    height: 1.5rem;
    width: 2rem;
    vertical-align: -.4rem;
}
.footerLinks a:active::before, .footerLinks a:hover::before  {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="%238CC1C1" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.74 15.53L14.26 12L10.74 8.46997" stroke="%238CC1C1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/*  Another Code Version, Keeping for the time-being */
    /* background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"); 
*/
.footerContainer > hr {
    height: 1px;
    background-color: #555555;
    border: none;
    margin: 15px 0;
}
.subFooterBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5px;
}
.copyright {
    font-family: 'Lexend Deca';
    color: #FFFFFF;
    display: flex;
    font-size: 0.8rem;
    line-height: 150%;
    white-space: nowrap;
}
.helpLinks {
    font-family: 'Lexend Deca';
    color: #FFFFFF;
    display: flex;
}
.helpLinks a {
    font-size: 0.9rem;
    padding: 0 8px;
    white-space: nowrap;
}
.helpLinksSpacer {
    margin: 0 10px;
    color: #888888;
    font-size: 22px;
    line-height: 22px;
    position: relative;
    top: 3px;
}
.helpLinks i {
    margin-right: 8px;
    font-size: 18px;
    position: relative;
    top: 1px;
}

@media (max-width: 1024px) { 
    .footerLinks a {
        font-size: 0.9rem;
    }
    .footerLinks .arrow span {
        width: 5px;
        height: 5px;
    }
    .copyright {
        font-size: 0.7rem;
    }
}
@media (max-width: 768px) {  
    .footerLinks {
        min-height: 2.5rem;
        padding-top: 2.5rem;
    }
    .subFooterBox {
        display: inline;
    }
    .helpLinks {
        margin-top: 12px;
    }
    .helpLinks a:first-child {
        padding-left: 0;
    }
}
@media (max-width: 439px) {
    .copyright {
        font-size: 0.5rem;
    }
    .footerLinks a {
        line-height: 1.7rem;
    }
    .footerLinks a, .helpLinks, .helpLinks a {
        font-size: 0.7rem;
    }
    .footerLinks a::before {
        background-size: 1.1rem 1.1rem;
        height: 1.2rem;
        width: 1.4rem;
    }
    .helpLinks i {
        margin-right: 6px;
        font-size: 16px;
        top: 2px;
    }
}


/* ***********************************************************************/
/* ******************************** TEST *********************************/
/* ***********************************************************************/