$kss-header-color: $cowabunga;
$kss-header-hamburger-color: $cowabunga;

$bar-height: 4px;
$bar-width: 30px;


.kss-header {
  z-index: 900;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 10px;
  color: $kss-header-color;
  background: $white;
  font-family: 'Lato', sans-serif;
  font-weight: 400;

  @include mq(min, 1025px) { display: none; }
}

.kss-header__inner { position: relative; }

.kss-header__title {
  font-size: rem(16px);
  line-height: 25px;
  text-align: left;

  @include mq(min, 568px) { font-size: rem(20px); }
}

.kss-header__hamburger-trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.kss-header__hamburger {
  width: $bar-width;
  height: $bar-height;
  margin-top: 13px;
  margin-bottom: 13px;
  border-radius: 5px;
  color: $kss-header-hamburger-color;
  background: $kss-header-hamburger-color;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: all 0.4s;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: $bar-width;
    height: $bar-height;
    background: $kss-header-hamburger-color;
    transition: all 0.5s;
  }

  &:before {
    top: -$bar-height*2;
    border-radius: 5px;
  }

  &:after {
    top: $bar-height*2;
    border-radius: 5px;
  }

  &.kss-state-active { background: transparent; }

  &.kss-state-active:before,
  &.kss-state-active:after {
    width: $bar-width/2;
    transition: all 0.5s;
  }

  &.kss-state-active:before { transform: translate(7px ,4px) rotate(-40deg); }

  &.kss-state-active:after { transform: translate(7px, -4px) rotate(40deg); }
}