/*Scale and opacity - fade in like effect*/
ul.gallery-list li.scale-fade,
.scale-fade {
    -webkit-animation: scale-in 0.375s ease-in 1;
    animation: scale-in 0.375s ease-in 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes scale-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scale-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/*fade in*/
.fade-in {
    -webkit-animation: scale-in 0.5s ease-in 1;
    animation: scale-in 0.5s ease-in 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

.fade-in-fast {
    -webkit-animation: scale-in 0.2s ease-in 1;
    animation: scale-in 0.2s ease-in 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes scale-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scale-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slide-left-in {
    -webkit-animation: slide-left-in 0.3s ease-out 1;
    animation: slide-left-in 0.3s ease-out 1;
    animation-fill-mode: forwards;
    left: 100%;
    opacity: 0;
}

@keyframes slide-left-in {
    0% {
        opacity: 0;
        left: 100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@-webkit-keyframes slide-left-in {
    0% {
        opacity: 0;
        left: 100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

.slide-right-in {
    -webkit-animation: slide-right-in 0.3s ease-out 1;
    animation: slide-right-in 0.3s ease-out 1;
    animation-fill-mode: forwards;
    left: -100%;
    opacity: 0;
}

@keyframes slide-right-in {
    0% {
        opacity: 0;
        left: -100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@-webkit-keyframes slide-right-in {
    0% {
        opacity: 0;
        left: -100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}


.slide-down {
    -webkit-animation: slide-down 0.3s ease-in 1;
    animation: slide-downn 0.3s ease-in 1;
    animation-fill-mode: forwards;
    top: -100%;
    opacity: 0;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        top: -100%;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        top: -100%;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

.pop {
    -webkit-animation: pop 0.2s ease-in 1;
    animation: pop 0.2s ease-in 1;
    animation-fill-mode: forwards;
    transform: scale(0);
    opacity: 0;
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

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

@-webkit-keyframes pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

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