body {
background-color:#FFF;
}
.demo-gallery {
margin-left:1%;
}
.demo-gallery p {
text-align:center;
font-size:13px;
font-weight:600;
color:#000;
line-height:1.4em;
padding-top:4%;
}
@media (min-width:1300px) and (max-width:1699px) {
.demo-gallery p {
font-size:18px;
line-height:40px;
}
}
@media (min-width:1700px) and (max-width:1920px) {
.demo-gallery p {
font-size:1.4em;
line-height:40px;
}
}

.demo-gallery > ul {
margin-bottom: 2em;
padding: 0;
}
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 23.7%;
height:auto;
list-style: none;
}
.demo-gallery > ul > li a {
border: 0px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
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%;
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);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(255, 255, 255, 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: -10px;
margin-top: -10px;
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);
}
.demo-gallery .justified-gallery > 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%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > 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 .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
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 .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
@media (min-width: 900px) and (max-width: 1023px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 32%;
height:auto;
}
.demo-gallery p {
text-align:center;
font-size:.975em;
color:#444;
line-height:1.4em;
padding-top:4%;
}
}
@media (min-width: 800px) and (max-width: 899px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 32%;
height:auto;
}
.demo-gallery p {
text-align:center;
font-size:.975em;
color:#444;
line-height:1.4em;
padding-top:4%;
}
}
@media (min-width: 768px) and (max-width: 799px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 49%;
height:auto;
}
.demo-gallery p {
text-align:center;
font-size:1em;
color:#000;
line-height:1.4em;
padding-top:4%;
}
}
@media (min-width: 640px) and (max-width: 736px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 49%;
height:auto;
}
.demo-gallery p {
text-align:center;
font-size:1em;
color:#444;
line-height:1.4em;
padding-top:4%;
}
}
@media (min-width: 480px) and (max-width: 600px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 49%;
height:auto;
}
.demo-gallery p {
text-align:center;
font-size:1em;
color:#444;
line-height:1.4em;
padding-top:4%;
}
}

@media (min-width: 320px) and (max-width: 479px) {
.demo-gallery > ul > li {
float: left;
margin-bottom:1%;
margin-left:1%;
width: 100%;
height:auto;
}
.demo-gallery p {
font-size:19px;
}
}