/*------------------------------------------------------------------
[PROGRESS_BARS.CSS - Progress bars shortcode styles]
[Table of contents]

1. Shared styles, layout
2. Progress bars colors / variations
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
	1. Shared styles, layout
-------------------------------------------------------------------*/
.progress-bar {
  margin-bottom: 35px;
}
.progress-bar .progress-bar-title {
  color: #28282c;
  font-size: 18px;
  line-height: 1.35em;
  font-family: Roboto Slab;
  font-weight: bold;
  margin-bottom: 18px;
}
.progress-bar .progress-bar-value-inner {
  background-color: #dfdfe0;
  height: 6px;
  position: relative;
}
.progress-bar .progress-bar-value-inner .value {
  height: 10px;
  position: absolute;
  margin-top: -2px;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
.progress-bar .progress-bar-value-inner .value:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  right: 0;
}
.progress-bar .progress-bar-value-inner .value:after {
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border: 5px solid #ffffff;
}
/*------------------------------------------------------------------
	2. Progress bars colors / variations
-------------------------------------------------------------------*/
.progress-bar.dark-style .progress-bar-title {
  color: #ffffff;
}
.progress-bar.dark-style .progress-bar-value-inner {
  background-color: rgba(223, 223, 224, 0.1);
}
.progress-bar.color-turquoise .value {
  background: #1cbbb4;
  background: #179a94;
  background: -moz-linear-gradient(left, #127874 0%, #1cbbb4 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #127874), color-stop(100%, #1cbbb4));
  background: -webkit-linear-gradient(left, #127874 0%, #1cbbb4 100%);
  background: -o-linear-gradient(left, #127874 0%, #1cbbb4 100%);
  background: -ms-linear-gradient(top, #127874 0%, #1cbbb4 100%);
  background: linear-gradient(to right, #127874 0%, #1cbbb4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#127874', endColorstr='#1cbbb4', GradientType=1);
}
.progress-bar.color-turquoise .value:after {
  background: #1cbbb4;
}
.progress-bar.color-orange .value {
  background: #ff9e11;
  background: #e18909;
  background: -moz-linear-gradient(left, #c37400 0%, #ff9e11 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #c37400), color-stop(100%, #ff9e11));
  background: -webkit-linear-gradient(left, #c37400 0%, #ff9e11 100%);
  background: -o-linear-gradient(left, #c37400 0%, #ff9e11 100%);
  background: -ms-linear-gradient(top, #c37400 0%, #ff9e11 100%);
  background: linear-gradient(to right, #c37400 0%, #ff9e11 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c37400', endColorstr='#ff9e11', GradientType=1);
}
.progress-bar.color-orange .value:after {
  background: #ff9e11;
}
.progress-bar.color-green .value {
  background: #39b54a;
  background: #30983e;
  background: -moz-linear-gradient(left, #277b32 0%, #39b54a 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #277b32), color-stop(100%, #39b54a));
  background: -webkit-linear-gradient(left, #277b32 0%, #39b54a 100%);
  background: -o-linear-gradient(left, #277b32 0%, #39b54a 100%);
  background: -ms-linear-gradient(top, #277b32 0%, #39b54a 100%);
  background: linear-gradient(to right, #277b32 0%, #39b54a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#277b32', endColorstr='#39b54a', GradientType=1);
}
.progress-bar.color-green .value:after {
  background: #39b54a;
}
.progress-bar.color-purple .value {
  background: #6739b6;
  background: #573099;
  background: -moz-linear-gradient(left, #46277c 0%, #6739b6 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #46277c), color-stop(100%, #6739b6));
  background: -webkit-linear-gradient(left, #46277c 0%, #6739b6 100%);
  background: -o-linear-gradient(left, #46277c 0%, #6739b6 100%);
  background: -ms-linear-gradient(top, #46277c 0%, #6739b6 100%);
  background: linear-gradient(to right, #46277c 0%, #6739b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46277c', endColorstr='#6739b6', GradientType=1);
}
.progress-bar.color-purple .value:after {
  background: #6739b6;
}
.progress-bar.color-red .value {
  background: #f04e4e;
  background: #e73030;
  background: -moz-linear-gradient(left, #df1313 0%, #f04e4e 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #df1313), color-stop(100%, #f04e4e));
  background: -webkit-linear-gradient(left, #df1313 0%, #f04e4e 100%);
  background: -o-linear-gradient(left, #df1313 0%, #f04e4e 100%);
  background: -ms-linear-gradient(top, #df1313 0%, #f04e4e 100%);
  background: linear-gradient(to right, #df1313 0%, #f04e4e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#df1313', endColorstr='#f04e4e', GradientType=1);
}
.progress-bar.color-red .value:after {
  background: #f04e4e;
}
.progress-bar.color-blue .value {
  background: #00bff3;
  background: #00a1cd;
  background: -moz-linear-gradient(left, #0083a6 0%, #00bff3 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0083a6), color-stop(100%, #00bff3));
  background: -webkit-linear-gradient(left, #0083a6 0%, #00bff3 100%);
  background: -o-linear-gradient(left, #0083a6 0%, #00bff3 100%);
  background: -ms-linear-gradient(top, #0083a6 0%, #00bff3 100%);
  background: linear-gradient(to right, #0083a6 0%, #00bff3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0083a6', endColorstr='#00bff3', GradientType=1);
}
.progress-bar.color-blue .value:after {
  background: #00bff3;
}