/*
.demo {
    background-color: red;
    @include mqMin(w4) {
	    background-color: blue;
	}
}
*/
/*
.demo {
    background-color: red;
    @include mqMax(w4) {
	    background-color: blue;
	}
}
*/
/*
.demo {
    background-color: red;
    @include mqRange(w2, w4) {
	    background-color: blue;
	}
}
*/
.progress {
  border-color: #000;
  /*border-radius: 0.4rem;*/
  border-style: solid;
  border-width: 0.05rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  height: 30px;
  width: 100%;
  position: relative;
}

.progress__bar {
  background-color: #000;
  /*border-radius: 0.4rem;*/
  display: block;
  height: 30px;
  width: 0;
  -webkit-transition: 0.1s width ease;
  -o-transition: 0.1s width ease;
  transition: 0.1s width ease;
}

.progress_streampercent:after {
  content: attr(data-progress) "%";
  font-size: 0.8rem;
  color: #000;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.progress_streamtext:after {
  content: attr(data-progresstext);
  color: #000;
  font-size: 0.8rem;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: none !important;
}