

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.work{padding: 2em 0;}
		.our-work{
		    padding: 30px 0 30px;
		    background: #E9E9E9;
		    text-align: center;
		    overflow: hidden;
		    position: relative;
		}
		.our-work:hover{
			background: #ee4266;
		}
		.our-work:hover .title,.our-work:hover .post{
			color:#EEE;
		}
		.our-work .pic{
		    display: inline-block;
		    width: 100%;
		    height: 100%;
		    margin-bottom: 50px;
		    z-index: 1;
		    position: relative;
		}
		.our-work .pic:before{
		    content: "";
		    width: 100%;
		    height: 0;
		    border-radius: 50%;
		    background: #ee4266;
		    position: absolute;
		    bottom: 135%;
		    right: 0;
		    left: 0;
		    opacity: 0.2;
		    transform: scale(3);
		    transition: all 0.3s linear 0s;
		}
		.our-work:hover .pic:before{ height: 100%; }
		.our-work .pic:after{
		    content: "";
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    background: #ee4266;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: -1;
		}
		.our-work .pic img{
		    width: 100%;
		    height: auto;
		    border-radius: 50%;
		    transform: scale(1);
		    transition: all 0.9s ease 0s;
		}
		.our-work:hover .pic img{
		    box-shadow: 0 0 0 14px #f7f5ec;
		    transform: scale(0.7);
		}
		.our-work .work-content{ margin-bottom: 30px; padding:0 5px;}
		.our-work .title{
		    font-size: 16px;
		    font-weight: 700;
		    color: #4e5052;
		    letter-spacing: 1px;
			text-transform: capitalize;
		    margin-bottom: 5px;
		}
		.our-work .post{
		    display: block;
		    font-size: 12px;
		    color: #4e5052;
			text-transform:capitalize;
		}
		.our-work .social{
		    width: 100%;
		    padding: 0;
		    margin: 0;
		    background: #eb1768;
		    position: absolute;
		    bottom: -100px;
		    left: 0;
		    transition: all 0.5s ease 0s;
		}
		.our-work:hover .social{ bottom: 0; }
		.our-work .social li{ display: inline-block; }
		.our-work .social li a{
		    display: block;
		    padding: 10px;
		    font-size: 17px;
		    color: #fff;
		    transition: all 0.3s ease 0s;
		}
		.our-work .social li a:hover{
		    color: #eb1768;
		    background: #f7f5ec;
		}
		@media only screen and (max-width: 990px){
		    .our-work{ margin-bottom: 30px; }
		}