@charset "utf-8";
/* CSS Document */
/* Yellow */
.btn-3d_yellow {
  padding: .6rem 1rem;
  border: 1px solid #995309;
  border-radius: 4px;
  background-color: #d9750b;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f90),to(#e76a00));
  background-image: linear-gradient(#f90 10%,#e76a00 100%);
}

.btn-3d_yellow:hover, .btn-3d:focus {
  background-color: #e0811b;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
  background-image: linear-gradient(#f0a100 10%,#f70 100%);
}

.btn-3d_yellow:active {
  background-color: #cf6a00;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
  background-image: linear-gradient(#f0a100 10%,#f70 100%);
}
/* Green */
.btn-3d_green {
  padding: .6rem 1rem;
  border: 1px solid #26890c;
  border-radius: 4px;
  background-color: #26890c;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#6cc444),to(#26890c));
  background-image: linear-gradient(#6cc444 10%,#26890c 100%);
}

.btn-3d_green:hover, .btn-3d:focus {
  background-color: #6cc444;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#6cc444),to(#26890c));
  background-image: linear-gradient(#26890c 10%,#6cc444 100%);
}

.btn-3d_green:active {
  background-color: #26890c;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#6cc444),to(#26890c));
  background-image: linear-gradient(#6cc444 10%,#26890c 100%);
}
/* Red */
.btn-3d_red {
  padding: .6rem 1rem;
  border: 1px solid #e21b3c;
  border-radius: 4px;
  background-color: #e21b3c;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#Fb2024),to(#e21b3c));
  background-image: linear-gradient(#Fb2024 10%,#e21b3c 100%);
}

.btn-3d_red:hover, .btn-3d:focus {
  background-color: #6cc444;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#Fb2024),to(#e21b3c));
  background-image: linear-gradient(#e21b3c 10%,#Fb2024 100%);
}

.btn-3d_red:active {
  background-color: #26890c;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#Fb2024),to(#e21b3c));
  background-image: linear-gradient(#Fb2024 10%,#e21b3c 100%);
}

/* Purple */
.btn-3d_purple {
  padding: .6rem 1rem;
  border: 1px solid #e600e6;
  border-radius: 4px;
  background-color: #cc00cc;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#660066),to(#990099));
  background-image: linear-gradient(#660066 10%,#990099 100%);
}

.btn-3d_purple:hover, .btn-3d:focus {
  background-color: #6cc444;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#660066),to(#990099));
  background-image: linear-gradient(#990099 10%,#660066 100%);
}

.btn-3d_purple:active {
  background-color: #26890c;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#660066),to(#990099));
  background-image: linear-gradient(#660066 10%,#990099 100%);
}



/* Blue */
.btn-3d_blue {
  padding: .6rem 1rem;
  border: 1px solid #0a03b1;
  border-radius: 4px;
  background-color: #0a03b1;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#4941f5),to(#0a03b1));
  background-image: linear-gradient(#4941f5 10%,#0a03b1 100%);
}

.btn-3d_blue:hover, .btn-3d:focus {
  background-color: #6cc444;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#4941f5),to(#0a03b1));
  background-image: linear-gradient(#0a03b1 10%,#4941f5 100%);
}

.btn-3d_blue:active {
  background-color: #26890c;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#4941f5),to(#0a03b1));
  background-image: linear-gradient(#4941f5 10%,#0a03b1 100%);
}

.meter {
    position: relative;
    width:400px;
    box-sizing: border-box;
}
 
.meter .bar {
    height: 40px;
    background: #555;
    border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    padding: 10px;
    width:100%;
}
 
.meter .num {
    color:White;
    position: absolute;
    top:1px;
    text-align:center;
    font-weight:bold;
    font-family:Arial;
    padding: 10px;
    width:100%;
}
 
.meter .bar span {
    display: none;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: rgb(43,194,83);
    box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.start {
    /* modificar la cantidad de segundos y en la varable contador de javascript */
    animation: move 30s linear;
}

@keyframes move {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}