@import url(http://fonts.lug.ustc.edu.cn/css?family=Quicksand:300,400,700);

* {
  box-sizing: border-box;
}

body {
  background: gold;
}

.hamburger {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  cursor: pointer;
  transition: all .5s ease;
  transform: translate3d(-50%, -50%, 0);
  .bar1 {
    position: absolute;
    width: 40px;
    height: 7px;
    top: 35px;
    left: 0;
    background: #c49b83;
    transition: all .5s ease;
  }
  .bar2 {
    @extend .bar1;
    width: 60px;
    height: 60px;
    top: 13px;
    left: -10px;
    background: none;
    border: 7px solid #d0343a;
    border-radius: 100%;
  }
  .bar3 {
    @extend .bar1;
    top: 45px;
  }
  &:hover .bar1 {
    top: 25px;
  }
  &:hover .bar2 {
    width: 40px;
    height: 7px;
    top: 35px;
    left: 0;
    background: #d0343a;
    border: none;
    border-radius: 0;
    transform: rotate(360deg);
  }
  &:hover .bar3 {
    top: 45px;
  }
}

h1 {
  position: absolute;
  top: 88%;
  left: 50%;
  font: 700 2.85em 'Quicksand';
  font-size: 3.6vw;
  letter-spacing: -3px;
  color: #444;
  transform: translate3d(-50%, -50%, 0);
  white-space: nowrap;
}