/* Portfolio Style 2 */
.cspt-portfolio-style-3 .creativesplanet-post-item{
    position: relative;
    overflow: hidden;
}
.cspt-portfolio-style-3 .cspt-content-wrapper {
    position: absolute;
    top: 50%;
    -khtml-transform: translateX(0%) translateY(-8%);
    -moz-transform: translateX(0%) translateY(-8%);
    -ms-transform: translateX(0%) translateY(-8%);
    -o-transform: translateX(0%) translateY(-8%);
    transform: translateX(0%) translateY(-8%);
    left: 0;
    padding: 0 20px;
    text-align: center;
    width: 100%;
    height: 100%;
}
.cspt-portfolio-style-3 img {
    width: 100%;
    height: auto;
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
}
.cspt-portfolio-style-3:hover img {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.cspt-portfolio-style-3 h3.cspt-portfolio-title {
    font-size: 24px;
    line-height: 28px;
}
.cspt-portfolio-style-3 .cspt-content-wrapper,
.cspt-portfolio-style-3 .creativesplanet-content,
.cspt-portfolio-style-3 .cspt-link-icon{
    transition: all ease 800ms;
    -moz-transition: all ease 800ms;
    -webkit-transition: all ease 800ms;
    -o-transition: all ease 800ms;
}
.cspt-portfolio-style-3:hover .creativesplanet-content {
    opacity: 1;
}
.cspt-portfolio-style-3 h3.cspt-portfolio-title a,
.cspt-portfolio-style-3 .cspt-port-cat a{
    color: #fff;
}
.cspt-portfolio-style-3 .creativesplanet-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(var(--cspt-leblix-global-color-rgb) ,0.90);
    padding: 20px 40px 0 30px;
    opacity: 0;
    overflow: hidden
}
.cspt-portfolio-style-3 .creativesplanet-icon-box.creativesplanet-media-link{
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 21px;
    z-index: 1;
    opacity: 0;
    transition: all ease 800ms;
    -moz-transition: all ease 800ms;
    -webkit-transition: all ease 800ms;
}
.cspt-portfolio-style-3 .creativesplanet-icon-box a {
    color: #fff;
}
.cspt-portfolio-style-3:hover .creativesplanet-icon-box.creativesplanet-media-link{
    visibility: visible;
    opacity: 1;
    right: 40px;
}

.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-next,
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-prev{
    width: 80px;
    height: 80px;
    left: 0;
    right: 0;
    background-color: var(--cspt-leblix-white-color);
}
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav {
    top: calc(100% - -55px);
}
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-prev{
    right: 82px;
    margin: 0 auto;
}
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-next{
    left: 80px!important;
    margin: 0 auto;
}
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-next:after, 
.cspt-element-portfolio-style-3.creativesplanet-element-viewtype-carousel .owl-carousel .owl-nav button.owl-prev:after {
    font-size: 35px;
    line-height: 55px;
    font-weight: 600;
    color: var(--cspt-leblix-secondary-color);
    content: '\e814';
}

.cspt-portfolio-style-3-bg.elementor-section.elementor-top-section.cspt-elementor-bg-color-secondary{
    background-color: transparent !important;
}
.cspt-portfolio-style-3-bg.elementor-section.elementor-top-section:before{
    background-color: var(--cspt-leblix-secondary-color) !important;
    z-index: 0;
    left: 240px;
    right: 240px;
    width: calc(100% - 480px);
}
.cspt-portfolio-style-3-bg.elementor-section.elementor-top-section:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../images/dot-pattern-bg.png) no-repeat 0 0;
    left: 240px;
    right: 240px;
    width: calc(100% - 480px);
    z-index: 0;  
    height: 100%;
}
@media (max-width: 1600px){
    .cspt-portfolio-style-3-bg.elementor-section.elementor-top-section:before {
        left: 180px;
        right: 180px;
        width: calc(100% - 360px);
    }
}
@media (max-width: 1200px){
    .cspt-portfolio-style-3-bg.elementor-section.elementor-top-section:before {
        left: 0px;
        right: 0px;
        width: calc(100% - 0px);
    }
}