.stepper{display:flex;justify-content:space-between;margin-bottom:20px;max-width:800px;width:80%}.step{background:none;border:none;color:inherit;cursor:pointer;flex:1;flex-direction:column;text-align:center;text-decoration:none}.step,.step .circle{align-items:center;display:flex;position:relative}.step .circle{background-color:#fff;border:2px solid #005c8f;border-radius:50%;color:#005c8f;font-size:1.2em;height:40px;justify-content:center;margin-bottom:8px;width:40px;z-index:1}.step.completed .circle{background-color:#005c8f;color:#fff}.step .label{color:#666;font-size:1em}.step:not(:last-child):after{background-color:#ccc;content:"";height:2px;position:absolute;right:-50%;top:20px;width:100%;z-index:0}.step.completed:not(:last-child):after{background-color:#005c8f}@media (max-width:600px){.stepper{flex-direction:column;margin:0}.step,.stepper{align-items:center}.step{flex-direction:row;margin-bottom:10px}.step .circle{margin-bottom:0;margin-right:10px}.step:not(:last-child):after{display:none}}@media (min-width:601px){.stepper{margin:0 auto}}.step:focus{outline:0 solid #fff}