.dzs-progress-bar {
position: relative;
font-weight: 300;
opacity: 0;
line-height: 1;
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: ease-out;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.dzs-progress-bar * {
transition-property: none;
transition-duration: 0s;
transition-timing-function: ease-out;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.dzs-progress-bar div.progress-bars-item {
width: 0%;
height: 50px; }
.dzs-progress-bar div.progress-bars-item--text {
line-height: 1.1; }
.dzs-progress-bar.started {
opacity: 1; }
.padding5 {
padding: 3px; }
.small-arrow-bot:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #111;
position: absolute;
top: 100%;
margin-left: -3px;
left: 50%; }
.center-it-v {
top: 50%;
transform: translate3d(0, -50%, 0); }
.center-it {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); }
.repeater-item {
display: inline-flex;
color: #ffffff;
width: 20px;
height: 20px;
transition: transform 0.3s ease-out;
position: relative;
height: auto;
justify-content: center;
align-items: center;
align-content: center;
text-align: center; }
.repeater-item .repeater-item--inner {
width: 100%; display: inline-block;
transition: all 300ms ease-out; }
.repeater-item .repeater-item--inner .real-icon {
display: inline-block;
opacity: 0;
transform: scale(1) rotate(0deg);
transition: all 300ms ease-out; }
.repeater-item.active .repeater-item--inner .real-icon {
opacity: 1;
transform: scale(1) rotate(0deg); }
.the-text-transition-con {
display: inline-block; }
.progress-bar-item--repeater.repeater-transition-rotate .repeater-item .repeater-item--inner .real-icon {
opacity: 1;
transform: scale(0.5) rotate(90deg);
transition-timing-function: cubic-bezier(0, 1.65, 0.5, 1.65); }
.progress-bar-item--repeater.repeater-transition-rotate .repeater-item.active .repeater-item--inner .real-icon {
transform: scale(0.9) rotate(0deg); }
.progress-bar-item--repeater.repeater-transition-colors .repeater-item .repeater-item--inner {
opacity: 1;
transform: scale(1); }
.progress-bar-item--repeater.repeater-transition-colors .repeater-item.active .repeater-item--inner {
opacity: 1;
transform: scale(1); }
.progress-bar-item--repeater i.progress-icon-con {
display: inline-block;
width: auto;
height: auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1;
transition-property: background, color;
transition-duration: 0.3s;
transition-timing-function: ease-in; }
.progress-bar-item--repeater i.progress-icon-con.rounded {
border-radius: 50%; }
.progress-bar-item--repeater i.progress-icon-con.dims-set {
position: relative; }
.flex-con {
display: flex;
flex-wrap: nowrap;
align-items: center; }
.flex-fixed {
flex: 0 0 auto;
font-size: 13px; }
.flex-all {
flex: 300;
position: relative;
min-height: 1px; }
.dzsprg-digit-con {
display: inline-flex;
flex-direction: column;
position: relative;
align-content: center;
align-items: center;
line-height: 1;
transition-property: font-size;
transition-duration: 0.3s;
transition-timing-function: ease-in; }
.dzsprg-digit-con:not(.settled) {
font-size: 0; }
.dzsprg-digit-con .dzsprg-digit {
position: absolute;
opacity: 0;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in; }
.dzsprg-digit-con .dzsprg-digit.all-new {
opacity: 1; }
.dzsprg-digit-con .dzsprg-digit.transitioning-in {
opacity: 1; }
.dzsprg-digit-con .dzsprg-digit.transitioning-out {
opacity: 0; }
.dzsprg-digit-con .dzsprg-digit.placeholder {
position: relative;
top: 0; }
.progress-bar-item--rect {
background-size: cover;
background-position: center center;
background-repeat: no-repeat; }
.dzs-progress-bar .dzsprg-digit:not(.ceva):not(.alceva).placeholder {
position: relative;
top: 0; }
.dzs-progress-bar.transition-text-slideup .dzsprg-digit {
position: absolute;
top: 60%;
transition-property: opacity, top;
transition-duration: 0.3s;
transition-timing-function: ease-in; }
.dzs-progress-bar.transition-text-slideup .dzsprg-digit.all-new {
top: 0; }
.dzs-progress-bar.transition-text-slideup .dzsprg-digit.transitioning-in {
top: 0; }
.dzs-progress-bar.transition-text-slideup .dzsprg-digit.transitioning-out {
top: -60%; }
.dzs-progress-bar.theme-light .text-progress-fill--text {
text-shadow: 0px 0 1px rgba(255, 255, 255, 0.1), 0 -1px rgba(255, 255, 255, 0.1), -1px -1px rgba(255, 255, 255, 0.1), 0px 1px rgba(255, 255, 255, 0.1); }
.dzs-progress-bar.transition-init-slide-left-x2, .dzs-progress-bar.transition-init-slide-left, .dzs-progress-bar.transition-init-slide-right, .dzs-progress-bar.transition-init-slide-right-x2 {
transform: translate3d(200px, 0px, 0) scale(0.6);
opacity: 0;
transition-property: opacity, transform;
transition-duration: 0.5s;
transition-timing-function: ease-out; }
.dzs-progress-bar.transition-init-slide-left {
transform: translate3d(100px, 0px, 0) scale(0.85); }
.dzs-progress-bar.transition-init-slide-right {
transform: translate3d(-100px, 0px, 0) scale(0.85); }
.dzs-progress-bar.transition-init-slide-right-x2 {
transform: translate3d(-200px, 0px, 0) scale(0.6); }
.dzs-progress-bar.transition-init-slide-left-x2.started, .dzs-progress-bar.transition-init-slide-left.started, .dzs-progress-bar.transition-init-slide-right-x2.started, .dzs-progress-bar.transition-init-slide-right.started {
opacity: 1;
transform: translate3d(0, 0px, 0) scale(1); } .progress-bar-item {
transition-property: none !important; }
.text-progress-fill {
position: relative;
display: inline-block !important;
width: auto !important;
max-width: 110%;
-webkit-font-smoothing: antialiased; }
.text-progress-fill text {
fill: none;
stroke: #414250;
stroke-width: 1px;
stroke-linejoin: round;
dominant-baseline: hanging; }
.text-progress-fill .text-progress-fill--text {
position: relative;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: transparent;
text-shadow: 0px 0 1px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1), -1px -1px rgba(0, 0, 0, 0.1), 0px 1px rgba(0, 0, 0, 0.1); }
.text-progress-fill .text-progress-fill--inner {
position: absolute;
left: 0;
white-space: nowrap;
width: 0%;
overflow: hidden;
color: inherit;
top: 0;
height: 120%;
text-overflow: clip;
text-align: left; }