.no-overflow {
  /*overflow: hidden;*/
}
.columns{
  /*position:relative;*/
}
.hero-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 550px;
  position: relative;
  width: 100%;
  transform: scale(1.1,1.1); transform-origin: 50% 0%;
}
.hero-text {
  position: absolute;
  margin:20px auto;
  top: 0;
  left: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif; 
  font-size: 40px;
  color:#333; 
  width: 100%;
}



.slick-slider { /*overflow: hidden; */}
.slick-slider div.slick-active .hero-image {
  -webkit-animation: myMove 8s 1 ease-in-out;
  -moz-animation: myMove 8s 1 ease-in-out;
  -o-animation: myMove 8s 1 ease-in-out;
  -ms-animation: myMove 8s 1 ease-in-out;
  animation: myMove 8s 1 ease-in-out;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}


@keyframes myMove {
  from { transform: scale(1.0,1.0); transform-origin: 50% 50%; }
  to { transform: scale(1.1,1.1); transform-origin: 50% 0%; }
}
@-webkit-keyframes myMove {
  from { -webkit-transform: scale(1.0,1.0); -webkit-transform-origin: 50% 50%; }
  to { -webkit-transform: scale(1.1,1.1); -webkit-transform-origin: 50% 0%;  }
}
@-o-keyframes myMove {
  from { -o-transform: scale(1.0,1.0); -o-transform-origin: 50% 50%; }
  to { -o-transform: scale(1.1,1.1); -o-transform-origin: 50% 0%;  }
}
@-moz-keyframes myMove {
  from { -moz-transform: scale(1.0,1.0); -moz-transform-origin: 50% 50%; }
  to { -moz-transform: scale(1.1,1.1); -moz-transform-origin: 50% 0%; }
}
@-ms-keyframes myMove {
  from { -ms-transform: scale(1.0,1.0); -ms-transform-origin: 50% 50%; }
  to { -ms-transform: scale(1.1,1.1); -ms-transform-origin: 50% 0%; }
}



@keyframes upDiv {
  0% { transform: translate(0px, 100px); }
  100%{ transform: translate(0px, 0px);  }
}









body{
   /*background-color:#efefef;*/
}






.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 10px solid #999;
  border-radius: 100px;
  line-height: 50px;
}




.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.p21count{
	color:#21a7de;
	font-weight: bold;
	font-size: 40px;
}
.p21outer {
  fill: transparent;
  stroke: #21a7de;
  stroke-width: 10;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart:hover .p21outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}

.chart[data-percent='64'] .p21outer_active{
  stroke-dashoffset: 193;
  -webkit-animation: show64 4s;
  animation: show64 4s;
}

.chart[data-percent='70'] .p21outer_active{
  stroke-dashoffset: 160;
  -webkit-animation: show70 4s;
  animation: show70 4s;
}

.chart[data-percent='35'] .p21outer_active{
  stroke-dashoffset: 347;
  -webkit-animation: show35 4s;
  animation: show35 4s;
}



@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show64 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 193;
  }
}

@keyframes show64 {
  from {
    stroke-dashoffset: 537;
   
  }
  
  to {
    stroke-dashoffset: 193;
    
  }
}

@-webkit-keyframes show70 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes show70 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 160;
  }
}

@-webkit-keyframes show35 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 347;
  }
}

@keyframes show35 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 347;
  }
}