.ct-slick {
	.slick-dots {
		top: 90%;
		margin-bottom: 40px !important;

		li {
			margin: 0;
		}
	}
}

.ct-slick-arrow {
    position: absolute;
    top: 50%;
    color: @white-color;

    cursor: pointer;
    font-size: 2.4rem !important;
	font-weight: 900 !important;

    transform: translateY(-50%);
    z-index: 1;
}

.slick-left {
	left: 5%;
}

.slick-right {
	right: 5%;
}

.ct-slick-slide {
	position: relative;
	height: 55rem !important;
	background-size: cover;

	.ct-color-mask {
		position: absolute;
		height: 100%;
		width: 100%;
		background: linear-gradient( 45deg, #f6f163 0%,#4eb7a7 100% );
		opacity: .8;
	}

	.ct-slide-content {
		color: @white-color;
		width: 75%;
		text-align: center;

		position: absolute;
		top: 50%;
		left: 50%;

		transform: translate( -50%, -50% );

		h1 {
			font-size: 55px;
			font-weight: 600;
			margin-bottom: 22px;
		}

		.description {
			font-size: 1.8rem;
			line-height: 1.4;
		}
	}
}

.slider-button-1,
.slider-button-2 {
	position: relative;

	font-weight: 500;
	display: inline-block;
	border: 2px solid @white-color;
	margin-top: @font-size;
	padding: @font-size/2 @font-size*2;
	border-radius: 50px;
	box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.16);
	cursor: pointer;

	&::after {
		content: "\f0da";
		font-family: 'FontAwesome';
		font-size: @font-size - .2;
		font-weight: 400;

		opacity: 1;
		margin-left: 5px;
		transition:  all .1s ease-in;
	}
}

.slider-button-1 {
	margin-right: @font-size/2;
	background-color: @white-color;
	color: @primary-color;
	transition: all .2s ease;

	&:hover {
		background-color: transparent;
		color: @white-color;
	}
}

.slider-button-2 {
	color: @white-color;

	&:hover {
		background-color: @white-color;
		color: @primary-color;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.ct-slick-slide {
		.ct-slide-content {
			width: 80%;
		}
	}
}

.slick-dotted.slick-slider {
	margin-bottom: 0;
}