.urun{
	float: left;
    padding:2vw;
	width:20%;
}

.urunresim{width:33%;}

#urun{
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

#urun h3{color:#00a3df;font-size:1.2vw;text-align:center;}

#urun:hover{
		-webkit-transform: scale(1.4);
		   -moz-transform: scale(1.4);
		     -o-transform: scale(1.4);
		    -ms-transform: scale(1.4);
		        transform: scale(1.4);
}

#urun:hover:before{
  position:absolute;
  content:"";
  box-shadow:0 10px 10px 20px #aaa;
  top:80px;right:50px;bottom:80px;
  width:0;
  z-index:-1;
}

figure {
	margin: 0;
	padding: 0;
	height: auto;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,73,100,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}


@media screen and (max-width: 600px) {
	.urun{width:50%;}
	#urun h3{font-size:3vw;}
	#urun:hover{
		-webkit-transform: scale(1.1);
		   -moz-transform: scale(1.1);
		     -o-transform: scale(1.1);
		    -ms-transform: scale(1.1);
		        transform: scale(1.1);
	}
	.urunresim{width:100%;}
	h1{font-size:4vw}
}