.number-pb {
  position: relative;
  height: 1px;
  background-color: #1B2030;
  margin: 40px 0;
	display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
	display: -moz-box; /* Firefox 17- */
	display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
	display: -moz-flex; /* Firefox 18+ */
	display: -ms-flexbox; /* IE 10 */
	display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.number-pb .number-pb-shown {
  background-color: #DBEDF3;
  background-image: linear-gradient(to right, #4d9bbf, #4d9bbf);
  height: 1px;
  -moz-box-shadow:    0 0 3px 0 #4d9bbf;
  -webkit-box-shadow: 0 0 3px 0 #4d9bbf;
  box-shadow:         0 0 3px 0 #4d9bbf;
}

.number-pb .number-pb-num {
  position: absolute;
  background-color: #fff;
  left: 0;
  top: -0.45em;
  padding: 0 5px;
  min-width: 50px;
	visibility: hidden;
}

.number-pb-shown.dream {
  background-image: linear-gradient(to right, #0e153a, #1d2b64, #f8cdda);
  -moz-box-shadow:    0 0 3px 0 #f8cdda;
  -webkit-box-shadow: 0 0 3px 0 #f8cdda;
  box-shadow:         0 0 3px 0 #f8cdda;
}

.number-pb-shown.sun {
  background-image: linear-gradient(to right, #0f1b58, #e0a681, #e5e9bf);
  -moz-box-shadow:    0 0 3px 0 #e5e9bf;
  -webkit-box-shadow: 0 0 3px 0 #e5e9bf;
  box-shadow:         0 0 3px 0 #e5e9bf;
}