.project001 {
background: url("../images/scaling-design-ibm-thumb.png")  no-repeat center;
/*background-color: #f5f5f5;*/
}
.project002 {
background: url("../images/uxmaturity-thumb.png")  no-repeat center;
background-color: #f5f5f5;
}
.project003 {
background: url("../images/interns-thumb.png")  no-repeat center;
background-color: #f5f5f5;
}
.project004 {
background: url("../images/CMS.png")  no-repeat center;
background-color: #f5f5f5;
}
.project01 {
background: url("../images/hm-mismo.png")  no-repeat center;
background-color: #f5f5f5;
}
.project02 {
background: url("../images/hm-design-system.png")  no-repeat center;
background-color: #f5f5f5;
}
.project03 {
background: url("../images/hm-myira.png")  no-repeat center;
background-color: #f5f5f5;
}
.project04 {
background: url("../images/iqies.png")  no-repeat center;
background-color: #f5f5f5;
}
.project05 {
background: url("../images/hm-mapping.png")  no-repeat center;
background-color: #f5f5f5;
}
.project06 {
background: url("../images/hm-dhl.png")  no-repeat center;
background-color: #f5f5f5;
}
.project07 {
background: url("../images/ingham-mobile.png")  no-repeat center;
background-color: #f5f5f5;    }
.project08 {
background: url("../images/add-calendar-item.gif")  no-repeat center;
background-color: #f5f5f5;
}
.project09 {
background: url("../images/portfolio-mobile-scribl.gif")  no-repeat center;
background-color: #f5f5f5;
}
.project10 {
background: url("../images/mismo.jpg")  no-repeat center;
background-color:#f5f5f5;
}
.project11 {
background: url("../images/portfolio-motion-rocket.gif")  no-repeat center;
background-color: #f5f5f5;
}
.project12 {
background: url("../images/iceberg.gif")  no-repeat center;
background-color: #f5f5f5;
}
.project13 {
background: url("../images/hidribbble.gif")  no-repeat center;
background-color: #f5f5f5;
}
.project14 {
background: url("../images/wires.jpg")  no-repeat center;
background-color: #f5f5f5;
}
.project15 {
background: url("../images/portfolio-concept-split.jpg")  no-repeat center;
background-color: #f5f5f5;
}
.project16 {
background: url("../images/agadvantage-ui2.jpg")  no-repeat center;
background-color: #f5f5f5;
}
.project {
background-size: cover;
min-height: 400px;
/*border-radius: 20px;*/
position: relative;
margin-bottom: 25px;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
width: 100%;
min-height: 100%;
background: #f5f5f5;
margin: auto 0;
color: #fff;
}

.middle-color01{
	background: #a6e5db;
}
.middle-color02{
	background: #a6e7c9;
}
.middle-color03{
	background: #aa93a3;
}
.middle-color04{
	background: #fddce3;
}

.project:hover {
opacity: 1;
}

.project:hover .middle {
opacity: 1;
}

.middle-content {
position: absolute;
width: 100%;
color: #333;
font-size: 16px;
padding: 20px;
text-align: center;
top: 25%;
}
.middle-content h3 {      
color: #333;
}
.middle-content h2 {      
color: #333;
font-size: 36px;
}