/** moving-effect animation **/
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}
@keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}

.moving-effect {
    background-color: #486B85;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    animation: 2s linear 0s normal none infinite;
    animation-name:  progress-bar-stripes;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    transition: all 0.6s ease 0s;
    background-size: 40px 40px;
    color: #ffffff;
}
.moving-effect:hover {
    background-color: #587F99 !important;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    color: #ffffff;
}

/** transition **/
.transition-fast {
    transition: all 0.3s ease;
}
.transition-medium {
    transition: all 0.6s ease;
}
.transition-slow {
    transition: all 0.9s ease;
}