.toggle-icon  {cursor: pointer; display: flex; align-items: center; z-index: 99;}  
.toggle-icon small  {color: #fff; margin-left: -15px; margin-top: 5px; font-size: 9px; text-transform: uppercase; transition: all ease; transition-duration:  .5s;}  
.toggle-icon svg { transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); width: 79px; height: auto;  } 
.toggle-icon .active svg { transform: rotate(90deg); } 
.toggle-icon path { transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1); } 
.toggle-icon path:nth-child(1) { transform-origin: 36% 40%; } 
.toggle-icon path:nth-child(2) { stroke-dasharray: 29 299; } 
.toggle-icon path:nth-child(3) { transform-origin: 35% 63%; } 
.toggle-icon path:nth-child(4) { stroke-dasharray: 29 299; } 
.toggle-icon path:nth-child(5) { transform-origin: 61% 52%; } 
.toggle-icon path:nth-child(6) { transform-origin: 62% 52%; } 

.toggle-icon.active svg {transform: scale(.55);} 
.toggle-icon.active path:nth-child(1) { transform: translateX(9px) translateY(1px) rotate(45deg); } 
.toggle-icon.active path:nth-child(2) { stroke-dasharray: 225 299; stroke-dashoffset: -72px; } 
.toggle-icon.active path:nth-child(3) { transform: translateX(9px) translateY(1px) rotate(-45deg); } 
.toggle-icon.active path:nth-child(4) { stroke-dasharray: 225 299; stroke-dashoffset: -72px; } 
.toggle-icon.active path:nth-child(5) { transform: translateX(9px) translateY(1px) rotate(-45deg); } 
.toggle-icon.active path:nth-child(6) { transform: translateX(9px) translateY(1px) rotate(45deg); } 
.toggle-icon.active small  {opacity: 0; transform: translateX(20px);}  

@media screen and (max-width:768px){
    .toggle-icon  {margin-right: -8px; margin-top: -4px;}   
}