.demo-gallery {
margin-left:4vw;
margin-top:1vw;
}
.demo-gallery > ul {
margin-bottom:0;
}
.demo-gallery > ul > li {
float: left;
width:29.3vw;
margin-right:1.5vw;
margin-bottom:0;
list-style:none;
}
.demo-gallery > ul > li > a > img {
width:100%!important;
}

.demo-gallery > ul > li a {
border: 0 solid #FFF;
border-radius: 0;
display: block;
overflow: hidden;
position: relative;
float: left;
padding-bottom: 0;
margin-bottom:1.5vw;
width:100%;
}
.demo-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%!important;
background-color:#FFF;
}
.demo-gallery > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
height: 100%;
width: 100%!important;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
width:5%!important;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
left: 50%;
margin-left:0;
margin-top:0;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}


@media(max-width : 1024px) {
.demo-gallery {
margin-left:1vw;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:32.3333%;
}
}			
@media(max-width : 800px) {
.demo-gallery {
margin-left:1vw;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:32.3333%;
}
}				
@media(max-width : 768px) {
.demo-gallery {
margin-left:1vw;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:32.3333%;
}
}	
@media only screen and (min-width : 481px) and (max-width : 767px) {
.demo-gallery {
margin-left:1vw;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:32.3333%;
}
.demo-gallery > ul > li p {
font-size: 1.1em;
color: #000;
font-weight: 600;
padding-top: 2%;
margin-top: 2%;
text-align: center;
}
}	
@media(max-width : 480px) {
.demo-gallery {
margin-left:0px;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:49%;
}
.demo-gallery > ul > li p {
font-size: 1em;
color: #000;
font-weight: 600;
padding-top: 2%;
margin-top: 2%;
text-align: center;
}
}		
@media only screen and (min-width : 320px) and (max-width : 479px) {
.demo-gallery {
margin-left:0px;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:0px;
margin-right:1%;
width:49%;
}
}