.toggle-button{
  top:0px;
  left:10px;
  position: absolute;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
border:1px solid #222223;
border-radius: 5px;
padding: 4px 10px;
        font-size: 12px;
            font-family: 'Apercu Bold', Arial, Helvetica, sans-serif;


}

.menu-active .toggle-button,
.sticky .toggle-button{
    color:#222223 !important;
  border-color: #222223 !important;
}


.toggle-icon{
width:15px;

}

.home .toggle-button, .tours .toggle-button{
  color:#fff;
border-color: #fff;
}

.menu-active .toggle-button{
    color:#222223 !important;
  border-color: #222223 !important;
}

.home .bar, .tours .bar {
  background-color: #fff
}

.menu-active .coa-header svg path {
fill: #222223;
}

.menu-active .topbar {

    border-bottom: 2px solid #222223;
    color: #222223;
}



.menu-active .coa-nav .row {
    border-bottom: 2px solid #222223;
    border-top: 2px solid  #222223;
}

.menu-active  .bar, .sticky .bar {
  background-color: #222223 !important;
}

.toggle-text{
        text-transform: uppercase;
}

.menu-holder {

    width: 100%;
    height:100vh;
    padding:150px 15px 50px;
  }

  .menu-holder ul{
    list-style-type: none;
    padding:0;
  }

    .menu-holder ul li{
margin-bottom:15px;
line-height: 1;
    font-family: "new-spirit", serif;
    font-weight:300;

    }

  .menu-holder ul li a{
color:#111821;
font-size: 30px;
text-decoration: none;

  }



.bar {
  background-color: #222223;
  display: block;
  width: 100%;
  height: 2px;
  border: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
}

.bar + .bar {
  margin-top: 5px;
}



.middle {
  top: 15px;
}

.bottom {
  top: 30px;
}









.middle {
  top: 15px;
}

.bottom {
  top: 30px;
}





.toggle-active .top {
  -webkit-transform: translateY(4px) translateX(0) rotate(45deg);
}

.toggle-active .middle {
  opacity: 0;
}

.toggle-active .bottom {
  -webkit-transform: translateY(-3px) translateX(0) rotate(-45deg);
}



.overlay .menu-holder ul li:before, .overlay .menu-holder ul li:after{
  margin-top:35px !important;
}
.overlay {
  position: fixed;
  background:#CFD8E2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .5s, visibility .5s;

}

.nav-active {
  opacity: 1;
  visibility: visible;
  height: 100%;
z-index:9;
}



@media only screen and (min-width: 1024px) {
.overlay{
    visibility: hidden !important;
    display:none !important;
  }
  .mobile-hero{
    display:none;
  }

.toggle-button{
  display:none;
}

}