/*** 
=============================================
   Gallery Area Css
=============================================
***/
.gallery-area{
    position: relative;
    display: block;
    background: #f3f3f4;
}
.gallery-area .container-fullwidth{
    position: relative;
    display: block;
    width: 100%;
    padding: 0 55px;
}
.gallery-box{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;    
}
.single-gallery{
    position: relative;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;    
}
.single-gallery.margintop50{
    margin-top: 50px;
}

.single-gallery-item{
    position: relative;
    display: block;
}
.single-gallery-item .img-holder{
    position: relative;
    display: block;
    overflow: hidden;
}
.single-gallery-item .img-holder img{
    width: 100%;
    transform: scale(1.0);
}
.single-gallery-item:hover .img-holder img{
    transform:scale(1.2) rotate(1deg);	    
}
.single-gallery-item .img-holder:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    opacity: 0;
    background: #0f0b0b;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
    transition-duration: .5s;
    transition-property: all;
    opacity: 1;
    transform-origin: top;
    transform-style: preserve-3d;
    transform: scaleY(0);
    z-index: 1;
}
.single-gallery-item:hover .img-holder:before{
    opacity: 0.80;
    transform: scaleY(1.0);    
}

.single-gallery-item .img-holder:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    opacity: 1;
    background: #0f0b0b;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
    transition-duration: .5s;
    transition-property: all;
    opacity: 1;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: scaleY(0);
    z-index: 1;
}
.single-gallery-item:hover .img-holder:after{
    opacity: 0.80;
    transform: scaleY(1.0);    
}
.single-gallery-item .img-holder .overlay-button{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: scale(0);
    transition: all 200ms ease 100ms;
    z-index: 10;
}
.single-gallery-item:hover .img-holder .overlay-button{
    opacity: 1;
    transform: scale(1.0);
    transition: all 500ms ease 800ms;    
}
.single-gallery-item .img-holder .overlay-button a{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    color: #fddb05;
    font-size: 80px;
    line-height: 80px;
    text-align: center;
}




/*** 
=============================================
   Gallery Page One Css
=============================================
***/
.gallery-page-one{
    position: relative;
    display: block;
    background: #ffffff;
    padding: 120px 0 120px;
}
.gallery-page-one .single-gallery {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 30px;
    padding: 0;
}
.gallery-page-one .styled-pagination {
    padding-top: 40px;
}