.ct-banner {
	&.layout1 {
		.ct-banner-image, .ct-image-small, .ct-image-small2 {
			border-radius: 7px;
			border: 10px solid #fff;
			@include box-shadow(0 0 45px rgba($secondary_color, 0.25));
			@media #{ $max-md } {
				margin-bottom: 25px;
			}
			img {
				width: 100%;
				border-radius: 7px;
			}
		}
		.ct-image-small {

		}
		.ct-image-small2 {

		}
		.ct-banner-inner {
			@media #{ $min-lg } {
				z-index: 1;
				position: relative;
				padding-top: 155px;
				padding-left: 30%;
				padding-bottom: 88px;
				.ct-banner-image {
					z-index: 1;
				    animation-duration: 10s;
				    animation-iteration-count: infinite;
				    transform-origin: top;
				    animation-name: bounce-1;
				    animation-timing-function: linear;
				}
				.ct-image-small, .ct-image-small2 {
					position: absolute;
				}
				.ct-image-small {
					z-index: 2;
					top: 0;
					left: 20px;
					max-width: 375px;
				    animation-duration: 10s;
				    animation-iteration-count: infinite;
				    transform-origin: top;
				    animation-name: bounce-2;
				    animation-timing-function: linear;
				    @media #{ $max-sm } {
				    	max-width: 50%;
				    }
				}
				.ct-image-small2 {
					z-index: -1;
					max-width: 335px;
					bottom: 0px;
					left: 0;
				}
			}
		}
	}
	&.layout2 {
		.item--title {
			font-size: 72px;
			text-transform: uppercase;
			font-weight: bold;
			margin-bottom: 0px;
			color: rgba( #fff, 0.16 );
			@include transition(all 300ms linear 0ms);
			@media #{ $max-lg } {
				font-size: 45px;
			}
			@media #{ $max-md } {
				font-size: 30px;
			}
		}
		.ct-banner-image {
			margin-top: 30px;
			border-radius: 50%;
			overflow: hidden;
		    animation-duration: 10s;
		    @include transition(.3s cubic-bezier(.24,.74,.58,1));
		    animation-iteration-count: infinite;
		    transform-origin: top;
		    animation-name: bounce-1;
		    animation-timing-function: linear;
			img {
				width: 100%;
				border-radius: 50%;
			}
		}
		.bg-bottom {
			position: absolute;
			width: 100%;
			height: 80%;
			border-radius: 50%;
			display: block;
			@include background-horizontal(rgba(#af2100, 0.9) 30%,  rgba(#f94217, 0.8) 80%);
			top: 60%;
			bottom: 0;
			left: 50%;
			@include transform(translateX(-50%));
			z-index: -1;
		}
		.ct-banner-inner {
			z-index: 1;
			position: relative;
			text-align: center;
			overflow: hidden;
			&:hover {
				.item--title {
					color: #fff;
				}
			}
		}
	}
	&.layout3 {
		.ct-banner-image {
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			img {
				width: 100%;
			}
		}
		.ct-image-small {
			position: absolute;
			img {
				width: 100%;
			}
		    &.small1 {
			    top: -90px;
			    left: -82px;
			    width: 300px;
			    height: 300px;
			    .image-small {
			    	img {
			    		-webkit-animation: rotation 8s infinite linear;
			    		animation: rotation 8s infinite linear;
			    	}
			    }
		    }
		    &.small2 {
			    bottom: -110px;
			    right: -110px;
			    width: 360px;
			    height: 360px;
			    @media #{ $max-xs } {
				    bottom: -110px;
				    right: -110px;
				    width: 260px;
				    height: 260px;
			    }
			    .image-small {
			    	img {
			    		-webkit-animation: rotation2 16s infinite linear;
			    		animation: rotation2 16s infinite linear;
			    	}
			    }
		    }
		}
		.ct-banner-meta {
			width: 195px;
			height: 195px;
			position: absolute;
			top: 0;
			left: 10px;
			z-index: 1;
			@include border-radius(100%);
			background-color: transparent;
			border: 40px solid #fff;
			@include box-shadow(0 15px 20px rgba($third_color, 0.19));
		}
		.ct-banner-title {
			font-size: 18px;
			white-space: nowrap;
			color: #222;
			position: absolute;
			top: 0;
			left: 0px;
			width: 100%;
			height: 100%;
			@include transform(rotate(-90deg));
			letter-spacing: 1px;
			svg {
				fill: transparent;
				position: absolute;
				top: 50%;
				left: 50%;
				@include transform(translate(-50%, -50%));
				overflow: visible;
				width: 145px;
				height: 145px;
				animation: ctspinsvg 15s linear infinite;
				text {
					letter-spacing: inherit;
					fill: $secondary_color;
				}
				textPath {
					&:after {
						content: "";
						fill: $primary_color;
						display: inline-block;
						width: 5px;
						height: 5px;
						@include border-radius(5px);
					}
				}
				
			}
		}
		.ct-banner-inner {
			position: relative;
			padding-top: 35px;
			padding-left: 35px;
		}
	}
	&.layout4 {
		.ct-banner-image {
			@include border-radius(10px);
			img {
				@include border-radius(10px);
			}
		}
		.ct-banner-counter {
			position: absolute;
			right: 0;
			top: 45px;
			background-color: #0a69f9;
			@include border-radius(10px);
    		padding: 18px 15px 15px;
    		text-align: center;
    		min-width: 140px;
			.ct-counter-number {
				font-size: 55px;
				font-weight: bold;
				color: #fff;
				@include font-family-heading($heading_default_font);
			    display: flex;
			    align-items: center;
			    line-height: 1;
			    margin-bottom: 3px;
				span {
					display: inline-block;
				}
			}
			.ct-counter-title {
				font-size: 33px;
				color: #fff;
				line-height: 1.1;
				font-weight: bold;
			}
		}
		.ct-image-small {
			position: absolute;
			bottom: 0;
			right: -15px;
			border: 15px solid #fff;
			@include border-radius(5px);
			max-width: 285px;
			background-color: #fff;
			img {
				width: 100%;
				@include border-radius(5px);
			}
		}
		.ct-banner-inner {
			position: relative;
			padding: 0 70px 75px 0;
		}
	}
	&.layout5 {
		.box-squares {
			position: absolute;
			&.squares1 {
				top: 0;
				right: 30px;
				width: 100px;
				height: 73px;
				span {
					position: absolute;
				}
				.item-square1 {
					height: 40px;
					width: 37px;
					background-color: #fff;
					top: 0;
					right: 25px;
				}
				.item-square2 {
					width: 26px;
					height: 27px;
					top: 14px;
					right: 0px;
					background-color: #faa80a;
				}
				.item-square3 {
					width: 35px;
					height: 33px;
					background-color: #48c8f2;
					bottom: 0;
					left: 0;
				}
			}
			&.squares2 {
				bottom: 0;
				left: 0;
				width: 175px;
				height: 220px;
				span {
					position: absolute;
				}
				.item-square1 {
					height: 55px;
					width: 58px;
					background-color: #fff;
					top: 0;
					right: 0px;
				}
				.item-square2 {
					width: 117px;
					height: 133px;
					bottom: 32px;
					left: 0;
					background-color: #faa80a;
				}
				.item-square3 {
					width: 35px;
					height: 33px;
					background-color: #48c8f2;
					bottom: 0;
					right: 23px;
				}
			}
		}
		.item-btn {
			position: absolute;
			bottom: 95px;
			right: 0;
		}
		.btn-link {
			line-height: 53px;
			padding-left: 32px;
			padding-right: 32px;
			background-color: #141414;
			font-size: 14px;
			font-weight: bold;
			color: #fff;
			display: inline-block;
			position: relative;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			margin-right: 10px;
			margin-bottom: 10px;
			&:before {
				content: "";
				width: 100%;
				height: 100%;
				background-color: transparent;
				border: 2px solid #faa80a;
				position: absolute;
				top: 10px;
				left: 10px;
				opacity: 1;
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
			}
			&:hover {
				color: #fff;
				text-decoration: none;
				margin-right: 0;
				margin-bottom: 0;
				&:before {
					top: 0;
					left: 0;
					border-color: #141414;
				}
			}
		}
		.item-feature {
			overflow: hidden;
			img {
				width: 100%;
				@include border-radius(150px 0 0 0 );
			}
		}
		.ct-banner-inner {
			position: relative;
			padding: 0 55px 48px 70px;
		}
	}
}
.banner-custom {
	.ct-banner {
		&.layout2 {
			.ct-banner-image {
				padding: 4px;
				position: relative;
				z-index: 1;
				&:before {
					@include background-horizontal(rgba(#ac003c, 0.9) 30%,  rgba(#f30030, 0.8) 80%);
					position: absolute;
					z-index: -1;
					display: block;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: "";
					-webkit-transform: rotateZ(90deg);
					transform: rotateZ(90deg);					
				}
			}
			.bg-bottom {
				@include background-horizontal(rgba(#ac003c, 0.9) 30%,  rgba(#e20033, 0.8) 80%);
			}
		}
	}
}
.ct-banner-poster {
	&.layout1 {
		.ct-circle {
			position: absolute;
			background: rgba(#fff, 0.15);
			display: block;
			@include border-radius(50%);
			z-index: -1;
			&.circle1 {
				width: 566px;
				height: 566px;
				top: -400px;
				left: -50px;
			}
			&.circle2 {
				width: 480px;
				height: 480px;
				right: -200px;
				top: -30px;
				animation: ct_nudge 7s linear infinite alternate;
			}
		}
		.ct-bg-image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -2;
			background-size: cover;
			background-position: center center;
		}
		.ct--title {
			color: #fff;
			font-size: 42px;
			font-weight: 500;
			margin-bottom: 22px;
			@media #{ $max-lg } {
				font-size: 35px;
			}
			@media #{ $max-xs } {
				font-size: 28px;
			}
			@media #{ $min-xl } {
				padding-right: 20%;
			}
		}
		.ct-video-button {
			width: 46px;
			height: 46px;
			line-height: 46px;
			@include border-radius(46px);
			background-color: $primary_color;
			text-align: center;
			color: #fff;
			font-size: 16px;
			display: inline-block;
			position: relative;
			z-index: 1;
			&:before {
				position: absolute;
				top: -8px;
				left: -8px;
				width: 62px;
				height: 62px;
				z-index: -1;
				display: block;
				content: "";
				border: 2px dashed #fff;
				@include border-radius(62px);
			}
			&:hover {
				&:before {
					-webkit-animation: spinAround 0.5s linear infinite;
					-moz-animation: spinAround 0.5s linear infinite;
					animation: spinAround 0.5s linear infinite;
				}
			}
		}
		.list-meta {
			@media #{ $min-md } {
				display: flex;
				align-items: center;
			}
		}
		.item-box {
			margin-right: 35px;
			@media #{ $max-sm } {
				margin-bottom: 35px;
				.ct-video-button {
					margin-left: 8px;
				}
			}
			.btn-primary {
				padding-left: 23px;
				padding-right: 23px;
			}
			label {
				display: block;
				color: #fff;
			}
			.btn-phone {
				font-size: 24px;
				font-weight: bold;
				color: #fff;
				&:hover {
					color: $primary_color;
				}
			}
			&:last-child {
				margin-right: 0;
			}
		}
		.box-content {
			@media #{ $min-lg } {
				width: 65%;
				min-width: 65%;
				max-width: 65%;
			}
			margin-bottom: 65px;
			margin-top: 55px;
		}
		.box-feature {
			text-align: center;
		}
		.ct-banner-inner {
			padding: 0 80px;
			z-index: 1;
			position: relative;
			overflow: hidden;
			@include border-radius(7px);
			@media #{ $max-md } {
				padding-left: 20px;
				padding-right: 20px;
			}
			@media #{ $min-lg } {
				display: flex;
			    justify-content: space-between;
			    align-items: end;
			}
		}
	}
	&.layout2 {
		.ct-bg-image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -2;
			background-size: cover;
			background-position: center center;
		}
		.ct--title {
			color: #fff;
			font-size: 42px;
			font-weight: 500;
			margin-bottom: 22px;
			@media #{ $max-lg } {
				font-size: 35px;
			}
			@media #{ $max-xs } {
				font-size: 28px;
			}
			@media #{ $min-xl } {
			    max-width: 50%;
			    margin-bottom: 0;
			}
		}
		.ct-video-button {
			width: 46px;
			height: 46px;
			line-height: 46px;
			@include border-radius(46px);
			background-color: #00d7a8;
			text-align: center;
			color: #fff;
			font-size: 16px;
			display: inline-block;
			position: relative;
			z-index: 1;
			&:before {
				position: absolute;
				top: -8px;
				left: -8px;
				width: 62px;
				height: 62px;
				z-index: -1;
				display: block;
				content: "";
				border: 2px dashed #fff;
				@include border-radius(62px);
			}
			&:hover {
				&:before {
					-webkit-animation: spinAround 0.5s linear infinite;
					-moz-animation: spinAround 0.5s linear infinite;
					animation: spinAround 0.5s linear infinite;
				}
			}
		}
		.item-box {
			margin-right: 35px;
			@media #{ $max-sm } {
				margin-bottom: 35px;
				.ct-video-button {
					margin-left: 8px;
				}
			}
			.btn-primary {
				padding-left: 23px;
				padding-right: 23px;
				background-color: #00d7a8;
				@include border-radius(5px);
			}
			label {
				display: block;
				color: #fff;
			}
			.btn-phone {
				font-size: 24px;
				font-weight: bold;
				color: #fff;
				&:hover {
					color: #00d7a8;
				}
			}
			&:last-child {
				margin-right: 0;
				padding-left: 30px;
				position: relative;
				&:before {
					position: absolute;
					top: 50%;
					@include transform(translateY(-50%));
					left: 0;
					width: 2px;
					height: 50px;
					content: "";
					background-color: #fff;
				}
			}
		}
		.box-meta {
			@media #{ $min-md } {
				display: flex;
			    align-items: center;
			}
		}
		.box-content {
			@media #{ $min-xl } {
				display: flex;
				align-items: center;
    			justify-content: space-between;
			}
		}
		.box-feature {
			text-align: center;
		}
		.ct-banner-inner {
			padding: 65px 40px;
			z-index: 1;
			position: relative;
			overflow: hidden;
			@include border-radius(7px);
			@media #{ $max-md } {
				padding: 35px 20px;
			}
			@media #{ $min-lg } {
				display: flex;
			    justify-content: space-between;
			    align-items: end;
			}
		}
	}
}
.banner-post-custom {
	.ct-banner-poster {
		&.layout1 {
			.list-meta {
				a {
					&.btn, &.ct-video-button {
						@include background-horizontal(#a8003d, #f30030);
					}
					&.btn-phone {
						&:hover {
							color: #f30030;
						}
					}
				}
			}
		}
	}
}