.img-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.img-item img {
    width: 100%;
}

.img-cap {
    position: absolute;
    width: 100%;
    height: 100%;
    
    transition: all 350ms;
    bottom: 0;
    padding: 0 15px;
    text-align: center;
    opacity: 0;
    color: #fff;
}

.static {
    opacity: 1;
}

.img-details {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.img-details {
	background: rgba(0, 0, 0, 0.5);
}

.img-details h4 {
    margin-bottom: 5px;
	color: #fff;
}

.img-details p {
    margin-bottom: 10px;
	color: #fff;
}

.img-details .btn {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 0;
    transition: all 200ms;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
}

.img-details .btn:hover {
    background: #fff;
    color: #333;
}

.img-item:hover .img-cap {
    opacity:1;
}


.bottom-to-top {
    bottom: -100%;
}

.img-item:hover .bottom-to-top {
    bottom: 0;
    opacity: 1;
}


.right-to-left {
    right: -100%;
    transition: all 350ms;
    -webkit-transition: all 350ms;
    -moz-transition: all 350ms;
    -ms-transition: all 350ms;
    -o-transition: all 350ms;
}

.img-item:hover .right-to-left {
    right: 0;
    opacity: 1;
}


.left-to-right {
    left: -100%;
    transition: all 350ms;
    -webkit-transition: all 350ms;
    -moz-transition: all 350ms;
    -ms-transition: all 350ms;
    -o-transition: all 350ms;
}

.img-item:hover .left-to-right {
    left: 0;
    opacity: 1;
}


.top-to-bottom {
    top: -100%;
    transition: all 350ms;
    -webkit-transition: all 350ms;
    -moz-transition: all 350ms;
    -ms-transition: all 350ms;
    -o-transition: all 350ms;
}

.img-item:hover .top-to-bottom {
    top: 0;
    opacity: 1;
}



.img-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 200ms;
}


.border-radius-50:hover  {
    border-radius: 50%;
    transition: all 200ms;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
}


.border-radius-30-30:hover  {
    border-radius: 30% 0 30%;
    transition: all 200ms;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
}


.basic-border {
    border: 2px solid #000;
}

.basic-border:hover  {
    border: 10px solid #000;
    transition: all 100ms;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
}


.border-anim::before,
.border-anim::after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #000;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
}

.border-anim .img-wrap::before,
.border-anim .img-wrap::after{
    content: '';
    position: absolute;
    width: 2px;
    height: 0;
    background: #000;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
}

.border-anim:hover::before,
.border-anim:hover::after{
    width: 100%;
}

.border-anim:hover .img-wrap::before,
.border-anim:hover .img-wrap::after{
    height: 100%;
}


.border-anim-1::before, .border-anim-1::after{
    transition-delay: .2s;
    -webkit-transition-delay: .2s;
    -o-transition-delay: .2s;
    -ms-transition-delay: .2s;
    -moz-transition-delay: .2s;
}

.border-anim-1 .img-wrap::before,
.border-anim-1 .img-wrap::after{
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -moz-transition-delay: 0s;
}

.border-anim-1::before{
    right: 0;
    top: 0;
}

.border-anim-1::after{
    bottom: 0;
    left: 0;
}

.border-anim-1 .img-wrap::before{
    left: 0;
    top: 0;
}

.border-anim-1 .img-wrap::after{
    bottom: 0;
    right: 0;
}

.border-anim-1:hover::before,
.border-anim-1:hover::after{
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -moz-transition-delay: 0s;
}

.border-anim-1:hover .img-wrap::before,
.border-anim-1:hover .img-wrap::after{
    transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    -ms-transition-delay: .1s;
    -moz-transition-delay: .1s;
}


.border-anim-2::after{
    transition-duration: .3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    right: 0;
    bottom: 0;
}

.border-anim-2 .img-wrap::after{
    right: 0;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    bottom: 0;
}

.border-anim-2::before{
    top: 0;
    left: 0;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
}

.border-anim-2 .img-wrap::before{
    left: 0;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    top: 0;
}


.border-anim-3::before{
    left: 50%;
    top: 0;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.border-anim-3::after{
    left: 50%;
    bottom: 0;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.border-anim-3 .img-wrap::before{
    left: 0;
    top: 50%;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.border-anim-3 .img-wrap::after{
    right: 0;
    top: 50%;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.border-anim-3:hover::before,
.border-anim-3:hover::after{
    left: 0;
}

.border-anim-3:hover .img-wrap::before,
.border-anim-3:hover .img-wrap::after{
    top: 0;
}




.background-effect img {
    transition: all 400ms;
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
}

.bg-effect-1:hover img {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
}


.bg-effect-2 img {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
}

.bg-effect-2:hover img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
}


.bg-effect-3 img {
    transition: all 800ms;
    -webkit-transition: all 800ms;
    -o-transition: all 800ms;
    -ms-transition: all 800ms;
    -moz-transition: all 800ms;
}

.bg-effect-3:hover img {
    transform: scale(1.5) rotate(360deg);
    -webkit-transform: scale(1.5) rotate(360deg);
    -o-transform: scale(1.5) rotate(360deg);
    -ms-transform: scale(1.5) rotate(360deg);
    -moz-transform: scale(1.5) rotate(360deg);
}


.bg-effect-3_2 img {
    transition: all 800ms;
    -webkit-transition: all 800ms;
    -moz-transition: all 800ms;
    -o-transition: all 800ms;
    -ms-transition: all 800ms;
}

.bg-effect-3_2:hover img {
    transform: scale(1.3) skewY(8deg);
    -webkit-transform: scale(1.3) skewY(8deg);
    -moz-transform: scale(1.3) skewY(8deg);
    -o-transform: scale(1.3) skewY(8deg);
    -ms-transform: scale(1.3) skewY(8deg);
}


.bg-effect-4 {
    perspective: 960px;
    -moz-perspective: 960px;
    -webkit-perspective: 960px;
    -o-perspective: 960px;
    -ms-perspective: 960px;
    width: 100%;
    height: 360px;
}

.bg-effect-4 .img-wrap2 {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url("");
    background-size: 0, cover;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: all 1000ms;
    -o-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -webkit-transition: all 1000ms;
    -ms-transition: all 1000ms;
}

.bg-effect-4:hover .img-wrap2 {
    transform-origin:left;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    -moz-transform-origin: left;
    -o-transform-origin: left;
    transform: rotateX(80deg);
    -moz-transform: rotateX(80deg);
    -o-transform: rotateX(80deg);
    -webkit-transform: rotateX(80deg);
    -ms-transform: rotateX(80deg);
}

.bg-effect-4 .img-wrap2:after {
    content: '';
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    position: absolute;
    background: inherit;
    background-size: cover;
    background-position:bottom;
    transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -o-transform-origin: bottom;
}

.bg-effect-4 .img-wrap2 {
    color: #fff;
}

.bg-effect-4 .img-wrap2 h4 {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    text-align: center;
    transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform-origin: top;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    z-index: 1;
    line-height: 30px;
    font-size: 14px;
}

.bg-effect-4 .img-wrap2:before {
    content: '';
    opacity: .20;
    width: 100%;
    height: 100%;
    margin-top: -20px;
    position:absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, .5);
    transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transform: rotateX(95deg) translateZ(-80px) scale(.80);
    -moz-transform: rotateX(95deg) translateZ(-80px) scale(.80);
    -o-transform: rotateX(95deg) translateZ(-80px) scale(.80);
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(.80);
    -ms-transform: rotateX(95deg) translateZ(-80px) scale(.80);
    transform-origin: bottom;
    -o-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
}

.bg-effect-4:hover .img-wrap2:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, .5);
    transform: translateZ(-60px) scale(0.90);
    -moz-transform: translateZ(-60px) scale(0.90);
    -ms-transform: translateZ(-60px) scale(0.90);
    -o-transform: translateZ(-60px) scale(0.90);
    -webkit-transform: translateZ(-60px) scale(0.90);
}


.bg-effect-4-no-s .img-wrap2:before {
    display: none;
}



.btn-effects img {
    transition: all 400ms;
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -o-transition: all 400ms;
    -ms-transition: all 400ms;
}

.btn-effects:hover img {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
}

.btn-effects-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.btn-effects-ul li {
    display: inline-block;
}

.btn-effects-ul li a {
    color: #fff;
    border: 1px solid #000;
    width: 32px;
    height:32px;
    line-height: 30px;
    display: block;
    transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    -moz-transition: all 200ms;
    -webkit-transition: all 200ms;
}

.btn-effects-ul li a:hover {
    background: #000;
    color: #333;
}



@media only screen and (max-width: 767px) {
	.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
	div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
	div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
	.pp_content { width: 100%!important; height: auto!important; }
	.pp_fade { width: 100%!important; height: 100%!important; }
	a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
	#pp_full_res img { width: 100%!important; height: auto!important; }
	.pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
	a.pp_close { right: 7%!important; top: 10px!important; }
}