#saber_container {
 width: 75px;
    height: 70px;
    margin: -10px;
	padding: 0 0 0 0 !important;
}

#burger {
  cursor: pointer;
  opacity: 0;
  -webkit-animation: fadein 0.2s ease 1s forwards;
          animation: fadein 0.2s ease 1s forwards;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
#burger .bun, #burger .filling {
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  height: 10%;
  width: 70%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: top 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
  transition: top 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
  transition: top 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: top 0.4s ease 0.4s, transform 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
}

#burger .bun:before, #burger .filling:before, #burger .bun:after, #burger .filling:after {
  content: "";
  display: block;
  height: 40%;
  background: white;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -45%);
          transform: translate(0%, -45%);
  -webkit-transition: background 0.2s ease, box-shadow 0.2s ease;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
#burger .bun:before, #burger .filling:before {
  left: 0;
  width: calc(-1px + 75%);
  border-radius: 10px 0px 0px 10px;
}
#burger .bun:after, #burger .filling:after {
  right: 0;
  width: calc(-1px + 25%);
}
#burger:hover .bun.top:before {
  background: #FEE;
  box-shadow: #F00 0px 0px 10px 1px;
}
#burger:hover .bun.bottom:before {
  background: #DFF;
  box-shadow: #0FF 0px 0px 10px 1px;
}
#burger:hover .filling:before {
  background: #EFE;
  box-shadow: #0F0 0px 0px 10px 1px;
}
#burger .bun.top {
  top: 25%;
}
#burger .bun.bottom {
  top: 75%;
}
#burger .filling {
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
  -webkit-animation: green-ls-out 0.8s ease forwards;
          animation: green-ls-out 0.8s ease forwards;
}
.active #burger .bun {
  border-radius: 3px;
  top: 50%;
  -webkit-transition: top 0.4s ease, -webkit-transform 0.4s ease;
  transition: top 0.4s ease, -webkit-transform 0.4s ease;
  transition: top 0.4s ease, transform 0.4s ease;
  transition: top 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}
.active #burger .bun.top {
  -webkit-transform: translate(-50%, -50%) rotate(-225deg);
          transform: translate(-50%, -50%) rotate(-225deg);
}
.active #burger .bun.bottom {
  -webkit-transform: translate(-50%, -50%) rotate(405deg);
          transform: translate(-50%, -50%) rotate(405deg);
}
.active #burger .filling {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-animation: green-ls-in 0.8s ease forwards;
          animation: green-ls-in 0.8s ease forwards;
}


@-webkit-keyframes green-ls-in {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
            transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
  }
}

@keyframes green-ls-in {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
            transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
  }
}
@-webkit-keyframes green-ls-out {
  0% {
    -webkit-transform: translate(-50%, -200%) rotate(-90deg);
            transform: translate(-50%, -200%) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
}
@keyframes green-ls-out {
  0% {
    -webkit-transform: translate(-50%, -200%) rotate(-90deg);
            transform: translate(-50%, -200%) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
}
@-webkit-keyframes fadein {
  from {
    Opacity: 0;
  }
  to {
    Opacity: 1;
  }
}
@keyframes fadein {
  from {
    Opacity: 0;
  }
  to {
    Opacity: 1;
  }
}