#acf-main-nav { 
  width: 100%; height:auto;
  margin: 0 auto; padding-top: 30px;
  z-index: 999999;
  }
#acf-main-nav .ac-super-header { 
    width: 100%; height:auto;
    position: relative;
    /* z-index: 100; */
     background: white;
     display: flex;
     /* justify-content: space-between; */
     -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .max-content-width {
    width: 100%; 
    max-width: 1270px; 
    margin: 0 auto;
  }

.branding {
  position:relative; width:100%; height: 88px;
}

.ac-logo {
    background: url('../../assets/images/AC-Logo-Lockup_Horizontal_FullColor.svg');
    width: 410px;
    height: 50px;
    background-repeat: no-repeat;
}
  .redbar-1br { /* the one billion people more resilient header tag */
    position: absolute;
    bottom:0;
    /* top: -14px; */
    left:0;
    z-index: 102;
    margin-bottom: -10px !important;
    background: var(--red);
    margin: 0;
    width: fit-content;
    font-family: Roboto Slab, serif !important; 
    padding: 0 10px;
    color: white;
  }
.yellow-line {
    width: 100%;
    height: 4px;
    background: var(--wp--preset--color--primary-yellow);
    display: block;
    position: absolute;  
    z-index: 101; /*behind red bar*/
    bottom:0; left:0;
    transform: translateX(calc(-100% + 400px));
}

#acf-main-nav .hap-header-wrapper { background: #234c6a; width: 100%; }

#acf-main-nav .hap-nav {  position: relative; display: flex; justify-content: space-between; min-height: 74px; }

#acf-main-nav h1 { padding-top: 12px; font-size: 2rem; color: white; margin: 10px 0 0 0; }

#acf-main-nav h1 a {
    text-decoration: none;
    font-weight: normal;
    color: white;
    font-family: Roboto Slab, serif !important;
}

.ac-menu {
  position:absolute; top:0;right:0; z-index:103;
  width:100%; margin-top:-88px; }
.menu-ac-menu-container {
  width: 100%; height:88px;
  max-width: 1270px; 
  margin: 0 auto;
  text-align:right;
}
ul#menu-ac-menu {padding:30px 36px 0 0; list-style: none; margin:0;
display: flex; flex-direction:row; justify-content:flex-end; font-family: Roboto Slab, serif !important; font-weight: 700;}
ul#menu-ac-menu li { padding-right: 18px; }
ul#menu-ac-menu li:last-child { padding-right: 0; }
ul#menu-ac-menu li a { text-decoration: none; font-family: Roboto Slab, serif !important; }

.main-menu {display: flex; padding-top: 14px; }

.main-menu ul,
.lang-switcher ul { margin: 0; padding: 0; display: flex; gap: 20px;  list-style: none; color: white; font-family: Open Sans, sans-serif;}
.lang-switcher ul {margin-left:20px;}

.main-menu ul li,
.lang-switcher ul li { padding: 10px 18px 10px 0; line-height: 1.375rem; font-size: .72rem; letter-spacing: .5px; }

.main-menu ul ul,
.lang-switcher ul ul { display: block; padding: 0; width: 260px; position: absolute; }

.main-menu ul ul li,
.lang-switcher ul ul li { padding-top: 5px; padding-bottom: 8px; line-height: 1.1rem; }

.main-menu ul ul li a,
.lang-switcher ul ul li a { text-transform: none; font-size: .77778rem; letter-spacing: 0;}

.main-menu ul ul li a:hover,
.lang-switcher ul ul li a:hover { color: var(--yellow);   }

.main-menu ul li a,
.lang-switcher ul li { color: white; text-decoration: none; text-transform: uppercase; letter-spacing: 1px;  }

.main-menu ul.sub-menu,
.lang-switcher ul.sub-menu { padding-top: 20px; padding-bottom: 15px; z-index: 99999; visibility: hidden; background: var(--ac-gray-blue); padding-left: 14px; margin-left: -14px; }

.main-menu ul li:hover > ul.sub-menu,
.lang-switcher ul li:hover > ul.sub-menu {  visibility: visible; }

.main-menu .menu-item-has-children:after,
.lang-switcher ul li.menu-item:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f078"; padding-left: 5px; font-size: .75rem;
}
.wp-block-button.search-icon a.wp-block-button__link { background: transparent;  }
.wp-block-button.search-icon a.wp-block-button__link i.fas { color: white; }

.searchbar-wrapper { background: var(--mediumblue); display: none; }
.searchbar-wrapper form { width: 100%; padding: 15px 0; max-width: 1270px; margin: 0 auto; }
.searchbar-wrapper input.search-submit { display: none; }

.searchbar-wrapper input { border:0;outline:0; }
.searchbar-wrapper input:focus { outline:none!important; }

header .search-field::placeholder { color: white; }
header .search-field { background: transparent; font-size: 1.25rem; width: 100%; max-width: 1270px; margin: 0 auto; border: 0; }


.pll-switcher-select { height: 40px; margin-top: 3px; margin-left: 20px; color: white; background: transparent; border: 0; font-family: Open Sans, sans-serif; text-transform: uppercase; letter-spacing: 1px;  }

#mobile-toggle {
  height:50px; width:50px; 
  position:absolute; 
  top:0; right:0; z-index:999999;
  background: none;
  border: none;
  color: var(--red);
  }

#mobile-toggle i { font-size: 1.5rem; }

.mobile-only,
i.fa-times { display:none; }

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

    #acf-main-nav .hap-nav {
        min-height: 60px;
    }

    #acf-main-nav h1 {
        padding-top: 8px;
        font-size: 1.75rem;
    }

    .redbar-1br {
        padding-left: 18px;
    }

    ul #menu-ac-menu li {
        padding: 10px 0;
    }

    #acf-main-nav {
        width: 100vw;
        margin: 0;
        justify-content: flex-start;
    }

    .main-menu .search-icon {
        display: none;
    }

    .searchbar-wrapper {
        display: block;
        width: 90%;
        padding-left: 10px;
    }

    header .search-field {
        font-size: 1rem;
    }

    .yellow-line {
        transform: none;
    }

    .main-menu ul {
        gap: 0;
    }

        .main-menu ul li {
            font-size: .9rem;
        }

    #acf-main-nav.fixed {
        position: fixed;
        background: white;
        overflow-y: scroll;
        height: 100%;
        padding-bottom: 0;
    }

    .mobile-only {
        display: block;
    }

    .lang-switcher {
        height: 80px;
    }

    .max-width-content {
        max-width: 100vw;
    }

    .ac-logo {
        margin-left: 20px;
    }

    #acf-main-nav .hap-header-wrapper {
        padding-left: 18px;
        padding-right: 20px;
        width: calc(100% - 38px);
    }

    .main-menu ul ul li {
        padding-top: 14px;
        line-height: 1.5rem;
    }

    .main-menu .lang-switcher ul ul li {
        display: inline;
    }

    .main-menu ul ul li a {
        font-size: 1rem;
    }

    #acf-main-nav .ac-super-header, .branding {
        width: 100%;
        display: block;
        position: relative;
    }

    .ac-logo {
        width: 300px;
        height: 36.5853px;
    }

    #acf-main-nav .ac-super-header .main-menu, #acf-main-nav .ac-super-header .ac-menu, #acf-main-nav .ac-super-header .searchbar-wrapper {
        display: none;
    }

    .ac-menu {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 0;
        background: var(--wp--preset--color--ac-gray-blue);
        color: #ffffff;
        width: calc(100% - 40px);
        padding: 20px 20px 50px 20px;
    }

    .menu-ac-menu-container {
        height: auto;
        max-width: 100%;
        margin: 0;
        text-align: left;
    }

    ul#menu-ac-menu {
        flex-direction: column;
        justify-content: flex-start;
        color: #ffffff;
        padding: 0;
    }

        ul#menu-ac-menu a {
            color: #ffffff;
        }

    #acf-main-nav .hap-nav {
        flex-direction: column;
    }

    .max-content-width {
        max-width: 100%;
        margin: 0;
    }

    .main-menu, .lang-switcher {
        flex-direction: column;
        justify-content: flex-start;
    }

        .main-menu ul, .lang-switcher ul {
            flex-direction: column;
            justify-content: flex-start;
        }

            .main-menu ul ul, .lang-switcher ul ul {
                width: 100%;
            }

    .ac-super-header {
        display: none;
    }

    .main-menu ul.sub-menu, .lang-switcher ul.sub-menu {
        position: relative;
        z-index: auto;
        visibility: visible;
        margin-left: 10px;
    }

    .lang-switcher ul.sub-menu {
        margin-left: 0;
        padding-left: 0;
        padding-top: 0;
    }


    .main-menu .menu-item-has-children:after,
    .lang-switcher ul li.menu-item:after {
        display: none;
    }
}