.fadeInS {
    -webkit-animation: fadein .3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein .3s; /* Firefox < 16 */
        -ms-animation: fadein .3s; /* Internet Explorer */
         -o-animation: fadein .3s; /* Opera < 12.1 */
            animation: fadein .3s;
}
.fadeIn {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}
.fadeInL {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.fadeOut {
    -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 1s; /* Firefox < 16 */
        -ms-animation: fadeout 1s; /* Internet Explorer */
         -o-animation: fadeout 1s; /* Opera < 12.1 */
            animation: fadeout 1s;
}
.fadeOutS {
    -webkit-animation: fadeout .3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout .3s; /* Firefox < 16 */
        -ms-animation: fadeout .3s; /* Internet Explorer */
         -o-animation: fadeout .3s; /* Opera < 12.1 */
            animation: fadeout .3s;
}
.fadeOutL {
    -webkit-animation: fadeout 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 2s; /* Firefox < 16 */
        -ms-animation: fadeout 2s; /* Internet Explorer */
         -o-animation: fadeout 2s; /* Opera < 12.1 */
            animation: fadeout 2s;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@-webkit-keyframes HSFlipIn {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes HSFlipIn {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@-webkit-keyframes HSFlipOut {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes HSFlipOut {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}
@-webkit-keyframes HSTopRightM {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    25% {
        opacity: 0.95;
        -webkit-transform: translate(0.4px, -0.4px);
        transform: translate(0.4px, -0.4px);
        
    }
    50% {
        opacity: 0.9;
        -webkit-transform: translate(0.8px, -0.8px);
        transform: translate(0.8px, -0.8px);
        
        
    }
    75% {
        opacity: 0.85;
        -webkit-transform: translate(0.4px, -0.4px);
        transform: translate(0.4px, -0.4px);
    }
    100% {
        opacity: 0.8;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes HSTopLeftM {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    25% {
        opacity: 0.95;
        -webkit-transform: translate(-0.4px, -0.4px);
        transform: translate(-0.5px, -0.5px);
    }
    50% {
        opacity: 0.9;
        -webkit-transform: translate(-0.8px, -0.8px);
        transform: translate(-0.8px, -0.8px);
        
        
    }
    75% {
        opacity: 0.85;
        -webkit-transform: translate(-0.4px, -0.4px);
        transform: translate(-0.4px, -0.4px);
    }
    100% {
        opacity: 0.8;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes HSTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -2.5%);
        transform: translate(0, -2.5%)
    }
    50% {
        opacity: 1
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translate(-4%, 0);
        transform: translate(-4%, 0)
    }
}

@keyframes HSTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -2.5%);
        -ms-transform: translate(0, -2.5%);
        transform: translate(0, -2.5%)
    }
    50% {
        opacity: 1
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translate(-4%, 0);
        -ms-transform: translate(-4%, 0);
        transform: translate(-4%, 0)
    }
}

@-webkit-keyframes HSBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translate(-2.5%, -4%);
        transform: translate(-2.5%, -4%)
    }
}

@keyframes HSBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translate(-2.5%, -4%);
        -ms-transform: translate(-2.5%, -4%);
        transform: translate(-2.5%, -4%)
    }
}

@-webkit-keyframes HSBottomCenter {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    60% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translateY(-8%);
        transform: translateY(-8%)
    }
}

@keyframes HSBottomCenter {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    60% {
        opacity: 1
    }
    100% {
        opacity: 0.3;
        -webkit-transform: translateY(-8%);
        -ms-transform: translateY(-8%);
        transform: translateY(-8%)
    }
}