.pt-image-button {


    display: inline-block;


    position: relative;


    overflow: hidden;


    background: #007fc0;


    cursor: pointer;


    -webkit-transition: all 0.2s ease-in-out !important;


    -moz-transition: all 0.2s ease-in-out !important;


    -ms-transition: all 0.2s ease-in-out !important;


    -o-transition: all 0.2s ease-in-out !important;


    transition: all 0.2s ease-in-out !important;


}








/*Default background for slide styles*/





.pt-image-button:hover,


.pt-image-button-style4-icon-wrapper,


.pt-image-button-style1-top:before,


.pt-image-button-style1-bottom:before,


.pt-image-button-style1-left:before,


.pt-image-button-style1-right:before {


    background-color: #54595f;


}





.pt-image-button.pt-image-button-sm {


    padding: 12px 24px;


    font-size: 14px;


    line-height: 1;


}





.pt-image-button.pt-image-button-md {


    padding: 14px 26px;


    font-size: 16px;


    line-height: 1.2;


}





.pt-image-button.pt-image-button-lg {


    padding: 16px 28px;


    font-size: 18px;


    line-height: 1.3333;


}





.pt-image-button.pt-image-button-block {


    font-size: 15px;


    line-height: 1;


    padding: 12px 24px;


    width: 100%;


    text-align: center;


}





.pt-image-button-text-icon-wrapper {


    position: relative;


    z-index: 3;


}





.pt-image-button-text-icon-wrapper span,


.pt-image-button-text-icon-wrapper,


.pt-image-button-text-icon-wrapper i {


    -webkit-transition: all 0.2s ease-in-out;


    -moz-transition: all 0.2s ease-in-out;


    -ms-transition: all 0.2s ease-in-out;


    -o-transition: all 0.2s ease-in-out;


    transition: all 0.2s ease-in-out;


}





.pt-image-button-style1-bottom:before,


.pt-image-button-style1-top:before,


.pt-image-button-style1-left:before,


.pt-image-button-style1-right:before {


    -webkit-transition: all 0.2s ease-in-out;


    -moz-transition: all 0.2s ease-in-out;


    -ms-transition: all 0.2s ease-in-out;


    -o-transition: all 0.2s ease-in-out;


    transition: all 0.2s ease-in-out;


}





.pt-image-button-style1-bottom:before {


    content: "";


    position: absolute;


    width: 100%;


    height: 0;


    top: 0;


    left: 0;


}





.pt-image-button-style1-top:before {


    content: "";


    position: absolute;


    width: 100%;


    height: 0;


    bottom: 0;


    left: 0;


}





.pt-image-button-style1-right:before {


    content: "";


    position: absolute;


    width: 0;


    height: 100%;


    bottom: 0;


    left: 0;


}





.pt-image-button-style1-left:before {


    content: "";


    position: absolute;


    width: 0;


    height: 100%;


    top: 0;


    right: 0;


}





.pt-image-button-style1-bottom:hover:before {


    height: 100%;


}





.pt-image-button-style1-top:hover:before {


    height: 100%;


}





.pt-image-button-style1-right:hover:before {


    width: 100%;


}





.pt-image-button-style1-left:hover:before {


    width: 100%;


}





.pt-image-button-diagonal-effect-top:before,


.pt-image-button-diagonal-effect-bottom:before,


.pt-image-button-diagonal-effect-left:before,


.pt-image-button-diagonal-effect-right:before {


    position: absolute;


    top: 0px;


    left: 0px;


    width: 100%;


    height: 100%;


    content: "";


    z-index: 1;


    background: rgba(255, 255, 255, 0.2);


    -webkit-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -moz-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -o-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -ms-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -webkit-transition: all 0.8s ease-out;


    -moz-transition: all 0.8s ease-out;


    -o-transition: all 0.8s ease-out;


    -ms-transition: all 0.8s ease-out;


    transition: all 0.8s ease-out;


}





.pt-image-button-diagonal-effect-right:hover:before,


.pt-image-button-diagonal-effect-left:before {


    -webkit-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);


    -moz-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);


    -o-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);


    -ms-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);


    transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);


}





.pt-image-button-diagonal-effect-left:hover:before,


.pt-image-button-diagonal-effect-right:before {


    -webkit-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);


    -moz-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);


    -o-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);


    -ms-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);


    transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);


}





.pt-image-button-diagonal-effect-top:hover:before,


.pt-image-button-diagonal-effect-bottom:before {


    -webkit-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -moz-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -o-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    -ms-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


    transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);


}





.pt-image-button-diagonal-effect-bottom:hover:before,


.pt-image-button-diagonal-effect-top:before {


    -webkit-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 150%, 0);


    -moz-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 150%, 0);


    -o-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 150%, 0);


    -ms-transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 150%, 0);


    transform: scale3d(14, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 150%, 0);


}





.pt-image-button-style4-icon-wrapper {


    position: absolute;


    z-index: 2;


    width: 100%;


    text-align: center;


    display: flex;


    align-items: center;


    justify-content: center;


    height: 100%;


    opacity: 0;


    -webkit-transition: all 0.3s ease-in-out;


    -moz-transition: all 0.3s ease-in-out;


    -ms-transition: all 0.3s ease-in-out;


    -o-transition: all 0.3s ease-in-out;


    transition: all 0.3s ease-in-out;


}





.pt-image-button-style4-icon-wrapper.top {


    bottom: -100%;


    left: 0;


}





.pt-image-button-style4-icon-wrapper.bottom {


    top: -100%;


    left: 0;


}





.pt-image-button-style4-icon-wrapper.left {


    top: 0;


    left: -100%;


}





.pt-image-button-style4-icon-wrapper.right {


    top: 0;


    right: -100%;


}





.pt-image-button-style4-bottom:hover .pt-image-button-style4-icon-wrapper {


    top: 0;


    opacity: 1;


}





.pt-image-button-style4-top:hover .pt-image-button-style4-icon-wrapper {


    bottom: 0;


    opacity: 1;


}





.pt-image-button-style4-left:hover .pt-image-button-style4-icon-wrapper {


    left: 0;


    opacity: 1;


}





.pt-image-button-style4-right:hover .pt-image-button-style4-icon-wrapper {


    right: 0;


    opacity: 1;


}





.pt-image-button-style4-bottom:hover .pt-image-button-text-icon-wrapper {


    -webkit-transform: translateY(100%);


    transform: translateY(100%);


    opacity: 0;


}





.pt-image-button-style4-top:hover .pt-image-button-text-icon-wrapper {


    -webkit-transform: translateY(-100%);


    transform: translateY(-100%);


    opacity: 0;


}





.pt-image-button-style4-left:hover .pt-image-button-text-icon-wrapper {


    -webkit-transform: translateX(100%);


    transform: translateX(100%);


    opacity: 0;


}





.pt-image-button-style4-right:hover .pt-image-button-text-icon-wrapper {


    -webkit-transform: translateX(-100%);


    transform: translateX(-100%);


    opacity: 0;


}





.pt-image-button-overlap-effect-horizontal:before,


.pt-image-button-overlap-effect-vertical:before {


    position: absolute;


    content: "";


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    opacity: 0;


    -webkit-transition: all 1s ease-in-out;


    -moz-transition: all 1s ease-in-out;


    -ms-transition: all 1s ease-in-out;


    -o-transition: all 1s ease-in-out;


    transition: all 1s ease-in-out;


    background: rgba(255, 255, 255, 0.2);


    animation-name: pt-overlap-effect-done;


    animation-duration: 1s;


}





.pt-image-button-overlap-effect-vertical:before {


    animation-name: pt-overlap-ver-effect-done;


    animation-duration: 1s;


}





.pt-image-button-overlap-effect-horizontal:hover:before {


    animation-name: pt-overlap-effect;


    animation-duration: 1s;


}





.pt-image-button-overlap-effect-vertical:hover:before {


    animation-name: pt-overlap-ver-effect;


    animation-duration: 1s;


}





@keyframes pt-overlap-effect {


    0% {


        opacity: 0;


        -webkit-transform: rotateY(0deg);


        transform: rotateY(0deg);


    }


    50% {


        opacity: 1;


        -webkit-transform: rotateY(180deg);


        transform: rotateY(180deg);


    }


    100% {


        opacity: 0;


        -webkit-transform: rotateY(360deg);


        transform: rotateY(360deg);


    }


}





@keyframes pt-overlap-effect-done {


    0% {


        opacity: 0;


        -webkit-transform: rotateY(0deg);


        transform: rotateY(0deg);


    }


    50% {


        opacity: 1;


        -webkit-transform: rotateY(180deg);


        transform: rotateY(180deg);


    }


    100% {


        opacity: 0;


        -webkit-transform: rotateY(360deg);


        transform: rotateY(360deg);


    }


}





@keyframes pt-overlap-ver-effect {


    0% {


        opacity: 0;


        -webkit-transform: rotateX(0deg);


        transform: rotateX(0deg);


    }


    50% {


        opacity: 1;


        -webkit-transform: rotateX(180deg);


        transform: rotateX(180deg);


    }


    100% {


        opacity: 0;


        -webkit-transform: rotateX(360deg);


        transform: rotateX(360deg);


    }


}





@keyframes pt-overlap-ver-effect-done {


    0% {


        opacity: 0;


        -webkit-transform: rotateX(0deg);


        transform: rotateX(0deg);


    }


    50% {


        opacity: 1;


        -webkit-transform: rotateX(180deg);


        transform: rotateX(180deg);


    }


    100% {


        opacity: 0;


        -webkit-transform: rotateX(360deg);


        transform: rotateX(360deg);


    }


}