#header-wrapper {
  padding-top: 15px;
  background: var(--cutler);
}

#header-wrapper a,
#header-wrapper span,
#header-wrapper h2 {
  color: var(--white);
}

.nav-actions {
  display: none;
}

#header-top .closed, #left-navigation .closed {
  display: none;
}

#logoSpaceContent a,
#submenutitle a,
h2.text--white,
.helpful-links > p,
.navigate-ohio > p,
.connect-ohio-links > p {
  font-weight: bold;
  text-decoration: none;
  font-size: 26px;
  font-family: 'proxima-nova';
  line-height: 1.25;
  display: inline-block;
}

#logoSpaceContent > p,
#submenutitle > p,
.helpful-links > p,
.navigate-ohio > p,
.connect-ohio-links > p {
  display:block;
  font-size:26px;
  line-height:1.25;
  margin:0 0 8px 0;
  padding:15px 0px 0px 0px;
  color:#fff;
}

#logo img {
  width: 100px;
  height: 58px;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.helpful-links h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0;
}

#-menu {
  display: none;
}

#main-menu {
  padding: 0 15px;
}

@media (min-width: 992px) {
  .navigate-ohio-links {
    display: none;
  }
}

.navigate-ohio-links {
  width: 100%;
}

.navigate-ohio-links #main-menu {
  columns: 2;
}

#main-menu span,
.menu-item a,
.menu-item span,
.middle .menu-item a,
.mainBody .menu-item a,
.middle .menu-item span,
.mainBody .menu-item span {
  font-size: 18px;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
}

.row.menu {
  padding: 0;
}

#main-menu .menu-level-2 span.main-global-hidden-menu-category {
  cursor: text;
}

#main-menu .menu-level-1.menu-item--collapsed .arrow {
  display: none;
}

@media (min-width: 992px) {
  #main-menu .menu-level-1 .arrow {
    width: 46px;
    aspect-ratio: 1;
    z-index: 101;
    top: 25px;
    position: absolute;
    -webkit-filter: drop-shadow(0px -4px 3px rgba(0,0,0,.1));
    filter: drop-shadow(0px -4px 3px rgba(0,0,0,.1));
    align-self: center;
  }

  #main-menu .menu-level-1 .arrow:before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--white);
    -webkit-clip-path: polygon(50% 10%, 0% 60%, 100% 60%);
    clip-path: polygon(50% 10%, 0% 60%, 100% 60%);
  }

  #main-menu .menu-level-1.menu-item--expanded .arrow {
    display: block;
  }
}

.menu-item {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 2px solid #268169;
  flex-direction: column;
  padding: 0;
  cursor: pointer;
}

.menu-item .link-wrapper,
.menu-item a {
  cursor: pointer;
}

.menu-level-1:not(.hasMenu) a,
.menu-level-2:not(.hasMenu) a,
.menu-level-3:not(.hasMenu) a {
  padding: 6px 0;
}

.menu-level-1.hasMenu > div > a::after,
.menu-level-2.hasMenu > div > a::after {
  color: var(--white);
  content: '\f078';
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s 0.3s, background-color 0.3s;
  border-left: 2px solid #268169;
  padding: 25px;
}

.menu-level-1.hasMenu.menu-item--expanded > a::after,
.menu-level-2.hasMenu.menu-item--expanded > a::after {
  transform: rotate(180deg);
  background-color: #268169;
  transition: transform 0.3s, background-color 0.3s 0.3s;
  border-left: none;
}

.nested-menu {
  width: 100%;
  padding-left: 15px;
  cursor: default;
}

ul.menu {
  width: 100%;
}

#page-dimmer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  left: 0;
  top: 0;
  z-index: 999;
  display: none;
}

#page-dimmer.active {
  display: block;
}

.aux-menu {
  display: none;
}

.aux-menu-links button .fa {
  transition: transform 0.3s;
}

.aux-menu-links button.hover .fa:not(.fa-search) {
  transform: rotate(180deg);
}

.overflow-hidden {
  overflow-y: hidden;
}

#header-top {
  z-index: 100;
  position: relative;
}

@media (max-width: 991px) {
  #main-menu .menu-level-2 span.main-global-hidden-menu-category,
  .aux-menu-links h2 {
    font-family: 'p22-mackinac-pro';
    font-weight: 700;
  }

  .aux-menu-links h2 {
    font-size: 18px;
  }

  .menu-item.menu-level-1 .link-wrapper {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .link-wrapper button {
    transition: transform 0.3s 0.3s, background-color 0.3s;
  }

  .link-wrapper button i.fa,
  .aux-menu-links li .fa {
    color: var(--white);
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s 0.3s, background-color 0.3s;
    border-left: 2px solid #268169;
    padding: 25px;
  }

  .row.menu {
    padding: 0;
    position: absolute;
    background-color: var(--cutler);
    z-index: 100;
    width: 100%;
    left: 0;
    margin: auto;
  }

  .row.menu .connect-ohio-links {
    padding-bottom:90px;
  }

  .menu-container {
    overflow-y: auto;
    height: 100vh;
  }

  .menu-item {
    list-style: none;
    display: flex;
    align-items: flex-start;
    border-top: 2px solid #268169;
    flex-direction: column;
    padding: 0;
    justify-content: center;
  }

  .menu-level-1:not(.hasMenu) a,
  .menu-level-2:not(.hasMenu) a,
  .menu-level-3:not(.hasMenu) a {
    padding: 6px 0;
  }

  .menu-level-1.hasMenu > div > a::after,
  .menu-level-2.hasMenu > div > a::after {
    color: var(--white);
    content: '\f054';
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
    width: 30px;
    height: 40px;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s 0.3s, background-color 0.3s;
    padding: 25px 6px;
    border-left: none;
  }

  #main-menu .menu-level-1 a {
    justify-content: flex-start;
  }

  #main-menu .menu-level-1:not(.hasMenu) a::after,
  #main-menu .menu-level-2:not(.hasMenu) a::after,
  .aux-menu-links section ul:not(.top-social) a::after {
    border-left: none;
    content: '\f054';
    width: 40px;
    height: 40px;
    color: var(--white);
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row.menu > .col-12 ul > li:first-of-type {
    border-top:none;
  }

  .menu-level-1.hasMenu.menu-item--expanded > .link-wrapper button,
  .menu-level-2.hasMenu.menu-item--expanded > .link-wrapper button,
  .aux-menu-links .hasMenu button.hover i.fa {
    transform: rotate(180deg);
    background-color: #268169;
    transition: transform 0.3s, background-color 0.3s 0.3s;
    border-left: none;
  }

  .navigate-ohio-links #main-menu .menu-item {
    border-top: none;
    padding: 0;
    line-height: 2;
  }

  .navigate-ohio-links #main-menu a {
    display: flex;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    min-height: auto;
    align-items: center;
    padding: 0;
  }
  
  .navigate-ohio-links #main-menu .menu-level-1:not(.hasMenu) a::after {
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
    content: '\00a0\f105';
    font-size: 18px;
    display: block;
    width: unset;
    height: unset;
  }

  /* Top green bar links, but on mobile! */
  .aux-menu-links {
    padding: 0 15px;
    display: block;
    list-style: none;
  }

  .aux-menu-links li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    border-top: 2px solid #268169;
    flex-direction: column;
    padding: 0;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    width: 100%;
    display: flex;
    min-height: 52px;
  }

  .aux-menu-links li button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #fff;
    transition: transform 0.3s 0.3s, background-color 0.3s;
  }

  .aux-menu-links li a {
    text-decoration: none;
    font-size: 18px;
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
  }
  .aux-menu-links .top-social {
    display: flex;
    justify-content: space-between;
  }

  .aux-menu-links .top-social li {
    width: auto;
    display: inline-flex;
    border: none;
  }

  .aux-menu-links .top-social li a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .aux-menu-links .top-social li i[class^="fa-"] {
    border-left: none;
    font-size: 22px;
  }

  .aux-menu-links li section {
    width: 100%;
    padding-left: 15px;
  }

  .aux-menu-links li section h2 {
    border-top: 2px solid #268169;
    width: 100%;
    margin: 0;
    padding: 10px 0;
  }

  .nav-actions button {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    margin-left: 20px;
  }
}

@media (min-width: 992px) {
  #header-top .top-links {
    min-height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .aux-menu {
    display: block;
    background: var(--under-the-elms);
  }

  .aux-menu li {
    color: var(--white);
  }

  .aux-menu-links {
    list-style: none;
    padding: 0;
    margin: 4px 0;
    min-height: 30px;
    align-items: center;
  }

  .aux-menu-links li {
    padding-left: 36px;
    position: relative;
    font-size: 15px;
  }

  #header-wrapper .aux-menu-links button,
  #header-wrapper .aux-menu-links h2,
  #header-wrapper .aux-menu-links a {
    color: var(--white);
  }

  .aux-menu-links h2 {
    font-size: 22px;
    margin-top: 20px;
  }

  .aux-menu section {
    position: absolute;
    background: var(--cutler);
    padding: 15px 20px;
    z-index: 1;
    width: 200px;
  }

  .aux-menu-links section ul {
    list-style: none;
  }

  .aux-menu-links section ul li {
    padding-left: 0;
    margin: 12px 0;
    line-height: 1.25;
  }

  .aux-menu-links > li > a {
    padding: 2px 8px;
  }

  .aux-menu-links > li > a:hover {
    outline: 1px solid #fff;
  }

  .aux-menu a {
    text-decoration: none;
  }

  .aux-menu-links > li > * {
    font-weight: 500;
  }

  .aux-menu-links button::after {
    color: var(--white);
    content: '\f107';
    font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s 0.3s;
    margin: 0 10px;
    display: none;
  }

  #header-wrapper .aux-menu-links button.hover,
  #header-wrapper .aux-menu-links button.hover::after {
    cursor: pointer;
  }

  .aux-menu-links .top-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .aux-menu-links .top-social li i[class^="fa-"] {
    font-size: 18px;
  }
  
  .aux-menu-links a[target="_blank"]:after {
    display: none;
  }

  #header-wrapper {
    padding-top: 0;
  }

  #logo {
    width: 160px;
    height: 118px;
    text-align: center;
    padding: 30px;
    background: var(--cutler);
    position: absolute;
    top: 0;
  }

  #search-desktop button::after {
    display: none;
    margin-right: 0;
  }

  #header-wrapper {
    background: var(--white);
  }

  #header-wrapper a, #header-wrapper span {
    color: var(--cutler);
  }

  .menu-level-1.hasMenu.menu-item--expanded > a::after,
  .menu-level-2.hasMenu.menu-item--expanded > a::after {
    background-color: transparent;
  }

  #logoSpaceContent a {
    color: var(--putnam);
    font-family: 'p22-mackinac-pro';
  }

  #logoSpaceContent a:hover {
    text-decoration: underline;
  }

  #logoSpaceContent a:focus {
    outline: 2px solid #85b7d1;
    color: var(--white);
    background-color: var(--under-the-elms);
    text-decoration: underline;
  }

  #header-wrapper h2 {
    color: var(--cutler);
    padding: 0;
    margin: 0;
  }

  .menu-level-1.hasMenu > div > a::after,
  .menu-level-2.hasMenu > div > a::after {
    color: var(--cutler);
    border-left: none;
    content: '\f107';
    padding: 0;
    width: 30px;
    position: absolute;
    right: -24px;
    display: none;
  }

  .menu-level-1.hasMenu > div > button {
    color: var(--cutler);
    border-left: none;
    content: '\f107';
    padding: 4px;
    width: 22px;
    height: 22px;
    position: absolute;
    right: -20px;
    font-size: 14px;
    top: 0px;
  }

  .menu-level-1.hasMenu > div > button:focus {
    outline: 2px solid #85b7d1;
    color: var(--white);
    background-color: var(--under-the-elms);
  }

  #main-menu {
    padding: 0;
  }

  #main-menu span, .menu-item a, .menu-item span, .middle .menu-item a, .mainBody .menu-item a, .middle .menu-item span, .mainBody .menu-item span {
    font-size: 16px;
    font-weight: bold;
    min-height: auto;
  }

  #main-menu .nested-menu .menu-item a:hover {
    text-decoration: underline;
  }

  #main-menu .nested-menu .menu-item a:focus {
    outline: 2px solid #85b7d1;
    color: var(--white);
    background-color: var(--under-the-elms);
    text-decoration: underline;
  }
  
  .row.menu {
    margin-left: 160px;
    margin-bottom: 10px;
    padding: 0 15px;
    width: 100%;
  }

  .menu-level-2.menu-item.hasMenu {
    display: inline-flex;
  }

  .menu-item {
    border-top: none;
  }

  .menu-level-1.menu-item {
    display: inline-flex;
  }

  #header-wrapper .menu-item.menu-level-1.hasMenu a[href=""]:hover, 
  #header-wrapper .menu-item.menu-level-1.hasMenu a[href="#_"]:hover, 
  #header-wrapper .menu-item.menu-level-1.hasMenu .link-wrapper span:hover {
    outline: none;
    color: var(--putnam);
    cursor: default;
  }
  
  #header-wrapper .menu-item.menu-level-1.hasMenu a[href=""]:focus,
  #header-wrapper .menu-item.menu-level-1.hasMenu a[href="#_"]:focus {
    outline: 2px solid #85b7d1;
    color: var(--putnam);
    cursor: default;
  }

  #main-menu .menu-level-1.hasMenu {
    position: relative;
    margin-right: 24px;
    align-items: center;
  }

  #main-menu .menu-level-1 > a {
    padding: 0 6px;
    position: relative;
  }

  .nav-down-arrow {
    position: absolute;
    right: -1em;
    top: 3px;
    color: var(--cutler);
  }

  .nav-down-arrow .fa {
    font-weight: bold;
  }

  #main-menu .link-wrapper {
    position: relative;
  }

  #main-menu .link-wrapper a,
  #main-menu .link-wrapper span {
    padding: 0 6px;
  }

  #main-menu > .menu-level-1 > div > a:not([href^="#"]):not([href^="#_"]):not([href=""]):hover,
  #main-menu > .menu-level-1 > a:not([href^="#"]):not([href^="#_"]):not([href=""]):hover {
    outline: 1px solid #00694E;
  }

  #main-menu > .menu-level-1 > div > a:not([href^="#"]):not([href^="#_"]):not([href=""]):focus, 
  #main-menu > .menu-level-1 > a:not([href^="#"]):not([href^="#_"]):not([href=""]):focus {
    outline: 2px solid #85b7d1;
    color: #FFF!important;
    background: #024230;
    text-decoration: underline;
  }

  #main-menu .menu-level-1 > .nested-menu {
    padding: 40px;
    z-index: 100;
    background: white;
    box-shadow: 0px 0px 5px #ccc;
    align-items: flex-start;
    justify-content: center;
    max-width: 100vw;
    position: absolute;
    top: 52px;
    width: fit-content;
  }

  #main-menu > .menu-level-1.single-menu > .nested-menu:not(.closed) {
    display: inline-flex;
    width: 300px;
    flex-direction: column;
    align-items: flex-start;
  }

  #main-menu .menu-level-1 > .nested-menu:not(.closed) {
    display: flex;
  }

  .menu-level-2.hasMenu {
    /* Variable value here set with js */
    width: 300px;
  }

  .menu-level-2 .nested-menu {
    padding-left: 0;
  }

  #main-menu .menu-level-2 span.main-global-hidden-menu-category {
    color: #024230;
    font-size: 24px;
    margin-bottom: 8px;
  }

  .btn-opened {
    transform: rotate(180deg);
  }
}