/*custom css*/

.photo-gallery-wp .col-md-3,
.photo-gallery-wp .col-md-4,
.photo-gallery-wp .col-md-6
{
    padding: 0px !important;
    /*padding-right: 0px !important;*/
}


/*.col-md-3,
.col-md-4,
.col-md-6{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

div.col-md-3,
div.col-md-4,
div.col-md-6{
    padding: 0px;
}*/

/*.entry-content h2{
    margin:10px 0px !important;
}*/

/*--------layout-2--------*/
.layout-2{
    font-family: 'Kanit', sans-serif;
    text-align: center;
    /*border: 10px solid #fff;*/
    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: linear-gradient(to left top,#11998e,#38ef7d);*/
    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-----*/

.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{
    /*background-color: #05c46b;*/
    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---------*/

.layout-4 .project {
    position: relative;
    overflow: hidden;
    /*margin-bottom: 30px;*/
}

.layout-4 .project img {
    width: 100%;
}

.layout-4 .project .dimmer {
    height: 100%;
    width: 100%;
    /*background-color: rgba(0, 0, 0, .6);*/
    /*opacity: 0.6;*/
    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);
    /*background-color:#ffffff;*/
    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;
    /*font-size: 18px;*/
    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------*/
/*.layout-7 .layout-content{
	padding-bottom: 1.5rem !important;
}
*/
.layout-5{
    overflow: hidden;
}
.layout-5 .layout-content{
	margin-top: 0px !important;
	/*padding-top: 12px;
	padding-bottom:  12px !important;*/
	/*padding:12px 10px !important;*/
}
/*.layout-7 .layout-content p.description{
	padding-bottom:  10px !important;
}*/
.layout-5 .layout-content p{
	margin:0px !important;
    padding-bottom: 0px !important;
}

.layout-5:hover .layout-image{
	/*-webkit-clip-path: inset(15px);*/
    clip-path: inset(4px);
    transform: scale(1.04); 
    transition: all 1.4s linear;
}

.layout-5 .layout-content a{
	text-decoration: none;
}


.layout-5 {
   /* box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.1); */
}

/*---------layout-6---------*/
/*.layout-6 .layout-content{
	padding-bottom: 1.5rem !important;
}
*/
.layout-6{
    overflow: hidden;
}

.layout-6 .layout-content{
	background-color: #a1d1e2;
}

.layout-6 .layout-content{
	margin-top: 0px !important;
	/*padding-top: 15px;
	padding-bottom:  15px !important;*/
}

/*.layout-8 .layout-content p.description{
	padding-bottom:  12px !important;
}*/
.layout-6 .layout-content p{
	margin:0px !important;
    padding-bottom: 0px !important;
}

.layout-6:hover .layout-image img{
	/*-webkit-clip-path: inset(15px);*/
    clip-path: inset(4px);
    transform: scale(1.04); 
    transition: all 1.4s linear;
}

.layout-6 .layout-content a{
	text-decoration: none;
}


.layout-6 {
   /* box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.1); */
}