.wrap {
		    max-width: 1000px;
		    margin: 50px auto 90px;
		}
		.gallery img {
			-webkit-filter: brightness(50%);
			-o-filter: brightness(50%);
			filter: brightness(50%);
		}

		.flip-box {
		  perspective: 1000px; /* Remove this if you don't want the 3D effect */
		}

		.flip-box:hover .flip-box-inner img{
		  
		  	-webkit-filter: brightness(90%);
			-o-filter: brightness(90%);
			filter: brightness(90%);
		}

		.flip-box-inner {
		  position: relative;
		  width: 100%;
		  height: 100%;
		  text-align: center;
		  transition: transform 0.8s;
		  transform-style: preserve-3d;
		}

		/* Do an horizontal flip when you move the mouse over the flip box container */
		.flip-box:hover .flip-box-inner {
		  transform: rotateY(180deg);
		}

		.flip-box-back {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  backface-visibility: hidden;
		}

		/* Style the front side (fallback if image is missing) */
		.flip-box-front {
		  background-color: #bbb;
		  color: black;
		}

		/* Style the back side */
		.flip-box-back {
		  top: 0;
		  color: white;
		  transform: rotateY(180deg);
		}
		.fonticon {
		    font-size: 40px;
		    margin: 35%;   
		    text-shadow: 0px 2px 10px #000;
		    cursor: pointer;
		    color: #ddd;
		}


		.fonticon:hover {
			color: #fff;
		} 


		@media (min-width: 1200px){
			.col-5-per-row{
				-webkit-box-flex: 0;
				-webkit-flex: 0 0 20%;
				-ms-flex: 0 0 20%;
				flex: 0 0 20%;
				max-width: 20%;
			}
		
		}

		@media (max-width: 575px){
 
			.fonticon {
			    font-size: 70px;
			}

		}