/* .progress { */
/*     height: 20px; */
/*     margin-bottom: 20px; */
/*     overflow: hidden; */
/*     background-color: #f5f5f5; */
/*     border-radius: 4px; */
/*     box-shadow: inset 0 1px 2px rgba(0,0,0,.1); */
/* } */

/* #progress-sector { */
/*   top: 50%; */
/* } */
/* #progress_load { */
/*   top: 50% */
/*   color: #fff; */
/*   background-color: #337ab7; */
/* } */


html,

body {
  margin: 0;
  top:50%;
  background-color: #FFFFFF;
  overflow: hidden;
}

body {
  min-height: 100vh;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmax;
  box-sizing: border-box;
}

nav {
  position: absolute;
  top: 5%;
  right: 0;
  left: 0;
  width: 319px;
  display: table;
  margin: 0 auto;
  transform: translateY(-50%);
}

nav a {
  position: relative;
  width: 33.333%;
  display: table-cell;
  text-align: center;
  color: #949494;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  transition: 0.2s ease color;
}

nav a:before,
nav a:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.2s ease transform;
}

nav a:before {
  top: 0;
  left: 10px;
  width: 6px;
  height: 6px;
}

nav a:after {
  top: 5px;
  left: 18px;
  width: 4px;
  height: 4px;
}

nav a:nth-child(1):before {
  background-color: yellow;
}

nav a:nth-child(1):after {
  background-color: red;
}

nav a:nth-child(2):before {
  background-color: #00e2ff;
}

nav a:nth-child(2):after {
  background-color: #89ff00;
}

nav a:nth-child(3):before {
  background-color: purple;
}

nav a:nth-child(3):after {
  background-color: palevioletred;
}

nav a:nth-child(4):before {
  background-color: darkgreen;
}


nav a:nth-child(4):after {
  background-color: lightgreen;
}


nav a:nth-child(5):before {
  background-color: darkblue;
}


nav a:nth-child(5):after {
  background-color: lightblue;
}



#indicator {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 30px;
  height: 3px;
  /* background-color: #fff; */
  border-radius: 5px;
  transition: 0.2s ease left;
}

nav a:hover {
  /* color: #fff; */
}

nav a:hover:before,
nav a:hover:after {
  transform: scale(1);
}

nav a:nth-child(1):hover ~ #indicator {
  background: linear-gradient(130deg, yellow, red);
}

nav a:nth-child(2):hover ~ #indicator {
  left: 28%;
  background: linear-gradient(130deg, #00e2ff, #89ff00);
}

nav a:nth-child(3):hover ~ #indicator {
  left: 49%;
  background: linear-gradient(130deg, purple, palevioletred);
}

nav a:nth-child(4):hover ~ #indicator {
  left: 70%;
  background: linear-gradient(130deg, green, yellow);
}

nav a:nth-child(5):hover ~ #indicator {
  left: 89%;
  background: linear-gradient(130deg, darkblue, lightblue);
}


progress {
  width: 50%;
}

#progressdiv {
  position: relative;
  left: -7px;
  top: 15px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #48A860, #74C365);

	   border-radius: 25px; 
	   background-size: 100px 50px, 100% 100%, 100% 100%;
}