#head_menu{
    cursor: pointer;
  }
  .first{
      -webkit-transform: rotate(45deg)translate(14px,0px); 
           transform: rotate(45deg)translate(14px,0px);
      -webkit-animation: first 0.5s  ; /* Chrome, Safari, Opera */
      animation: first 0.5s  ;
  }
  .second{
      
       -webkit-animation: first 0.5s  ; /* Chrome, Safari, Opera */
      animation: first 0.5s  ;
      opacity: 0;
  }
  .third{
    -webkit-animation: third 0.5s  ; /* Chrome, Safari, Opera */
      animation: third 0.5s  ;
       -webkit-transform: rotate(-45deg)translate(14px,0px); 
           transform: rotate(-45deg)translate(14px,0px);
  }
   .r_first{
       -webkit-animation: r_first 0.5s  ; /* Chrome, Safari, Opera */
      animation: r_first 0.5s  ;
      -webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px);

  }
  .r_second{
     -webkit-animation: r_second 0.5s  ; /* Chrome, Safari, Opera */
      animation: r_second 0.5s  ;
      opacity: 1;
  }
  .r_third{
     -webkit-animation: r_third 0.5s  ; /* Chrome, Safari, Opera */
      animation: r_third 0.5s  ;
       -webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px);
  }
   @-webkit-keyframes second {
        0%{-webkit-transform: rotate(0deg)translate(0px,0px); opacity: 1;
           transform: rotate(0deg)translate(0px,0px)}
     30%,50%,80%{-webkit-transform: rotate(90deg);
           transform: rotate(90deg)}
         100%{-webkit-transform: rotate(45deg)translate(0,0);opacity: 0;
           transform: rotate(45deg)translate(0,0)}
    }
     @-webkit-keyframes r_second {
      0%{-webkit-transform: rotate(45deg)translate(0,0);opacity: 0;
           transform: rotate(45deg)translate(0,0)}
       100%{-webkit-transform: rotate(0deg)translate(0px,0px); opacity: 1;
           transform: rotate(0deg)translate(0px,0px)}
     30%,50%,80%{-webkit-transform: rotate(90deg);
           transform: rotate(90deg)}
        
    }
    @-webkit-keyframes first {
        0%{-webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px)}
     30%,50%,80%{-webkit-transform: rotate(90deg)translate(14px,0px);
           transform: rotate(90deg)translate(14px,0px)}
         100%{-webkit-transform: rotate(45deg)translate(14px,0px);
           transform: rotate(45deg)translate(14px,0px)}
    }
     @-webkit-keyframes r_first {
      0%{-webkit-transform: rotate(45deg)translate(12px,0px);
           transform: rotate(45deg)translate(12px,0px)}
      
     30%,50%,80%{-webkit-transform: rotate(90deg)translate(12px,0px);
           transform: rotate(90deg)translate(12px,0px)}
        100%{-webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px)}
    }

    @-webkit-keyframes third {
        0%{-webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px)}

     30%,50%,80%{-webkit-transform: rotate(-90deg)translate(14px,0px);
           transform: rotate(-90deg)translate(14px,0px);}

         100%{-webkit-transform: rotate(-45deg)translate(14px,0px);
           transform: rotate(-45deg)translate(14px,0px);}
    }
       @-webkit-keyframes r_third {
          0%{-webkit-transform: rotate(-45deg)translate(12px,0px);
           transform: rotate(-45deg)translate(12px,0px);}
        100%{-webkit-transform: rotate(0deg)translate(0px,0px); 
           transform: rotate(0deg)translate(0px,0px)}

     30%,50%,80%{-webkit-transform: rotate(-90deg)translate(12px,0px);
           transform: rotate(-90deg)translate(12px,0px);}

       
    }