/*Motion Styles*/
@keyframes nav--down {
    0% {
        top: -64px;
    }

    100% {
        top: 0px;
    }
}

@keyframes pandown{
    0% {
        top: -100%;
    }

    100% {
        top: 0%;
    }
}

@keyframes growtop{
    0% {
        height:100%;
    }

    100% {
        height: 0%;
    }
}


@keyframes slidedown {
    0% {
        top: -120%;
    }

    100% {
        top: 0%;
    }
}

@keyframes slideup {
    0% {
        top: 0%;
    }

    100% {
        top: -120%;
    }
}

@keyframes side--animate {
    0% {
        left: -64px;
    }

    100% {
        left: 32px;
    }
}

@keyframes right--side--animate {
    0% {
        right: -64px;
    }

    100% {
        right: 32px;
    }
}

@keyframes clicked {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

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

@keyframes fadein {
    from {
        opacity: 0%;
        -webkit-opacity: 0%;
        -moz-opacity: 0%;
    }

    to {
        opacity: 100%;
        -webkit-opacity: 100%;
        -moz-opacity: 100%;
    }
}

@keyframes fadeout {
    from {
        opacity: 100%;
    }

    to {
        opacity: 0%;
    }
}

@keyframes bounce {
    0% {
        left: 2px;
    }

    50% {
        left: 10px;
    }

    100% {
        left: 2px;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

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