/*!
  * ep - enhance your progress bars with minimal effort
  *
  * https://jh3y.github.io/ep
  * @license MIT
  * @author jh3y
  * @version 2.0.6
  * (c) 2017
*/
@-webkit-keyframes ep-indeterminate {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.6; }
  100% {
    opacity: 0; } }
@keyframes ep-indeterminate {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.6; }
  100% {
    opacity: 0; } }

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  height: 6px;
  opacity: 0.6;
  position: relative;
  transition: width 0.25s ease 0s, visibility 0.5s ease 0s;
  width: 0;
  background: #3498db;
  color: #3498db; }
  progress::-ms-fill {
    border: 0; }
  progress::-moz-progress-bar {
    background: #3498db; }
  progress::-webkit-progress-bar {
    background: #3498db; }
  progress::-webkit-progress-value {
    background: #3498db; }
  progress:indeterminate {
    -webkit-animation: ep-indeterminate 2s infinite linear;
            animation: ep-indeterminate 2s infinite linear;
    background: #3498db;
    color: transparent;
    width: 100%; }
    progress:indeterminate::-moz-progress-bar {
      background: #3498db; }
    progress:indeterminate::-webkit-progress-bar {
      background: #3498db; }
  progress[value='1'] {
    width: 1%; }
  progress[value='2'] {
    width: 2%; }
  progress[value='3'] {
    width: 3%; }
  progress[value='4'] {
    width: 4%; }
  progress[value='5'] {
    width: 5%; }
  progress[value='6'] {
    width: 6%; }
  progress[value='7'] {
    width: 7%; }
  progress[value='8'] {
    width: 8%; }
  progress[value='9'] {
    width: 9%; }
  progress[value='10'] {
    width: 10%; }
  progress[value='11'] {
    width: 11%; }
  progress[value='12'] {
    width: 12%; }
  progress[value='13'] {
    width: 13%; }
  progress[value='14'] {
    width: 14%; }
  progress[value='15'] {
    width: 15%; }
  progress[value='16'] {
    width: 16%; }
  progress[value='17'] {
    width: 17%; }
  progress[value='18'] {
    width: 18%; }
  progress[value='19'] {
    width: 19%; }
  progress[value='20'] {
    width: 20%; }
  progress[value='21'] {
    width: 21%; }
  progress[value='22'] {
    width: 22%; }
  progress[value='23'] {
    width: 23%; }
  progress[value='24'] {
    width: 24%; }
  progress[value='25'] {
    width: 25%; }
  progress[value='26'] {
    width: 26%; }
  progress[value='27'] {
    width: 27%; }
  progress[value='28'] {
    width: 28%; }
  progress[value='29'] {
    width: 29%; }
  progress[value='30'] {
    width: 30%; }
  progress[value='31'] {
    width: 31%; }
  progress[value='32'] {
    width: 32%; }
  progress[value='33'] {
    width: 33%; }
  progress[value='34'] {
    width: 34%; }
  progress[value='35'] {
    width: 35%; }
  progress[value='36'] {
    width: 36%; }
  progress[value='37'] {
    width: 37%; }
  progress[value='38'] {
    width: 38%; }
  progress[value='39'] {
    width: 39%; }
  progress[value='40'] {
    width: 40%; }
  progress[value='41'] {
    width: 41%; }
  progress[value='42'] {
    width: 42%; }
  progress[value='43'] {
    width: 43%; }
  progress[value='44'] {
    width: 44%; }
  progress[value='45'] {
    width: 45%; }
  progress[value='46'] {
    width: 46%; }
  progress[value='47'] {
    width: 47%; }
  progress[value='48'] {
    width: 48%; }
  progress[value='49'] {
    width: 49%; }
  progress[value='50'] {
    width: 50%; }
  progress[value='51'] {
    width: 51%; }
  progress[value='52'] {
    width: 52%; }
  progress[value='53'] {
    width: 53%; }
  progress[value='54'] {
    width: 54%; }
  progress[value='55'] {
    width: 55%; }
  progress[value='56'] {
    width: 56%; }
  progress[value='57'] {
    width: 57%; }
  progress[value='58'] {
    width: 58%; }
  progress[value='59'] {
    width: 59%; }
  progress[value='60'] {
    width: 60%; }
  progress[value='61'] {
    width: 61%; }
  progress[value='62'] {
    width: 62%; }
  progress[value='63'] {
    width: 63%; }
  progress[value='64'] {
    width: 64%; }
  progress[value='65'] {
    width: 65%; }
  progress[value='66'] {
    width: 66%; }
  progress[value='67'] {
    width: 67%; }
  progress[value='68'] {
    width: 68%; }
  progress[value='69'] {
    width: 69%; }
  progress[value='70'] {
    width: 70%; }
  progress[value='71'] {
    width: 71%; }
  progress[value='72'] {
    width: 72%; }
  progress[value='73'] {
    width: 73%; }
  progress[value='74'] {
    width: 74%; }
  progress[value='75'] {
    width: 75%; }
  progress[value='76'] {
    width: 76%; }
  progress[value='77'] {
    width: 77%; }
  progress[value='78'] {
    width: 78%; }
  progress[value='79'] {
    width: 79%; }
  progress[value='80'] {
    width: 80%; }
  progress[value='81'] {
    width: 81%; }
  progress[value='82'] {
    width: 82%; }
  progress[value='83'] {
    width: 83%; }
  progress[value='84'] {
    width: 84%; }
  progress[value='85'] {
    width: 85%; }
  progress[value='86'] {
    width: 86%; }
  progress[value='87'] {
    width: 87%; }
  progress[value='88'] {
    width: 88%; }
  progress[value='89'] {
    width: 89%; }
  progress[value='90'] {
    width: 90%; }
  progress[value='91'] {
    width: 91%; }
  progress[value='92'] {
    width: 92%; }
  progress[value='93'] {
    width: 93%; }
  progress[value='94'] {
    width: 94%; }
  progress[value='95'] {
    width: 95%; }
  progress[value='96'] {
    width: 96%; }
  progress[value='97'] {
    width: 97%; }
  progress[value='98'] {
    width: 98%; }
  progress[value='99'] {
    width: 99%; }
  progress[value='100'] {
    width: 100%; }

@-webkit-keyframes ep-mock {
  to {
    width: 100%; } }

@keyframes ep-mock {
  to {
    width: 100%; } }

progress[data-mock] {
  -webkit-animation-name: ep-mock;
          animation-name: ep-mock; }

progress[data-mock='1'] {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  width: 0; }

progress[data-mock] {
  -webkit-animation-name: ep-mock;
          animation-name: ep-mock; }

progress[data-mock='2'] {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  width: 0; }

progress[data-mock] {
  -webkit-animation-name: ep-mock;
          animation-name: ep-mock; }

progress[data-mock='3'] {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  width: 0; }

progress[data-mock] {
  -webkit-animation-name: ep-mock;
          animation-name: ep-mock; }

progress[data-mock='4'] {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  width: 0; }

@-webkit-keyframes ep-staggered-mock {
  0% {
    width: 0%; }
  10% {
    width: 10%; }
  20% {
    width: 10%; }
  30% {
    width: 30%; }
  40% {
    width: 30%; }
  50% {
    width: 30%; }
  60% {
    width: 50%; }
  70% {
    width: 70%; }
  80% {
    width: 70%; }
  90% {
    width: 90%; }
  100% {
    width: 100%; } }

@keyframes ep-staggered-mock {
  0% {
    width: 0%; }
  10% {
    width: 10%; }
  20% {
    width: 10%; }
  30% {
    width: 30%; }
  40% {
    width: 30%; }
  50% {
    width: 30%; }
  60% {
    width: 50%; }
  70% {
    width: 70%; }
  80% {
    width: 70%; }
  90% {
    width: 90%; }
  100% {
    width: 100%; } }

progress[data-staggered-mock] {
  -webkit-animation-name: ep-staggered-mock;
          animation-name: ep-staggered-mock; }

progress[data-staggered-mock='1'] {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  width: 0; }

progress[data-staggered-mock] {
  -webkit-animation-name: ep-staggered-mock;
          animation-name: ep-staggered-mock; }

progress[data-staggered-mock='2'] {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  width: 0; }

progress[data-staggered-mock] {
  -webkit-animation-name: ep-staggered-mock;
          animation-name: ep-staggered-mock; }

progress[data-staggered-mock='3'] {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  width: 0; }

progress[data-staggered-mock] {
  -webkit-animation-name: ep-staggered-mock;
          animation-name: ep-staggered-mock; }

progress[data-staggered-mock='4'] {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  width: 0; }

@-webkit-keyframes ep-timer {
  from {
    width: 100%; }
  to {
    width: 0; } }

@keyframes ep-timer {
  from {
    width: 100%; }
  to {
    width: 0; } }

progress[data-timer] {
  -webkit-animation-name: ep-timer;
          animation-name: ep-timer; }

progress[data-timer='1'] {
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }

progress[data-timer] {
  -webkit-animation-name: ep-timer;
          animation-name: ep-timer; }

progress[data-timer='2'] {
  -webkit-animation-duration: 2s;
          animation-duration: 2s; }

progress[data-timer] {
  -webkit-animation-name: ep-timer;
          animation-name: ep-timer; }

progress[data-timer='3'] {
  -webkit-animation-duration: 3s;
          animation-duration: 3s; }

progress[data-timer] {
  -webkit-animation-name: ep-timer;
          animation-name: ep-timer; }

progress[data-timer='4'] {
  -webkit-animation-duration: 4s;
          animation-duration: 4s; }

@-webkit-keyframes ep-simulate {
  from {
    width: 0; } }

@keyframes ep-simulate {
  from {
    width: 0; } }

progress[data-simulate] {
  -webkit-animation: ep-simulate 30s;
          animation: ep-simulate 30s;
  -webkit-animation-timing-function: steps(30);
          animation-timing-function: steps(30);
  width: 99%; }

progress[data-complete] {
  -webkit-animation: none;
          animation: none;
  visibility: hidden;
  width: 100%; }

progress[data-pause] {
  -webkit-animation-play-state: paused;
          animation-play-state: paused; }

progress.ep--top {
  left: 0;
  position: absolute;
  top: 0; }

progress.ep--bottom {
  bottom: 0;
  left: 0;
  position: absolute; }

progress.ep--fixed {
  position: fixed; }

progress.ep--spread {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

progress.ep--indeterminate {
  -webkit-animation: ep-indeterminate 2s infinite linear;
          animation: ep-indeterminate 2s infinite linear;
  background: #3498db;
  color: transparent;
  width: 100%; }
  progress.ep--indeterminate::-moz-progress-bar {
    background: #3498db; }
  progress.ep--indeterminate::-webkit-progress-bar {
    background: #3498db; }