.photo-gallery-wp .col-md-3,
.photo-gallery-wp .col-md-4,
.photo-gallery-wp .col-md-6
{
padding: 0px !important; }   .layout-2{
font-family: 'Kanit', sans-serif;
text-align: center; box-shadow: 1px 1px 2px #e6e6e6;
overflow: hidden;
position: relative;
}
.layout-2:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
.layout-2:before{
content: ""; background: var(--my-color-var) !important;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: all 0.4s linear;
}
.layout-2:hover:before{ opacity: 1; }
.layout-2 img{
width: 100%;
height: auto;
transition: all 0.4s linear;
}
.layout-2:hover img{
opacity: 0;
transform: scale(3);
}
.layout-2 .layout-content{
color: #fff;
width: 100%;
transform: translateY(-50%) scale(0);
position: absolute;
top: 50%;
left: 0;
transition: all 0.4s linear;
}
.layout-2:hover .layout-content{ transform: translateY(-50%) scale(1); }
.layout-2 .title{
font-size: 25px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.layout-2 .post{
font-size: 16px;
text-transform: capitalize;
}
.layout-2 .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
right: 8px;
bottom: 10px;
}
.layout-2 .icon span{
display: inline-block;
margin: 0 1px;
opacity: 0;
transform: scale(1.3);
transition: all 0.3s ease 0.4s;
}
.layout-2:hover .icon span{
opacity: 1;
transform: scale(1);
}
.layout-2:hover .icon span:nth-child(2){ transition: all 0.3s ease 0.2s; }
.layout-2 .icon span a{
color: #11998e;
background: #fff;
font-size: 16px;
line-height: 33px;
height: 33px;
width: 33px;
border-radius: 50%;
display: block;
transition: all 0.5s ease;
}
.layout-2 .icon span  a:hover{
color: #fff;
background-color: #11998e;
box-shadow: 0 0 5px #000;
}
@media only screen and (max-width:990px){
.layout-2 { margin: 0 0 30px; }
} .layout-3{
font-family: 'Merriweather Sans', sans-serif;
text-align: center;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.layout-3:hover{ box-shadow: 0 0 0 4px #fff, 0 0 15px #333; }
.layout-3:before{
content: "";
background: rgba(0,0,0,0.7);
width: 100%;
height: calc(100% - 60px);
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: all 0.5s ease;
}
.layout-3:hover:before{ opacity: 1; }
.layout-3 img{
width: 100%;
height: auto;
transition: all 0.5s ease;
}
.layout-3:hover img{ transform: translateY(-60px); }
.layout-3 .layout-content{
color: #fff;
width: 65%;
opacity: 0;
filter: blur(10px);
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 40%;
left: 50%;
z-index: 1;
transition: all 0.3s ease 0.1s;
}
.layout-3:hover .layout-content{
opacity: 1;
filter: blur(0);
}
.layout-3 .title{
font-size: 21px;
font-weight: 700;
letter-spacing: 0px;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.layout-3 .post{
font-size: 15px;
text-transform: capitalize;
font-style: italic;
}
.layout-3 .icon{ width: 100%;
padding: 20px 0;
margin: 0;
list-style: none;
opacity: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
transition: all 0.4s ease;
}
.layout-3:hover .icon{ opacity: 1; }
.layout-3 .icon span{
display: inline-block;
margin: 0 5px;
}
.layout-3 .icon span a{
color: #fff;
background: #222;
font-size: 15px;
line-height: 35px;
height: 35px;
width: 35px;
display: block;
transition: all 0.4s ease;
}
.layout-3 .icon span  a:hover{
color: #222;
background: #fff;
box-shadow: 0 0 5px #333 inset;
}
@media only screen and (max-width:990px){
.layout-3 { margin: 0 0 30px; }
} .layout-4 .project {
position: relative;
overflow: hidden; }
.layout-4 .project img {
width: 100%;
}
.layout-4 .project .dimmer {
height: 100%;
width: 100%;  position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: .3s all linear;
-o-transition: .3s all linear;
transition: .3s all linear;
}
.layout-4 .project:hover .dimmer {
opacity: 1;
}
.layout-4 .project .overlay {
min-height: 100px;
padding: 23px 50px;
background-color: rgba(255, 255, 255, .8); top: 50%;
left: 0;
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
position: absolute;
width: 100%;
visibility: hidden;
opacity: 0;
-webkit-transition: .3s all linear;
-o-transition: .3s all linear;
transition: .3s all linear;
text-align: center;
}
.layout-4 .project:hover .overlay {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 1;
visibility: visible;
}
.layout-4 .project .overlay h4 {
color: #000; line-height: 28px;
width: 100%;
max-width: 188px;
margin: 0 auto;
position: absolute;
top: 33%;
left: 50%;
transform: translate(-50%, -50%);
}
.layout-4 .project .overlay p{
line-height: 16px;
width: 100%;
max-width: 194px;
margin: 0 auto;
position: absolute;
top: 66%;
left: 50%;
transform: translate(-50%, -50%);
}
.layout-4 .project .overlay a {
text-decoration: none;
position: absolute;
}
.layout-4 .project .overlay a i {
color: #fff;
background-color: #5575de;
padding-top: 10px;
height: 42px;
width: 42px;
border-radius: 50%;
-webkit-transition: .3s all linear .4s;
-o-transition: .3s all linear .4s;
transition: .3s all linear .4s;
font-size: 22px;
}
.layout-4 .project .overlay a.link i {
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
.layout-4 .project .overlay a.popup-box i {
-webkit-transform: translatex(30px);
-ms-transform: translatex(30px);
transform: translatex(30px);
}
.layout-4 .project .overlay a.popup-box {
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.layout-4 .project .overlay a.popup-box:before {
content: "";
width: 0px;
height: 2px;
right: 30px;
background-color: #5575de;
position: absolute;
right: -100%;
top: 50%;
-webkit-transition: .3s all linear .4s;
-o-transition: .3s all linear .4s;
transition: .3s all linear .4s;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.layout-4 .project .overlay a.link {
left: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.layout-4 .project .overlay a.link:before {
content: "";
width: 0px;
height: 2px;
left: 30px;
background-color: #5575de;
position: absolute;
left: -100%;
top: 50%;
-webkit-transition: .3s all linear .4s;
-o-transition: .3s all linear .4s;
transition: .3s all linear .4s;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.layout-4 .project:hover a.link i {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.layout-4 .project:hover a.popup-box i {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.layout-4 .project:hover a.link:before,
.layout-4 .project:hover a.popup-box:before {
width: 30px;
}  .layout-5{
overflow: hidden;
}
.layout-5 .layout-content{
margin-top: 0px !important;  } .layout-5 .layout-content p{
margin:0px !important;
padding-bottom: 0px !important;
}
.layout-5:hover .layout-image{ clip-path: inset(4px);
transform: scale(1.04); 
transition: all 1.4s linear;
}
.layout-5 .layout-content a{
text-decoration: none;
}
.layout-5 { }  .layout-6{
overflow: hidden;
}
.layout-6 .layout-content{
background-color: #a1d1e2;
}
.layout-6 .layout-content{
margin-top: 0px !important; } .layout-6 .layout-content p{
margin:0px !important;
padding-bottom: 0px !important;
}
.layout-6:hover .layout-image img{ clip-path: inset(4px);
transform: scale(1.04); 
transition: all 1.4s linear;
}
.layout-6 .layout-content a{
text-decoration: none;
}
.layout-6 { }