._box_18zrh_1{position:absolute;width:25px;height:25px;border:1px solid}._circle_18zrh_8{position:absolute;width:25px;height:25px;border:1px solid;border-radius:50%}#filter-demo{position:relative;height:175px;background:#fff;background:var(--bg-absolute);max-width:500px;margin:0 auto}#filter-demo .box-container{position:relative;height:100%;width:calc(100% - 40px)}#filter-demo .box{transition-property:left opacity;transition-timing-function:linear;transition-duration:0s}#filter-demo .box:nth-child(1){background:#9acd32;top:8px;left:16px}#filter-demo .box:nth-child(2){background:maroon;top:41px;left:16px}#filter-demo .box:nth-child(3){background:orchid;top:74px;left:16px}#filter-demo .box:nth-child(4){background:orange;top:107px;left:16px}#filter-demo .box:nth-child(5){background:#008b8b;top:140px;left:16px}#filter-demo.activated .box{left:100%;transition-duration:1s}#filter-demo.activated .filtered{opacity:0}#map-demo{position:relative;height:175px;background:#fff;background:var(--bg-absolute);max-width:500px;margin:0 auto}#map-demo .box-container{position:relative;height:100%;width:calc(100% - 40px)}#map-demo .box{filter:hue-rotate(0deg);transform:scale(1);transition-property:filter left transform;transition-timing-function:linear;transition-duration:0s}#map-demo .box:nth-child(1){background:#9acd32;top:8px;left:16px}#map-demo .box:nth-child(2){background:maroon;top:41px;left:16px}#map-demo .box:nth-child(3){background:orchid;top:74px;left:16px}#map-demo .box:nth-child(4){background:orange;top:107px;left:16px}#map-demo .box:nth-child(5){background:#008b8b;top:140px;left:16px}#map-demo.activated .box{filter:hue-rotate(90deg);left:100%;transition-duration:1s}#map-demo.activated .shrinked{filter:hue-rotate(0deg);transform:scale(.6)}@keyframes _zigzag-0_1ofwb_1{0%{top:8px;left:16px;filter:hue-rotate(0deg);opacity:1}14.2857142857%{top:8px;left:100%;filter:hue-rotate(90deg);opacity:1}28.5714285714%{top:41px;left:16px;filter:hue-rotate(90deg);opacity:1}42.8571428571%{top:41px;left:100%;filter:hue-rotate(90deg);opacity:1}57.1428571429%{top:74px;left:16px;filter:hue-rotate(90deg);opacity:1}71.4285714286%{top:74px;left:100%;filter:hue-rotate(90deg);opacity:1}85.7142857143%{top:107px;left:16px;filter:hue-rotate(90deg);opacity:1}to{top:107px;left:100%;filter:hue-rotate(90deg);opacity:1}}@keyframes _zigzag-1_1ofwb_1{0%{top:41px;left:16px;filter:hue-rotate(0deg);opacity:1}14.2857142857%{top:41px;left:16px;filter:hue-rotate(0deg);opacity:1}28.5714285714%{top:41px;left:16px;filter:hue-rotate(0deg);opacity:1}42.8571428571%{top:41px;left:100%;filter:hue-rotate(90deg);opacity:1}57.1428571429%{top:74px;left:16px;filter:hue-rotate(90deg);opacity:1}71.4285714286%{top:74px;left:100%;filter:hue-rotate(90deg);opacity:1}85.7142857143%{top:107px;left:16px;filter:hue-rotate(90deg);opacity:1}to{top:107px;left:100%;filter:hue-rotate(90deg);opacity:1}}@keyframes _zigzag-2_1ofwb_1{0%{top:74px;left:16px;filter:hue-rotate(0deg);opacity:1}14.2857142857%{top:74px;left:16px;filter:hue-rotate(0deg);opacity:1}28.5714285714%{top:74px;left:16px;filter:hue-rotate(0deg);opacity:1}42.8571428571%{top:74px;left:16px;filter:hue-rotate(0deg);opacity:1}57.1428571429%{top:74px;left:16px;filter:hue-rotate(0deg);opacity:1}71.4285714286%{top:74px;left:100%;filter:hue-rotate(90deg);opacity:1}85.7142857143%{top:107px;left:16px;filter:hue-rotate(90deg);opacity:1}to{top:107px;left:100%;filter:hue-rotate(90deg);opacity:1}}@keyframes _zigzag-3_1ofwb_1{0%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}14.2857142857%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}28.5714285714%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}42.8571428571%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}57.1428571429%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}71.4285714286%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}85.7142857143%{top:107px;left:16px;filter:hue-rotate(0deg);opacity:1}to{top:107px;left:100%;filter:hue-rotate(90deg);opacity:1}}._container_1ofwb_204{position:relative;height:150px;background:#fff;background:var(--bg-absolute);max-width:500px;margin:0 auto}._innerContainer_1ofwb_213{position:relative;height:100%;width:calc(100% - 40px)}._innerContainer_1ofwb_213>*:first-child{background:#9acd32;top:8px;left:16px}._innerContainer_1ofwb_213>*:nth-child(2){background:maroon;transform:scale(.8);top:41px;left:16px}._innerContainer_1ofwb_213>*:nth-child(3){transform:scale(.6);background:orchid;top:74px;left:16px}._innerContainer_1ofwb_213>*:nth-child(4){transform:scale(.4);background:orange;top:107px;left:16px}._innerContainer_1ofwb_213._activated_1ofwb_241>*:nth-child(1){animation:_zigzag-0_1ofwb_1 4s linear forwards}._innerContainer_1ofwb_213._activated_1ofwb_241>*:nth-child(2){animation:_zigzag-1_1ofwb_1 4s linear forwards}._innerContainer_1ofwb_213._activated_1ofwb_241>*:nth-child(3){animation:_zigzag-2_1ofwb_1 4s linear forwards}._innerContainer_1ofwb_213._activated_1ofwb_241>*:nth-child(4){animation:_zigzag-3_1ofwb_1 4s linear forwards}