/** SWING */
@-webkit-keyframes swing
{
    15% {-webkit-transform: translateX(4px);transform: translateX(4px);}
    30% {-webkit-transform: translateX(-4px);transform: translateX(-4px);}
    50% {-webkit-transform: translateX(1px);transform: translateX(1px);}
    65% {-webkit-transform: translateX(-1px);transform: translateX(-1px);}
    80% {-webkit-transform: translateX(1px);transform: translateX(1px);}
    100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes swing
{
    15% {-webkit-transform: translateX(4px);transform: translateX(4px);}
    30% {-webkit-transform: translateX(-4px);transform: translateX(-4px);}
    50% {-webkit-transform: translateX(1px);transform: translateX(1px);}
    65% {-webkit-transform: translateX(-1px);transform: translateX(-1px);}
    80% {-webkit-transform: translateX(1px);transform: translateX(1px);}
    100% {-webkit-transform: translateX(0);transform: translateX(0);}
}

/** AWESOME TRACK PREVIEW ANIMATION **/
@keyframes awesomePreviewSnakeLR
{
    from {left : 0}
    to {left : 100%}
}
@-webkit-keyframes awesomePreviewSnakeLR
{
    from {left : 0}
    to {left : 100%}
}
@keyframes awesomePreviewSnakeRL
{
    from {left : 100%}
    to {left : 0}
}
@-webkit-keyframes awesomePreviewSnakeRL
{
    from {left : 100%}
    to {left : 0}
}
@keyframes awesomePreviewShowCover
{
    from {opacity : 0; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
    to {opacity : 1;-webkit-filter: grayscale(0);filter: grayscale(0);}
}
@-webkit-keyframes awesomePreviewShowCover
{
    from {opacity : 0; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
    to {opacity : 1;-webkit-filter: grayscale(0);filter: grayscale(0);}
}

/** FADE IN **/
@-webkit-keyframes fadein {
    0% {opacity : 0}
    50% {opacity : 0.5}
    100% {opacity : 1}
}
@keyframes fadein {
    0% {opacity : 0}
    50% {opacity : 0.5}
    100% {opacity : 1}
}


/** TOP **/
@-webkit-keyframes slideTop {
    0% {top : 0;}
    25% {top : -25%;}
    50% {top : -50%;}
    75% {top : -75%;}
    100% {top : -100%}
}
@keyframes fadein {
    0% {opacity : 0}
    50% {opacity : 0.5}
    100% {opacity : 1}
}

/** FADE OUT **/
@-webkit-keyframes fadeout {
    0% {opacity : 1}
    50% {opacity : 0.5}
    100% {opacity : 0; display : none; height : 0;}
}
@keyframes fadeout {
    0% {opacity : 1}
    50% {opacity : 0.5}
    100% {opacity : 0; display : none; height: 0;}
}


/** HALO BOOM EFFECT */
.anmt-light-boom div::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.anmt-light-boom div::before {
    -webkit-animation: circle .75s;
    animation: halo-boom .75s;
}

.anmt-light-boom-span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,83,13,1);
    border-radius: 5px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.anmt-light-boom-span::before {
    -webkit-animation: circle .75s;
    animation: halo-boom .75s;
}

@-webkit-keyframes halo-boom {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
@keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

/** TEXT GRADIENT */
.badge-genre-anmt .text{
    text-align: center;
    background: linear-gradient(to right, #97534C 20%, #ffaa7a 40%, #ffaa7a 60%, #97534C 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 1000ms ease infinite;
}
@keyframes shine {
    0%{background-position: 0 center;}
    50%{background-position: 100% center;}
    100%{background-position: 200% center;}
}

/** TEXT BLINK **/
@keyframes slow-blink{
    0%{opacity:0;}
    50%{opacity : 1;}
    100%{opacity:0;}
}