.portrait-steps{--circle-size: 20px;--dot-size: 4px;--item-size: 54px;--clr-outline: #C6C6C6;--clr-icon: #FDB561;--clr-accent: #2283AF;--clr-dot: #EC8A18;--line-transition: .15s;position:relative;display:flex;justify-content:space-between;margin-inline:auto;max-width:calc(100% - 16px);margin-bottom:45px}@media screen and (min-width: 750px){.portrait-steps{margin-bottom:27px}}@media screen and (min-width: 990px){.portrait-steps{max-width:564px;max-width:calc(100% - 48px)}}@media screen and (min-width: 1280px){.portrait-steps{margin-bottom:40px}}.portrait-steps__item{position:relative;flex:0 0 var(--item-size);cursor:pointer}.portrait-steps__item-icon{position:relative;width:var(--circle-size);height:var(--circle-size);display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;border:1px solid var(--clr-outline);margin-inline:auto;margin-bottom:2px;transition:all .3s ease-in var(--line-transition);z-index:1}.done .portrait-steps__item-icon{background:var(--clr-accent);border-color:var(--clr-accent)}.portrait-steps__heading{color:#6f6f6f;font-family:Urbanist;font-weight:600;font-size:10px;text-align:center;letter-spacing:0}.portrait-steps__item .icon{color:var(--clr-icon);opacity:0;transition:all .3s ease-in var(--line-transition)}.portrait-steps__item.done .icon{opacity:1}.portrait-steps__item-circle{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--dot-size);height:var(--dot-size);background:var(--clr-dot);border-radius:50%;transition:all .3s ease-in var(--line-transition)}.portrait-steps__item:last-child .portrait-steps__item-circle{background-color:var(--clr-accent)}.current .portrait-steps__item-circle{opacity:1}.portrait-steps__connector{--position: 1;position:absolute;top:calc(var(--circle-size) / 2);height:1px;width:calc((100% - 5 * var(--item-size)) / 4 + var(--item-size));left:calc((100% - 5 * var(--item-size)) / 4 * (var(--position) - 1) + var(--item-size) * var(--position) - var(--item-size) / 2);transform:scaleX(calc(100% + 100px));background:var(--clr-outline)}.portrait-steps__connector--2{--position: 2}.portrait-steps__connector--3{--position: 3}.portrait-steps__connector--4{--position: 4}.portrait-steps__connector:before{content:"";background:var(--clr-accent);position:absolute;width:100%;height:100%;max-width:0;top:0;left:0;transition:max-width var((--line-transition)) ease}.done+.portrait-steps__connector:before{max-width:100%}
/*# sourceMappingURL=/cdn/shop/t/118/assets/portrait-steps.css.map */
