.flex { 

	display: flex;
	flex-wrap:wrap; 
	width: 100%; 
	flex-direction:row;
	justify-content: space-around; 
	margin-bottom:30px;
	margin-right:30px;
	margin-top:50px;
	

}

.flex h4 { 
	margin-top:20%;
    float: none;
    vertical-align: center;
	text-transform:auto;
	
}




.flex > article {
	    
	margin: 10px 20px 20px 10px;
	cursor: pointer; 
	align-items: center;
	
	justify-content: center;
	height: 180px; 
	width: 250px;
	border-radius: 20%;
	box-shadow: 5px 10px #6cc091;
	transition: all 0.5s ease-in-out 0s;
	text-align: center;
	background-color: #F2F2F2;
}

 .content{
	
	 position:relative;
  }
  .content .content-overlay {
	  border-radius: 20%;
   background: rgba(0,0,0,0.7);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    margin:0;
    padding:0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }
  
  .content:hover .content-overlay{
    opacity: 1;
  }
  .content-details {
	 
	position: absolute;
    text-align: center;
    padding: 0 1rem;
    width: 100%;
    top: 40%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
	  
  }
  
  .content:hover .content-details{
   top: 60%;
    left: 50%;
    opacity: 1;
  }
.fadeIn-bottom{
    top: 80%;

  }
.content-details p{
	
    color: #F4FAFF;
    font-size: 1rem;
    font-weight: 400;
  }