/*practicalsolution > circle progressbar */	
	@keyframes fill1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(115deg);
  }
}
@keyframes fill2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(170deg);
  }
}
@keyframes fill3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(106deg);
  }
}
@keyframes fill4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes fill5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(104deg);
  }
}
@keyframes fill6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(37deg);
  }
}
@keyframes fill7 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes fill8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.progressBar {
  padding: 0 8%;
}
.circle-wrap {
  margin: 40px auto;
  width: 150px;
  height: 150px;
  background: #e6e2e7;
  border-radius: 50%;
}
.circle-wrap2 {
  margin: 40px auto;
  width: 150px;
  height: 150px;
  background: #eeeeee;
  border-radius: 50%;
}
.circle-wrap3 {
  margin: 40px auto;
  width: 150px;
  height: 150px;
  background: #eee;
  border-radius: 50%;
}
.circle-wrap4 {
  margin: 40px auto;
  width: 150px;
  height: 150px;
  background: #eee;
  border-radius: 50%;
}

.leftBox .progressBar h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 40px;
}
.rightBox .progressBar h3 {
  font-size: 18px;
  color: #000;
margin-bottom: 40px;
}

.circle-wrap .circle .mask,
.circle-wrap .circle #fill2 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap2 .circle .mask,
.circle-wrap2 .circle #fill1 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap3 .circle .mask,
.circle-wrap3 .circle #fill3 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap4 .circle .mask,
.circle-wrap4 .circle #fill4 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap2 .circle .mask,
.circle-wrap2 .circle #fill5 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap .circle .mask,
.circle-wrap .circle #fill6 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap3 .circle .mask,
.circle-wrap3 .circle #fill7 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.circle-wrap4 .circle .mask,
.circle-wrap4 .circle #fill8 {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap2 .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap3 .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap4 .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap .circle .mask #fill2 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #c89b4d;
}
.circle-wrap2 .circle .mask #fill1 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #aaaaaa;
}
.circle-wrap3 .circle .mask #fill3 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #aaaaaa;
}
.circle-wrap4 .circle .mask #fill4 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #c89b4d;
}
.circle-wrap2 .circle .mask #fill5 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #aaaaaa;
}
.circle-wrap .circle .mask #fill6 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #c89b4d;
}
.circle-wrap3 .circle .mask #fill7 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #aaaaaa;
}
.circle-wrap4 .circle .mask #fill8 {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #c89b4d;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle #fill2 {
  animation: fill2 ease-in-out 3s;
  transform: rotate(170deg);
}


.circle-wrap2 .circle .mask.full,
.circle-wrap2 .circle #fill1 {
  animation: fill1 ease-in-out 3s;
  transform: rotate(115deg);
}


.circle-wrap3 .circle .mask.full,
.circle-wrap3 .circle #fill3 {
  animation: fill3 ease-in-out 3s;
  transform: rotate(106deg);
}

.circle-wrap4 .circle .mask.full,
.circle-wrap4 .circle #fill4 {
  animation: fill4 ease-in-out 3s;
  transform: rotate(180deg);
}


/*.circle-wrap2 .circle .mask.full,
.circle-wrap2 .circle #fill5 {
  animation: fill5 ease-in-out 3s;
  transform: rotate(93deg);
}*/


.circle-wrap .circle .mask.full, 
.circle-wrap .circle #fill6 {
    animation: fill6 ease-in-out 3s;
    transform: rotate(37deg);
}



.circle-wrap3 .circle .mask.full,
.circle-wrap3 .circle #fill7 {
  animation: fill7 ease-in-out 3s;
  transform: rotate(90deg);
}

.circle-wrap4 .circle .mask.full,
.circle-wrap4 .circle #fill8 {
  animation: fill8 ease-in-out 3s;
  transform: rotate(180deg);
}


.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #3e4754;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
  color: #fff;
}


.circle-wrap2 .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #3e4754;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
  color: #fff;
}

.circle-wrap3 .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
  color: #acacac;
}
.circle-wrap4 .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
  color: #acacac;
}
/*jx new progress animation*/
.c-sat-left .circle .mask.full, .c-sat-left .circle #fill5 {
    animation: fill1 ease-in-out 3s;
    transform: rotate(115deg);
}

.c-sat-right .circle .mask.full, .c-sat-right #fill2{
  animation: fill2 ease-in-out 3s!important;
    transform: rotate(170deg);
}

.s-time-left .circle .mask.full,
.s-time-left #fill5{
  animation: fill5 ease-in-out 3s;
    transform: rotate(104deg);
}
.s-time-right .circle .mask.full,
.s-time-right #fill6{
animation: fill6 ease-in-out 3s;
    transform: rotate(37deg);
}
/*jx-practical result new css*/
.practicalResultCon .carousel-control{
  position:absolute;
  top:40%;
}

.practicalResultCon .right.carousel-control {
    right: -5%;
    width: 25px !important  
}
.practicalResultCon .left.carousel-control{
    width: 25px !important;
    left: -5%;
}
@media (max-width:850px){
  .practicalResultCon .right.carousel-control{
    right:10px;
  }
  .practicalResultCon .left.carousel-control{
    left:10px;
  }
 #practicalResultSlider .item{
    height: 795px;
    overflow: hidden;
  }
  .practicalResultCon .carousel-control {
    top: 50%;
}
}

@media (max-width:480px){
.circle-wrap, .circle-wrap2, .circle-wrap3, .circle-wrap4{
    margin:10px auto!important;
  }
  .practicalText p {
    line-height:initial!important;
  }
  .leftBox .practicalText h2, .rightBox .practicalText h2{
    margin:10px 0!important;
    font-size:24px!important;
  }
}