.hamburger-user {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
 cursor: pointer;
top: -7px;

}

.hamburger-user-line {
height:1px;
border:1px solid white;
margin:6px 0 


}

#mobile-user .close-menu-user {position: fixed; height: 30px;width: 30px;display: flex;flex-direction: column; justify-content: center;right:20px;top:10px;cursor:pointer}

#mobile-user .close-menu-user::before, 
#mobile-user .close-menu-user::after {    position: absolute;    content: '';    width: 100%;    height: 2px;  background-color: white;}
#mobile-user .close-menu-user::before {transform: rotate(45deg);}
#mobile-user .close-menu-user::after { transform: rotate(-45deg);}
#mobile-user .close-menu-user:hover::before{ background-color:white;color:red}
#mobile-user .close-menu-user:hover::after{ background-color:white}




.hamburger {
  /*padding: 15px 15px;*/
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  position:relative;
  z-index:9;
  left:0;
 top: 2px;
  background-image:url('../img/mobile-hamburger-icon.png');
  background-size: 100% auto;
background-repeat: no-repeat;
background-position: 0 20%;
	text-align: right
}


  .hamburger:hover {
    opacity: 0.7; }
	.hamburger.is-active {	z-index:999;;position: fixed;right: 0; }

  .hamburger.is-active:hover {    opacity: 0.7}
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: white }

.hamburger-box {
  width: 30px;
  height: 40px;
  display: inline-block;
  position: relative; 
right:15px
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 2px;
    background-color: #b770a1;
    border-radius: 1px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -8px; }
  .hamburger-inner::after {
    bottom: -8px; }




.hamburger-1.nol .hamburger-inner, .hamburger-1.nol .hamburger-inner::before,.hamburger-1.nol  .hamburger-inner::after {background-color:grey}
.hamburger-3 .hamburger-inner, .hamburger-3 .hamburger-inner::before,.hamburger-3  .hamburger-inner::after {background-color:grey}
.hamburger-1.nol {width:50px}
/*
   * Emphatic
   */
.hamburger--emphatic {
  overflow: hidden; 
	
}
  .hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::after {
      top: 8px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }
    .hamburger--emphatic.is-active .hamburger-inner::before {
      left: -80px;
      top: -80px;
      transform: translate3d(80px, 80px, 0) rotate(45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic.is-active .hamburger-inner::after {

      right: -80px;
      top: -80px;
      transform: translate3d(-80px, 80px, 0) rotate(-45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }