@keyframes mIntro {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(5%);
    }
}

@keyframes mBike {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(3%);
    }
    40% {
        transform: translateY(2%);
    }
    60% {
        transform: translateY(5%);
    }
    80% {
        transform: translateY(2);
    }
    100% {
        transform: translateY(3%);
    }
}

@-webkit-keyframes mBike {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(3%);
    }
    40% {
        -webkit-transform: translateY(2%);
    }
    60% {
        -webkit-transform: translateY(5%);
    }
    80% {
        -webkit-transform: translateY(2);
    }
    100% {
        -webkit-transform: translateY(3%);
    }
}

@keyframes mIRim {
    0% {
        box-shadow: inset 0 0 0 5vw #333;
    }
    100% {
        box-shadow: inset 0 0 0 1.2vw #166241;
    }
}


@-webkit-keyframes mIRim {
    0% {
        box-shadow: inset 0 0 0 5vw #333;
    }
    100% {
        box-shadow: inset 0 0 0 1.2vw #166241;
    }
}


@keyframes mISpoke {
    0% {
        top: 50%;
        height: 0%;
    }
    100% {
        top: 1%;
        height: 98%;
    }
}


@-webkit-keyframes mISpoke {
    0% {
        top: 50%;
        height: 0%;
    }
    100% {
        top: 1%;
        height: 98%;
    }
}


@keyframes mIcon {
    0% {
        top: 0;
    }
    100% {
        top: -5%;
    }
}



@keyframes mShadow {
    0% {
        width: 40%;
        height: 3%;
        background: #c4cbc64d;
        top: 0;
        left: 30%;
    }
    100% {
        width: 80%;
        height: 6%;
        background: #c4cbc6cc;
        top: 5%;
        left: 10%;
    }
}


@-webkit-keyframes mShadow {
    0% {
        width: 40%;
        height: 5%;
        background: #c4cbc64d;
        top: 0;
        left: 30%;
    }
    100% {
        width: 80%;
        height: 10%;
        background: #c4cbc6cc;
        top: 10%;
        left: 10%;
    }
}

@keyframes bottomShadow {
    0% {
        box-shadow: 0px 24px 0px -21px #e7e7e7;
    }

    100% {
        box-shadow: 0px 3px 0px 0 #aaa
    }
}

@-webkit-keyframes bottomShadow {
    0% {
        -webkit-box-shadow: 0px 24px 0px -21px #e7e7e7;
        -moz-box-shadow: 0px 24px 0px -21px #e7e7e7;
    }

    100% {
        -webkit-box-shadow: 0px 3px 0px 0 #aaa;
        -moz-box-shadow: 0px 3px 0px 0 #aaa;
    }
}


@keyframes mWingL {
    0% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(60deg);
    }
}


@keyframes mWingR {
    0% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(-60deg);
    }
}


@-webkit-keyframes mWingL {
    0% {
        -webkit-transform: rotate(10deg);
    }
    100% {
        -webkit-transform: rotate(60deg);
    }
}


@-webkit-keyframes mWingR {
    0% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(-60deg);
    }
}


@keyframes m45deg {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}


@-webkit-keyframes m45deg {
    0% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(-45deg);
    }
}


@keyframes m360deg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@-webkit-keyframes m360deg {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}


@keyframes enlargeDot {
    from {
        width: 0px;
        height: 0px;
        left: 15px;
        top: 10px;
    }

    to {
        width: 15px;
        height: 15px;
        left: 9px;
        top: 6px;
    }
}



@keyframes showEvent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rotatateIcon {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(8deg);
    }

    75% {
        transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotate-l3 {
    0% {
        transform: rotate(45deg);
        z-index: 3;
        -webkit-z-index: 3;
    }

    98% {
        z-index: 3;
        -webkit-z-index: 3;
    }

    100% {
        transform: rotate(225deg);
        z-index: -1;
        -webkit-z-index: -1;
    }
}

@keyframes showTechs {
    from {
        top: 0;
    }

    to {
        top: 10px;
    }
}




@keyframes rotate-l1-ill {

    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(190deg);
    }
}


@keyframes rotate-l1-vid {

    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(160deg);
    }
}


@keyframes rotate-l1-web {

    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(200deg);
    }
}


/*@keyframes extendTL {

    to {
        border-bottom-width': expeinceL + 'px';

    }
}*/


/** webkit version **/

@-webkit-keyframes enlargeDot {
    from {
        width: 0px;
        height: 0px;
        left: 15px;
        top: 10px;
    }

    to {
        width: 15px;
        height: 15px;
        left: 9px;
        top: 6px;
    }
}

@-webkit-keyframes showEvent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes rotatateIcon {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(8deg);
    }

    75% {
        -webkit-transform: rotate(-8deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate-l3 {
    0% {
        -webkit-transform: rotate(45deg);
        z-index: 3;
        -webkit-z-index: 3;
    }

    98% {
        z-index: 3;
        -webkit-z-index: 3;
    }

    100% {
        -webkit-transform: rotate(225deg);
        z-index: -1;
        -webkit-z-index: -1;
    }
}

@-webkit-keyframes showTechs {
    from {
        top: 0;
    }

    to {
        top: 10px;
    }
}


@-webkit-keyframes rotate-l1-ill {

    from {
        -webkit-transform: rotate(45deg);
    }
    to {
        -webkit-transform: rotate(190deg);
    }
}


@-webkit-keyframes rotate-l1-vid {

    from {
        -webkit-transform: rotate(45deg);
    }
    to {
        -webkit-transform: rotate(160deg);
    }
}



@-webkit-keyframes rotate-l1-web {

    from {
        -webkit-transform: rotate(45deg);
    }

    to {
        -webkit-transform: rotate(200deg);
    }
}