/* 
SETTINGS
If you need the loader go faster or slower, this is the place to change. Don't forget to update 'time' in the javascript
*/
.loader-container {
    height: 6px;
    max-width: 600px;
    width: 80%;
    top: 50%;
    left: 0px;
    margin-top: -3px;
    margin-left: -300px;
    background-color: transparent;
    background-image: -webkit-linear-gradient(left, #ff6a00, #ff6a00);
    background-image: -moz-linear-gradient(left, #ff6a00, #ff6a00);
    background-image: -o-linear-gradient(left, #ff6a00, #ff6a00);
    background-image: -ms-linear-gradient(left, #ff6a00, #ff6a00);
    background-image: linear-gradient(left, #ff6a00, #ff6a00);
    box-shadow: inset 0 -2px 2px rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    position: absolute;
    right: 0px;
    margin: auto;
}
   
.loader-container.done:after {
  background: Red;
}
.run .runner {
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 0%;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, #ffffff, #e2e2e2);
    background-image: -moz-linear-gradient(top, #ffffff, #e2e2e2);
    background-image: -o-linear-gradient(top, #ffffff, #e2e2e2);
    background-image: -ms-linear-gradient(top, #ffffff, #e2e2e2);
    background-image: linear-gradient(top, #ffffff, #e2e2e2);
    
}
.meter {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2em;
    margin-top: 0.3em;
    color: #ff6a00 !important;
    animation: meter 10s linear;
    font-family: 'Exo' !important;
}
.meter:after {
  content: "%";
}
/* Decoration */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 800;
  src: local('Exo ExtraBold'), local('Exo-ExtraBold'), url(fonts/4UaDrEtFpBIa1Fi29xLm.ttf) format('truetype');
}
@font-face {
  font-family: 'Give You Glory';
  font-style: normal;
  font-weight: 400;
  src: local('Give You Glory'), local('GiveYouGlory'), url(https://fonts.gstatic.com/s/giveyouglory/v9/8QIQdiHOgt3vv4LR7ahjw9-XYf10DYI.ttf) format('truetype');
}