.Collage{

    /*This is where you set the padding you want between the images*/
    padding:10px;

}

.Collage img{
    margin:0;
    padding:0;
    display:inline-block;
    vertical-align:bottom;
    opacity:1;

    /*This is where you set the border you want for the image*/
    border:0px solid #FFF;
}


.Caption{
    font-size:14px;
    font-weight:bold;
    font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 15px;
}
.Caption_Content{
    /* padding:10px; */
    color: #FF0000;
    padding:5px;
}

.Caption_Content p{
    /* padding:10px; */
    color: #FFFFFF;
    padding:0px;
	margin: 5px 0px;
}

/* In this example, this is the main item being resized */
.Image_Wrapper{
    /* to get the fade in effect, set opacity to 0 on the first element within the gallery area */
    opacity:0;
    -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/*

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: .4s;
    -moz-animation-duration:    .4s;
    animation-duration:         .4s;
}
.effect-duration-2{
    -webkit-animation-duration: .5s;
    -moz-animation-duration:    .5s;
    animation-duration:         .5s;
}
.effect-duration-3{
    -webkit-animation-duration: .6s;
    -moz-animation-duration:    .6s;
    animation-duration:         .6s;
}
.effect-duration-4{
    -webkit-animation-duration: .7s;
    -moz-animation-duration:    .7s;
    animation-duration:         .7s;
}
.effect-duration-5{
    -webkit-animation-duration: .8s;
    -moz-animation-duration:    .8s;
    animation-duration:         .8s;
}
.effect-duration-6{
    -webkit-animation-duration: .9s;
    -moz-animation-duration:    .9s;
    animation-duration:         .9s;
}
.effect-duration-7{
    -webkit-animation-duration: .95s;
    -moz-animation-duration:    .95s;
    animation-duration:         .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;
}