#main-contet{
		max-width: 1200px;
		position: relative;
		margin:auto;
		overflow: hidden;
		text-align: left;
		margin-top: 10px;
	}
	

	#main-contet .main-contet{
		width: 274px;
		height: 340px;
		position: relative;
		overflow: hidden;
		display: inline-block;
		margin: 10px;
		border-radius: 10px;
		background-size: 100% 100%;
		cursor: pointer;
		background-size: cover;
     	background-position: center center;
     	box-shadow: 0px 0px 5px rgb(0 0 0 / 80%);
		
	}
	#main-contet .main-contet  h5{
		width: 274px;
		height: 62px;
		background-color: rgba(0,0,0,0.7);
		position: absolute;
		bottom: 0px;
		color: #fff;
		font-size: 17px;
		text-align: center;
		line-height: 60px;
		-webkit-transition: all 0.8s ease;
	 -moz-transition: all 0.8s ease;
	 -o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	font-family: "BPG Arial Caps", sans-serif;
	font-weight: inherit;
	}
	
	#main-contet .main-contet .main-contet-animation{
		position: absolute;
		width: 200px;
		height: 216px;
		left: 13%;
		border-radius: 50%;
		top: -150px;
		height: 150px;
		background-color: rgba(32,27,49,0.3);
		-webkit-transition: all 0.8s ease;
	 -moz-transition: all 0.8s ease;
	 -o-transition: all 0.8s ease;
	transition: all 0.8s ease;
		
	}
	#main-contet .main-contet:hover .main-contet-animation{
	    width: 500px;
		height: 276px;
		left: -130px;
		top: 0;
		border-radius: 0;
	}
	@media only screen and (max-width: 1200px) {

	#main-contet{
  text-align: center;
    
}
}
@media only screen and (max-width: 620px) {
#main-contet{
  margin-top: -70px;
    
}
	#main-contet .main-contet{
  width: 300px; 
}
#main-contet .main-contet  h5{
	width: 300px !important; 
}
}