.hamburger .line{
      width:36px;
      height: 3px;
      background-color: #708693;
      display: block;
      margin: 7px auto;
      
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    .hamburger:hover{
      cursor: pointer;
    }
    
    .hamburger:hover .line{
        background-color: #4f5d66;
    }
    
    #hamburger-6.is-active{
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      -webkit-transition-delay: 0.6s;
      -o-transition-delay: 0.6s;
      transition-delay: 0.6s;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    #hamburger-6.is-active .line{
        background-color: #4f5d66;
    }
    
    #hamburger-6.is-active .line:nth-child(2){
      width: 0px;
    }
    
    #hamburger-6.is-active .line:nth-child(1),
    #hamburger-6.is-active .line:nth-child(3){
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    
    #hamburger-6.is-active .line:nth-child(1){
      -webkit-transform: translateY(8px);
      -ms-transform: translateY(8px);
      -o-transform: translateY(8px);
      transform: translateY(8px);
    }
    
    #hamburger-6.is-active .line:nth-child(3){
      -webkit-transform: translateY(-12px) rotate(90deg);
      -ms-transform: translateY(-12px) rotate(90deg);
      -o-transform: translateY(-12px) rotate(90deg);
      transform: translateY(-12px) rotate(90deg);
    }