@import url(https://fonts.googleapis.com/css?family=Roboto:700,400,300);


#progressSection {
  display: none;
}

#sticky-progressBottomContainer {
  position: fixed;
  z-index: -1000;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 46px;
}

#sticky-progressBottomContainer * {
    box-sizing: border-box;
}

#bottomInfo {
  font-family: Roboto;
  color: #fcfcfc;
  position: relative;
  letter-spacing: .03rem;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
  background: -moz-linear-gradient(#2b115b, #2b115b);
  background-color: rgba(43, 17, 91, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fcfcfc;
}

.progress_elements p {
  margin-top: 10px;
  margin-bottom: 10px;
}


/* Font Calculation */
.flex-container, .progressNumber {
    --responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;

  /* Set max and min font sizes
  font-size: .75vw; */
  --max-font: 12;
  --min-font: 7;
  font-size: var(--responsive);
}

.progressNumber {
  /* Set max and min font sizes
  font-size: 1.3vw; */
  --max-font: 20;
  --min-font: 14;
  font-size: var(--responsive);
  width: 40px;
  min-width: 36px;
}

@media (min-width: 1200px) {
  .flex-container, .progressNumber {
    font-size: calc(var(--max-font) * 1px);
  }
}

@media (max-width: 420px) {
  .flex-container, .progressNumber {
    font-size: calc(var(--min-font) * 1px);
  }
}
/* End Font Calculation */


.flex-item-icon {
  /* background-color: #f1f1f1; */
  padding-left: 10px;
  padding-right: 10px;
  flex: 7%;
}

.flex-item-left {
  background-color: #176fc6;
  padding-left: 10px;
  padding-right: 10px;
  flex: 31%;
}

.flex-item-center {
  background-color: dodgerblue;
  padding-left: 10px;
  padding-right: 10px;
  flex: 31%;
}

.flex-item-right {
  background-color: #47a1f9;
  padding-left: 10px;
  padding-right: 10px;
  flex: 31%;
}

/* Responsive layout - makes a one column-layout instead of a three-column layout */
@media (max-width: 800px) {
  .flex-item-icon, .flex-item-left,
  .flex-item-center, .flex-item-right {
    flex: 100%;
  }
}

.progress_elements {
  margin: 0 auto;
  padding-left: auto;
  padding-right: auto;
}

.elements_centered {
  height : 100%;
  display : flex;
  align-items : center;
  justify-content : center;
  margin: auto;
}

.flex-element-left {
  padding-left: 10px;
  padding-right: 0;
}

.flex-element-center {
  padding-left: 10px;
  padding-right: 10px;
}

.flex-element-right {
  padding-left: 0;
  padding-right: 10px;
}

.personDigging {
  height: auto;
  margin: auto;
  position: relative;
}

.digContainer {
    max-width: 90px;
}

.digContainer img {
  width: 34%;
  display: inline-flex;
}

.flex-element-image {
  width: 16%;
  border-radius: 2.5rem;
  border: 2px solid #ffffff;
  display : flex;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1.5%;
  /* margin-left: 3%; */
}

.imageWidth {
    max-width: 60px;
    min-width: 36px;
}

.progress-title {
  height : 100%;
  display : flex;
  align-items : center;
  justify-content : center;
  max-width: 220px;
  min-width: 90px;
}

.progress_percent {
  margin: 0 auto;
}

@media (max-width: 800px) {
  #sticky-progressBottomContainer {
    display: none;
  }
  #progressSection {
    display: block;
  }
}



/* Progress Bar Chart */
.hideProgressBar {
  display: none;
}

.progressBar {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.progress_elements .progress {
  width: 100%;
  height: 6px;
  border-radius: 20px;
}

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: .25rem;
  font-size: .5vw;
}

.progress-primary {
  background: rgba(255, 255, 255, 1);
  border: none;
  outline: none;
}

/* For Chrome or Safari */
progress::-webkit-progress-bar {
  background-color: #fff;
  vertical-align: baseline;
}

progress::-webkit-progress-value {
    background: #c62c17 !important; /* linear-gradient(90deg, rgba(67, 66, 0, 1) 0%, rgba(67, 66, 0, 1) 100%); */
}


/* For Firefox */
progress {
  background-color: #fff;
  vertical-align: baseline;
}

progress::-moz-progress-bar {
    background: #c62c17 !important; /* linear-gradient(90deg, rgba(67, 66, 0, 1) 0%, rgba(67, 66, 0, 1) 100%); */
}

/* For IE10 */
progress {
  background-color: #fff;
  vertical-align: baseline;
}

progress {
    background: #c62c17; /* linear-gradient(90deg, rgba(67, 66, 0, 1) 0%, rgba(67, 66, 0, 1) 100%); */
}