.vc-online-desginer {

	ul {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		flex-wrap: wrap;
		margin-left: -15px;
		margin-right: -15px;
		li {
			position: relative;
		    /*flex: 0 0 25%;
		    max-width: 25%;*/
			margin-bottom: 30px;

		    img {
		    	display: block;
		    	width: 100%;
		    }
			.vc-online-desginer-detail {
			    bottom: 0;
			    left: 0;
			    position: absolute;
			    right: 0;
			    text-align: center;
			    top: 0;

				&:before {
				    background-color: rgba(48, 48, 48, 0.5);
				    bottom: 0;
				    content: "";
				    filter: alpha(opacity=0);
				    left: 0;
				    opacity: 0;
				    position: absolute;
				    right: 0;
				    top: 0;
				    -webkit-transition: all 0.2s linear;
				    transition: all 0.2s linear;
				}

				> div {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					text-align: center;
				    width: 100%;
				    z-index: 4;

				    a{
				    	text-decoration: none;
					    border: 2px solid transparent;
					    border-radius: 5px;
					    display: inline-block;
					    filter: alpha(opacity=0);
					    font-size: 20px;
					    line-height: 46px;
					    opacity: 0;
					    position: relative;
					    text-align: center;
					    top: -100px;
					    -moz-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
					    -ms-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
					    -o-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
					    -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
					    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
					    width: 100%;
					    z-index: 5;

					    h4 {
					    	color: #fff;
					    	margin-bottom: 13px;
					    	font-weight: 500;
					    }

					    h6{
					    	display: inline-block;
					    	margin-bottom: 0;
					    	background-color: #4285f4;
					    	color: #fff;
					    	border-radius: 5px;
					    	height: 35px;
					    	line-height: 35px;
    						padding: 0 25px;
    						&:hover {
    							opacity: 0.90;
    						}
					    }
				    }
				}
			}

			&:hover {
				.vc-online-desginer-detail {
					&:before {
						opacity: 1;
					}

					div {
						filter: alpha(opacity=100);
					    opacity: 1;

					    a{
						    filter: alpha(opacity=100);
						    opacity: 1;
						    top: 0;
					    }
					}
				}
			}
		}
	}
}