.menu-toggle {
    height: 60px;
    width: 60px;
    position: relative;
    margin: auto;
    padding-top: 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -moz-transition: .8s;
    -o-transition: .8s;
    -webkit-transition: .8s;
    transition: .8s;
    cursor: pointer;
}

.bar {
    height: 7px;
    width: 60px;
    display: block;
    margin: 12px auto;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-transition: .8s;
    -o-transition: .8s;
    -webkit-transition: .8s;
    transition: .8s;
}

.menu-toggle .bar:first-of-type {
    background-color: #6cc24A;
}

.menu-toggle .bar:nth-of-type(2n) {
    background-color: #5cbf9e;
}

.menu-toggle .bar:last-of-type {
    background-color: #00a9e0;
}

.menu-toggle-wrap{display: inline-block; position: relative; bottom: 0px;}
header .menu-toggle-wrap:after{content: 'Menu'; display: block; color: #00a9df; text-align: center; font-weight: 900; text-transform: uppercase;position: absolute;bottom: -30px; font-size: 15pt; left: 0px; width: 100%;}
.menu-toggle-wrap .menu-toggle.active{margin-top: 5px; margin-bottom: -13px;}

.menu-toggle-wrap .menu-toggle.active .bar:nth-of-type(1) {
    -moz-transform: translateY(11px) rotate(45deg);
    -ms-transform: translateY(11px) rotate(45deg);
    -webkit-transform: translateY(11px) rotate(45deg);
    transform: translateY(11px) rotate(45deg);
}
.menu-toggle-wrap .menu-toggle.active .bar:nth-of-type(2) {
    opacity: 0;
}
.menu-toggle-wrap .menu-toggle.active .bar:nth-of-type(3) {
    -moz-transform: translateY(-27px) rotate(-45deg);
    -ms-transform: translateY(-27px) rotate(-45deg);
    -webkit-transform: translateY(-27px) rotate(-45deg);
    transform: translateY(-27px) rotate(-45deg);
}
  
  /*============= Demo  Animation  ================*/
@-moz-keyframes mrotr {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -moz-transform: translateY(15px) rotate(0);
        transform: translateY(15px) rotate(0);
    }
    100% {
        -moz-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@-webkit-keyframes mrotr {
    0% {
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -webkit-transform: translateY(15px) rotate(0);
        transform: translateY(15px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@keyframes mrotr {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        -ms-transform: translateY(0px) rotate(0);
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -moz-transform: translateY(15px) rotate(0);
        -ms-transform: translateY(15px) rotate(0);
        -webkit-transform: translateY(15px) rotate(0);
        transform: translateY(15px) rotate(0);
    }
    100% {
        -moz-transform: translateY(15px) rotate(45deg);
        -ms-transform: translateY(15px) rotate(45deg);
        -webkit-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@-moz-keyframes mrotl {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -moz-transform: translateY(-15px) rotate(0);
        transform: translateY(-15px) rotate(0);
    }
    100% {
        -moz-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@-webkit-keyframes mrotl {
    0% {
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -webkit-transform: translateY(-15px) rotate(0);
        transform: translateY(-15px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@keyframes mrotl {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        -ms-transform: translateY(0px) rotate(0);
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    50% {
        -moz-transform: translateY(-15px) rotate(0);
        -ms-transform: translateY(-15px) rotate(0);
        -webkit-transform: translateY(-15px) rotate(0);
        transform: translateY(-15px) rotate(0);
    }
    100% {
        -moz-transform: translateY(-15px) rotate(-45deg);
        -ms-transform: translateY(-15px) rotate(-45deg);
        -webkit-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@-moz-keyframes rotateR {
    from {
        -moz-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -moz-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@-webkit-keyframes rotateR {
    from {
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -webkit-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@keyframes rotateR {
    from {
        -moz-transform: translateY(0px) rotate(0);
        -ms-transform: translateY(0px) rotate(0);
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -moz-transform: translateY(15px) rotate(45deg);
        -ms-transform: translateY(15px) rotate(45deg);
        -webkit-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }
}
@-moz-keyframes rotateL {
    from {
        -moz-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -moz-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@-webkit-keyframes rotateL {
    from {
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -webkit-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@keyframes rotateL {
    from {
        -moz-transform: translateY(0px) rotate(0);
        -ms-transform: translateY(0px) rotate(0);
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }
    to {
        -moz-transform: translateY(-15px) rotate(-45deg);
        -ms-transform: translateY(-15px) rotate(-45deg);
        -webkit-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }
}
@-moz-keyframes circle-creation {
    0% {
        border-color: transparent;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        border-color: transparent #fff transparent transparent;
        -moz-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        border-color: transparent #fff  #fff transparent;
    }
    75% {
        border-color: transparent #fff #fff #fff;
    }
    100% {
        border-color: #fff;
        -moz-transform: rotate(-300deg);
        transform: rotate(-300deg);
    }
}
@-webkit-keyframes circle-creation {
    0% {
        border-color: transparent;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        border-color: transparent #fff transparent transparent;
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        border-color: transparent #fff  #fff transparent;
    }
    75% {
        border-color: transparent #fff #fff #fff;
    }
    100% {
        border-color: #fff;
        -webkit-transform: rotate(-300deg);
        transform: rotate(-300deg);
    }
}
@keyframes circle-creation {
    0% {
        border-color: transparent;
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        border-color: transparent #fff transparent transparent;
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        border-color: transparent #fff  #fff transparent;
    }
    75% {
        border-color: transparent #fff #fff #fff;
    }
    100% {
        border-color: #fff;
        -moz-transform: rotate(-300deg);
        -ms-transform: rotate(-300deg);
        -webkit-transform: rotate(-300deg);
        transform: rotate(-300deg);
    }
}
@-moz-keyframes moveUp {
    from {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -moz-transform: translateY(25px);
        transform: translateY(25px);
    }
}
@-webkit-keyframes moveUp {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }
}
@keyframes moveUp {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }
}
@-moz-keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media(max-width: 1920px){
    .menu-toggle {
        height: 40px;
        width: 40px;
    }
    
    .bar {
        height: 4px;
        width: 40px;
        margin: 7px auto;
    }

    .menu-toggle-wrap .menu-toggle.active .bar:nth-of-type(3){
        -moz-transform: translateY(-11px) rotate(-45deg);
        -ms-transform: translateY(-11px) rotate(-45deg);
        -webkit-transform: translateY(-11px) rotate(-45deg);
        transform: translateY(-11px) rotate(-45deg);
    }

    header .menu-toggle-wrap:after{bottom: -15px; font-size: 10pt; }
    .menu-toggle-wrap .menu-toggle.active{margin-top: -5px; margin-bottom: -3px;}
}

@media(max-width: 1050px){
    .menu-toggle {
        height: 33px;
        width: 33px;
    }
    
    .bar {
        height: 4px;
        width: 33px;
        margin: 5px auto;
    }

    .menu-toggle-wrap .menu-toggle.active .bar:nth-of-type(3){
        -moz-transform: translateY(-7px) rotate(-45deg);
        -ms-transform: translateY(-7px) rotate(-45deg);
        -webkit-transform: translateY(-7px) rotate(-45deg);
        transform: translateY(-7px) rotate(-45deg);
    }

    header .menu-toggle-wrap:after{font-size: 8pt;}
}