.progress-bar4 { margin: 0 0 10px; overflow: hidden; padding-right: 24px; /* Separate bars from container */ } .progress-title-holder { padding-bottom: 40px; position: relative; margin: 5px 0; font-family: Montserrat, sans-serif; font-size: 15px; line-height: 15px; font-weight: 400; color: #2e2e2e; } .progress-title {z-index: 100;} .progress-number-wrapper { width: 100%; z-index: 10; } .progress-number-mark { margin-bottom: 4px; border-radius: 3px; background-color: transparent; padding: 0 8px; position: absolute; bottom: 0; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); border: 1px solid #5e9a28; } .progress-number-wrapper, .progress-number-mark { font-family: Open Sans, sans-serif; font-size: 11px; line-height: 24px; height: 24px; letter-spacing: 0px; font-weight: 600; font-style: normal; text-transform: none; color: #5e9a28; } .down-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #5e9a28; position: absolute; left: 50%; top: 100%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); } .progress-content-outter { height: 2px; background-color: #d7e6c9; } .progress-content { height: 2px; background-color: #5e9a28; width: 0%; /* Initial value */ }