.ct-tabs .ct-grid {
	.grid-item {
		position: static !important;
	}
	.ct-grid-masonry {
		height: auto !important;
	}
}
.ct-tabs1 {
	.ct-tab-content {
        display: none;
    }
    .ct-heading.item-st-hexagon {
    	margin-left: -17px;
    	margin-bottom: 3px;
    	&:before {
    		width: inherit;
    		right: 0;
    	}
    }
    .ct-tabs-title {
    	display: flex;
    	margin-bottom: 30px;
    	@media #{$max-lg} {
    		margin-right: -6px;
    	}
    	@media #{$max-sm} {
    		flex-wrap: wrap;
    	}
    	.ct-tab-title {
    		font-size: 24px;
    		color: #fff;
    		background-color: #353535;
    		@include font-family-heading($heading_default_font);
    		padding: 0 22px;
    		line-height: 52px;
    		margin-right: 10px;
    		margin-bottom: 10px;
    		position: relative;
    		z-index: 1;
    		cursor: pointer;
    		width: 33.33%;
    		text-align: center;
    		@media #{$max-sm} {
    			width: 100%;
    			margin-right: 0;
    			margin-bottom: 15px;
    		}
    		&:before {
    			content: '';
    			z-index: -1;
    			position: absolute;
    			top: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
    			opacity: 0;
    			@include transition(.3s cubic-bezier(.24,.74,.58,1));
    		}
    		&:after {
    			@include transition(.3s cubic-bezier(.24,.74,.58,1));
    			content: '';
    			position: absolute;
    			bottom: -10px;
    			right: 0;
    			border-width: 5px;
    			border-style: solid;
    			border-color: $gradient_color_to $gradient_color_to transparent transparent;
    			opacity: 0;
    		}
    		&:hover, &.active {
    			color: $secondary_color;
    			&:before, &:after {
    				opacity: 1;
    			}
    		}
    		@media #{$max-lg} {
    			font-size: 16px;
    			padding: 0 10px;
    			line-height: 48px;
    		}
    	}
    }
    .ct-tabs-content {
    	font-size: 17px;
		color: #a5a4a4;
		line-height: 1.76;
		ul {
			margin-bottom: 0;
			list-style: none;
			color: #fff;
			font-size: 16px;
			margin-top: 28px;
			li {
				padding-left: 40px;
				position: relative;
				&:before {
					content: "\f112";
					position: absolute;
					top: -2px;
					left: 0;
					line-height: 1;
					font-size: 34px;
					@extend .text-gradient;
					font-family: Flaticon;
				}
				+ li {
					margin-top: 12px;
				}
			}
		}
    }
    &.ct-tab-boxed {
    	padding: 60px 60px 82px 60px;
		background-color: #161616;
		position: relative;
		@media #{$max-lg} {
			padding: 40px 20px 60px 30px;
		}
		@media #{$max-sm} {
			padding-left: 20px;
		}
    }
}

.ct-tabs1.content-type-template .ct-tabs-content, .ct-tabs2.content-type-template .ct-tabs-content {
	margin: 0 -15px;
}

.ct-tabs2 {
	.ct-tabs-title {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 62px;
		@media #{$max-md} {
			flex-wrap: wrap;
		}
		.ct-tab-title {
			font-size: 20px;
			color: #666;
			font-weight: 700;
			cursor: pointer;
			background-color: #f4f4f4;
			padding: 0 20px;
			line-height: 114px;
			width: 50%;
			text-align: center;
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			@include transition(.2s cubic-bezier(.24,.74,.58,1));
			@media #{$max-sm} {
				width: 100%;
				line-height: 90px;
				font-size: 18px;
			}
			i {
				font-size: 32px;
				color: #000000;
				margin-right: 8px;
				@include transition(.2s cubic-bezier(.24,.74,.58,1));
				&.flaticon-support {
					font-size: 36px;
				}
			}
			svg {
				position: absolute;
				bottom: -40px;
				right: 0;
				fill: $gradient_color_to;
				@include transition(.2s cubic-bezier(.24,.74,.58,1));
				opacity: 0;
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				@include background-horizontal-right($gradient_color_from, $gradient_color_to);
				@include transition(.2s cubic-bezier(.24,.74,.58,1));
				opacity: 0;
			}
			&.active, &:hover {
				color: #fff;
				z-index: 99;
				i {
					color: inherit;
				}
				&:before, svg {
					opacity: 1;
				}
			}
		}
	}
	.ct-tab-content {
        display: none;
    }
}

.ct-tabs3 {
	overflow: hidden;
	.ct-tabs--main {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
		> div {
			width: 50%;
			padding: 0 15px;
			@media #{$max-sm} {
				width: 100% !important;
			}
		}
		.ct-tabs-content {
			padding-right: 0;
			@media #{$max-lg} {
				width: 60%;
			}
			@media #{$max-sm} {
				padding-left: 0;
				margin-top: 60px;
			}
		}
		@media #{$max-lg} {
			.ct-tabs-title {
				width: 40%;
			}
		}
	}
	.ct-tabs-title {
		.ct-tabs-title-inner {
			display: inline-block;
			margin-bottom: 38px;
		}
		.ct-tab-title {
			display: flex;
			align-items: center;
			cursor: pointer;
			font-weight: 600;
			position: relative;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			@media #{$max-lg} {
				font-size: 20px;
			}
			&:before {
				content: '';
				width: 24px;
				height: 3px;
				@include background-horizontal-right($gradient_color_from, $gradient_color_to);
				position: absolute;
				left: -15px;
				top: 50%;
				@include transform(translate(0, -50%));
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
				opacity: 0;
			}
			i {
				margin-right: 12px;
				color: $primary_color;
			}
			+ .ct-tab-title {
				margin-top: 10px;
			}
			&.active, &:hover {
				padding-left: 34px;
				@extend .text-gradient;
				&:before {
					opacity: 1;
					left: 0;
					-webkit-transition-delay: 0.06s;
			        -moz-transition-delay: 0.06s;
			        transition-delay: 0.06s;
				}
			}
		}
	}
	.ct-tab-button {
		a {
			padding: 0 22px;
			background-color: #000e52;
			background-image: none;
			&:hover, &:focus {
				background-color: $primary_color;
			}
		}
	}
	.ct-tab-content {
        display: none;
    }
    .ct-heading {
    	.item--title {
    		font-size: 36px;
    		line-height: 1.27777777;
    		margin-bottom: 35px;
    	}
    	.item--description {
    		margin-bottom: 24px;
    	}
    }
}