/* Hover effect */

	*, *::before, *::after{
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}	

    figure{

		background-size:cover;
		background-position:center;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: top;
		height:200px;


	}

	figcaption{
		position: absolute;
		left: 0; right: 0;
		top: 0; bottom: 0;
		text-align: center;
		font-weight: bold;
		width: 100%;
		height: 100%;
		display: table;
	}

	figcaption div{
		vertical-align: middle;
		opacity: 0;
		color: #fff;
		text-transform: uppercase;
	}

	figcaption div:after{
		position: absolute;
		content: "";
		left: 0; right: 0;
		bottom: 40%;
		text-align: center;
		margin: auto;
		width: 0%;
		height: 2px;
		background: #fff;
	}

	figure img{
		-webkit-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}



	figure:
figcaption{


		background: rgba(0,0,0,0.5);
text-align:center;font-weight:bold;

	}

	figure:hover{
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
		filter: gray; /* IE6-9 */ 
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
	}		

	figcaption:hover div{
		opacity: 1;
		top: 0;
	}

	figcaption:hover div:after{
		width: 50%;
	}

	figure:hover img{
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */