/*=== cspt-element-static_box-style-2 ===*/
.cspt-static-box-style-4 {
	position: relative;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 7px;
}
.cspt-static-box-style-4 .cspt-static-content {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 30px 45px;
	text-align: center;
	background: none !important;
	backdrop-filter: blur(0) !important;
	transition: all ease 200ms, background ease 200ms;
	-moz-transition: all ease 200ms, background ease 200ms;
	-webkit-transition: all ease 200ms, background ease 200ms;
}
.cspt-static-box-style-4:hover .cspt-static-content {
	background: -moz-linear-gradient(to bottom, transparent 0%, transparent 43%, rgba(var(--cspt-emphires-blackish-color-rgb), .3) 68%, rgba(var(--cspt-emphires-blackish-color-rgb), .6) 100%);
	background: -webkit-linear-gradient(to bottom, transparent 0%, transparent 43%, rgba(var(--cspt-emphires-blackish-color-rgb), .3) 68%, rgba(var(--cspt-emphires-blackish-color-rgb), .6) 100%);
	background: linear-gradient(to bottom, transparent 0%, transparent 43%, rgba(var(--cspt-emphires-blackish-color-rgb), .3) 68%, rgba(var(--cspt-emphires-blackish-color-rgb), .6) 100%);
	backdrop-filter: blur(4px);
	transition: all ease 400ms, background ease 200ms;
	-moz-transition: all ease 400ms, background ease 200ms;
	-webkit-transition: all ease 400ms, background ease 200ms;
	transition-delay: 0.4s;	
}
.cspt-static-box-style-4 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-bottom: 0;
}
.cspt-static-box-style-4 .cspt-static-image-wrap{
	-webkit-mask-image: url(../../images/circle.svg);
	mask-image: url(../../images/circle.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 25%;
	mask-position: 50% 25%;
	-webkit-mask-size: 250%;
	mask-size: 250%;
	height: 480px;
	border-radius: 7px;
	overflow: hidden;
	will-change: -webkit-mask-size, mask-size;
	-webkit-transition: -webkit-mask-size .6s cubic-bezier(.22,.61,.36,1);
	transition: mask-size .6s cubic-bezier(.22,.61,.36,1);
}

.cspt-static-box-style-4:hover .cspt-static-image-wrap{
	-webkit-mask-size: 50%;
	mask-size: 50%;
}
.cspt-static-box-style-4 .creativesplanet-box-title {
	-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cspt-static-box-style-4 .creativesplanet-box-title h4 {
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 10px;
	color: var(--cspt-emphires-white-color);
	-webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition-delay: 0.1s;
}
.cspt-static-box-style-4 .creativesplanet-static-box-desc {
	-webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition-delay: 0.1s;
	color: rgba(var(--cspt-emphires-white-color-rgb),.8);
}
.cspt-static-box-style-4:hover .creativesplanet-box-title h4 {
	color: var(--cspt-emphires-blackish-color);
	-webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition-delay: 0s;
}
.cspt-static-box-style-4:hover .creativesplanet-static-box-desc {
	color: rgba(var(--cspt-emphires-blackish-color-rgb),.8);
	-webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition-delay: 0s;
}
.cspt-element-static-box-style-4 .cspt-heading-subheading.center-align {
	text-align: center;
}
.cspt-element-static_box-style-4 .cspt-heading-subheading.right-align {
	text-align: right;
}

@media (max-width:1024px){
	.cspt-static-box-style-4 .cspt-static-content {
		padding: 30px 15px;
	}
	.cspt-static-box-style-4 .cspt-static-image-wrap {
    	height: 400px;
	}
}
@media (max-width: 767px){
	.cspt-static-box-style-4 img{
		width: 100%;
	}
	.cspt-element-static_box-style-4.creativesplanet-element-viewtype-row-column .cspt-element-posts-wrapper.row .cspt-ele{
		margin-bottom: 60px;
	}
}