.navbar-toggle {
    border-color: transparent;
     border-radius: 0;

}
 .navbar-toggle:hover {

}
 .navbar-toggle .icon-bar {
    width: 22px;
    transition: all 0.2s;

}
 .navbar-toggle .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}
 .navbar-toggle .middle-bar {
    opacity: 0;
}
 .navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}


 .navbar-toggle .icon-bar {
     transition: 300ms ease-in-out;
     background-color: #000;
     position: relative;
     width: 26px;
     height: 1px;
 }
 .navbar-toggle .icon-bar:last-child {
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     top: -5px;
 }
 .navbar-toggle .icon-bar:nth-child(2) {
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 5px;
 }
 .navbar-toggle .icon-bar:nth-child(3) {
     opacity: 0;
 }
 .navbar-toggle.collapsed .icon-bar {
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     top: 0;
     opacity: 1;
 }