.tc-circle-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

.tc-circle-halfclip {
	width: 50%;
	height: 100%;
	right: 0px;
	position: absolute;
	overflow: hidden;
	transform-origin: left center;
}

.slick-current .tc-circle-container .tc-circle-halfclip {
	animation: cliprotate 3.5s 1;
	transform: rotate(180deg);
}

@keyframes cliprotate {
	0% {
		transform: rotate(0deg);
	}
	
	50% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(180deg);
	}
}

.halfcircle {
	box-sizing: border-box;
	height: 100%;
	right: 0px;
	position: absolute;
	border: solid 2px transparent;
	border-top-color: #3db3a2;
	border-left-color: #3db3a2;
	border-radius: 50%;
}

.halfcircle.tc-circle-clipped {
	width: 200%;
	transform: rotate(-45deg);
}

.slick-current .tc-circle-container .halfcircle.tc-circle-clipped {
	transform: rotate(135deg);
	animation: rotate 1.75s linear 2;
}

@keyframes rotate {
	0% {
		transform: rotate(-45deg);
	}
	
	100% {
		transform: rotate(135deg);
	}
}

.halfcircle.tc-circle-fixed {
	width: 100%;
	transform: rotate(135deg);
	opacity: 0;
}

.slick-current .tc-circle-container .halfcircle.tc-circle-fixed {
	opacity: 1;
	animation: showfixed 3.5s 1;
}

@keyframes showfixed {
	0% {
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		opacity: 1;
	}
}