.progressbar{margin:50px 20px}.progressbar .shim{display:none;width:100%}.progressbar .holder{position:relative;font-size:85%;padding:20px 0 0 0;background-color:#fff}.progressbar .holder .bar{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:#EEEEF3}.progressbar .holder .bar .indicator{position:absolute;top:0;left:0;height:100%;background-color:#4B4BC8}.progressbar .holder .labels{margin:0 auto;text-align:center;width:100%}.progressbar .holder .labels i{display:block;position:relative;float:left;cursor:pointer;height:1px}.progressbar.fixed .holder .labels i{height:45px}.progressbar .holder .labels i::before{position:absolute;bottom:3px;left:50%;display:block;content:'';width:.9em;height:.9em;border-radius:50%;border:solid 5px #4B4BC8;background-color:#4B4BC8;-webkit-transform:translateX(-50%) translateY(50%);transform:translateX(-50%) translateY(50%);-webkit-transition:border-color 100ms ease-in,background-color 150ms ease-in;transition:border-color 100ms ease-in,background-color 150ms ease-in}.progressbar .holder .labels i::after{display:block;content:attr(data-label);position:relative;top:-50px;padding-bottom:1.8em;font-style:initial;font-family:'Poppins';font-size:14px;font-weight:700;color:#EEEEF3;-webkit-transition:color 150ms ease-in,top 100ms ease-out;transition:color 150ms ease-in,top 300ms ease-out}.progressbar.fixed .holder .labels i::after{top:0}.progressbar .holder .labels i:hover::before,.progressbar .holder .labels i:focus::before{background-color:#4B4BC8}.progressbar .holder .labels i:hover::after,.progressbar .holder .labels i:focus::after{color:#4B4BC8}.progressbar .holder .labels i.read::before{border-color:#4B4BC8}.progressbar .holder .labels i.read:hover::before,.progressbar .holder .labels i.read:focus::before{background-color:#4B4BC8}.progressbar .holder .labels i.reading::after{color:#4B4BC8}.progressbar .holder .labels i.reading:hover::after,.progressbar .holder .labels i.reading:focus::after{top:0}.progressbar.fixed .holder{position:fixed;top:0;left:0;width:100%;z-index:1}.progressbar.fixed .shim{display:block}@media only screen and (min-width:768px){.progressbar.fixed .holder .labels i{height:60px}.progressbar .holder .labels i::after{top:-50px;padding-bottom:1.8em;font-size:22px}.progressbar .holder{position:relative;font-size:85%;padding:40px 0 0 0}.progressbar{margin:50px 10%}div.progressbar.fixed div.labels>i{text-align:center}}@media only screen and (min-width:750px){.progressbar .holder{font-size:90%}}@media only screen and (min-width:900px){.progressbar .holder{font-size:95%}}