.banner{
	width:100%;
}

.banner .text-slider, .banner .image-slider {
    height: 164px;
    float: left;
    overflow: hidden;
}

  .hp-circle-outer.active .leftcircle{ 
    	-webkit-animation: circleProgressLoad_left 5s linear;
        animation: circleProgressLoad_left 5s linear;
  }
  .hp-circle-outer.active .rightcircle{
    	-webkit-animation: circleProgressLoad_right 5s linear;
        animation: circleProgressLoad_right 5s linear;
  }
  @keyframes circleProgressLoad_right{
    0%{
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
	}
    50%,100%{
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);

	}
  }
  @keyframes circleProgressLoad_left{
    0%,50%{
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
	}

    100%{
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
	}
 }

.hp-circle-outer.active .circle-left{
    animation: left-animation 5s linear;
}

.hp-circle-outer.active .circle-right{
    animation: right-animation 5s linear;
}


@keyframes circle-animation {
    0%{clip:rect(0px,28px,28px,14px);}
    100%{clip: auto;}
}

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

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