:root{--fadeshift:.2s}.projectsarea .filtercol{display:flex;align-items:center;justify-content:flex-start;margin-top:0;align-items:flex-start}#projectFilter{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.7em;width:100%}#projectFilter .order-1{order:1}#projectFilter .order-2{order:2}#projectFilter .order-3{order:3}#projectFilter .order-4{order:4}#projectFilter .order-5{order:5}#projectFilter .order-6{order:6}#projectFilter .order-7{order:7}#projectFilter .order-8{order:8}#projectFilter .order-9{order:9}#projectFilter .order-10{order:10}#projectFilter .order-11{order:11}#projectFilter .order-12{order:12}#projectFilter .order-13{order:13}#projectFilter .order-14{order:14}#projectFilter .order-15{order:15}#projectFilter .order-16{order:16}#projectFilter .order-17{order:17}#projectFilter .order-18{order:18}#projectFilter .order-19{order:19}#projectFilter .order-20{order:20}#projectFilter li{display:inline-block;border-radius:50px;height:1.8em;padding:0 1.3em;line-height:1.8em;border:1px solid var(--base-color);color:var(--base-color);text-align:center;transition:.1s linear;font-size:16px}#projectFilter li:hover{border-color:#b2b9c1;background-color:#b2b9c1;cursor:pointer}#projectFilter li.active{border-color:#fff;background-color:#fff}.projectrow{counter-reset:project-counter}.projectrow .tile{animation-delay:calc( (var(--filtercount) * .5s) + var(--fadeshift))}.projectrow.filtering .tile{margin-left:0}@media only screen and (min-width:64em){.projectsarea .filtercol{margin-top:0;justify-content:flex-end}#projectFilter{justify-content:flex-end;border:none;width:auto}#projectFilter li{font-size:18px}.projectrow.filtering .tile.filterOffset{margin-left:16.66666667%}.projectrow.filtering .tile.odd{margin-left:0}}