.Collage{

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

	}
	.Image_Wrapper  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:5px solid #FFF;
	}
	
	
	/* 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;
		position: relative;
		cursor:pointer;
	}
	
	.Image_Wrapper h2 { 
		position: absolute;
		top: 30px;
		left: 5px;
		margin-right:5px;
		color: #fff !important;
		background:#113766;
		margin:0;
		padding:5px 10px;
		
		font-size: 150%;
		font-weight: 300;
		letter-spacing:0.04em;
		-webkit-transition: all 200ms ease-in-out;
		-moz-transition: all 200ms ease-in-out;
		-ms-transition: all 200ms ease-in-out;
		-o-transition: all 200ms ease-in-out;
		transition: all 200ms ease-in-out;
	}

	.Image_Wrapper:hover h2{
		padding-left:20px;
		background:#00ADEF;
	}
	
	.Caption{
		font-size:14px;
		left: 5px;
		right: 5px;
		bottom: -200px;
	}
	.Caption_Content{
		/* padding:10px; */
		color:#000;
		padding:10px;
	}
	
	
    .flipper {
      width: 100%;
      height: 260px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    div.flip-container {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    div.flip-container.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    div.flip-container div.flipside {
      display: block;
      height: 100%;
      width: 100%;
      color: white;
      position: absolute;
      
    }

    div.flip-container .front {
      background: #022e5b;
	   padding:5px;
	  cursor: pointer;
	  -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    div.flip-container .back {
      background: #353535;
	  padding:5px;
	  
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
			   -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
	
	 div.flip-container.flipped .backface {
		 -moz-backface-visibility: visible;
           -o-backface-visibility: visible;
              backface-visibility: visible;
	 }
	 
	 div.flip-container.flipped .front {
		
	 }
	 
	 div.flip-container .back .insideFlipside {
		position: relative; 
	 }
	 
	 div.flip-container .back .insideFlipside h3 {
		 margin:0;
	 }
	 
	 div.flip-container .back .insideFlipside a.backbutton {
		position: absolute;
		top: 10px;
		right: 10px;
		color: #fff;
		font-size: 25px; 
	 }
	 div.flip-container .front .insideFlipside {
	 	display: table-cell;
		height: 250px;
		text-align: center;
		vertical-align: middle;
	 }
	 div.flip-container .front .insideFlipside h2 {
		margin: 0;
	 }