.animation-draw-lr-line {
    position: relative;
    display: inline-block;
    padding: 5px 40px;
}

.animation-draw-lr-line > span {
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    z-index: 1;
}

.animation-draw-lr-line:before {
    position: absolute;
    background: #222;
    content: '';
    width: 40px;
    height: 1px;
    top: 50%;
    left: 0px;
    margin-top: -1px;
}

.animation-draw-lr-line:after {
    position: absolute;
    background: #222;
    content: '';
    width: 40px;
    height: 1px;
    top: 50%;
    right: 0px;
    margin-top: -1px;
}

.animation-draw-lr-line:hover:before {
    -webkit-animation-name: kf-animation-draw-lr-line;
            animation-name: kf-animation-draw-lr-line;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animation-draw-lr-line:hover:after {
    -webkit-animation-name: kf-animation-draw-lr-line;
            animation-name: kf-animation-draw-lr-line;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

@-webkit-keyframes kf-animation-draw-lr-line {
    0% { 
        width: 0px;
    }
    100% { 
        width: 40px;
    }
}

@keyframes kf-animation-draw-lr-line {
    0% { 
        width: 0px;
    }
    100% { 
        width: 40px;
    }
}

.animation-slide-in-left-before {
    -webkit-transform: translate3d(-120%, 0, 0);
            transform: translate3d(-120%, 0, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition-duration: 2s;
            transition-duration: 2s;
}

.animation-slide-in-left {
    -webkit-animation-name: kf-animation-slide-in-left;
            animation-name: kf-animation-slide-in-left;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.animation-slide-in-right-before {
    -webkit-transform: translate3d(120%, 0, 0);
            transform: translate3d(120%, 0, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition-duration: 2s;
            transition-duration: 2s;
}

.animation-slide-in-right {
    -webkit-animation-name: kf-animation-slide-in-right;
            animation-name: kf-animation-slide-in-right;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@-webkit-keyframes kf-animation-slide-in-left {
    0% { 
        -webkit-transform: translate3d(-120%, 0, 0); 
                transform: translate3d(-120%, 0, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-animation-slide-in-left {
    0% { 
        -webkit-transform: translate3d(-120%, 0, 0); 
                transform: translate3d(-120%, 0, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes kf-animation-slide-in-right {
    0% { 
        -webkit-transform: translate3d(120%, 0, 0); 
                transform: translate3d(120%, 0, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-animation-slide-in-right {
    0% { 
        -webkit-transform: translate3d(120%, 0, 0); 
                transform: translate3d(120%, 0, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

.animation-slide-in-top-before {
    -webkit-transform: translate3d(0, -120%, 0);
            transform: translate3d(0, -120%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition-duration: 2s;
            transition-duration: 2s;
}

.animation-slide-in-top {
    -webkit-animation-name: kf-animation-slide-in-top;
            animation-name: kf-animation-slide-in-top;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.animation-slide-in-bottom-before {
    -webkit-transform: translate3d(0, 120%, 0);
            transform: translate3d(0, 120%, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition-duration: 2s;
            transition-duration: 2s;
}

.animation-slide-in-bottom {
    -webkit-animation-name: kf-animation-slide-in-bottom;
            animation-name: kf-animation-slide-in-bottom;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@-webkit-keyframes kf-animation-slide-in-top {
    0% { 
        -webkit-transform: translate3d(0, -120%, 0); 
                transform: translate3d(0, -120%, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-animation-slide-in-top {
    0% { 
        -webkit-transform: translate3d(0, -120%, 0); 
                transform: translate3d(0, -120%, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes kf-animation-slide-in-bottom {
    0% { 
        -webkit-transform: translate3d(0, 120%, 0); 
                transform: translate3d(0, 120%, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-animation-slide-in-bottom {
    0% { 
        -webkit-transform: translate3d(0, 120%, 0); 
                transform: translate3d(0, 120%, 0);
    }
    100% { 
        -webkit-transform: translate3d(0, 0, 0); 
                transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes kf-animation-up-and-down {
    0% { bottom: 21px; }
    50% { bottom: 7px; }
    100% { bottom: 21px; }
}

@keyframes kf-animation-up-and-down {
    0% { bottom: 21px; }
    50% { bottom: 7px; }
    100% { bottom: 21px; }
}