.tps-component-fade-in-step-0 {
    animation: tps-component-fade-in 1.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-component-fade-in-step-1 {
    animation: tps-component-fade-in 2.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-component-fade-in-step-2 {
    animation: tps-component-fade-in 3.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-component-fade-in-step-3 {
    animation: tps-component-fade-in 4.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-component-fade-in-step-4 {
    animation: tps-component-fade-in 5.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-component-fade-in-step-5 {
    animation: tps-component-fade-in 6.3s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}


.sCard {
    background-color: green;
    max-width: 150px;
    text-align: center;
    box-shadow: 0px 0px 8px #d120ff;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    float: left;
    margin: 10px;
}

    .sCard a {
        color: #fff;
        text-decoration: none
    }

    .sCard:hover {
        animation: sCard-hover 1s both;
        -moz-transition: all 0.5s;
        -o-transition: all 1s;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

@keyframes sCard-hover {


    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
        box-shadow: 0px 0px 35px red;
    }
}

.sCard img {
    width: 140px;
    height: 140px;
    opacity: 0;
    animation: sCard-img 1.5s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

@keyframes sCard-img {
    0% {
        opacity: 0.25;
    }

    25% {
        opacity: 0.50;
    }

    50% {
        opacity: 0.75;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}

.sCardHover {
    box-shadow: 5px 5px 8px #d120ff;
    color: #fff;
    cursor: pointer;
}

.tps-popup-out-1 {
    animation: tps-popup-out-1 1.5s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.tps-popup-in-1 {
    animation: tps-popup-in-1 1.5s both;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}


@keyframes tps-component-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tps-popup-out-1 {
    0% {
        margin-top: 50px;
    }

    50% {
        margin-top: -250px;
    }

    100% {
        margin-top: -2500px;
    }
}

@keyframes tps-popup-in-1 {
    0% {
        margin-top: -2500px;
    }

    50% {
        margin-top: 50px;
    }

    100% {
        margin-top: 0px;
    }
}

@keyframes nav-animation {
    100% {
        background-color: #ffffff;
        margin-top: 10px;
    }
}