.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);}
  50.01% {transform: rotate(180deg);}
  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;}
  49.99% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}