.top-bar {

  display: none !important;
	}
.top-bar ul {
  	border: none;
    }
    
.title-bar, .scrolled .title-bar {
  	padding: 0 20px;
  	background:var(--maincolor-blau);
    width:100vw;
  	color: #fff; 
    height:40px;
        position: absolute;
    z-index: 500;
  	}    
.menu-icon::after {
  position: absolute;
  top: 4px !important;
  background: #fff;


}
button span {
    display:inline-block;border:0;
    padding-left:33px;
    color:#fff;
      font-weight:600;
    font-size:1.4rem;
    padding-top:0;
    margin-top:-2px!important;
}



.menu-icon{
   &:after{
     transition: all 0.3s ease;
  }
     &:before{
     transition: all 0.3s ease;
  }
}
.menu-icon.active{
  transition: all 0.3s ease;

  &:after{
    transition: all 0.3s ease;
    position: absolute;
    left: 0;
      top:12px!important;
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    box-shadow: none;
    transform: rotate(45deg);

    &:hover{
      opacity: 1;
    }

  }
   &:before{
     transition: all 0.3s ease;
    position: absolute;
    top:12px!important;
    left: 0;
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    box-shadow: none;
    transform: rotate(-45deg);
    content: "";
    &:hover{
      opacity: 1;
    }
  }
}



@media screen and (min-width: 1024px) {
   .top-bar {
    display: block !important;
  }

   .title-bar {
    display: none !important;
  }
}