﻿:root {
    --darkest-grey: #343E46;
    --massage-green: #B8D149;
    --dark-grey: #586A77;
    --dark-grey-30: rgba(88, 106, 119, 0.3);
    --light-grey: #E6E5E5;
    --light-grey-50: rgba(230,229,229,0.5);
    --dark-grey-20: rgba(88,106,119,0.2);
    --mid-tone-grey: #798893;
    --massage-green-20: rgba(184, 209, 73, 0.2);
}

.Site {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
}

.Site-content {
    flex: 1;
}

.green {
    color: var(--massage-green);
}

footer {
    margin-bottom: -10px;
}

html, body {
    height: 100%;
}

h1, h2, h3, h4, h5, h6, p, li {
    color: var(--darkest-grey)
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    margin-top: 0px;
}

h1 {
    font-size: 38px;
    line-height: 45px;
    font-weight: 700;
}

h2 {
    font-size: 34px;
    line-height: 41px;
    font-weight: 700;
}

h3 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
}

h4 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}

h5 {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
}

p, li {
    font-size: 17px;
    line-height: 25px;
    font-weight: 400;
}

.er-section p, .er-section li {
    font-size: 20px;
    line-height: 28px;
}

body {
    font-family: "proxima-nova", sans-serif;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.main-body-content {
    padding-top: 130px;
    transition: all .5s ease;
}

.main-body-content video {
    width: 100%;
    height: auto;
}

@media (min-width: 1600px) and (max-width: 4000px) {
    .container {
        max-width: 1440px;
        min-width: 1440px;
    }
}

@media (min-width: 1367px) and (max-width: 1599px) {
    .container {
        max-width: 1280px;
        min-width: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) {
    .container {
        max-width: 1180px;
        min-width: 1180px;
    }
}

/************************************************************/

/* Navigation */

/************************************************************/

a.navbar-brand {
    height: unset;
}

nav.navbar {
    background: #ffffff;
    border: none;
    border-top: 9px solid var(--darkest-grey);
    padding: 10px 0px;
}

nav.navbar .container-fluid {
    padding: 0px 40px;
    display: flex;
    align-items: center;
}

.navbar-collapse.collapse {
    flex: 1;
}

.navbar-brand > img {
    width: 200px;
    transition: all .5s ease;
}

.navbar-collapse.collapse {
    flex: 1;
    display: flex !important;
    justify-content: end;
}

ul.nav.navbar-nav li a {
    color: var(--darkest-grey);
    font-size: 18px;
    padding: 0px 20px;
}

ul.nav.navbar-nav li a:hover {
    color: var(--mid-tone-grey);
}

nav ul.nav.navbar-nav {
    display: flex;
    align-items: center;
}

nav ul.nav.navbar-nav li .greenBtn {
    margin-left: 15px;
    font-weight: bold;
}

nav ul.nav.navbar-nav > li.currentPage > a {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--massage-green);
    text-underline-offset: 7px;
}

.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: var(--mid-tone-grey);
}

nav ul.nav.navbar-nav > li.currentPage ul.dropdown-menu li.currentPage a {
    font-weight: 700;
}

/* nav small */

.headerSmall .navbar-brand > img {
    width: 150px;
}

nav.navbar.headerSmall {
    padding: 0px 0px;
}


/************************************************************/

/* Footer */

/************************************************************/

footer a {
    text-decoration: none!important;
}

footer {
    margin-top: 60px;
}

.footer-top.dark-grey-bg .row {
    display: flex;
}

.footer-top.dark-grey-bg {
    background: var(--darkest-grey);
    color: white;
    padding: 30px 0px;
}

.footer-bottom.light-grey-bg {
    background: var(--light-grey);
    position: relative;
    padding: 15px 0px;
}

.footer-logo {
    max-width: 165px;
}

.footer-menu {
    list-style-type: none;
    display: flex;
    gap: 35px;
    padding-left: 0px;
    margin-bottom: 0px;
}

.footer-menu li a {
    color: white;
    font-size: 18px;
}

.footer-menu li a:hover {
    color: var(--massage-green);
}

footer i {
    color: var(--massage-green);
    transition: all .5s ease;
}

p.footer-logo-tagline {
    font-size: 18px;
    margin-top: 6px;
    color: white;
}

.right-top-footer {
    display: flex;
    align-items: center;
    justify-content: end;
}

.footer-socials a {
    font-size: 24px;
    margin-right: 5px;
}

.footer-socials a:nth-last-of-type(1) {
    margin-right: 0px;
}

.footer-socials {
    margin-left: 35px;
}

footer p {
    margin-bottom: 0px;
}

footer .container-fluid {
    padding: 0px 40px;
}

footer .green-arrow {
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    margin-left: auto;
    margin-right: auto;
    width: 35px;
}

footer .green-arrow a {
    font-size: 35px;
}

.green-arrow span {
    background: var(--darkest-grey);
    border-radius: 50%;
    height: 30px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom.light-grey-bg p {
    color: var(--darkest-grey);
    font-size: 16px;
}

.footer-bottom.light-grey-bg p a {
    font-weight: 600;
    color: var(--darkest-grey);
}

.right-bottom-footer {
    text-align: right;
}

.footer-bottom a:hover {
    color: var(--mid-tone-grey) !important;
}

.footer-socials p {
    /* Needed to avoid icon wrapping */
    width: 83px !important;
}

.footer-socials a:hover i,
.footer-socials a:focus i {
    color: var(--mid-tone-grey) !important;
}


/************************************************************/

/* Buttons */

/************************************************************/

.greenBtn,
.callout-button {
    background: var(--massage-green);
    color: var(--darkest-grey);
    border: none!important;
}

.darkBtn, a.callout-button.darkBtn {
    background: var(--darkest-grey);
    color: white;
}

.greenBtn:hover, .greenBtn:focus,
.callout-button:hover, .callout-button:focus {
    background: var(--darkest-grey) !important;
    color: white !important;
}

.darkBtn:hover, .darkBtn:focus,
a.callout-button.darkBtn:hover, a.callout-button.darkBtn:focus {
    background: var(--massage-green) !important;
    color: var(--darkest-grey) !important;
}

.md-btn,
.callout-button {
    padding: 10px 23px !important;
    border-radius: 12px;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none!important;
}

/************************************************************/

/* Prev Next Buttons */

/************************************************************/

.prev-next-btns {
    display: flex;
    clear: both;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid var(--dark-grey-30);
    padding-top: 30px;
    margin-top: 0px;
}


/************************************************************/

/* Form Styling */

/************************************************************/

.form-control {
    background: var(--light-grey-50);
    border: none;
    box-shadow: none;
    min-height: 55px;
    border-radius: 5px;
    font-size: 17px;
}

select.form-control,
select.form-control:focus {
    border-right: 15px solid transparent !important;
}

input::placeholder {
    font-size: 17px;
}

button.btn.btn-primary i {
    color: var(--darkest-grey);
    font-size: 20px;
    transition: all .5s ease;
}

.form-control:focus {
    box-shadow: none;
}

.cms-form-group-required .cms-form-label:after {
    color: var(--massage-green)!important;
}

.form-group label {
    font-size: 16px;
    color: var(--darkest-grey);
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 10px;
}

input.cms-field-submit {
    padding: 10px 23px !important;
    border-radius: 12px;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
    background: var(--massage-green);
    color: var(--darkest-grey);
    border: none;
}

input.cms-field-submit:hover,
input.cms-field-submit:focus,
input.cms-field-submit:active {
    background: var(--darkest-grey) !important;
    color: white !important;
    outline: none;
    border: none;
}

input.cms-field-submit:focus-visible {
    outline: none!important;
}

/************************************************************/

/* UL Styles */

/************************************************************/

.main-body-content ul {
    padding-left: 0px;
    list-style-position: inside;
    list-style: none;
}

.main-body-content ul li:nth-last-of-type(1) {
    margin-bottom: 0px;
}

.main-body-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.main-body-content ul li a {
    font-weight: 800;
    color: var(--darkest-grey);
    text-decoration: none;
}

.main-body-content ul li a:hover {
    color: var(--mid-tone-grey);
}

.main-body-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6.5px;
    transform: unset;
    width: 10px;
    height: 10px;
    background-color: var(--massage-green);
    border-radius: 50%;
}

.main-body-content ul.checklist > li > ul > li {
    background: none;
    padding-left: 27px;
}

.main-body-content ul.checklist > li > ul > li::before {
    display: inline-block;
    content: ''!important;
    position: absolute!important;
    left: 0!important;
    top: 6.5px!important;
    transform: unset!important;
    width: 10px!important;
    height: 10px!important;
    background-color: var(--massage-green)!important;
    border-radius: 50%!important;
}

.main-body-content li a {
    font-weight: 700;
    color: var(--darkest-grey);
    text-decoration: none;
}

.main-body-content li a:hover {
    color: var(--mid-tone-grey);
}

/************************************************************/

/* OL Styles */

/************************************************************/

.main-body-content ol {
    padding-left: 0px;
    counter-reset: item;
    list-style-type: none;
}

.main-body-content ol li {
position: relative;
    padding-left: 0px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    word-break: break-word;
}

.main-body-content ol li::before {
    content: counter(item);
    counter-increment: item;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: var(--darkest-grey);
    border: 2px solid var(--massage-green);
    border-radius: 50%;
    font-weight: bold;
    font-size: 13px;
}

.main-body-content ol li img { 
    margin-top: 15px;
    margin-bottom: 15px;
}

.ol-li-wrapper {
    /*margin-top: 3px;*/
    margin-top: 0px;
}

/************************************************************/

/* Checklist Styles */

/************************************************************/

ul.checklist {
    list-style-type: none;
    padding-left: 0;
}

ul.checklist li {
  background-image: url('https://immediac.blob.core.windows.net/massageaddict2021/images/2025/educationalresources/icons/checkmark.png');
  /*background-position: 0 50%;*/
  background-position: 0 4px;
  background-repeat: no-repeat;
  padding-left: 33px;
}

ul.checklist li::before {
    display: none;
}

/************************************************************/

/* Tabs Styles */

/************************************************************/


.tabs-container ul.nav-tabs li {
    padding-left: 0px;
    margin-bottom: 0px;
}

.tabs-container ul.nav-tabs li::before {
    display: none;
}

.tabs-container ul.nav-tabs li a {
    background: var(--darkest-grey);
    color: white;
    border-radius: 15px 15px 0 0;
    padding: 14px 15px 10px 15px;
    font-weight: 700;
}

.tabs-container ul.nav-tabs li.active a {
    background: var(--massage-green);
    color: var(--darkest-grey);
}

.tabs-container .tab-content {
    background: var(--light-grey-50);
    padding: 58px 30px 48px 30px;
    border-radius: 0px 50px 0px 50px;
}

.tabs-container .tab-content .cms-content p:nth-last-child(1) {
    margin-bottom: 0px;
}

.tabs-container .nav-tabs {
    border-bottom: none;
}

.tabs-container .nav-tabs li::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: -2px;
    width: 100%;
    height: 25px;
    background-image: url(https://immediac.blob.core.windows.net/massageaddict2021/images/2025/educationalresources/icons/tab-triangle.png);
    background-size: 100% 100%;
    visibility: hidden;
}

.tabs-container .nav-tabs li.active::after {
    visibility: visible;
}

.tabs-container .tab-image {
    border-radius: 25px;
}

.mobile-tabs-accordions {
    clear: both;
    overflow: auto;
}

.mobile-tabs-accordions .accordion .panel {
    margin-bottom: 0px;
    background: var(--light-grey-50);
}

.mobile-tabs-accordions .accordion .panel-heading {
    background: var(--darkest-grey);
}

.mobile-tabs-accordions .accordion .panel-heading {
    border-radius: 0px;
}

.mobile-tabs-accordions > div:first-child .panel-heading {
    border-radius: 24px 24px 0px 0px;
}

.mobile-tabs-accordions > div:first-child .panel {
    border-radius: 24px 24px 0px 0px;
}

.mobile-tabs-accordions > div:nth-last-of-type(1) .panel-heading {
    border-radius: 0px 0px 24px 24px;
}

.mobile-tabs-accordions > div:nth-last-of-type(1) .panel {
    border-radius: 0px 0px 24px 24px;
}

.mobile-tabs-accordions > div:only-child .panel .panel-heading,
.mobile-tabs-accordions > div:only-child .panel  {
    border-radius: 24px!important;
}

.mobile-tabs-accordions > div:only-child .panel .panel-heading.active {
    border-radius: 24px 24px 0px 0px!important;
}

.mobile-tabs-accordions > div:nth-last-of-type(1) .panel-heading.active {
    border-radius: 0px;
}

.mobile-tabs-accordions .accordion .panel-title a {
    color: white;
}

.mobile-tabs-accordions .accordion .panel-heading.active .panel-title a {
    color: var(--darkest-grey);
}

.mobile-tabs-accordions .accordion {
    margin-bottom: 2px;
}

.mobile-tabs-accordions i.fa-solid.fa-circle-chevron-down::after {
    background: white;
    border-radius: 50%;
    content: '';
    width: 17px;
    height: 17px;
    display: block;
    position: absolute;
}

.mobile-tabs-accordions i.fa-solid.fa-circle-chevron-down {
    color: var(--massage-green);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease;
}

.mobile-tabs-accordions .panel-heading.active i.fa-solid.fa-circle-chevron-down {
    color: var(--darkest-grey);
}

.mobile-tabs-accordions .fa-circle-chevron-down:before {
    z-index: 1;
}

.mobile-tabs-accordions  a[aria-expanded="true"] i.fa-solid.fa-circle-chevron-down {
    transform: rotate(180deg);
    transition: all .5s ease;
}

.mobile-tabs-accordions  a[aria-expanded="false"] i.fa-solid.fa-circle-chevron-down {
    transition: all .5s ease;
}

/************************************************************/

/* Tips/Highlights */

/************************************************************/

.highlight {
    border: 3px solid var(--massage-green);
    border-radius: 30px;
    background: var(--massage-green-20);
    padding: 20px;
    display: flex;
    align-items: center;
}

.highlight .cms-content > *:first-child {
    margin-top: 0px;
}

.highlight .cms-content > *:nth-last-child(1) {
    margin-bottom: 0px;
}

.highlight i.fa-solid.fa-circle-exclamation {
    font-size: 80px;
    margin-right: 20px;
}


/************************************************************/

/* Accordions */

/************************************************************/

.accordion .panel {
    border: none;
    margin-bottom: 10px;
    box-shadow: none;
}

.accordion .panel-heading {
    background: var(--light-grey-50);
    border-radius: 25px;
    border: none;
    padding: 0px;
    transition: all .5s ease;
}

.accordion .panel-title {
    font-size: 24px;
    color: var(--darkest-grey);
    margin-bottom: 0px;
}

.accordion .panel-title a {
    text-decoration: none;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion .panel-body .cms-content p:nth-last-child(1) {
    margin-bottom: 0px;
}

.accordion .panel-body {
    margin-top: 5px;
    padding: 30px;
}

.accordion a[aria-expanded="true"] i.fa-solid.fa-chevron-down {
    transform: rotate(180deg);
    transition: all .5s ease;
}

.accordion a[aria-expanded="false"] i.fa-solid.fa-chevron-down {
    transition: all .5s ease;
}

.accordion .panel-heading:hover,
.accordion .panel-heading.active {
    background: var(--massage-green);
}





/* Scaling */
@media (min-width: 1367px) and (max-width: 1600px) {
}

@media (min-width: 1200px) and (max-width: 1366px) {

    .main-body-content {
        padding-top: 120px;
    }

    .navbar-brand > img {
        width: 175px;
    }

    /* Nav */

    ul.nav.navbar-nav li a {
        font-size: 16px;
        padding: 0px 15px;
    }

    /* Footer */

    .right-top-footer {
        flex-direction: column-reverse;
        align-items: end;
        justify-content: center;
    }

    /* Tabs */

    .tabs-container ul li a {
        font-size: 16px;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .main-body-content {
        padding-top: 120px;
    }

    .navbar-brand > img {
        width: 175px;
    }

    /* Nav */

    ul.nav.navbar-nav li a {
        font-size: 16px;
        padding: 0px 12px;
    }

    /* Footer */

    .right-top-footer {
        flex-direction: column-reverse;
        align-items: end;
        justify-content: center;
    }

    .footer-menu li a {
        font-size: 16px;
    }

    .footer-socials a {
        font-size: 22px;
    }

    .footer-socials p {
        width: unset !important;
    }

    p.footer-logo-tagline {
        font-size: 16px;
    }

    .footer-bottom.light-grey-bg p {
        font-size: 14px;
    }

    .footer-menu {
        gap: 20px;
    }

    /* Tabs */

    .tabs-container ul li a {
        font-size: 16px;
    }

    .accordion .panel-title strong {
        padding-right: 25px;
    }

    .tab-image {
        margin-top: 30px;
        border-radius: 25px;
    }

}

@media (min-width: 768px) and (max-width: 991px) {


    .main-body-content {
        padding-top: 120px;
    }

    .navbar-brand > img {
        width: 175px;
    }

    ul.nav.navbar-nav {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Footer */

    .right-top-footer {
        flex-direction: column-reverse;
        align-items: end;
        justify-content: center;
    }

    .footer-menu li a {
        font-size: 16px;
    }

    .footer-socials a {
        font-size: 22px;
    }

    .footer-socials p {
        width: unset !important;
    }

    .footer-logo {
        max-width: 135px;
    }

    p.footer-logo-tagline {
        font-size: 15px;
        line-height: 17px;
    }

    .footer-bottom.light-grey-bg p {
        font-size: 14px;
    }

    .footer-menu {
        gap: 20px;
    }

    .footer-bottom.light-grey-bg {
        padding: 25px 0px 15px;
    }

    footer {
        margin-top: 60px;
    }

    /* Tabs */

    .tabs-container ul li a {
        font-size: 15px;
    }

    .accordion .panel-title strong {
        padding-right: 25px;
    }

    .tab-image {
        margin-top: 30px;
        border-radius: 25px;
    }
}

@media (max-width: 767px) {

    h1 {
        font-size: 34px;
        line-height: 41px;
    }

    h2 {
        font-size: 30px;
        line-height: 37px;
    }

    h4 {
        font-size: 18px;
        line-height: 22px;
    }

    p, li {
        font-size: 17px;
        line-height: 24px;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .navbar-brand > img {
        width: 150px;
    }

    nav.navbar .container-fluid {
        padding: 0px 15px;
    }

    nav.navbar {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .main-body-content {
        padding-top: 92px;
    }

    /* Footer */

    footer {
        margin-top: 60px;
    }

    footer .container-fluid {
        padding: 0px 15px;
    }

    .footer-bottom {
        text-align: center;
        padding: 30px 0px 15px !important;
    }

    .right-bottom-footer {
        text-align: center;
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-top: 10px;
    }

    .footer-top.dark-grey-bg .row {
        display: block;
    }

    .right-top-footer {
        margin-top: 25px;
        margin-bottom: 20px;
        display: block;
    }

    .footer-menu {
        display: block;
    }

    .footer-menu li {
        margin-bottom: 6px;
    }

    .footer-socials {
        margin-left: 0px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    /* Highlights */

    .highlight {
        margin-left: 15px;
        margin-right: 15px;
    }

    .highlight i.fa-solid.fa-circle-exclamation {
        font-size: 50px;
    }

    .fa-rotate-180 {
        transform: rotate(180deg);
        transition: transform 0.3s ease-in-out;
    }


    /* Accordions */

    .accordion .panel-title {
        font-size: 20px;
        line-height: 26px;
    }

    .accordion .panel-title a {
        padding: 13px 20px;
    }

    .accordion .panel-body {
        padding: 20px;
    }

    .accordion .panel-heading {
        border-radius: 10px;
    }

    .accordion .panel-title strong {
        padding-right: 15px;
    }

    /* tabs */

    .tabs-container {
        margin-bottom: 0px!important;
    }

    .tab-image {
        margin-top: 30px;
        border-radius: 25px;
    }

    .mobile-tabs-accordions .panel-heading.active .panel-title::after {
        content: '';
        position: absolute;
        bottom: -24px;
        left: -2px;
        width: 100%;
        height: 25px;
        background-image: url(https://immediac.blob.core.windows.net/massageaddict2021/images/2025/educationalresources/icons/tab-triangle.png);
        background-size: 100% 100%;
    }

    .mobile-tabs-accordions .accordion .panel-heading.active .panel-title {
        position: relative;
    }

    .mobile-tabs-accordions .accordion .panel-body {
        padding: 40px 20px 20px 20px;
    }

    /* ul li */

    .main-body-content ul li::before {
        top: 6px;
        transform: unset;
    }

}


/* Change breakpoint to 991px */

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
      text-align: center;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }

  #nav-icon4 {
      width: 40px;
      height: 30px;
      position: relative;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
      background: none;
      border: none!important;
      margin: 0px;
    }

    #nav-icon4 span {
      display: block;
      position: absolute;
      height: 5px;
      width: 100%;
      background: var(--darkest-grey);
      border-radius: 4px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }

    #nav-icon4 span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }

    #nav-icon4 span:nth-child(2) {
      top: 12px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }

    #nav-icon4 span:nth-child(3) {
      top: 24px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }

    #nav-icon4.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0px;
      left: 8px;
      background: var(--massage-green);
    }

    #nav-icon4.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }

    #nav-icon4.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 29px;
      left: 8px;
      background: var(--massage-green);
    }

    .nav-icon-wrapper {
        flex: 1;
        z-index: 5001;
    }

    div#topNavbar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5000;
        background: var(--darkest-grey);
        min-height: 100dvh;
        max-height: 100dvh;
        height: 100dvh;
        align-items: center;
        justify-content: center;
        padding-top: 115px;
    }

    body.overflowHide {
        overflow: hidden;
    }

    nav ul.nav.navbar-nav {
        display: block;
    }

    ul.nav.navbar-nav li a {
        color: white;
        padding-bottom: 20px;
    }

    nav ul.nav.navbar-nav li .greenBtn {
        width: fit-content;
        color: var(--darkest-grey);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 510px) {
    .highlight {
        display: block;
    }

    .highlight i.fa-solid.fa-circle-exclamation {
        font-size: 40px;
        margin-bottom: 15px;
    }
}