// icon animation 
.cms-fancybox:hover .cms-fancy-icon-wrap{
	@include transform(translateY(-15px));
}
// border
[class*="cms-fancybox-divider-"] {
	.cms-fancybox-line{
		position: relative;
		background-color: $border-color;
	}
}
.cms-fancybox-divider-top,
.cms-fancybox-divider-both-tb{
	.cms-fancybox-line{
		height: 1px;
	}
}
.cms-fancybox-divider-bottom,
.cms-fancybox-divider-both-tb{
	.cms-fancybox-line{
		height: 1px;
	}
}
// Border Responsive
// layout 1
.cms-fancybox-layout-1 .cms-fancybox-wrap{
	&:hover{
		@include transform(translateY(-20px));
		.cms-mainheading{
			@include transform(translateY(-5px));
		}
	}
}
// layout 2
.cms-fancybox-layout-2{
}
// Layout 3
.cms-fancybox-layout-3{
	.cms-mainheading{
		border-bottom: 1px solid #e9e9f0;
	}
	.cms-fancy-img-wrap{
		@include transform(translateY(102%));
		z-index: 2;
		&:before{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			content: '';
			display: block;
			background-color: #{'rgba(var(--color-primary-rgb), 0.9)'};
			background-image: -moz-linear-gradient( 90deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, $primary-color 80%);
			background-image: -webkit-linear-gradient( 90deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, $primary-color 80%);
			background-image: -ms-linear-gradient( 90deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, $primary-color 80%);
			z-index: 1;
		}
	}
	&:hover{
		color: $white;
		.cms-fancy-img-wrap{
			@include transform(translateY(0));
		}
		.cms-fancybox{
			z-index: 3;
		}
		.cms-mainheading,
		.cms-desc,
		.cms--link{
			color: $white;
		}
		.cms--link{
			.cms-btn-icon.icon-outline-yes:before{
				background: $white;
				box-shadow: 0 0 0 2px $white inset;
				color: $primary-color;
			}
			&:hover{
				color: $accent-color;
				.cms-btn-icon.icon-outline-yes:before{
					color: $accent-color;
				}
			}
		}
	}
}
// Layout 4
.cms-fancybox-layout-4{
	.cms-fancybox-line:after{
		background-color: #e9e9f0;
	}
}
// Layout 5

// Layout 6
.cms-fancybox-layout-6{
	.cms-fancy-icon{
		width: 124px;
		height: 124px;
		line-height: 124px;
		@include border-radius(50%);
		@include box-shadow( 0 0 0 2px $accent-color);
	}
	.cms-fancybox-wrap:hover{
		.cms-fancy-icon{
			background: $accent-color;
			color: $white;
		}
	}
}
// Layout 7
// Layout 8
// Layout 9
.cms-fancybox-layout-9{
	.cms-heading-features{
		display: flex;
		flex-wrap: wrap;
		.cms-list-icon{
			@include transform(translateY(2px));
		}
		.cms-fancy-feature-item{
			flex: 0 0 100%;
			width: 100%;
			border-bottom: 1px solid #dfdfea;
			padding-top: 7px;
			padding-bottom: 7px;
			&:last-child{
				border-bottom: 0;
			}
			@media (min-width: $screen-md-min){
				flex: 0 0 calc(50% - 20px);
				width: calc(50% - 20px);
				margin-right: 20px;
				&:nth-child(2n){
					margin-right: 0;
					margin-left: 20px;
				}
			}
		}
	}
}