@charset "utf-8";


/*lft_in*/
li.active-slide .txt_sldr{

  animation: slid_h linear 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: slid_h linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: slid_h linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: slid_h linear 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: slid_h linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes slid_h{
  0% {
    opacity:0;
    transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes slid_h{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes slid_h {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes slid_h {
  0% {
    opacity:0;
    -o-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes slid_h {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -ms-transform:  translate(0px,0px)  ;
  }
}

li.active-slide .txt_sldr h4{

  animation: slid_h linear 2.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: slid_h linear 2.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: slid_h linear 2.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: slid_h linear 2.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: slid_h linear 2.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes slid_h{
  0% {
    opacity:0;
    transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes slid_h{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes slid_h {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes slid_h {
  0% {
    opacity:0;
    -o-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes slid_h {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -ms-transform:  translate(0px,0px)  ;
  }
}
/**/
li.active-slide .txt_sldr p{

  animation: slid_p linear 2.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: slid_p linear 2.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: slid_p linear 2.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: slid_p linear 2.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: slid_p linear 2.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes slid_p{
  0% {
    opacity:0;
    transform:  translate(0px,70px)  ;
  }
  50% {
    opacity:0;
    transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes slid_p{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,70px)  ;
  }
  50% {
    opacity:0;
    -moz-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes slid_p {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,70px)  ;
  }
  50% {
    opacity:0;
    -webkit-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes slid_p {
  0% {
    opacity:0;
    -o-transform:  translate(0px,70px)  ;
  }
  50% {
    opacity:0;
    -o-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes slid_p {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,70px)  ;
  }
  50% {
    opacity:0;
    -ms-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1.00;
    -ms-transform:  translate(0px,0px)  ;
  }
}


.fade {
    opacity: 1;
}
[data-san=fade] {
    opacity: 0;
    transition-duration: 2s;
}
/* SlideLeft Animation */
[data-san=slideLeft] {
    opacity: 0;
    transform: translateX(150px);
    transition-duration: 1s;
}
.slideLeft {
    opacity: 1;
    transform: translateX(0)
}

/* SlideRight Animation */
[data-san=slideRight] {
    opacity: 0;
    transform: translateX(-80px);
    transition-duration: 1s;
}
.slideRight {
    opacity: 1;
    transform: translateX(0)
}

/* SlideTop Animation */
[data-san=slideTop] {
    opacity: 0;
    transform: translateY(100px);
    transition-duration: 1s;
}
.slideTop {
    opacity: 1;
    transform: translateY(0)
}


/* Delay */
[data-san-delay="200"] {
    transition-delay: .2s;
} 
[data-san-delay="400"] {
    transition-delay: .4s;
} 
[data-san-delay="600"] {
    transition-delay: .6s;
} 
.fade:not(.show) {
    opacity: 1;
}





.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}
.tottal-saving .circular-chart {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 300px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 4.5;
}

.circle {
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  animation: progress 4s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.red .circle {
  stroke: #F00;
  display:none;
}
.slideRight .circular-chart.red .circle{
	display:inherit;
}

.circular-chart.meganta .circle {
  stroke: #fe3057;
  display:none;
}
.slideLeft .circular-chart.meganta .circle{
	display:inherit;
}

.circular-chart.yellow .circle {
  stroke: #fdcd2b;
  display:none;
}

.slideRight .circular-chart.yellow .circle{
	display:inherit;
}

.circular-chart.orange .circle {
  stroke: #f58434;
  display:none;
}
.circular-chart.green .circle {
  stroke: #fdcd2b;
  display:none;
}
.slideLeft .circular-chart.green .circle{
	display:inherit;
	
}
.slideRight .circular-chart.orange .circle{
	display:inherit;
}






.percentage {
  fill: #FFF;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 10px;
  text-anchor: middle;
}