.ct-fancy-box-layout1 {
	.item--icon {
		line-height: 1;
		text-align: center;
		margin-right: 20px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    @media #{ $max-xl } {
	    	margin-right: 0;
	    	margin-bottom: 25px;
	    }
	}
	.item--title {
		margin-bottom: 15px;
		font-size: 20px;
		font-weight: 500;
		cite {
			font-style: normal;
			color: $third_color;
		}
	}
	.item--description {
		color: #666666;
	}
	&.style1 {
		.item--inner {
			background-color: #fff;
			@include border-radius(7px);
			padding: 30px 20px 28px;
			@include box-shadow(0 10px 25px rgba($third_color, 0.09));
			@media #{ $min-xxl } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}
		}
		.item--icon {
			min-width: 60px;
			max-width: 60px;
			@include border-radius(7px);
			background-color: rgba( $primary_color, 0.15 );
			height: 60px;
			margin-right: 20px;
		    @media #{ $max-xl } {
		    	margin-right: 0;
		    	margin-bottom: 25px;
		    }
			i {
				@extend .text-gradient;
				font-size: 36px;
				display: flex;
			}
			svg {
				height: 36px;
			}
		}
	}
	&.style2 {
		.item--inner {
			background-color: #fff;
			@include border-radius(7px);
			padding: 30px 20px 28px;
			@include box-shadow(0 10px 25px rgba($third_color, 0.09));
			@media #{ $min-xxl } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}
		}
		.item--icon {
			min-width: 80px;
			max-width: 80px;
			text-align: center;
			margin-right: 10px;
		    @media #{ $max-xl } {
		    	margin-right: 0;
		    	margin-bottom: 25px;
		    }
		    img, i, svg {
		    	@include transition(all 300ms linear 100ms);
		    }
			i {
				@extend .text-gradient;
				font-size: 71px;
			}
			svg {
				height: 56px;
			}
		}
		.item--inner {
			&:hover {
				.item--icon {
					i, img {
						@include animation(anim-moema-1 0.2s linear 1);
					}
				}
			}
		}
	}
	&.style3 {
		.item--title {
			margin-bottom: 1px;
			font-size: 20px;
			color: $primary_color;
			cite {
				font-style: normal;
				color: $third_color;
			}
		}
		.item--icon {
			min-width: 50px;
			max-width: 50px;
			text-align: center;
			margin-right: 10px;
			position: relative;
			z-index: 1;
		    @media #{ $max-xl } {
		    	margin-right: 10px;
		    	margin-bottom: 0px;
		    }
			&:before {
				z-index: -1;
				content: "";
				width: 47px;
				height: 47px;
				@include border-radius(47px);
				background-color: rgba($primary_color, 0.1);
				display: block;
				position: absolute;
				top: 50%;
				@include transform(translateY(-50%));
				left: -23px;
			}
		    img, i, svg {
		    	@include transition(all 300ms linear 100ms);
		    }
		    img {
		    	max-height: 45px;
		    	width: auto;
		    }
			i {
				@extend .text-gradient;
				font-size: 45px;
			}
			svg {
				height: 45px;
			}
		}
		.item--description {
			label {
				font-weight: bold;
			}
		}
		.item--inner {
			padding: 0;
			background-color: transparent;
			@media #{ $min-xl } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}
			&:hover {
				.item--icon {
					i, img {
						@include animation(anim-moema-1 0.2s linear 1);
					}
				}
			}
		}
	}
	&.style4 {
		.item--icon {
			min-width: 111px;
			max-width: 111px;
			height: 111px;
			min-height: 111px;
			text-align: center;
			margin-right: 25px;
			position: relative;
			z-index: 1;
			background-color: #f2f2f2;
		    @media #{ $max-md } {
		    	margin-bottom: 20px;
		    }
		    img, i, svg {
		    	@include transition(all 300ms linear 100ms);
		    }
		    img {
		    	max-height: 60px;
		    	width: auto;
		    }
			i {
				@extend .text-gradient;
				font-size: 60px;
			}
			svg {
				height: 60px;
			}
		}
		.item--title {
			margin-bottom: 5px;
			font-size: 30px;
			color: $secondary_color;
			@media #{ $max-md } {
				font-size: 20px;
			}
		}
		.item--inner {
			padding: 0;
			background-color: transparent;
			@media #{ $min-lg } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}
			&:hover {
				.item--icon {
					i, img {
						@include animation(anim-moema-1 0.2s linear 1);
					}
				}
			}
		}
	}
	&.style5 {
		.item--title {
			margin-bottom: 1px;
			font-size: 20px;
			color: $primary_color;
			font-weight: 500;
		}
		.item--icon {
			min-width: 82px;
			max-width: 82px;
			min-height: 82px;
			max-height: 82px;
			text-align: center;
			margin-right: 25px;
			position: relative;
			background-color: #fff;
			@include border-radius(50%);
			@include box-shadow(0 10px 25px rgba($third_color, 0.19));
		    @media #{ $max-xl } {
		    	margin-right: 10px;
		    	margin-bottom: 20px;
		    }
		    img, i, svg {
		    	@include transition(all 300ms linear 100ms);
		    }
		    img {
		    	max-height: 30px;
		    	width: auto;
		    }
			i {
				@extend .text-gradient;
				font-size: 30px;
			}
			svg {
				height: 30px;
			}
		}
		.item--description {
			label {
				font-weight: bold;
			}
		}
		.item--inner {
			padding: 0;
			background-color: transparent;
			@media #{ $min-xl } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}
			&:hover {
				.item--icon {
					i, img {
						@include animation(anim-moema-1 0.2s linear 1);
					}
				}
			}
		}
	}
	&.style6 {
		.item--icon {
			min-width: 70px;
			max-width: 70px;
			height: 70px;
			min-height: 70px;
			text-align: center;
			margin-right: 25px;
			position: relative;
			z-index: 1;
		    @media #{ $max-md } {
		    	margin-bottom: 20px;
		    }
		    img, i, svg {
		    	@include transition(all 300ms linear 100ms);
		    }
		    img {
		    	max-height: 70px;
		    	width: auto;
		    }
			i {
				@extend .text-gradient;
				font-size: 70px;
			}
			svg {
				height: 70px;
			}
		}
		.item--title {
			margin-bottom: 0px;
			font-size: 18px;
			color: $secondary_color;
		}
		.item--inner {
			padding: 0;
			background-color: transparent;
			@media #{ $min-lg } {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.item--icon {
					margin-bottom: 0;
				}
			}
		}
	}
}
.ct-fancy-box-layout2 {
	.item--icon {
		line-height: 1;
		text-align: center;
		margin-right: 20px;
	    display: flex;
	    align-items: center;
		min-width: 80px;
		max-width: 80px;
		text-align: center;
		margin-right: 0;
	    @media #{ $max-xl } {
	    	margin-bottom: 25px;
	    }
	    img, i, svg {
	    	@include transition(all 300ms linear 100ms);
	    }
	    img {
	    	width: auto;
	    	max-height: 65px;
	    }
		i {
			font-size: 65px;
		}
		svg {
			height: 56px;
		}
	}
	.item--title {
		margin-bottom: 0px;
		font-size: 20px;
		font-size: bold;
		cite {
			font-style: normal;
			color: $third_color;
		}
	}
	.item--inner {
		@media #{ $min-xxl } {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
	}
	.item--inner {
		&:hover {
			.item--icon {
				i, img {
					@include animation(anim-moema-1 0.2s linear 1);
				}
			}
		}
	}
}
.ct-fancy-box-layout3 {
	.item--icon {
		position: absolute;
		top: -25px;
		width: 50px;
		height: 50px;
		@include border-radius(5px);
		background-color: #1979fe;
		color: #fff;
		left: 20px;
		display: flex;
	    align-items: center;
	    justify-content: center;
	    @include transition(all 300ms linear 0ms);
	    @include box-shadow(0 10px 30px rgba(#1979fe, 0.45));
		i, img {
			
		}
		i {
			font-size: 35px;
			line-height: 1;
		    display: flex;
		}
		img {
			max-height: 35px;
		}
	}
	.item--title {
		font-size: 18px;
		font-weight: bold;
		margin-right: -10px;
	}
	.item--inner {
		margin-top: 35px;
		@include border-radius(4px);
		background-color: #f4f4f4;
		position: relative;
		padding: 40px 15px 30px 20px;
		&:hover {
			.item--icon {
				background-color: #00d7a8;
				img,i {
					@include animation(ct-cubeGridScaleDelay 0.9s linear 1);
				}
			}
		}
	}
}
.ct-fancy-box-layout4 {
	.item--icon {
		margin-bottom: 25px;
		i, img, svg {
			@include transition(all .3s);
		}
		img {
			
			max-height: 45px;
		}
	}
	.item--title {
		font-size: 24px;
		color: $secondary_color;
		margin-bottom: 20px;
	}
	a.btn-author {
		color: $third_color;
		position: relative;
		padding-bottom: 2px;
		&:after {
			background-image: linear-gradient(-45deg, #f74f59 0%, #f74f59 37%, #f74f59 40%, #328eff 69%, #328eff 100%);
            content: "";
            height: 1px;
            width: 0;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
            transform-origin: left;
            -moz-transform-origin: left;
            -ms-transform-origin: left;
            -webkit-transform-origin: left;
            -o-transform-origin: left;
            @include transition(all .3s);
		}
	}
	.item--inner {
		text-align: center;
		&:hover {
			.item--icon {
				img, i, svg {
					@include animation(icon-bounce 0.5s linear 1);
				}
			}
			a.btn-author {
		    	background-image: linear-gradient(-45deg, #f74f59 0%, #f74f59 37%, #f74f59 40%, #328eff 69%, #328eff 100%);
			    background-color: transparent;
			    background-clip: text;
			    -o-background-clip: text;
			    -ms-background-clip: text;
			    -moz-background-clip: text;
			    -webkit-background-clip: text;
			    text-fill-color: transparent;
			    -o-text-fill-color: transparent;
			    -ms-text-fill-color: transparent;
			    -moz-text-fill-color: transparent;
			    -webkit-text-fill-color: transparent;
			    &:after {
	                width: 100%;
	                left: 0;
	                right: auto;
	                transform-origin: right;
	                -moz-transform-origin: right;
	                -ms-transform-origin: right;
	                -webkit-transform-origin: right;
	                -o-transform-origin: right;
			    }
			}
		}
	}
}
.ct-fancy-box-layout5 {
	text-align: center;
	.item--icon {
		width: 100px;
		height: 100px;
		@include border-radius(25px);
		background-color: #fff;
		color: #fff;
		display: flex;
	    align-items: center;
	    justify-content: center;
	    @include transition(all 300ms linear 0ms);
	    @include box-shadow(0 10px 25px rgba($third_color, 0.09));
	    margin: 0 auto 34px;
		i, img {
			
		}
		i {
			font-size: 40px;
			line-height: 1;
		    display: flex;
		}
		img {
			max-height: 41px;
			width: auto;
		}
	}
	.item--title {
		font-size: 18px;
		font-weight: 500;
		color: $secondary_color;
	}
	.item--inner {
		margin-bottom: 25px;
		&:hover {
			.item--icon {
				img, i {
					@include animation(icon-bounce 0.5s linear 1);  	
				}
			}
		}
	}
}
.ct-fancy-box-layout6 {
	.ct-title {
		font-size: 18px;
		white-space: nowrap;
		color: #010100;
		position: absolute;
		top: 0;
		left: 0px;
		width: 100%;
		height: 100%;
		letter-spacing: 2px;
		@include transform(rotate(-155deg));
		svg {
			fill: transparent;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%, -50%));
			overflow: visible;
			width: 110px;
			height: 110px;
			text {
				letter-spacing: inherit;
				fill: $secondary_color;
			}	
		}
	}
	.item--icon {
		color: #010100;
		font-size: 58px;
		position: absolute;
		padding-top: 20px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		display: flex;
		align-items: center;
		line-height: 1;
		i, img, svg {
			animation: bounce-out-down 2s ease infinite;
		}
	}
	.ct-meta {
		width: 162px;
		height: 162px;
		position: relative;
		top: 0;
		left: 0;
		z-index: 1;
		@include border-radius(100%);
		background-color: #faa80a;
		border: 40px solid #faa80a;
	}
	.item--inner {
		position: relative;
		display: inline-block;
	}
}
// Fcb Carousel
.ct-fancybox-carousel1 {
	.item--image {
		position: relative;
		&:before {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			z-index: 1;
			@include background-gradient-bottom( rgba($primary_color, 60% ), rgba($primary_color, 0));
		}
	}
	.ct-icon {
		min-width: 80px;
		max-width: 80px;
		text-align: center;
		margin-right: 10px;
		@media #{ $max-lg } {
			margin-bottom: 20px;
			display: block;
			text-align: left;
		}
		img {
			display: inline-block;
			max-height: 45px;
		}
		i {
			font-size: 45px;
		}
	}
	.item-holder {
		position: absolute;
		z-index: 2;
		bottom: 0;
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
		@media #{ $min-xl } {
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	.item--title {
		font-size: 24px;
		color: $primary_color;
		a {
			color: inherit;
		}
	}
	.item--description {
		font-size: 16px;
	}
	.inner-holder {
		background-color: #fff;
		@include border-radius(10px);
		@include box-shadow(0 5px 30px rgba( $secondary_color, 0.09));
		padding: 20px;
		@media #{ $min-xl } {
			display: flex;
			align-items: center;
		}
	}
	.item--inner {
		position: relative;
		padding-bottom: 50px;
		margin-bottom: 35px;
		&:hover {
			.item--title {
				a {
					color: $primary_color;
				}
			}
		}
	}
}
.ct-fancybox-carousel2 {
	.item--image {
		overflow: hidden;
		position: relative;
		&:before, &:after {
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    z-index: 1;
		    @include transition(all 200ms linear 50ms);
		    opacity: 1;
		    @include transform(translate(0,-100%));
		    border-bottom: 2px solid rgba(255,255,255,1);
		    background-color: rgba(255,255,255,0.5);
		}
		&:after {
		    -webkit-transition-delay: 0.2s;
		    transition-delay: 0.2s;
		}
		img {
			width: 100%;
		}
	}
	.item-holder {
		position: absolute;
		z-index: 2;
		top: 0;
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
		@media #{ $min-xl } {
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	.item--title {
		font-size: 22px;
		margin-bottom: 0;
		color: $secondary_color;
		a {
			color: inherit;
		}
	}
	.item--description {
		font-size: 16px;
	}
	.inner-holder {
		background-color: #fff;
		padding: 22px 15px;
		@media #{ $min-xl } {
			padding: 22px 40px;
		}
		text-align: center;
	}
	.item--inner {
		margin-top: 25px;
		position: relative;
		padding-top: 50px;
		@include transition(all 300ms linear 0ms);
		&:hover {
			@include transform(translateY(-5px));
			.item--image {
				&:before, &:after {
					opacity: 0;
				    @include transform(translate(0,0));
				}
			}
			.item--title {
				a {
					color: $primary_color;
				}
			}
		}
	}
}
.ct-fancybox-carousel3 {
	.item--image {
		img {
			width: 100%;
			mix-blend-mode: multiply;
		}
	}
	.btn-fcb {
		background-color: transparent;
		@include border-radius(30px);
		border: 2px solid rgba(#fff, 0.3);
		height: 50px;
		display: inline-block;
		line-height: 46px;
		text-align: center;
		padding: 0 35px;
		color: #fff;
		font-weight: 500;
		@media #{ $max-md } {
			height: 45px;
			line-height: 41px;
		}
		&:hover {
			color: $secondary_color;
			background-color: #fff;
			border-color: #fff;
		}
	}
	.item--title {
		font-size: 30px;
		line-height: 1.3;
		color: #fff;
		font-weight: 400;
		margin-bottom: 25px;
		a {
			color: inherit;
		}
		@media #{ $max-md } {
			font-size: 25px;
			margin-bottom: 15px;
		}
		@media #{ $max-sm } {
			font-size: 20px;
		}
	}
	.item-holder {
		width: 100%;
	    height: 100%;
	    display: flex;
	    align-items: center;
		top: 0;
		left: 0;
		position: absolute;
		padding: 35px 40px;
		@media #{ $max-md } {
			padding: 25px 20px;
		}
	}
	.item--inner {
		background-color: $primary_color;
		position: relative;
		position: relative;
		overflow: hidden;
	}
}
.ct-fancybox-carousel4 {
	@media #{ $minx-xxl } {
		.slick-slide {
			opacity: 0;
			@include transition(all 200ms linear 0ms);
			&.slick-active {
				opacity: 1;
			}
		}
	}
	.item--image {
		
	}
	.ct-icon {
		background-color: #fff;
		position: absolute;
		width: 70px;
		height: 90px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		@include border-radius(47px);
		right: 25px;
		top: -45px;
		text-align: center;
		color: $primary_color;
		@include box-shadow(0 5px 30px rgba( $primary_color, 0.09));
		@media #{ $max-lg } {
			margin-bottom: 20px;
			display: block;
			text-align: left;
		}
		img, i {
			@include transition(all 300ms linear 0ms);
		}
		img {
			display: inline-block;
			max-height: 55px;
		}
		i {
			font-size: 48px;
		}
	}
	.item-holder {
		position: relative;
		background-color: #fff;
		padding: 25px 20px;
		@media #{ $min-xl } {
			padding: 40px 35px 35px;
		}
	}
	.item--title {
		font-size: 24px;
		margin-bottom: 13px;
		color: $secondary_color;
		a {
			color: inherit;
		}
	}
	.item--description {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.btn-fcb {
		display: inline-block;
		height: 45px;
		font-weight: 500;
		line-height: 45px;
		@include border-radius(35px);
		padding: 0 25px;
		background-color: rgba( $primary_color, 0.15 );
		color: $secondary_color;
	    position: relative;
	    overflow: hidden;
		z-index: 1;
		&:before, &:after {
		    position: absolute;
			top: 0;
		    content: '';
		    width: 0%;
		    height: 100%;
		    display: block;
			-ms-transform: skewX(-10deg);
		    -webkit-transform: skewX(-10deg); 
		    transform: skewX(-10deg);  
		    box-shadow: 2px 0px 14px rgba(0,0,0,.6); 
		}
		&:before {
		    background: $primary_color;
		    left: -10%;
		    opacity: 1;
		    z-index: -12;
		    -moz-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
		  	-o-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
		  	-webkit-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
		  	transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
		}
		&:after {
		    background: #fff;
		    left: -10%;
		    opacity: 0;
		    z-index: -15;
		    -webkit-transition: all .94s cubic-bezier(.2,.95,.57,.99);
		    -moz-transition: all .4s cubic-bezier(.2,.95,.57,.99);
		    -o-transition: all .4s cubic-bezier(.2,.95,.57,.99);
		    transition: all .4s cubic-bezier(.2,.95,.57,.99);
		}
		&:hover {
		    box-shadow: 0 0 1px $primary_color;
			color: #fff;
			&:before {
				opacity:1;
				width: 116%;
			}
			&:after {
				opacity:1;
				width: 120%;
			}
		}
		i {
			margin-left: 5px;
			font-size: 18px;
			font-style: normal;
		}
	}
	.item--inner {
		padding: 20px;
		margin-bottom: 35px;
		@include box-shadow(0 2px 30px rgba( $primary_color, 0.09));
		&:hover {
			.ct-icon {
				img, i {
					@include animation(icon-bounce 0.5s linear 1);
				}
			}
			.item--title {
				a {
					color: $primary_color;
				}
			}
			.btn-fcb {
				background-color: $primary_color;
				color: #fff;
				i {

				}
			}
		}
	}
	.ct-carousel-inner {
		@media #{ $minx-xxl } {
			margin-left: -25px;
			margin-right: -25px;
			.slick-list {
				padding-left: 25px;
				padding-right: 25px;
				overflow: hidden;
			}
		}
	}
}
.ct-fancybox-carousel5 {
	@media #{ $minx-xxl } {
		.slick-slide {
			opacity: 0;
			@include transition(all 200ms linear 0ms);
			&.slick-active {
				opacity: 1;
			}
		}
	}
	.item--image {
		margin-bottom: 25px;
		overflow: hidden;
		@include border-radius(3px);
		img {
			@include transition(all 200ms linear 0ms);
			@include transform(scale(1.1));
		}
	}
	.item-holder {
		position: relative;
	}
	.item--title {
		font-size: 24px;
		margin-bottom: 13px;
		color: $secondary_color;
		a {
			color: inherit;
		}
	}
	.item--description {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.btn-fcb {
		display: inline-block;
		font-weight: bold;
		color: $secondary_color;
	    position: relative;
	    overflow: hidden;
		z-index: 1;
		i {
			font-style: normal;
		}
	}
	.item--inner {
		padding: 20px 20px 25px;
		margin-top: 25px;
		margin-bottom: 25px;
		@include border-radius(7px);
		background-color: #fff;
		@include box-shadow(0 0px 30px rgba( $third_color, 0.15));
		&:hover {
			.item--image {
				img {
					@include transform(scale(1));
				}
			}
			.btn-fcb {
				color: $primary_color;
			}
		}
	}
	.ct-carousel-inner {
		@media #{ $minx-xxl } {
			margin-left: -25px;
			margin-right: -25px;
			.slick-list {
				padding-left: 10px;
				padding-right: 10px;
				overflow: hidden;
			}
		}
	}
}
.ct-fancybox-carousel6 {
	.ct-icon {
		font-size: 79px;
		line-height: 1;
	    margin-bottom: 37px;
	    display: inline-block;
	    @media #{ $max-lg } {
	    	font-size: 55px;
	    }
	}
	.item--title {
		font-size: 22px;
		padding-bottom: 18px;
		margin-bottom: 30px;
		position: relative;
		color: #fff;
		@media #{ $max-lg } {
			font-size: 18px;
		}
		&:after {
			content: "";
			display: inline-block;
			width: 60px;
			height: 2px;
			background-color: $primary_color;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		a {
			color: inherit;
		}
	}
	.btn-fcb {
		color: #fff;
		background-color: $primary_color;
		display: inline-block;
		line-height: 50px;
		padding: 0 25px;
		@include border-radius(5px);
		@include box-shadow(0 10px 30px rgba($primary_color, 0.29));
		i {
			line-height: 1;
			margin-left: 5px;
			font-size: 15px;
			@include transition(all 300ms linear 0ms);
			position: relative;
			top: 3px;
		}
		&:hover {
			i {
				@include animation(toRightFromLeft 0.3s linear 1);
			}
		}
	}
	.holder-main {
		@include transition(all 300ms linear 0ms);
		position: relative;
		background-color: rgba( #000, 0.9 );
		.inner-image-small {
			position: absolute;
			top: 30px;
			right: 0;
		}
		.ct-icon {
			color: #fff;
		}
	}
	.item--description {
		color: #e3e3e3;
		margin-bottom: 35px;
		line-height: 1.875;
	}
	.holder-hover {
		@include transition(all 300ms linear 0ms);
		border: 1px solid rgba( #656d6f, 0.3 );
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		z-index: 1;
		@include transform(scaleY(0));
		transform-origin: top center;
		-webkit-transform-origin: top center;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		.item--image, .ct-image-small2 {
			position: absolute;
			right: 0;
		}
		.item--image {
			z-index: -2;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center center;
			background-size: cover;
		    -webkit-filter: blur(8px);
		    filter: blur(8px);
		    @include transform(scale(1.3));
		}
		.ct-image-small2 {
			top: 8px;
			right: -1px;
			z-index: -1;
		}
		.ct-icon {
			opacity: 0;
			color: $primary_color;
		    @include transition(.3s cubic-bezier(.24,.74,.58,1));
			-webkit-transition-delay: .3s;
		    -moz-transtion-delay: .3s;
		    transition-deilay: .3s;
			a {
				display: inline-block;
				text-align: left;
				color: inherit;
			}
			&:hover {
				a {
					color: #fff;
				}
			}
		}
		.item--description {
			-webkit-transition-delay: .2s;
		    -moz-transtion-delay: .2s;
		    transition-deilay: .2s;
		    @include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		.btn-fcb {
			-webkit-transition-delay: .15s;
		    -moz-transtion-delay: .15s;
		    transition-deilay: .15s;
		    @include transition(.3s cubic-bezier(.24,.74,.58,1));
		    @extend .btn-hover;
		}
	}
	.item-holder {
		padding: 38px 30px 75px;
		@include border-radius(10px);
	}
	.item--inner {
		position: relative;
		padding-top: 20px;
		padding-bottom: 120px;
		&:hover {
			.holder-main {
				opacity: 0;
			}
			.holder-hover{ 
				@include transform(scaleY(1));
				opacity: 1;
				-webkit-transition-delay: 0.12s;
                -moz-transition-delay: 0.12s;
                transition-delay: 0.12s;
			}
			.ct-icon, .btn-fcb, .item--description {
				opacity: 1;
			    @include transform(translateY(0px));
			}
		}
	}
}

.ct-fancybox-carousel7 {
	.ct-slick-carousel[data-centermode="true"] {
		.slick-list {
			padding-left: 0!important;
			padding-right: 0!important;
		}
	}
	.item--number {
		width: 50px;
		height: 50px;
		min-width: 50px;
		font-size: 18px;
		display: flex;
		align-items: center;
		background-color: #faa80a;
		color: #fff;
		justify-content: center;
		@media #{ $max-md } {
			margin-bottom: 15px;
		}
		+ .item-meta {
			@media #{ $min-lg } {
				padding-left: 15px;
			}
		}		
	}
	.item--label {
		font-size: 14px;
	}
	.item--title {
		font-size: 20px;
		a {
			color: #000000;
		}
	}
	.item--excerpt {
		font-size: 16px;
		margin-bottom: 20px;
	}
	a.item-button {
		display: inline-flex;
		position: relative;
		padding-left: 20px;
		color: #000000;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 14px;
		i {
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			position: absolute;
			top: -5px;
			font-size: 20px;
			color: #48c8f2;
		}
		i.icon-before {
			left: 0;
		}
		i.icon-after {
			opacity: 0;
			right: 0;
		}
		&:hover {
			padding-left: 0;
			padding-right: 20px;
			i.icon-before {
				position: 0;
				opacity: 0;
				left: -10px;
			}
			i.icon-after {
				opacity: 1;
			}			
		}
	}
	.item-content {

	}
	.item-header {
		margin-bottom: 10px;
		@media #{ $min-lg } {
			display: flex;
		}
	}
	.item--inner {
		padding: 35px;
		position: relative;
		z-index: 1;
		margin-bottom: 25px;
		margin-top: 25px;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		@media #{ $max-lg } {
			padding: 25px 15px;
		}
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			opacity: 0;
			@include transform(scaleY(0));
			transform-origin: top center;
			-webkit-transform-origin: top center;
		}
		&:before {
			z-index: -2;
			background-color: #faa80a;
			top: 22px;
			left: 12px;
			right: 0px;
			bottom: -15px;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:after {
			z-index: -1;
			background-color: #000000;
			top: 0px;
			left: 0;
			right: 12px;
			bottom: 0;
			@include transition(.2s cubic-bezier(.24,.74,.58,1));
		}
		&:hover {
			&:before {
				opacity: 1;
				@include transform(scaleY(1));
			}
			&:after {
				opacity: 1;
				@include transform(scaleY(1));
			}
			.item--label {
				color: #fff;
			}
			.item--title {
				a {
					color: #fff;
				}
			}
			.item--excerpt {
				color: #fff;
			}
			a.item-button {
				color: #fff;
			}
		}
	}
	.slick-slide {
		// &.slick-center {
		// 	.item--inner {
		// 		&:before {
		// 			opacity: 1;
		// 			@include transform(scaleY(1));
		// 		}
		// 		&:after {
		// 			opacity: 1;
		// 			@include transform(scaleY(1));
		// 		}
		// 		.item--label {
		// 			color: #fff;
		// 		}
		// 		.item--title {
		// 			a {
		// 				color: #fff;
		// 			}
		// 		}
		// 		.item--excerpt {
		// 			color: #fff;
		// 		}
		// 		a.item-button {
		// 			color: #fff;
		// 		}
		// 	}
		// }
	}
}