/*

A library of transitions for revealing the loaded images
(Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

*/
.effect-parent {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px
    }
/* EFFECT 1 */
.effect-1 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    -moz-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotatex(-180deg);
    -moz-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    -webkit-animation: fly ease-in-out forwards;
    -moz-animation: fly ease-in-out forwards;
    animation: fly ease-in-out forwards
    }
@-webkit-keyframes fly {
    100% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
        -webkit-transform-origin: 50% 50% 0;
        }
    }
@-moz-keyframes fly {
    100% {
        -moz-transform: rotateX(0deg);
        opacity: 1;
        -moz-transform-origin: 50% 50% 0;
        }
    }
@keyframes fly {
    100% {
        transform: rotateX(0deg);
        opacity: 1;
        transform-origin: 50% 50% 0;
        }
    }
/* EFFECT 2 */
.effect-2 {
    -webkit-transform: translatey(200px);
    -moz-transform: translatey(200px);
    transform: translatey(200px);
    -webkit-animation: moveUp ease forwards;
    -moz-animation: moveUp ease forwards;
    animation: moveUp ease forwards
    }
@-webkit-keyframes moveUp {
    to {
        -webkit-transform: translateY(0);
        opacity: 1;
        }
    }
@-moz-keyframes moveUp {
    to {
        -moz-transform: translateY(0);
        opacity: 1;
        }
    }
@keyframes moveUp {
    to {
        transform: translateY(0);
        opacity: 1;
        }
    }
/* EFFECT 3 */
.effect-3 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translatez(400px) translatey(300px) rotatex(-90deg);
    -moz-transform: translatez(400px) translatey(300px) rotatex(-90deg);
    transform: translatez(400px) translatey(300px) rotatex(-90deg);
    -webkit-animation: fallPerspective ease-in-out forwards;
    -moz-animation: fallPerspective ease-in-out forwards;
    animation: fallPerspective ease-in-out forwards
    }
@-webkit-keyframes fallPerspective {
    100% {
        -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg);
        opacity: 1;
        }
    }
@-moz-keyframes fallPerspective {
    100% {
        -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg);
        opacity: 1;
        }
    }
@keyframes fallPerspective {
    100% {
        transform: translateZ(0px) translateY(0px) rotateX(0deg);
        opacity: 1;
        }
    }
/* EFFECT 4 */
.effect-4 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotatex(-80deg);
    -moz-transform: rotatex(-80deg);
    transform: rotatex(-80deg);
    -webkit-animation: flip ease-in-out forwards;
    -moz-animation: flip ease-in-out forwards;
    animation: flip ease-in-out forwards
    }
@-webkit-keyframes flip {
    100% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
        }
    }
@-moz-keyframes flip {
    100% {
        -moz-transform: rotateX(0deg);
        opacity: 1;
        }
    }
@keyframes flip {
    100% {
        transform: rotateX(0deg);
        opacity: 1;
        }
    }
/* EFFECT 5 */
.effect-5 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    -webkit-animation: moveUp ease-in-out forwards;
    -moz-animation: moveUp ease-in-out forwards;
    animation: moveUp ease-in-out forwards
    }
/* EFFECT 6 */
.effect-6 {
    -webkit-transform: scale(0.638) translate(-179px);
    -moz-transform: scale(0.638) translate(-179px);
    transform: scale(0.638) translate(-179px);
    -webkit-animation: moveUp ease-in-out forwards;
    -moz-animation: moveUp ease-in-out forwards;
    animation: moveUp ease-in-out forwards
    }
/* Universal durations */
.effect-duration-1 {
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s
    }
.effect-duration-2 {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s
    }
.effect-duration-3 {
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    animation-duration: 0.6s
    }
.effect-duration-4 {
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s
    }
.effect-duration-5 {
    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    animation-duration: 0.8s
    }
.effect-duration-6 {
    -webkit-animation-duration: 0.9s;
    -moz-animation-duration: 0.9s;
    animation-duration: 0.9s
    }
.effect-duration-7 {
    -webkit-animation-duration: 0.95s;
    -moz-animation-duration: 0.95s;
    animation-duration: 0.95s
    }
.effect-duration-8 {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s
    }
.effect-duration-9 {
    -webkit-animation-duration: 1.05s;
    -moz-animation-duration: 1.05s;
    animation-duration: 1.05s
    }
.effect-duration-10 {
    -webkit-animation-duration: 1.1s;
    -moz-animation-duration: 1.1s;
    animation-duration: 1.1s
    }