@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes slidedown {
    from {
        top: -100%;
    }

    to {
        top: 0;
    }
}

@-webkit-keyframes slidedown {
    from {
        top: -100%;
    }

    to {
        top: 0;
    }
}

@keyframes line {
    0% {
        width: 35px;
        left: 0%;
    }

    50% {
        width: 100px;
        left: 25%;
    }

    100% {
        left: 88%;
        width: 35px;
    }
}

@-webkit-keyframes line {
    0% {
        width: 35px;
        left: 0%;
    }

    50% {
        width: 100px;
        left: 25%;
    }

    100% {
        left: 88%;
        width: 35px;
    }
}

@-webkit-keyframes blink {
    50% {
        opacity: 1;
    }
}

/*animated clock*/
@keyframes animatedClockSecRotate {
    0% {
        transform: rotate(0deg) translate(0, -2px);
    }

    100% {
        transform: rotate(360deg) translate(0, -2px);
    }
}

@-webkit-keyframes animatedClockSecRotate {
    0% {
        transform: rotate(0deg) translate(0, -2px);
    }

    100% {
        transform: rotate(360deg) translate(0, -2px);
    }
}


@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.slide-out-right {
    animation: slideOutRight 0.3s ease-out forwards;
}

.slide-out-left {
    animation: slideOutLeft 0.3s ease-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}