img {
max-width: 100%;
height: auto;
}
.clear {
clear: both;
}
.showcase-container{
max-width:1140px;
margin: 0 auto;
} .qc-grid-showcase-item {
width: 23%;
height: 300px;
overflow: hidden;
display: inline-block;
float: left;
margin: 1%;
box-sizing: border-box;
position: relative;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.qc-grid-showcase-img {
overflow: hidden;
background-color: #F5F5F5;
position: absolute;
}
.qc-grid-showcase-item img {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; display: block;
-moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);
}
.qc-grid-showcase-item:hover img {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1);
}
.qc-grid-showcase-info {
position: absolute;
bottom: 0;
text-align: center;
color: #2a2a2a;
width: 100%;
box-sizing: border-box;
-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
.qc-grid-showcase-item:hover .qc-grid-showcase-info {
font-size: 150%;
color: #6a6a6a;
background-color: rgba(0, 0, 0, 0.05);
}
.qc-grid-showcase-info a {
text-decoration: none;
color: inherit;
}
.qc-grid-showcase-info h3 {
margin: 0;
padding: 10px;
}
.qc-grid-showcase-info-inner {
padding: 5px 20px;
}
@media screen and  (max-width: 800px) {
.qc-grid-showcase-item {
width: 48%;
margin: 10px 1%;
max-height: 300px;
}
}
@media screen and  (max-width: 500px) {
.qc-grid-showcase-item {
width: 100%;
max-height: 250px;
}
}