/**handles:mapbox-gl,style**/
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{position:absolute;left:0;top:0}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.mapboxgl-ctrl-top-left{top:0;left:0}.mapboxgl-ctrl-top-right{top:0;right:0}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-bottom-right{right:0;bottom:0}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}.mapboxgl-ctrl-group{border-radius:4px;background:#fff}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgb(0 0 0/10%)}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{width:29px;height:29px;display:block;padding:0;outline:0;border:0;box-sizing:border-box;background-color:transparent;cursor:pointer;overflow:hidden}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px rgb(0 150 255/100%)}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px rgb(0 150 255/100%)}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:rgb(255 255 255/50%);margin:0}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");background-color:rgb(255 255 255/50%);width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:0;top:0;right:0;border:0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:rgb(0 0 0/75%);text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:rgb(255 255 255/75%);font-size:10px;border:2px solid #333;border-top:#333;padding:0 5px;color:#333;box-sizing:border-box;white-space:nowrap}.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:transparent}.mapboxgl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgb(0 0 0/10%);padding:10px 10px 15px;pointer-events:auto}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform;opacity:1;transition:opacity .2s}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.mapboxgl-user-location-dot:before{content:"";position:absolute;animation:mapboxgl-user-location-dot-pulse 2s infinite}.mapboxgl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px rgb(0 0 0/35%)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{width:0;height:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{content:"";border-bottom:7.5px solid #4aa1eb;position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid transparent;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid transparent;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:rgba(29,161,242,.2);width:1px;height:1px;border-radius:100%}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;justify-content:center;text-align:center;position:absolute;display:flex;align-items:center;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0/70%);opacity:0;pointer-events:none;transition:opacity .75s ease-in-out;transition-delay:1s}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}
*, html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  outline: none;
  word-break: break-word;
  -webkit-tap-highlight-color: transparent;
}
*::before, *::after, html::before, html::after {
  box-sizing: border-box;
}

a, a:visited, a:h {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

select {
  appearance: none;
  border: none;
  border-radius: 0px;
}

select::-ms-expand { /* for IE 11 */
  display: none;
  border: none;
  border-radius: 0px;
}

input[type=date]::-webkit-inner-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: #E2E2E2;
}

:root {
  --gradient-opacity: 0.2;
}

:root {
  --cl-background: #101010;
  --cl-background-alt: #1f1f1f;
  --cl-foreground: #ffffff;
  --cl-foreground-alt: #f8f4f3;
  --cl-primary: #3fa099;
  --cl-primary-text: #ffffff;
  --cl-secondary: #ff005b;
  --cl-secondary-text: #ffffff;
  --cl-error: #ff2929;
  --cl-error-text: #fff;
  --cl-success: #3fa057;
  --cl-success-text: #fff;
  --cl-selection: #3aafdc;
}

@font-face {font-display: swap;
  font-family: "Filson Pro";
  src: url("https://use.typekit.net/rrn6gan.css");
  font-weight: normal;
  font-style: normal;
}
html {
  width: 100%;
  scroll-behavior: smooth;
  scroll-padding: 2rem;
  accent-color: var(--cl-primary);
}
@media only screen and (min-width: 640px) {
  html {
    scroll-padding: 4rem;
  }
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
}

.screen-reader {
  position: absolute;
  left: -10000px;
  top: auto;
  z-index: 999;
  background-color: var(--cl-foreground);
  padding-inline: 1rem;
  padding-block: 2rem;
  padding-block: 32px;
}
@media only screen and (min-width: 640px) {
  .screen-reader {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  .screen-reader {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  .screen-reader {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  .screen-reader {
    padding-block: 4rem;
  }
}
.screen-reader:focus-within {
  position: relative;
  left: auto;
  top: auto;
}
.screen-reader p {
  color: var(--cl-background);
  padding: 0;
  margin: 0;
}
.screen-reader p a {
  padding: 0;
  margin: 0;
  color: var(--cl-background);
  text-decoration: underline;
}

input:focus-visible,
a:focus-visible,
.button:focus-visible,
button:focus-visible,
.hamburger:focus-visible,
.services-list li:focus-visible,
.services-list li a:focus-visible {
  box-shadow: 0 0 0 2px var(--cl-background-alt), 0 0 0 6px var(--cl-foreground-alt) !important;
}

input:focus-visible {
  box-shadow: none !important;
  border-bottom: 1px solid var(--cl-secondary) !important;
}

body:not(.mce-content-body) {
  font-family: "filson-pro", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  background-color: var(--cl-background);
  color: var(--cl-foreground);
  width: 100%;
  transition: opacity 150ms ease;
  position: relative;
  height: 100%;
}
body:not(.mce-content-body).hidden {
  opacity: 0;
}

main {
  transition: filter 150ms ease-out, translate 150ms ease-out;
}

article {
  min-height: 50dvh;
}

section,
header,
footer,
.container {
  position: relative;
  --bg: var(--cl-background);
  --bg-alt: var(--cl-background-alt);
  --fg: var(--cl-foreground);
  --fg-alt: var(--cl-foreground-alt);
}
section.full,
header.full,
footer.full,
.container.full {
  min-height: 100vh;
}
section.background-light,
header.background-light,
footer.background-light,
.container.background-light {
  --bg: var(--cl-foreground-alt);
  --bg-alt: var(--cl-foreground);
  --fg: var(--cl-background);
  --fg-alt: var(--cl-background-alt);
  background-color: var(--bg);
}
section.divider,
header.divider,
footer.divider,
.container.divider {
  background-color: var(--fg);
  opacity: 0.2;
  height: 2px;
  width: calc(100% - 2rem);
  max-width: calc(1536px - 8rem);
  margin-block: 0;
  margin-inline: auto;
  padding-block: 0;
}
@media only screen and (min-width: 640px) {
  section.divider,
  header.divider,
  footer.divider,
  .container.divider {
    width: calc(100% - 4rem);
  }
}
@media only screen and (min-width: 1280px) {
  section.divider,
  header.divider,
  footer.divider,
  .container.divider {
    width: calc(100% - 8rem);
  }
}

section section.divider {
  width: 100%;
}

.wrapper {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding-inline: 1rem;
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  .wrapper {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  .wrapper {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  .wrapper {
    padding-block: 4rem;
  }
}
.wrapper .introduction {
  padding-block: 2rem;
  padding-top: 0 !important;
  max-width: 800px;
}
@media only screen and (min-width: 640px) {
  .wrapper .introduction {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  .wrapper .introduction {
    padding-block: 4rem;
  }
}

h1,
h2,
.scroller .scroller__inner span,
h3,
section.hero .hero__services li a,
h4 {
  font-family: "filson-pro", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  text-transform: initial;
  position: relative;
  z-index: 1;
  text-wrap: balance;
  word-break: break-word;
  hyphens: auto;
}

h1 {
  font-size: 32px;
}
@media only screen and (min-width: 1280px) {
  h1 {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1920px) {
  h1 {
    font-size: 64px;
  }
}

h2, .scroller .scroller__inner span {
  font-size: 32px;
}
@media only screen and (min-width: 1280px) {
  h2, .scroller .scroller__inner span {
    font-size: 2.5rem;
  }
}

h3, section.hero .hero__services li a {
  font-size: 24px;
  font-weight: 900;
}
@media only screen and (min-width: 1280px) {
  h3, section.hero .hero__services li a {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1920px) {
  h3, section.hero .hero__services li a {
    font-size: 32px;
  }
}

h4 {
  font-size: 20px;
  font-weight: 900;
}
@media only screen and (min-width: 1280px) {
  h4 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1920px) {
  h4 {
    font-size: 24px;
  }
}

ul.features, section.interactive-features .wrapper .container-right .feature ul {
  display: grid;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  ul.features, section.interactive-features .wrapper .container-right .feature ul {
    gap: 1rem 2rem;
    grid-template-columns: auto 1fr;
  }
}
ul.features.one-row, section.interactive-features .wrapper .container-right .feature ul.one-row {
  grid-template-columns: auto;
}
ul.features > li, section.interactive-features .wrapper .container-right .feature ul > li {
  position: relative;
  list-style: none;
  padding-left: 32px;
}
ul.features > li::after, section.interactive-features .wrapper .container-right .feature ul > li::after, ul.features > li::before, section.interactive-features .wrapper .container-right .feature ul > li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--cl-primary);
  border-radius: 50%;
}
ul.features > li::before, section.interactive-features .wrapper .container-right .feature ul > li::before {
  mask-image: url(https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg);
  mask-size: 0.64rem;
  mask-repeat: no-repeat;
  mask-position: center 4px;
  background: var(--cl-foreground);
  z-index: 1;
}

p {
  font-size: 16px;
}
p a {
  color: currentColor;
  text-decoration-color: var(--cl-primary);
}
p a:not(.button), p a:visited, p a:active, p a:focus {
  cursor: pointer;
  color: var(--cl-primary);
}
a {
  text-decoration-color: var(--cl-primary);
}

blockquote {
  position: relative;
  max-width: 320px !important;
  margin-inline: auto;
  color: var(--cl-fg);
  text-align: center;
  position: relative;
  padding: 32px 16px;
  border-block: 2px solid var(--cl-primary);
}
@media only screen and (min-width: 1280px) {
  blockquote {
    max-width: 480px !important;
  }
}
blockquote::after, blockquote::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--cl-primary);
  border-radius: 32px;
}
blockquote::after {
  mask-image: url(https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/quotes.svg);
  mask-size: 1.5rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background: var(--cl-foreground);
  z-index: 1;
}
blockquote h2, blockquote .scroller .scroller__inner span, .scroller .scroller__inner blockquote span,
blockquote h3,
blockquote section.hero .hero__services li a,
section.hero .hero__services li blockquote a {
  font-weight: 700;
}
blockquote p {
  padding: 0;
  font-size: 16px;
}
@media only screen and (min-width: 640px) {
  blockquote {
    padding-left: 32px;
    border-left-width: 4px;
  }
}
@media only screen and (min-width: 1280px) {
  blockquote {
    font-size: 24px;
  }
}

img {
  width: 100%;
  height: auto;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

kbd {
  border: 2px solid var(--fg);
  border-radius: 0.125rem;
  padding: 0 0.5rem;
  margin-right: 0.5ch;
}

del {
  font-weight: 700;
}

.dotdotdot--1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--7 {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--8 {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--9 {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--10 {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--11 {
  display: -webkit-box;
  -webkit-line-clamp: 11;
  line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot--12 {
  display: -webkit-box;
  -webkit-line-clamp: 12;
  line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dotdotdot {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

::selection {
  background: var(--cl-selection);
  text-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

.display-none {
  display: none !important;
}

/* ================================
   imports 
   ================================ */
h1 em,
h2 em,
.scroller .scroller__inner span em,
h3 em,
section.hero .hero__services li a em,
h4 em,
h5 em {
  font-style: normal;
  color: var(--cl-primary);
  text-decoration-color: var(--cl-primary);
}

p em {
  color: var(--cl-primary);
}

.radial-gradient {
  overflow: hidden;
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: auto;
}
.radial-gradient::before, .radial-gradient::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 180vw;
  height: 180vw;
  z-index: -1;
  translate: 0 -50%;
}
@media only screen and (min-width: 640px) {
  .radial-gradient::before, .radial-gradient::after {
    content: "";
  }
}
.radial-gradient::before {
  background: radial-gradient(circle at center, var(--cl-foreground-alt) 0vh, var(--cl-background) 1280px);
  height: 100%;
  opacity: var(--gradient-opacity, 0.25);
}
.radial-gradient::after {
  background-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/s.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5w;
  scale: 0.5;
}

.border-arrow-container {
  width: 100%;
  height: 5rem;
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  overflow: hidden;
  background-color: transparent;
}
.border-arrow-container::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateY(50%);
  background-color: var(--bg);
}
@media only screen and (min-width: 1920px) {
  .border-arrow-container::after {
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.border-arrow-container .border-arrow {
  height: 100%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--cl-primary);
  color: var(--cl-primary-text);
  z-index: 5;
  display: grid;
  place-items: center;
}
.border-arrow-container .border-arrow svg {
  width: 1.5rem;
  height: auto;
}
.border-arrow-container .border-arrow svg path {
  fill: currentColor;
}

section.background-dark + section.background-dark:not(.image-text):not(.services):not(.form) .wrapper,
section.background-light + section.background-light:not(.image-text):not(.services):not(.form) .wrapper,
section.background-light + section.background-semilight:not(.image-text):not(.services):not(.form) .wrapper,
section.background-semilight + section.background-dark:not(.image-text):not(.services):not(.form) .wrapper {
  padding-top: 0 !important;
}
section.background-dark + section.background-dark.image-text, section.background-dark + section.background-dark.services, section.background-dark + section.background-dark.form,
section.background-light + section.background-light.image-text,
section.background-light + section.background-light.services,
section.background-light + section.background-light.form,
section.background-light + section.background-semilight.image-text,
section.background-light + section.background-semilight.services,
section.background-light + section.background-semilight.form,
section.background-semilight + section.background-dark.image-text,
section.background-semilight + section.background-dark.services,
section.background-semilight + section.background-dark.form {
  padding-top: 0 !important;
}

section.background-light + .background-dark {
  margin-top: 2rem;
}
section.background-light + .background-dark .border-arrow-container {
  display: block;
  background-color: var(--fg-alt);
}
section.background-light + .background-dark .border-arrow-container::after {
  background-color: var(--bg);
}

section.background-dark + section.background-light {
  margin-top: 5rem;
}
section.background-dark + section.background-light .border-arrow-container {
  display: block;
}

.scrolling-text {
  margin-bottom: 1rem;
  opacity: 0.25;
}
@media only screen and (min-width: 640px) {
  .scrolling-text {
    margin-bottom: 0rem;
    font-size: 6rem;
    opacity: 0.1;
    font-weight: 600;
    width: max-content;
    font-size: 10rem;
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 1280px) and (min-height: 1000px) {
  .scrolling-text {
    font-size: 14rem;
    margin-bottom: 4rem;
  }
}

ul.checkmarks {
  list-style: none;
  --size: 1.5;
}
ul.checkmarks li {
  position: relative;
  line-height: 1.5;
  padding-left: calc(var(--size) * 1rem + 1rem);
}
ul.checkmarks li::before, ul.checkmarks li::after {
  content: "";
  position: absolute;
  display: block;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  margin-right: 1rem;
  width: calc(var(--size) * 1rem);
  height: calc(var(--size) * 1rem);
  aspect-ratio: 1/1;
  border-radius: 100vw;
  background-color: var(--fg);
}
ul.checkmarks li::before {
  opacity: 0.25;
}
ul.checkmarks li::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg");
  mask-size: 0.75rem;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: var(--cl-foreground);
}
ul.checkmarks.checkmarks--large {
  --size: 2;
}
ul.checkmarks.checkmarks--large li {
  padding-left: 3rem;
  line-height: 2rem;
}
ul.checkmarks.checkmarks--large li::before, ul.checkmarks.checkmarks--large li::after {
  top: 0.75rem;
  width: 2rem;
  height: 2rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.tags span {
  position: relative;
  padding: 0.5em 1em;
  opacity: 0.6;
  line-height: 1;
  text-transform: capitalize;
  user-select: none;
  transition: all 300ms ease;
  border-radius: 100vw;
}
.tags span::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: solid 1px currentColor;
  border-radius: 100vw;
}
.tags span.toggleable {
  cursor: pointer;
}
.tags span.toggleable:hover {
  opacity: 0.8;
}
.tags span.active {
  background-color: var(--fg);
  color: var(--bg);
  opacity: 1;
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
  z-index: 999;
  pointer-events: none;
}

.image-container,
.video-container {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
.image-container img,
.image-container video,
.video-container img,
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-container img.full-image,
.image-container video.full-image,
.video-container img.full-image,
.video-container video.full-image {
  object-fit: contain;
}

.video-container {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--cl-black);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  transition: 0.5s all ease-in-out 1s;
  opacity: 0;
  pointer-events: none;
}
.video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.25s all ease-in-out;
}
.video-container.aspect-ratio-4-3 {
  aspect-ratio: 4/3;
}
.video-container.aspect-ratio-1-1 {
  aspect-ratio: 1/1;
}
.video-container.aspect-ratio-9-16 {
  aspect-ratio: 9/16;
  max-width: 480px;
}
.video-container::before, .video-container::after {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -32px 0 0 -32px;
  width: 64px;
  height: 64px;
  background-color: var(--cl-primary);
  pointer-events: none;
  transition: 0.25s all ease-in-out;
  pointer-events: none;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
.video-container::before {
  mask-image: url(https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/play-solid.svg);
  mask-size: 20px 20px;
  mask-repeat: no-repeat;
  mask-position: 24px center;
  background-color: var(--cl-primary-text);
  z-index: 2;
}
.video-container:hover {
  cursor: pointer;
}
.video-container:hover img {
  opacity: 0.75;
}
.video-container:hover::after {
  background-color: var(--cl-primary-dark);
}
.video-container.active img {
  opacity: 0;
  pointer-events: none;
}
.video-container.active iframe {
  opacity: 1;
  pointer-events: all;
}
.video-container.active::before, .video-container.active::after {
  opacity: 0;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  .button-container {
    gap: 2rem;
  }
}

.mce-content-body ul,
.text-container ul {
  list-style: disc inside;
  padding: 0;
  margin: 0;
}
.mce-content-body ul li:marker,
.text-container ul li:marker {
  color: var(--cl-primary);
}
.mce-content-body > *,
.text-container > * {
  max-width: 800px;
}
.mce-content-body > * + *,
.text-container > * + * {
  margin-top: 0.5em;
}
.mce-content-body .button-container,
.mce-content-body ul,
.mce-content-body ol,
.text-container .button-container,
.text-container ul,
.text-container ol {
  margin-top: 2em;
}
.mce-content-body img,
.text-container img {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}

.switchcookie .button,
section .button,
header .button,
footer .button {
  background: transparent;
  border: none;
  text-decoration: none;
  background-color: var(--fg);
  color: var(--bg);
  --accent: var(--cl-secondary);
  --accent-text: var(--cl-secondary-text);
  border: solid 2px transparent;
  position: relative;
  display: grid;
  place-items: center start;
  padding: 0 3.5rem 0 1.5rem;
  height: 3rem;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  width: auto;
  cursor: pointer;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  transition: all 300ms ease;
}
.switchcookie .button::before, .switchcookie .button::after,
section .button::before,
section .button::after,
header .button::before,
header .button::after,
footer .button::before,
footer .button::after {
  content: "";
  transition: all 300ms ease;
  position: absolute;
  top: 1px;
  right: 2px;
  height: calc(100% - 2px);
  aspect-ratio: 1/1;
}
.switchcookie .button::before,
section .button::before,
header .button::before,
footer .button::before {
  border-radius: 50%;
  border: 2px solid;
  border-color: transparent;
  z-index: 2;
  background-color: var(--cl-primary);
}
.switchcookie .button::after,
section .button::after,
header .button::after,
footer .button::after {
  margin: auto;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-up-right-regular.svg");
  mask-size: 0.75rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--cl-primary-text);
  transition: all 300ms ease;
  z-index: 3;
  pointer-events: none;
}
.switchcookie .button:hover,
section .button:hover,
header .button:hover,
footer .button:hover {
  text-decoration: underline;
  background-color: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.switchcookie .button:hover::before,
section .button:hover::before,
header .button:hover::before,
footer .button:hover::before {
  border-color: var(--accent);
  background-color: var(--accent);
}
.switchcookie .button:hover::after,
section .button:hover::after,
header .button:hover::after,
footer .button:hover::after {
  background-color: var(--accent-text);
}
.switchcookie .button[class=button]:hover::after,
section .button[class=button]:hover::after,
header .button[class=button]:hover::after,
footer .button[class=button]:hover::after {
  animation: fly-by 300ms ease normal;
}
.switchcookie .button.button--phone::after,
section .button.button--phone::after,
header .button.button--phone::after,
footer .button.button--phone::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/phone-regular.svg");
}
.switchcookie .button.button--email::after,
section .button.button--email::after,
header .button.button--email::after,
footer .button.button--email::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/envelope-regular.svg");
}
.switchcookie .button.button--search::after,
section .button.button--search::after,
header .button.button--search::after,
footer .button.button--search::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/magnifying-glass-regular.svg");
}
.switchcookie .button.wordpress,
section .button.wordpress,
header .button.wordpress,
footer .button.wordpress {
  border: none;
  width: 0px;
  padding: 0;
}
.switchcookie .button.wordpress::after,
section .button.wordpress::after,
header .button.wordpress::after,
footer .button.wordpress::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/wordpress.svg");
  mask-size: 1rem;
}
.switchcookie .button.button--minimal,
section .button.button--minimal,
header .button.button--minimal,
footer .button.button--minimal {
  background-color: transparent;
  color: var(--fg);
  border: none;
}
.switchcookie .button.button--minimal::before,
section .button.button--minimal::before,
header .button.button--minimal::before,
footer .button.button--minimal::before {
  content: none;
}
.switchcookie .button.button--minimal::after,
section .button.button--minimal::after,
header .button.button--minimal::after,
footer .button.button--minimal::after {
  background-color: var(--fg);
}
.switchcookie .button.button--minimal:hover,
section .button.button--minimal:hover,
header .button.button--minimal:hover,
footer .button.button--minimal:hover {
  background-color: var(--bg);
  color: var(--fg);
  border: none;
}
.switchcookie .button.button--minimal:hover::after,
section .button.button--minimal:hover::after,
header .button.button--minimal:hover::after,
footer .button.button--minimal:hover::after {
  animation: fly-by 300ms ease normal;
  background-color: var(--fg);
}
.switchcookie .button-reverse,
section .button-reverse,
header .button-reverse,
footer .button-reverse {
  background-color: transparent;
  color: var(--fg);
  border: solid 2px var(--fg);
}
.switchcookie .button-reverse:hover,
section .button-reverse:hover,
header .button-reverse:hover,
footer .button-reverse:hover {
  background-color: var(--fg);
  color: var(--bg);
}
.switchcookie .button-reverse:hover::after,
section .button-reverse:hover::after,
header .button-reverse:hover::after,
footer .button-reverse:hover::after {
  animation: fly-by 300ms ease normal;
}

@keyframes fly-by {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  49% {
    transform: translate(1.5rem, -1.5rem);
    opacity: 0;
  }
  51% {
    transform: translate(-1.5rem, 1.5rem);
    opacity: 0;
  }
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content auto max-content;
  grid-template-areas: "image" "tags" "content" "footer";
  gap: 1rem;
  background-color: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  max-width: 100%;
  height: 100%;
  padding-bottom: 0.5rem;
  background-color: var(--bg-alt);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
.card .card__image {
  position: relative;
  grid-area: image;
  aspect-ratio: 4/3;
  background-color: var(--background-color, var(--cl-primary));
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  transition: all 300ms ease;
  margin-bottom: 0.5rem;
}
.card .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 300ms ease;
}
.card .card__image > h4 {
  position: absolute;
  text-align: center;
  text-wrap: balance;
  inset: 0;
  margin: auto;
  height: max-content;
  width: max-content;
}
.card .card__image span.tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background-color: var(--cl-secondary);
  color: var(--cl-secondary-text);
  padding: 0.5rem 1rem;
  border-radius: 100vw;
  line-height: 1;
  text-transform: capitalize;
  user-select: none;
  transition: all 300ms ease;
}
.card .card__tags {
  grid-area: tags;
  font-size: 10px;
  padding-inline: 1rem;
}
.card .card__text {
  padding-inline: 1rem;
  grid-area: content;
  flex-grow: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.card .card__text h2, .card .card__text .scroller .scroller__inner span, .scroller .scroller__inner .card .card__text span {
  font-size: 32px;
}
.card .card__text h3, .card .card__text section.hero .hero__services li a, section.hero .hero__services li .card .card__text a {
  font-size: 24px;
}
.card .card__text h4 {
  text-wrap: balance;
}
.card .card__text p {
  font-size: 14px;
}
.card .card__text ul.features, .card .card__text section.interactive-features .wrapper .container-right .feature ul, section.interactive-features .wrapper .container-right .feature .card .card__text ul {
  grid-template-columns: 1fr;
}
.card .card__footer {
  --arrow-size: 3rem;
  grid-area: footer;
  position: relative;
  width: 100%;
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
  padding-right: calc(var(--arrow-size) + 1rem);
  min-height: var(--arrow-size);
}
.card .card__footer .bloginfo {
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
}
.card .card__footer .bloginfo span {
  opacity: 0.8;
  font-size: 14px;
  line-height: 1.5;
}
.card .card__footer:not(:has(.bloginfo)) {
  display: none;
}
.card .button-container {
  padding-inline: 1rem;
  padding-block: 1rem;
}
.card.hidden {
  display: none;
}

.card__container {
  display: flex;
  height: 100%;
}
.card__container:not([id]) {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  .card__container:not([id]) {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  .card__container:not([id]) {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  .card__container:not([id]) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1280px) {
  .card__container:not([id]) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.filter__container {
  position: relative;
  padding-block: 2rem;
  padding-top: 2rem !important;
}
@media only screen and (min-width: 640px) {
  .filter__container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  .filter__container {
    padding-block: 4rem;
  }
}
.filter__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--fg);
  opacity: 0.5;
}

a.card:hover .card__image, a.card:focus .card__image {
  scale: 0.9;
}
a.card:hover .card__image img, a.card:focus .card__image img {
  scale: 1.11;
}
a.card:hover::after, a.card:focus::after {
  background-color: var(--cl-primary);
}

.gform_heading {
  margin-bottom: 16px;
}

.background-light form {
  --fg-alt: rgba(0, 0, 0, 0.33);
}

form {
  background-color: var(--bg);
  color: var(--fg);
  --fg-alt: rgba(255, 255, 255, 0.33);
  font-family: "filson-pro", sans-serif;
}
form ::placeholder {
  color: var(--fg-alt);
  opacity: 1;
  font-family: inherit;
}
form input,
form label,
form legend,
form select,
form textarea {
  display: block;
  width: 100%;
  color: inherit;
  background: transparent;
  position: relative;
  z-index: 1;
  border: none;
  font-family: inherit;
  font-size: inherit;
}
form .hidden_label label {
  display: none;
}
form label,
form legend {
  background-color: transparent !important;
}
form label .gfield_required,
form legend .gfield_required {
  margin-left: 2px;
}
form input,
form select,
form textarea {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--fg-alt);
}
form select {
  appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
form textarea {
  height: 125px;
  min-height: 100px;
}
form .gform_heading {
  display: none;
}
form .gform-body {
  margin-bottom: 16px;
}
form .gform-body .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 2rem;
}
form .gform-body .gform_fields .gfield {
  grid-column: span 12;
  width: 100%;
  z-index: 2;
}
form .gform-body .gform_fields .gfield--width-full {
  grid-column: span 12;
}
form .gform-body .gform_fields .gfield--width-half {
  grid-column: span 12;
}
@media only screen and (min-width: 1280px) {
  form .gform-body .gform_fields .gfield--width-half {
    grid-column: span 6;
  }
}
form .gform-body .gform_fields .gfield--width-third {
  grid-column: span 12;
}
@media only screen and (min-width: 1280px) {
  form .gform-body .gform_fields .gfield--width-third {
    grid-column: span 4;
  }
}
form .gform-body .gform_fields .gfield--width-quarter {
  grid-column: span 12;
}
@media only screen and (min-width: 1280px) {
  form .gform-body .gform_fields .gfield--width-quarter {
    grid-column: span 3;
  }
}
form .gform-body .gform_fields .gfield.gfield--type-product {
  position: relative;
  background-color: var(--cl-foreground);
  color: var(--cl-background);
  padding: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
form .gform-body .gform_fields .gfield.gfield--type-product .gfield_label {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 1rem;
}
form .gform-body .gform_fields .gfield.gfield--type-product .ginput_product_price_label {
  display: none;
}
form .gform-body .gform_fields .gfield.gfield--type-product .ginput_product_price {
  padding: 0;
  color: var(--cl-secondary);
  font-weight: 900;
  font-size: 32px;
}
form .gform-body .gform_fields .gfield.gfield--type-product .gfield_description {
  font-size: 14px;
  opacity: 0.8;
}
form .gform-body .gform_fields .gfield.gfield--type-product::after {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  right: 0;
  width: 50%;
  background-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/beter.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
form .gform-body .gform_fields .gfield.gfield--type-product .ginput_product_price {
  border: none !important;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container {
  margin-top: 0.5rem;
  width: 100%;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: stretch;
  align-items: stretch;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--cl-background-alt);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  cursor: pointer;
  inline-size: unset;
  max-inline-size: unset;
  min-inline-size: unset;
  display: flex;
  flex-direction: column;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-outer {
  width: 100%;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-outer .gfield-choice-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 0;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-outer .gfield-choice-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  block-size: 100% !important;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-inner label {
  display: block;
  padding: 0.75rem 1rem;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-inner label::before, form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice .gfield-image-choice-wrapper-inner label::after {
  content: none;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice::before, form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice::after {
  content: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 2.5rem;
  width: 2.5rem;
  z-index: 2;
  border-radius: 100vw;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice::before {
  background-color: var(--cl-primary);
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice::after {
  background-color: var(--cl-primary-text);
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg");
  mask-size: 1rem;
  mask-repeat: no-repeat;
  mask-position: center;
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice:where(:has(input:checked)), form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice:hover {
  outline: solid 2px var(--cl-primary);
}
form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice:where(:has(input:checked))::before, form .gform-body .gform_fields .gfield.gfield--type-image_choice .ginput_container .gfield_radio .gchoice:where(:has(input:checked))::after {
  content: "";
}
form .gform-body .gform_fields .gfield .ginput_container_select {
  position: relative;
}
form .gform-body .gform_fields .gfield .ginput_container_select::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1/1;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/caret-down-solid.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1rem 1rem;
  background-color: var(--fg-alt);
  z-index: 2;
  pointer-events: none;
}
form .gform-body .gform_fields .gfield .ginput_container_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem;
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox .gchoice,
form .gform-body .gform_fields .gfield .ginput_container_radio .gchoice,
form .gform-body .gform_fields .gfield .ginput_container_consent .gchoice {
  height: 48px;
  display: flex;
  align-items: center;
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox label,
form .gform-body .gform_fields .gfield .ginput_container_radio label,
form .gform-body .gform_fields .gfield .ginput_container_consent label {
  position: relative;
  padding: 0 0 0 40px;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  cursor: pointer;
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox label::before, form .gform-body .gform_fields .gfield .ginput_container_checkbox label::after,
form .gform-body .gform_fields .gfield .ginput_container_radio label::before,
form .gform-body .gform_fields .gfield .ginput_container_radio label::after,
form .gform-body .gform_fields .gfield .ginput_container_consent label::before,
form .gform-body .gform_fields .gfield .ginput_container_consent label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--bg);
  border: 1px solid var(--fg-alt);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
@media only screen and (min-width: 640px) {
  form .gform-body .gform_fields .gfield .ginput_container_checkbox label::before::after, form .gform-body .gform_fields .gfield .ginput_container_checkbox label::after::after,
  form .gform-body .gform_fields .gfield .ginput_container_radio label::before::after,
  form .gform-body .gform_fields .gfield .ginput_container_radio label::after::after,
  form .gform-body .gform_fields .gfield .ginput_container_consent label::before::after,
  form .gform-body .gform_fields .gfield .ginput_container_consent label::after::after {
    width: 24px;
    height: 24px;
  }
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox label::after,
form .gform-body .gform_fields .gfield .ginput_container_radio label::after,
form .gform-body .gform_fields .gfield .ginput_container_consent label::after {
  content: "";
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg");
  mask-size: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox input,
form .gform-body .gform_fields .gfield .ginput_container_radio input,
form .gform-body .gform_fields .gfield .ginput_container_consent input {
  display: none;
}
form .gform-body .gform_fields .gfield .ginput_container_checkbox input:checked + label::before,
form .gform-body .gform_fields .gfield .ginput_container_radio input:checked + label::before,
form .gform-body .gform_fields .gfield .ginput_container_consent input:checked + label::before {
  background-color: var(--fg);
}
form .gform-body .gform_fields .gfield .ginput_container_radio .gchoice label::before, form .gform-body .gform_fields .gfield .ginput_container_radio .gchoice label::after {
  border-radius: 50%;
}
form .gform-body .gform_fields .gfield .ginput_container_consent {
  height: 48px;
  display: flex;
  align-items: center;
}
form .gform-body .gform_fields .gfield.gfield--type-honeypot {
  display: none;
}
form .gform-body .gform_fields .gfield .gfield_description p {
  max-width: none;
}
form .gform-body .gform_fields .gfield .gfield_description p:last-of-type {
  padding-bottom: 0;
}
form .gform-body .gform_fields .gfield.gfield_visibility_hidden {
  display: none;
}
form .gform_footer,
form .gform_page_footer {
  margin-top: 1rem;
  position: relative;
  text-align: right;
  display: flex;
  justify-content: space-between;
}
form .gform_footer .button,
form .gform_page_footer .button {
  position: relative !important;
}
form .gform_footer .button:last-of-type,
form .gform_page_footer .button:last-of-type {
  margin-left: auto;
}
form .gform_footer .gform_ajax_spinner,
form .gform_page_footer .gform_ajax_spinner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  height: calc(3rem - 8px);
  width: calc(3rem - 8px);
  border-radius: 100vw;
  left: auto;
  z-index: 3;
  background-color: var(--bg);
  object-fit: scale-down;
}
form > p:last-of-type {
  display: none;
}

.gform_required_legend {
  display: none;
}

.gform_validation_errors {
  padding-block: 1rem;
  width: auto;
}
.gform_validation_errors h2, .gform_validation_errors .scroller .scroller__inner span, .scroller .scroller__inner .gform_validation_errors span {
  font-size: 16px;
  background-color: var(--cl-error);
  color: var(--cl-error-text);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding: 1rem 2rem;
}
.gform_validation_errors ol {
  padding: 1rem 2rem;
}
.gform_validation_errors ol li ::marker {
  display: none !important;
}
.gform_validation_errors ol li a {
  color: var(--cl-error);
  text-decoration: none;
}

.gfield_error .ginput_container > * {
  border-bottom: var(--cl-error) 1px solid !important;
}

.validation_message {
  color: var(--cl-error);
}

.background-light .gform_ajax_spinner {
  background-color: var(--bg);
}

.gform_confirmation_wrapper {
  padding-block: 1rem;
  width: max-content;
}
.gform_confirmation_wrapper .gform_confirmation_message {
  font-size: 16px;
  background-color: var(--cl-success);
  color: var(--cl-success-text);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding: 1rem 2rem;
}

.gf_progressbar_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
  color: var(--fg-alt);
}
.gf_progressbar_wrapper .gf_progressbar {
  width: 100%;
  background-color: var(--fg-alt);
}
.gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
  height: 2px;
  background-color: var(--fg);
}
.gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span {
  display: none;
}

section.form .pspel {
  position: relative;
}
section.form .pspel legend {
  padding-right: 48px;
}
section.form .pspel::after {
  content: attr(data-count) " / 20";
  position: absolute;
  width: auto;
  height: 24px;
  text-align: center;
  bottom: 100%;
  right: 0;
  font-weight: 600;
}
section.form .gform_footer,
section.form .gform_page_footer {
  margin-top: 1rem;
  position: relative;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
@media only screen and (min-width: 640px) {
  section.form .gform_footer,
  section.form .gform_page_footer {
    flex-direction: row;
  }
}
section.form .gform_footer .button,
section.form .gform_page_footer .button {
  position: relative !important;
  margin-left: auto;
}
@media only screen and (min-width: 640px) {
  section.form .gform_footer .button,
  section.form .gform_page_footer .button {
    margin-left: 0;
  }
}
section.form .gform_footer .button:last-of-type,
section.form .gform_page_footer .button:last-of-type {
  margin-left: auto;
}
section.form .gform_footer .gform_previous_button::after,
section.form .gform_page_footer .gform_previous_button::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-up-left-regular.svg");
}
section.form .gform_footer .gform_previous_button::before,
section.form .gform_page_footer .gform_previous_button::before {
  background-color: grey;
  opacity: 0.7;
}
section.form .gform_footer .gform_previous_button:hover::before,
section.form .gform_page_footer .gform_previous_button:hover::before {
  border-color: var(--cl-primary);
  background-color: var(--cl-primary);
}
section.form .gform_footer .gform_ajax_spinner,
section.form .gform_page_footer .gform_ajax_spinner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  height: calc(3rem - 8px);
  width: calc(3rem - 8px);
  border-radius: 100vw;
  left: auto;
  z-index: 3;
  background-color: var(--bg);
  object-fit: scale-down;
  display: none;
}
@media only screen and (min-width: 640px) {
  section.form .gform_footer .gform_ajax_spinner,
  section.form .gform_page_footer .gform_ajax_spinner {
    display: block;
  }
}
section.form .gf_progressbar_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
  color: var(--fg-alt);
}
section.form .gf_progressbar_wrapper .gf_progressbar_title::before {
  display: none;
}
section.form .gf_progressbar_wrapper .gf_progressbar {
  width: 100%;
  background-color: var(--fg-alt);
  border-radius: 8px;
}
section.form .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
  height: 2px;
  background-color: var(--cl-primary);
  border-radius: 8px;
}
section.form .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage back span {
  display: none;
}

.pspel .ginput_container .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-block: 32px;
  gap: 8px;
}
@media only screen and (min-width: 640px) {
  .pspel .ginput_container .gfield_checkbox {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1280px) {
  .pspel .ginput_container .gfield_checkbox {
    grid-template-columns: repeat(6, 1fr);
  }
}
.pspel .ginput_container .gfield_checkbox .gchoice .gform-field-label {
  padding: 0 0 0 32px;
}
@media only screen and (min-width: 640px) {
  .pspel .ginput_container .gfield_checkbox .gchoice .gform-field-label {
    padding: 0 0 0 40px;
  }
}
.pspel .ginput_container .gfield_checkbox .gchoice .gform-field-label::before {
  width: 20px !important;
  height: 20px !important;
}
@media only screen and (min-width: 640px) {
  .pspel .ginput_container .gfield_checkbox .gchoice .gform-field-label::before {
    width: 24px;
    height: 24px;
  }
}

.tns-outer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
@media only screen and (min-width: 640px) {
  .tns-outer {
    gap: 2rem;
  }
}
.tns-outer > button {
  background-color: transparent;
  border: none;
  color: var(--fg);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 2px var(--fg);
  opacity: 0.75;
  transition: all 300ms ease;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tns-outer > button:hover {
  opacity: 1;
}
.tns-outer .tns-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 2rem;
}
.tns-outer .tns-nav button {
  width: 100%;
  border: none;
  background-color: var(--fg) !important;
  opacity: 0.4;
  height: 2px;
}
.tns-outer .tns-nav button.tns-nav-active {
  opacity: 0.8;
}
.tns-outer .tns-controls {
  display: flex;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  .tns-outer .tns-controls {
    gap: 2rem;
  }
}
.tns-outer .tns-controls.disabled {
  display: none;
}
.tns-outer .tns-controls button {
  background-color: transparent;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 2px var(--fg);
  opacity: 0.75;
  transition: all 300ms ease;
}
.tns-outer .tns-controls button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-right-light.svg");
  mask-size: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--fg);
  transition: translate 300ms ease;
}
.tns-outer .tns-controls button[data-controls=prev] {
  rotate: 180deg;
}
.tns-outer .tns-controls button:hover {
  opacity: 1;
}
.tns-outer .tns-controls button:hover::after {
  translate: 2px 0;
}
.tns-outer .tns-controls button:active::after {
  translate: 4px 0;
}
.tns-outer .tns-controls button[disabled] {
  opacity: 0.25;
}
.tns-outer .tns-slider {
  cursor: grab;
}
.tns-outer .tns-slider:active {
  cursor: grabbing;
}

.cursor {
  position: absolute;
  height: 64px;
  width: 64px;
  background-color: rgba(33, 33, 33, 0.3764705882);
  border-radius: 100vw;
  pointer-events: none;
  user-select: none;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  transform: translate(-50%, -50%);
  transform-origin: top left;
}
.cursor.hover {
  background-color: #212121;
  scale: 1.5;
}
.cursor span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: white;
  line-height: 1;
  width: 100%;
  text-align: center;
}
.cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 4px;
  background-color: #212121;
  border-radius: 100vw;
}

.sticker {
  position: relative;
  display: none;
  width: 100px;
  height: 100px;
  aspect-ratio: 1/1;
  --bg: var(--cl-foreground);
  --fg: var(--cl-background);
  color: var(--fg);
}
@media only screen and (min-width: 640px) {
  .sticker {
    width: 150px;
    height: 150px;
  }
}
.sticker svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sticker svg #text {
  transform-origin: center;
  transform-box: fill-box;
}
.sticker.rotate {
  animation: rotate-reverse 60s linear infinite;
  animation-play-state: paused;
}
.sticker.rotate svg #text {
  animation: rotate 60s linear infinite;
}
.sticker.rotate:hover {
  animation-play-state: running;
}
.sticker.scroll svg #text {
  animation: rotate 30s linear infinite;
}
@media only screen and (min-width: 1280px) {
  .sticker.logo {
    width: 300px;
    height: 300px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.search__box {
  --bg: var(--cl-background-alt);
  --fg: var(--cl-foreground);
  color: var(--fg);
  position: fixed;
  inset: 0;
  top: 20vh;
  margin: 0 auto auto;
  width: 30rem;
  max-width: calc(100% - 4rem);
  height: max-content;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: all 150ms ease;
}
.search__box.active {
  opacity: 1;
  pointer-events: all;
}
.search__box .close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  cursor: pointer;
  background-color: red;
  border-radius: 100vw;
  translate: 50% -50%;
  border: none;
}
.search__box form {
  border-radius: 1rem;
  background-color: var(--bg);
  padding: 0 1rem;
}
.search__box form input {
  border-bottom: none;
}
.search__box form button {
  display: none;
}
.search__box .search__suggestions {
  position: relative;
  max-height: 20rem;
  overflow-y: scroll;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
}
.search__box .search__suggestions.hidden {
  display: none;
}
.search__box .search__suggestions .search__suggestion {
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: 1.5rem 1.5rem;
  gap: 0 1rem;
  grid-template-areas: "thumbnail title" "thumbnail info";
  color: inherit;
  text-decoration: none;
}
.search__box .search__suggestions .search__suggestion .page-thumbnail {
  grid-area: thumbnail;
  width: 3rem;
  height: 3rem;
  border-radius: 0.25rem;
  background-color: var(--cl-background);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}
.search__box .search__suggestions .search__suggestion .page-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.search__box .search__suggestions .search__suggestion .page-thumbnail img[src=""] {
  display: none;
}
.search__box .search__suggestions .search__suggestion .page-thumbnail img.logo {
  background-color: var(--background-color, var(--cl-background));
  position: absolute;
  inset: 0;
  margin: auto;
}
.search__box .search__suggestions .search__suggestion .page-title {
  grid-area: title;
  line-break: none;
}
.search__box .search__suggestions .search__suggestion .page-info {
  grid-area: info;
  display: flex;
  gap: 1rem;
  opacity: 0.5;
}
.search__box .search__suggestions .search__suggestion .page-link {
  display: none;
}
.search__box .search__suggestions .search__suggestion.active, .search__box .search__suggestions .search__suggestion:hover, .search__box .search__suggestions .search__suggestion:focus {
  background-color: var(--cl-foreground-alt);
  color: var(--cl-background);
  cursor: pointer;
}
.search__box .search__suggestions .search__suggestion.hidden {
  display: none;
}
.search__box::before {
  content: "Klik naast het zoekveld om te sluiten";
  position: absolute;
  bottom: 100%;
  margin-bottom: 0.5rem;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: var(--bg, var(--cl-background)) 1px 0 10px;
  pointer-events: none;
}
.search__box > span {
  margin-top: 0.5rem;
  display: block;
  width: 100%;
  text-align: center;
}

.search__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: all 150ms ease;
}
.search__backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.social__link svg path {
  fill: currentColor;
}

footer {
  position: relative;
  overflow: hidden;
  margin-top: auto;
}
footer .wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  flex-wrap: wrap;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  footer .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  footer .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  footer .wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
}
footer .wrapper .footer__menu {
  grid-row: span 2;
  color: inherit;
}
footer .wrapper .footer__menu ul {
  list-style: none;
}
footer .wrapper .footer__menu ul ul {
  margin-top: 0;
}
footer .wrapper .footer__menu li.button {
  width: fit-content;
  margin-top: 8px;
}
footer .wrapper .footer__menu a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 2;
  transition: all 300ms ease;
}
footer .wrapper .footer__menu a:hover {
  text-decoration: underline;
}
footer .wrapper .footer__menu a .menu-item-icon,
footer .wrapper .footer__menu a .menu-item-description,
footer .wrapper .footer__menu a .menu-item-vacancy-count {
  display: none;
}
footer .wrapper .footer__menu .sub-menu {
  padding-left: 2rem;
}
footer .wrapper .footer__address a,
footer .wrapper .footer__social a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.5;
}
footer .wrapper .footer__address a.social:not(:first-of-type),
footer .wrapper .footer__social a.social:not(:first-of-type) {
  margin-top: 0;
}
footer .wrapper .footer__address a:hover,
footer .wrapper .footer__social a:hover {
  text-decoration: underline;
}
footer .wrapper .footer__newsletter {
  grid-row: 1/span 2;
  grid-column: -2/span 1;
}
footer .wrapper .footer__newsletter form {
  background-color: transparent;
}
footer .wrapper.wrapper--bottom {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  margin-bottom: 0 !important;
}
footer .wrapper .footer__logo img {
  height: var(--logo-height);
  width: auto;
}
footer .wrapper .footer__links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
footer .wrapper .footer__links a {
  color: inherit;
  text-decoration: none;
}
footer .wrapper .footer__links a:hover {
  text-decoration: underline;
}
footer .wrapper.wrapper--tagline {
  grid-template-columns: 1fr;
}
footer .background-element {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-image: radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%);
  opacity: var(--gradient-opacity, 0.25);
}
footer::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-25%, -50%);
  max-height: 150%;
  height: 150%;
  width: auto;
  max-width: 150%;
  aspect-ratio: 1/1;
  opacity: 0;
  background-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/s-filled.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1280px) {
  footer::after {
    opacity: 1;
  }
}

.tagline {
  text-align: center;
  width: 100%;
}
.tagline pink {
  color: var(--cl-secondary);
}

.scroller {
  position: relative;
  z-index: 3;
  max-width: 100%;
  background-color: var(--cl-primary);
}
.scroller .scroller__inner {
  padding-block: 2rem;
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scroller 16s linear infinite;
}
.scroller .scroller__inner span {
  text-align: center;
  width: 100%;
  text-wrap: none;
  width: max-content;
}
.scroller .scroller__inner span pink {
  color: var(--cl-secondary);
}

@keyframes scroller {
  to {
    transform: translateX(calc(-12.5% - 0.5rem));
  }
}
section.footer {
  display: none;
}

section.background-dark + section.footer-line {
  display: block;
  width: 100%;
  height: auto;
  padding-inline: 1rem;
  padding-block: 2rem;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
}
@media only screen and (min-width: 640px) {
  section.background-dark + section.footer-line {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.background-dark + section.footer-line {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.background-dark + section.footer-line {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.background-dark + section.footer-line {
    padding-block: 4rem;
  }
}
section.background-dark + section.footer-line div {
  padding-inline: 1rem;
  background-color: var(--fg);
  opacity: 0.5;
  width: 100%;
  height: 1px;
}
@media only screen and (min-width: 640px) {
  section.background-dark + section.footer-line div {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.background-dark + section.footer-line div {
    padding-inline: 4rem;
  }
}

:root {
  --header-height: 64px;
  --logo-height: 32px;
}
@media only screen and (min-width: 640px) {
  :root {
    --header-height: 112px;
    --logo-height: 40px;
  }
}

header {
  height: auto;
  width: 100%;
  position: fixed;
  top: 0;
  padding-inline: 0.5rem;
  padding-block: 0.5rem;
  z-index: 100;
  --bg: transparent;
  color: var(--fg);
  transition: all 300ms ease;
}
header .wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: var(--header-height);
  grid-template-areas: "logo . buttons button";
  place-items: center;
  width: 100%;
  padding-block: 0;
  border-radius: 4rem;
  transition: all 300ms ease;
  gap: 1rem;
}
@media only screen and (min-width: 1440px) {
  header .wrapper {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo menu buttons";
  }
}
header .header__logo {
  grid-area: logo;
  position: relative;
  display: block;
  margin: 0 auto 0 0;
  padding: 0;
  height: var(--logo-height);
  width: max-content;
  z-index: 6;
  overflow: hidden;
  transition: all 150ms ease;
}
header .header__logo img {
  position: relative;
  height: 100%;
  width: auto;
  z-index: 2;
  transition: transform 300ms ease;
}
header.background-light .header__logo img {
  filter: invert(1);
}
header .header__menu {
  grid-area: menu;
  display: none;
  z-index: 2;
  transition: tansform 300ms ease;
}
@media only screen and (min-width: 1440px) {
  header .header__menu {
    display: block;
  }
}
header .header__menu ul {
  position: relative;
  display: flex;
}
header .header__menu ul div.hover {
  position: absolute;
  bottom: 0.5rem;
  background-color: currentColor;
}
header .header__menu ul li a {
  position: relative;
  display: grid;
  height: 3rem;
  place-items: center;
  color: currentColor;
  user-select: none;
  text-decoration: none;
  padding-inline: 1rem;
}
@media only screen and (min-width: 1280px) {
  header .header__menu ul li a {
    padding-inline: 1.75rem;
  }
}
header .header__menu ul li a span.menu-item-description,
header .header__menu ul li a div.menu-item-icon {
  display: none;
}
header .header__menu ul li a .menu-item-vacancy-count {
  position: absolute;
  top: 0.25rem;
  right: 0.75rem;
  background-color: var(--cl-secondary);
  display: block;
  border-radius: 50px;
  line-height: 1;
  height: 1rem;
  text-align: center;
  display: grid;
  place-items: center;
  font-size: 12px;
  width: auto;
  aspect-ratio: 1/1;
}
header .header__menu ul li.button {
  z-index: 2;
  color: var(--cl-background);
}
header .header__menu ul li.button:hover {
  background-color: var(--cl-background);
  color: var(--cl-foreground);
}
header .header__menu ul li.button a {
  padding: 0 !important;
  height: auto !important;
}
header .header__menu ul li ul.sub-menu {
  --spacing: 40px;
  margin-top: var(--spacing);
  padding: 2rem;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  left: 50%;
  min-width: 100%;
  max-width: 100%;
  transform: translate(-50%);
  gap: 1rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 8px 0 var(--bg, var(--cl-background));
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  background: radial-gradient(circle at top right, var(--cl-foreground-alt) -300%, var(--cl-background-alt) 125%);
  color: var(--cl-background);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 150ms ease;
  z-index: 1;
}
header .header__menu ul li ul.sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--spacing);
}
header .header__menu ul li ul.sub-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 1rem;
  aspect-ratio: 1/1;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #565656;
  z-index: -1;
}
header .header__menu ul li ul.sub-menu li {
  position: relative;
  background-color: var(--cl-background-alt);
  border-radius: 0.75rem;
}
header .header__menu ul li ul.sub-menu li a {
  position: relative;
  color: var(--fg);
  padding: 16px 24px;
  width: max-content;
  min-width: 250px;
  height: auto;
  line-height: 1.5;
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 600;
}
header .header__menu ul li ul.sub-menu li a div.menu-item-icon {
  content: "";
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  height: 2rem;
  width: 3rem;
  background-color: var(--cl-primary);
  transition: background-color 150ms ease;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
header .header__menu ul li ul.sub-menu li a div.menu-item-icon svg {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}
header .header__menu ul li ul.sub-menu li a div.menu-item-icon svg path {
  fill: white;
}
header .header__menu ul li ul.sub-menu li a .menu-item-vacancy-count {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--cl-foreground);
  color: var(--cl-background);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
header .header__menu ul li ul.sub-menu li a span.menu-item-description {
  display: inline;
  font-size: 12px;
  text-transform: initial;
  font-weight: 400;
}
header .header__menu ul li ul.sub-menu li a:hover div.menu-item-icon {
  background-color: var(--cl-secondary);
}
header .header__menu ul li ul.sub-menu li::after {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  background-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-up-right-regular.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 150ms ease;
  filter: invert(1);
}
header .header__menu ul li ul.sub-menu li:hover::after {
  transform: rotate(45deg);
}
header .header__menu ul li:hover ul.sub-menu {
  transition-delay: 150ms;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translate(-50%, 0px);
}
header .header__button {
  grid-area: button;
  --border-size: 2px;
  --size: 3rem;
  --hoff: 0px;
  --voff: 6px;
  --width: 1.5rem;
  --height: 2px;
  aspect-ratio: 1/1;
  border-radius: 100vw;
  background-color: var(--fg);
  color: var(--bg);
  border: var(--border-size) solid var(--fg);
  z-index: 3;
  z-index: 99;
  height: calc(var(--size) - var(--border-size) * 2);
  width: calc(var(--size) - var(--border-size) * 2);
  cursor: pointer;
  position: relative;
  transition: all 150ms ease;
}
@media only screen and (min-width: 1440px) {
  header .header__button {
    display: none;
  }
}
header .header__button .hamburger {
  border-radius: inherit;
  width: 100%;
  aspect-ratio: 1/1;
  z-index: 10;
}
header .header__button span.line {
  display: block;
  position: absolute;
  background-color: var(--cl-background);
  height: 2px;
  width: var(--width);
  right: calc((var(--size) - var(--width)) / 2 - var(--border-size) * 2);
  top: calc(50% - var(--height) / 2);
  transform-origin: center;
  transition: all 0.3s ease;
  border-radius: inherit;
}
header .header__button span.line:nth-of-type(1) {
  translate: 0 calc(var(--voff) * -1);
  scale: 0.75 1;
}
header .header__button span.line:nth-of-type(2) {
  translate: var(--hoff) 0;
  scale: 0.75 1;
}
header .header__button span.line:nth-of-type(3) {
  translate: var(--hoff) 0;
  scale: 0.75 1;
}
header .header__button span.line:nth-of-type(4) {
  translate: 0 var(--voff);
  scale: 0.75 1;
}
@media (hover: hover) {
  header .header__button:hover span.line:nth-of-type(1) {
    scale: 1 1;
  }
  header .header__button:hover span.line:nth-of-type(2) {
    translate: 0 0;
    scale: 0.75 1;
  }
  header .header__button:hover span.line:nth-of-type(3) {
    translate: 0 0;
    scale: 0.75 1;
  }
  header .header__button:hover span.line:nth-of-type(4) {
    scale: 1 1;
  }
}
header .header__buttons {
  grid-area: buttons;
  display: none;
  z-index: 3;
  transition: all 150ms ease;
}
@media only screen and (min-width: 640px) {
  header .header__buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
}
header .header__buttons .button {
  color: var(--cl-background);
}
header .header__buttons .button:hover {
  color: var(--cl-foreground);
}
header .header__buttons .button.wordpress {
  aspect-ratio: 1/1;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
}
header .header__side {
  --transition-duration: 150ms;
  position: absolute;
  top: -1rem;
  right: -1rem;
  min-width: max-content;
  width: 320px;
  max-height: 100dvh;
  height: auto;
  max-width: calc(100vw - 64px);
  z-index: 2;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  color: var(--cl-background);
  z-index: -1;
  pointer-events: none;
  transition: all var(--transition-duration) ease-out;
}
header .header__side .container {
  padding-inline: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-duration) ease-out;
}
header .header__side .container > * + * {
  padding-top: 1rem;
}
header .header__side .container a:not(.button) {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 1rem;
}
header .header__side .container .user {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header .header__side .container .user a {
  display: flex;
  gap: 1rem;
}
header .header__side .container .user img {
  width: 3rem;
  aspect-ratio: 1/1;
  border-radius: 100vw;
}
header .header__side .container .user span.username {
  display: block;
  text-align: left;
  align-self: center;
  width: max-content;
}
header .header__side .container .user .dropdown {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header .header__side .container .menu ul li a {
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: 2;
  color: inherit;
  text-decoration: none;
  font-size: 24px;
  height: 2rem;
  overflow: hidden;
  text-indent: -9999px;
  height: 3rem;
}
header .header__side .container .menu ul li a::before, header .header__side .container .menu ul li a::after {
  content: attr(data-title);
  text-indent: 0px;
  transition: transform 300ms ease;
}
header .header__side .container .menu ul li a::after {
  font-weight: 700;
  position: absolute;
  top: 100%;
  text-decoration: underline;
}
header .header__side .container .menu ul li a:hover::after, header .header__side .container .menu ul li a:hover::before {
  transform: translateY(-100%);
}
header .header__side .container .menu ul li.button {
  width: fit-content;
  margin-top: 8px;
}
header .header__side .container .menu ul li.button:hover {
  background-color: transparent;
  color: var(--cl-background);
}
header .header__side .container .menu ul li.current-menu-item a {
  font-weight: 700;
}
header .header__side .container .menu ul li .sub-menu {
  display: none;
  padding-left: 1rem;
}
header .header__side .container .menu .menu-item-icon,
header .header__side .container .menu .menu-item-description,
header .header__side .container .menu .menu-item-vacancy-count {
  display: none;
}
header .header__side .container .contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header .header__side::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--cl-foreground);
  z-index: -2;
  scale: 0;
  transform-origin: calc(100% - 2rem) 2rem;
  transition: all var(--transition-duration) ease-out var(--transition-duration);
}

body:not(.scrolled-up) header.invert .header__logo,
body:not(.scrolled-up) header.invert .header__button {
  filter: invert(100%);
}

body.menu-open .header__button span.line:nth-of-type(1),
body.menu-open .header__button span.line:nth-of-type(4) {
  transform: scaleX(0);
}
body.menu-open .header__button span.line:nth-of-type(2) {
  transform: rotate(35deg);
}
body.menu-open .header__button span.line:nth-of-type(3) {
  transform: rotate(-35deg);
}
body.menu-open .header__side {
  pointer-events: initial;
}
body.menu-open .header__side .container {
  opacity: 1;
  transition: opacity var(--transition-duration) ease-out var(--transition-duration);
}
body.menu-open .header__side::before {
  opacity: 1;
  scale: 1;
  transition: all var(--transition-duration) ease-out;
}
body.menu-open main {
  filter: brightness(0.5);
}

body.scrolled-down header {
  position: fixed;
  top: 0;
  left: 0;
}
body.scrolled-down header .header__logo img {
  transform: translateX(-70%);
}
body.scrolled-down header .header__menu,
body.scrolled-down header .header__buttons {
  transform: translate(0, -200%);
}

body.scrolled.scrolled-up header .wrapper {
  background-color: var(--cl-background);
}

body.menu-open header {
  transform: translate(0, 0);
  background-color: var(--cl-background);
}
body.menu-open header .header__logo,
body.menu-open header .header__button {
  filter: invert(0%);
}
body.menu-open header .header__logo img {
  transform: translateX(0);
}
body.menu-open header .header__menu,
body.menu-open header .header__buttons {
  transform: translate(0, 0);
}

section.hero .wrapper {
  padding-top: var(--header-height) !important;
}

section.intro .wrapper,
section.intro-alt .wrapper {
  padding-top: calc(var(--header-height) + 1rem) !important;
}

section.blog .filter__container {
  margin-bottom: 2rem;
}
section.blog li.hidden {
  display: none;
}

section.blog-details .wrapper {
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
section.blog-details .wrapper .blog-details__details {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 14px;
}
section.blog-details .wrapper li.date::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/calendar-regular.svg");
}
section.blog-details .wrapper li.author a {
  color: inherit;
  text-decoration: none;
}
section.blog-details .wrapper li.author a:hover {
  text-decoration: underline;
}
section.blog-details .wrapper li.author::after {
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/at-solid.svg");
}

section.cards {
  color: var(--fg);
  overflow: hidden;
}
section.cards .tns-ovh {
  overflow: visible !important;
}

section.intro.background-dark + section.cards.background-dark .wrapper,
section.intro.background-light + section.cards.background-light .wrapper {
  padding-top: 0 !important;
}

section.carousel {
  overflow: hidden;
  color: var(--fg);
}
section.carousel .tns-ovh {
  overflow: visible;
}
section.carousel .slider {
  display: flex;
  gap: 1rem;
}
section.carousel .carousel__image {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  aspect-ratio: 4/3;
}
section.carousel .carousel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.carousel .slider > .slide {
  width: 600px;
}

section.content {
  padding: 8rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  --bg: var(--cl-background);
  --fg: var(--cl-foreground);
  color: var(--fg);
}
@media only screen and (min-width: 640px) {
  section.content {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.content {
    gap: 2rem;
  }
}
section.content .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding-block: 0;
}
@media only screen and (min-width: 640px) {
  section.content .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.content .wrapper {
    gap: 2rem;
  }
}
section.content .wrapper > * {
  flex-basis: 100%;
}
@media only screen and (min-width: 640px) {
  section.content .wrapper {
    flex-direction: row;
    flexwrap: no-wrap;
  }
  section.content .wrapper.turn-around {
    flex-direction: row-reverse;
  }
}
section.content .content__text .text-container > * {
  margin-inline: auto;
}
section.content ul {
  display: grid;
  gap: 1rem;
}
section.content ul li {
  position: relative;
  list-style: none;
  padding-left: 32px;
}
section.content ul li::after, section.content ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--cl-primary);
  border-radius: 50%;
}
section.content ul li::before {
  mask-image: url(https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg);
  mask-size: 0.75rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background: var(--bg);
  z-index: 1;
}
section.content .code-container {
  width: 100%;
  height: 100%;
}
section.content .code-container iframe {
  width: 100%;
  min-height: 320px;
}
section.content .image-container {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
section.content .button-container {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}
section.content.background-light {
  --bg: var(--cl-foreground-alt);
  --fg: var(--cl-background);
}
section.content.center .text-container {
  text-align: center;
}
section.content.center .button-container {
  justify-content: center;
}
section.content.right .text-container {
  text-align: right;
}
section.content.right .button-container {
  justify-content: flex-end;
}

section.content-simple {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  --bg: var(--cl-background);
  --fg: var(--cl-foreground);
  color: var(--fg);
}
@media only screen and (min-width: 640px) {
  section.content-simple {
    gap: 3rem;
  }
}
section.content-simple .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
section.content-simple .wrapper > * {
  flex-basis: 100%;
}
@media only screen and (min-width: 640px) {
  section.content-simple .wrapper {
    flex-direction: row;
    flexwrap: no-wrap;
    gap: 3rem;
  }
  section.content-simple .wrapper.turn-around {
    flex-direction: row-reverse;
  }
}
section.content-simple .text-container > * {
  max-width: 800px;
  margin-inline: auto;
}
section.content-simple.background-light {
  --bg: var(--cl-foreground-alt);
  --fg: var(--cl-background);
}
section.content-simple.center .text-container {
  text-align: center;
}
section.content-simple.center .button-container {
  justify-content: center;
}
section.content-simple.right .text-container {
  text-align: right;
}
section.content-simple.right .button-container {
  justify-content: flex-end;
}

section.cta {
  color: var(--fg);
}
section.cta .cta {
  position: relative;
  background-color: var(--fg);
  color: var(--bg);
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 640px) {
  section.cta .cta {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.cta .cta {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.cta .cta {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.cta .cta {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.cta .cta h2, section.cta .cta .scroller .scroller__inner span, .scroller .scroller__inner section.cta .cta span {
    display: block;
    width: 50%;
  }
  section.cta .cta .button-container {
    align-self: flex-end;
  }
  section.cta .cta .button-container .button {
    color: var(--fg);
    background-color: var(--bg);
  }
  section.cta .cta .button-container .button:hover {
    color: var(--bg);
    background-color: var(--fg);
    border-color: var(--bg);
  }
}
section.cta .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/logo.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: var(--bg);
  opacity: 0.05;
  transform: translate(50%, -50%);
}
@media only screen and (min-width: 640px) {
  section.cta .cta::after {
    opacity: 1;
  }
}

section.customer-slider {
  color: var(--fg);
  overflow: hidden;
}
section.customer-slider .wrapper {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
section.customer-slider .slider {
  left: auto;
  display: flex;
  width: max-content;
  transition-timing-function: linear;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.customer-slider .slider {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.customer-slider .slider {
    gap: 2rem;
  }
}
section.customer-slider .slide {
  display: grid;
  place-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: currentColor;
  aspect-ratio: 2/1;
  isolation: isolate;
}
section.customer-slider .slide img {
  width: 100%;
  height: 100%;
}
section.customer-slider .slide .logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
}
section.customer-slider .slide span {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 16px;
}
section.customer-slider .slide:hover .logo, section.customer-slider .slide:focus-visible .logo, section.customer-slider .slide:focus-within .logo, section.customer-slider .slide:active .logo {
  opacity: 1 !important;
}
section.customer-slider.background-light .logo {
  filter: invert(1);
}

section.customer-slider + section.customer-slider {
  transform: scaleX(-1);
}
section.customer-slider + section.customer-slider img {
  transform: scaleX(-1);
}

section.experience .wrapper {
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
section.experience .cards-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}
@media only screen and (min-width: 640px) {
  section.experience .cards-container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.experience .cards-container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.experience .cards-container {
    flex-direction: row;
  }
}
section.experience .cards-container li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: auto;
  background-color: transparent;
  color: var(--fg);
}
@media only screen and (min-width: 640px) {
  section.experience .cards-container li {
    width: auto;
  }
  section.experience .cards-container li:nth-child(odd) {
    align-self: flex-start;
    justify-self: flex-start;
    margin-right: 15rem;
  }
  section.experience .cards-container li:nth-child(even) {
    margin-top: 0;
    align-self: flex-end;
    justify-self: flex-end;
    margin-left: 15rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.experience .cards-container li {
    width: 100%;
  }
  section.experience .cards-container li:nth-child(odd) {
    margin-right: 0;
  }
  section.experience .cards-container li:nth-child(even) {
    margin-top: 4rem;
    margin-left: 0;
  }
}
section.experience .cards-container li .result-container {
  width: fit-content;
}
section.experience .cards-container li .result {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
section.experience .cards-container li .result strong {
  font-weight: 700;
  font-size: 24px;
}
section.experience .cards-container li .result::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--cl-primary);
  mask: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/chevrons-up-solid.svg") no-repeat center;
  mask-size: contain;
}
section.experience .cards-container li .image-container {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
}
section.experience .cards-container li .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.experience .cards-container li .title {
  color: var(--fg);
}

section.features {
  color: var(--fg);
  --bg-alt: var(--cl-background-alt);
}
section.features.background-light {
  --bg-alt: var(--cl-foreground);
}
section.features .wrapper .features__container {
  background-color: var(--bg-alt);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding-inline: 1rem;
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.features .wrapper .features__container {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.features .wrapper .features__container {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.features .wrapper .features__container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.features .wrapper .features__container {
    padding-block: 4rem;
  }
}
section.features .wrapper .text-container {
  margin-inline: auto;
  text-align: center;
}
section.features .wrapper .text-container .button-container {
  justify-content: center;
}
section.features .wrapper .features__features {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.features .wrapper .features__features {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.features .wrapper .features__features {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.features .wrapper .features__features {
    padding-inline: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 640px) and (min-width: 640px) {
  section.features .wrapper .features__features {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 640px) and (min-width: 1280px) {
  section.features .wrapper .features__features {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.features .wrapper .features__features {
    grid-template-columns: repeat(3, 1fr);
  }
}
section.features .wrapper .features__features .features__feature {
  position: relative;
  display: flex;
  flex-direction: column;
}
section.features .wrapper .features__features .features__feature h3, section.features .wrapper .features__features .features__feature section.hero .hero__services li a, section.hero .hero__services li section.features .wrapper .features__features .features__feature a {
  font-size: 20px;
  font-weight: 600;
  font-family: "filson-pro", sans-serif;
}
section.form.background-light .form-container {
  --fg-alt: rgba(0, 0, 0, 0.33);
}

section.form {
  padding-block: 2rem;
  color: var(--fg);
  --fg-alt: rgba(255, 255, 255, 0.33);
}
@media only screen and (min-width: 640px) {
  section.form {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.form {
    padding-block: 4rem;
  }
}
section.form form {
  background-color: transparent;
}
section.form .wrapper {
  background-color: var(--bg-alt);
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "title" "text" "team" "form";
  gap: 2rem;
  row-gap: 1rem !important;
}
@media only screen and (min-width: 640px) {
  section.form .wrapper {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.form .wrapper {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.form .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.form .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.form .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.form .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.form .wrapper:not(.no-team-member) {
    grid-template-columns: 60% auto;
    grid-template-rows: auto auto;
    grid-template-areas: "title team" "form team";
  }
}
section.form .wrapper.no-team-member {
  gap: 0px;
  grid-template-areas: "title text" "form form";
}
section.form .wrapper.no-team-member .text {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
section.form .title {
  grid-area: title;
}
section.form .title p {
  margin-top: 2rem;
}
section.form .content {
  grid-area: team;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  grid-row: span 2;
}
section.form .content span {
  font-size: 20px;
  font-weight: 600;
}
section.form .team__member {
  margin-top: 0;
  max-width: 240px;
}
section.form .team__member .custom__image {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: all 300ms ease;
  aspect-ratio: 2/3;
  max-height: 400px;
}
section.form .team__member .custom__image img {
  width: 100%;
  height: 100%;
  transition: all 300ms ease;
}
section.form .team__member .team__info {
  display: none !important;
}
@media only screen and (min-width: 640px) {
  section.form .team__member {
    max-width: 400px;
  }
}
section.form .form-container {
  grid-area: form;
  max-width: 100%;
}
section.form .form-container * + .gform_wrapper {
  margin-top: auto;
}
section.form .form-container p {
  position: relative;
}
section.form .form-container p:before {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--fg-alt);
}

section.hero {
  position: relative;
  overflow: hidden;
  color: var(--fg);
}
section.hero .wrapper {
  display: flex;
  flex-direction: column;
}
section.hero.background-light::before {
  content: none;
}
section.hero .hero__top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 640px) {
  section.hero .hero__top {
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }
  section.hero .hero__top > * {
    flex-basis: 50%;
  }
}
section.hero .hero__top .sticker {
  display: none;
  position: absolute;
  bottom: 6rem;
  right: 3rem;
  z-index: 10;
}
@media only screen and (min-width: 640px) {
  section.hero .hero__top .sticker {
    display: initial;
  }
}
section.hero .hero__top .hero__content {
  z-index: 2;
}
section.hero .hero__top .hero__content h2.title, section.hero .hero__top .hero__content .scroller .scroller__inner span.title, .scroller .scroller__inner section.hero .hero__top .hero__content span.title {
  font-size: 32px;
}
@media only screen and (min-width: 1280px) {
  section.hero .hero__top .hero__content h2.title, section.hero .hero__top .hero__content .scroller .scroller__inner span.title, .scroller .scroller__inner section.hero .hero__top .hero__content span.title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1920px) {
  section.hero .hero__top .hero__content h2.title, section.hero .hero__top .hero__content .scroller .scroller__inner span.title, .scroller .scroller__inner section.hero .hero__top .hero__content span.title {
    font-size: 64px;
  }
}
section.hero .hero__top .hero__image, section.hero .hero__top .hero__video {
  height: auto;
}
section.hero .canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
section.hero .canvas-container .progress {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  font-size: 10vmin;
  opacity: 0.5;
  display: grid;
  place-items: center;
}
section.hero .hero__slider {
  transition: transform 0.3s ease;
}
section.hero .hero__slide .hero__image {
  aspect-ratio: 4/3;
}
section.hero .hero__slide .hero__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section.hero .hero__slide .hero__video {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
}
section.hero .hero__slide .hero__video video {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
}
section.hero .hero__services {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  section.hero .hero__services {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.hero .hero__services {
    flex-direction: row;
  }
}
section.hero .hero__services li {
  display: block;
  width: 100%;
  margin: 0;
}
section.hero .hero__services li a {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 48px auto 1fr;
  grid-template-areas: "icon" "title" "description";
  gap: 1rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding-inline: 1rem;
  padding-block: 2rem;
  --bg: var(--cl-foreground-alt);
  --fg: var(--cl-background-alt);
  background-color: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 640px) {
  section.hero .hero__services li a {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.hero .hero__services li a {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.hero .hero__services li a {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.hero .hero__services li a {
    padding-block: 4rem;
  }
}
section.hero .hero__services li a .menu-item-icon {
  grid-area: icon;
  width: 3rem;
  height: 3rem;
  border: 2px solid transparent;
  background-color: var(--fg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}
section.hero .hero__services li a .menu-item-icon svg {
  width: 50%;
}
section.hero .hero__services li a .menu-item-icon svg path {
  fill: var(--bg);
}
section.hero .hero__services li a .menu-item-description {
  grid-area: description;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
section.hero .hero__services li a:hover {
  --bg: var(--cl-background-alt);
  --fg: var(--cl-foreground);
}
section.hero .hero__services li a:hover .menu-item-icon {
  background-color: transparent;
  border-color: var(--fg);
}
section.hero .hero__services li a:hover .menu-item-icon svg path {
  fill: var(--fg);
}

section.highlight {
  color: var(--fg);
  --alt: var(--cl-foreground-alt);
  width: 100%;
  overflow: hidden;
}
section.highlight.background-light {
  --alt: var(--cl-foreground);
}
section.highlight h2, section.highlight .scroller .scroller__inner span, .scroller .scroller__inner section.highlight span {
  color: #838383;
  opacity: 1;
}
section.highlight .highlight__slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.highlight .highlight__slider {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.highlight .highlight__slider {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.highlight .highlight__slider {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
}
@media only screen and (min-width: 1280px) and (min-height: 800px) {
  section.highlight .highlight__slider {
    display: flex;
    flex-direction: row;
  }
  section.highlight .highlight__slider .card {
    flex-shrink: 0;
    width: 30rem;
  }
  section.highlight .highlight__slider .card .card__footer {
    display: none;
  }
}

section.image,
section.video {
  transform-origin: center top;
  margin-inline: auto;
}
section.image .wrapper .image-container,
section.video .wrapper .image-container {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  background-color: var(--cl-foreground-alt);
  aspect-ratio: 21/9;
  width: 100%;
  min-height: 16rem;
}
section.image img,
section.image video,
section.video img,
section.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.image.background-light,
section.video.background-light {
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.image.background-light,
  section.video.background-light {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.image.background-light,
  section.video.background-light {
    padding-block: 4rem;
  }
}

section.image-text {
  color: var(--fg);
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.image-text {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.image-text {
    padding-block: 4rem;
  }
}
section.image-text .wrapper {
  background-color: var(--bg-alt);
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.image-text .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.image-text .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.image-text .wrapper {
    flex-direction: row;
  }
  section.image-text .wrapper .image-text__content {
    width: 600px;
    max-width: 50%;
    flex-shrink: 0;
  }
}
section.image-text .wrapper .image-text__image {
  position: relative;
  border-radius: 1rem 1rem 1rem 1rem;
  padding-right: 1rem;
  width: 100%;
}
@media only screen and (min-width: 640px) {
  section.image-text .wrapper .image-text__image {
    padding-right: 0;
  }
}
section.image-text .wrapper .image-text__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
section.image-text .wrapper .image-text__image img.contain {
  object-fit: contain;
  object-position: center;
  border-radius: none;
}
section.image-text .wrapper .image-text__image .sticker {
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
}
@media only screen and (min-width: 640px) {
  section.image-text .wrapper .image-text__image .sticker {
    top: -75px;
    left: calc(50% - 75px);
  }
}
section.image-text .wrapper .image-text__content {
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.image-text .wrapper .image-text__content {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.image-text .wrapper .image-text__content {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.image-text.reverse .wrapper {
    flex-direction: row-reverse;
  }
}

body[home] section.image-text .wrapper {
  padding-inline: 0;
}
body[home] section.image-text .wrapper .image-text__image {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media only screen and (min-width: 1536px) {
  body[home] section.image-text .wrapper .image-text__image {
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}
body[home] section.image-text .wrapper .image-text__content {
  padding-block: 2rem;
  padding-right: 1rem;
}
@media only screen and (min-width: 640px) {
  body[home] section.image-text .wrapper .image-text__content {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  body[home] section.image-text .wrapper .image-text__content {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  body[home] section.image-text .wrapper .image-text__content {
    padding-right: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  body[home] section.image-text .wrapper .image-text__content {
    padding-right: 4rem;
  }
}
@media only screen and (min-width: 1536px) {
  body[home] section.image-text .wrapper .image-text__content {
    padding-right: 0;
  }
}
body[home] section.image-text .wrapper.reverse .image-text__image {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media only screen and (min-width: 1536px) {
  body[home] section.image-text .wrapper.reverse .image-text__image {
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}
body[home] section.image-text .wrapper.reverse .image-text__content {
  padding-left: 1rem;
  padding-right: 0;
}
@media only screen and (min-width: 640px) {
  body[home] section.image-text .wrapper.reverse .image-text__content {
    padding-left: 2rem;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1280px) {
  body[home] section.image-text .wrapper.reverse .image-text__content {
    padding-left: 4rem;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1536px) {
  body[home] section.image-text .wrapper.reverse .image-text__content {
    padding-left: 0;
    padding-right: 0;
  }
}

section.interactive-features {
  display: relative;
  color: var(--fg);
  width: 100%;
}
section.interactive-features .wrapper {
  display: grid;
  grid-gap: 2rem;
  max-width: 1280px;
}
@media only screen and (min-width: 640px) {
  section.interactive-features .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1280px) {
  section.interactive-features .wrapper {
    gap: 4rem;
  }
}
section.interactive-features .wrapper .container-left {
  height: fit-content;
}
@media only screen and (min-width: 640px) {
  section.interactive-features .wrapper .container-left {
    top: 8rem;
    position: sticky;
  }
}
section.interactive-features .wrapper .container-right {
  display: grid;
  gap: 1rem;
}
@media only screen and (min-width: 1280px) {
  section.interactive-features .wrapper .container-right.grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
section.interactive-features .wrapper .container-right .feature {
  position: relative;
  background-color: var(--fg);
  color: var(--bg);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  cursor: pointer;
  transition-property: background-color, color, scale;
  transition-duration: 400ms;
  transition-timing-function: ease;
}
section.interactive-features .wrapper .container-right .feature:has(.active) {
  background-color: var(--bg);
  color: var(--fg);
  outline: 2px solid var(--fg);
}
section.interactive-features .wrapper .container-right .feature > .text-container {
  padding: 2rem;
}
section.interactive-features .wrapper .container-right .feature ul {
  grid-template-columns: 1fr;
}
section.interactive-features .wrapper .container-right .feature ul li::before {
  background: var(--cl-foreground);
}
section.interactive-features .wrapper .container-right .feature::before, section.interactive-features .wrapper .container-right .feature::after {
  content: "";
  transition: all 300ms ease;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  height: 2rem;
  width: 2rem;
  aspect-ratio: 1/1;
}
section.interactive-features .wrapper .container-right .feature::before {
  border-radius: 50%;
  border: 2px solid;
  border-color: transparent;
  z-index: 2;
  background-color: var(--cl-primary);
}
section.interactive-features .wrapper .container-right .feature::after {
  margin: auto;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-up-right-regular.svg");
  mask-size: 0.75rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--cl-primary-text);
  transition: all 300ms ease;
  z-index: 3;
  pointer-events: none;
}
section.interactive-features .wrapper .container-right .feature:hover, section.interactive-features .wrapper .container-right .feature:focus {
  scale: 1.03;
}
section.interactive-features .wrapper .container-right .feature:hover::before, section.interactive-features .wrapper .container-right .feature:focus::before {
  border-color: var(--cl-secondary);
  background-color: var(--cl-secondary);
}
section.interactive-features .wrapper .container-right .feature:hover::after, section.interactive-features .wrapper .container-right .feature:focus::after {
  animation: fly-by 300ms ease normal;
}
section.interactive-features .wrapper .pop-up.feature {
  display: none;
}
section.interactive-features .wrapper .pop-up.feature.active {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--fg);
  color: var(--bg);
  width: calc(100% - 2rem);
  max-width: 800px;
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0px 0px 8px 0 var(--bg, var(--cl-background));
  z-index: 99;
}
@media only screen and (min-width: 640px) {
  section.interactive-features .wrapper .pop-up.feature.active {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.interactive-features .wrapper .pop-up.feature.active {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.interactive-features .wrapper .pop-up.feature.active {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.interactive-features .wrapper .pop-up.feature.active {
    padding-block: 4rem;
  }
}
section.interactive-features .wrapper .pop-up.feature.active #closeFeature {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  aspect-ratio: 1/1;
  cursor: pointer;
}
section.interactive-features .wrapper .pop-up.feature.active #closeFeature::after, section.interactive-features .wrapper .pop-up.feature.active #closeFeature::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--bg);
}
section.interactive-features .wrapper .pop-up.feature.active #closeFeature::after {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
section.interactive-features .wrapper .pop-up.feature.active #closeFeature::before {
  content: "";
  background-color: var(--fg);
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/close-x.svg");
  mask-size: 1rem;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 1;
  transition: all 300ms ease;
}
section.interactive-features .wrapper .pop-up.feature.active #closeFeature:hover::before {
  background-color: var(--cl-secondary);
  scale: 1.1;
}
section.interactive-features .wrapper .pop-up.feature:has(.button-container) .text-container {
  padding-bottom: 2rem;
}
section.interactive-features .wrapper .pop-up.feature .button {
  background-color: var(--bg);
  color: var(--fg);
  border-color: var(--bg);
}
section.interactive-features .wrapper .pop-up.feature .button:hover {
  background-color: transparent;
  color: var(--bg);
}
@keyframes fly-by {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  49% {
    transform: translate(1.5rem, -1.5rem);
    opacity: 0;
  }
  51% {
    transform: translate(-1.5rem, 1.5rem);
    opacity: 0;
  }
}

section.intro {
  position: relative;
  padding-block: 2rem;
  background-color: transparent;
  overflow: hidden;
}
@media only screen and (min-width: 640px) {
  section.intro {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro {
    padding-block: 4rem;
  }
}
section.intro .wrapper {
  position: relative;
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
@media only screen and (min-width: 640px) {
  section.intro .wrapper {
    flex-direction: row;
    align-items: center;
  }
}
section.intro .wrapper .content {
  position: relative;
  max-width: 800px;
}
section.intro .wrapper .content h1 {
  position: unset;
}
@media only screen and (min-width: 1280px) {
  section.intro .wrapper .content h1 {
    position: relative;
  }
}
section.intro .wrapper .team-image,
section.intro .wrapper .image-container {
  z-index: 1;
  justify-self: flex-end;
  align-self: center;
  height: 100%;
  max-height: 420px;
  aspect-ratio: 3/4;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
@media only screen and (min-width: 640px) {
  section.intro .wrapper .team-image,
  section.intro .wrapper .image-container {
    margin-left: auto;
  }
}
section.intro .wrapper .team-image img,
section.intro .wrapper .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.intro .wrapper .image-container {
  aspect-ratio: 4/3;
}
section.intro .wrapper .sticker {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
@media only screen and (min-width: 640px) {
  section.intro .wrapper .sticker {
    right: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro .wrapper .sticker {
    display: block;
    right: 4rem;
  }
}
section.intro .wrapper .team-image + .sticker,
section.intro .wrapper .image-container + .sticker {
  right: 0rem;
}

section.intro ~ section.intro .sticker {
  display: none;
}

section.divider + section.hero .wrapper,
section.divider + section.intro .wrapper {
  padding-top: 0 !important;
}

section.intro-alt {
  position: relative;
  padding-block: 2rem;
  background-color: transparent;
  overflow: hidden;
}
@media only screen and (min-width: 640px) {
  section.intro-alt {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro-alt {
    padding-block: 4rem;
  }
}
section.intro-alt .wrapper {
  position: relative;
  padding-inline: 1rem;
  padding-block: 2rem;
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
@media only screen and (min-width: 640px) {
  section.intro-alt .wrapper {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro-alt .wrapper {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.intro-alt .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro-alt .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.intro-alt .wrapper {
    flex-direction: row;
    align-items: center;
  }
}
section.intro-alt .wrapper .content {
  position: relative;
  max-width: 800px;
}
section.intro-alt .wrapper .content h1 {
  position: unset;
}
@media only screen and (min-width: 1280px) {
  section.intro-alt .wrapper .content h1 {
    position: relative;
  }
}
section.intro-alt .wrapper .content ul {
  grid-template-columns: auto;
}
section.intro-alt .wrapper .button-container .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: fit-content;
}
section.intro-alt .wrapper .button-container .container .button-subtext {
  font-size: 14px;
  opacity: 0.8;
  margin-left: 0.1rem;
}
section.intro-alt .wrapper .team-image,
section.intro-alt .wrapper .image-container {
  z-index: 1;
  justify-self: flex-end;
  align-self: center;
  height: 100%;
  max-height: 420px;
  aspect-ratio: 3/4;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
@media only screen and (min-width: 640px) {
  section.intro-alt .wrapper .team-image,
  section.intro-alt .wrapper .image-container {
    margin-left: auto;
  }
}
section.intro-alt .wrapper .team-image img,
section.intro-alt .wrapper .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.intro-alt .wrapper .image-container {
  aspect-ratio: 4/3;
}
section.intro-alt .wrapper .sticker {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
@media only screen and (min-width: 640px) {
  section.intro-alt .wrapper .sticker {
    right: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.intro-alt .wrapper .sticker {
    display: block;
    right: 4rem;
  }
}
section.intro-alt .wrapper .team-image + .sticker,
section.intro-alt .wrapper .image-container + .sticker {
  right: 0rem;
}

section.intro ~ section.intro .sticker {
  display: none;
}

section.divider + section.hero .wrapper,
section.divider + section.intro .wrapper {
  padding-top: 0 !important;
}

section.large-image {
  position: relative;
  padding: 0;
}
section.large-image .image-container {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 640px) {
  section.large-image .image-container {
    margin-bottom: 0;
  }
}
section.large-image .text-container {
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 2;
  margin: auto 0 0 0;
}
@media only screen and (min-width: 640px) {
  section.large-image .text-container {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.large-image .text-container {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.large-image .text-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.large-image .text-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1080px) {
  section.large-image {
    overflow: hidden;
  }
  section.large-image .wrapper {
    height: 100%;
    position: relative;
    aspect-ratio: 16/9;
    padding-bottom: 0;
  }
  section.large-image .image-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform-origin: center top;
  }
  section.large-image .image-container img {
    width: 100%;
    height: 100%;
  }
  section.large-image .text-container {
    position: absolute;
    bottom: 0;
    right: 1rem;
    width: clamp(640px, 50%, 980px);
  }
}
@media only screen and (min-width: 1080px) and (min-width: 640px) {
  section.large-image .text-container {
    right: 2rem;
  }
}
@media only screen and (min-width: 1080px) and (min-width: 1280px) {
  section.large-image .text-container {
    right: 4rem;
  }
}
section.large-image.background-light .text-container {
  background-color: var(--bg);
  color: var(--fg);
}
section.large-image.background-dark .text-container {
  background-color: var(--bg);
  color: var(--fg);
}

section.pricing {
  color: var(--fg);
  --featured-fg: var(--cl-background);
  --featured-bg: var(--cl-foreground-alt);
  --alt-fg: var(--cl-foreground-alt);
  --alt-bg: var(--cl-background-alt);
}
section.pricing.background-light {
  --featured-fg: var(--cl-foreground);
  --featured-bg: var(--cl-background);
  --alt-fg: var(--cl-background);
  --alt-bg: var(--cl-foreground);
}
section.pricing .wrapper {
  padding-inline: 1rem;
  padding-block: 2rem;
  max-width: 1600px;
}
@media only screen and (min-width: 640px) {
  section.pricing .wrapper {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.pricing .wrapper {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.pricing .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.pricing .wrapper {
    padding-block: 4rem;
  }
}
section.pricing .wrapper .pricing__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.pricing .wrapper .pricing__container {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.pricing .wrapper .pricing__container {
    flex-direction: row;
    justify-content: center;
  }
}
section.pricing .wrapper .pricing__container .pricing__option {
  position: relative;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--fg);
  overflow: hidden;
  padding: 1rem;
}
@media only screen and (min-width: 640px) {
  section.pricing .wrapper .pricing__container .pricing__option {
    max-width: calc(50% - 1rem);
    padding: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.pricing .wrapper .pricing__container .pricing__option {
    max-width: calc(33% - 1.33334rem);
    padding-block: 2rem;
    margin-block: 2rem;
  }
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__intro {
  font-size: 14px;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__features {
  margin-block: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__features li {
  display: flex;
  align-items: center;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  margin: auto 0 2rem;
  text-align: left;
  padding-top: 2rem;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--fg);
  opacity: 0.5;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price small {
  font-size: 0.6em;
  font-weight: 400;
  margin-bottom: 1rem;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price span:nth-of-type(1) {
  font-size: 32px;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price span:nth-of-type(2) {
  font-size: 20px;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price span:nth-of-type(3) {
  font-size: 16px;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__price .yearly del {
  margin-right: 1rem;
  font-weight: inherit;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__footer {
  justify-self: flex-end;
  text-align: center;
}
section.pricing .wrapper .pricing__container .pricing__option .pricing__footer .button {
  margin: auto 0 0;
}
section.pricing .wrapper .pricing__container .pricing__option--featured {
  --fg: var(--featured-fg);
  --bg: var(--featured-bg);
  margin-block: 0rem;
}
section.pricing .wrapper .pricing__container .pricing__option--featured li::before {
  opacity: 1 !important;
  background-color: var(--cl-primary) !important;
}
section.pricing .wrapper .pricing__container .pricing__option--featured h3, section.pricing .wrapper .pricing__container .pricing__option--featured section.hero .hero__services li a, section.hero .hero__services li section.pricing .wrapper .pricing__container .pricing__option--featured a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}
section.pricing .wrapper .pricing__container .pricing__option--featured h3::before, section.pricing .wrapper .pricing__container .pricing__option--featured section.hero .hero__services li a::before, section.hero .hero__services li section.pricing .wrapper .pricing__container .pricing__option--featured a::before {
  content: "Beste keus!";
  top: 0.5rem;
  left: 50%;
  padding: 0.5rem 1rem;
  background-color: var(--cl-primary);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  flex-shrink: 0;
}
section.pricing .wrapper .pricing__container .pricing__option.featured-before, section.pricing .wrapper .pricing__container .pricing__option.featured-after {
  --fg: var(--alt-fg);
  --bg: var(--alt-bg);
  background-color: var(--bg);
}
@media only screen and (min-width: 1280px) {
  section.pricing .wrapper .pricing__container .pricing__option.featured-before, section.pricing .wrapper .pricing__container .pricing__option.featured-after {
    padding-block: 2rem;
    margin-block: 2rem;
  }
}
section.related {
  overflow: hidden;
}
section.related .tns-ovh {
  overflow: visible !important;
}
section.related .wrapper > .button-container {
  padding-block: 2rem;
  padding-top: 6rem !important;
  padding-bottom: 0 !important;
  justify-content: center;
}
@media only screen and (min-width: 640px) {
  section.related .wrapper > .button-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.related .wrapper > .button-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.related .wrapper .card__container .card:nth-of-type(4) {
    display: none;
  }
}

section.reviews {
  position: relative;
  width: 100%;
  color: var(--fg);
  --alt: var(--cl-foreground);
  --alt-text: var(--cl-background);
  overflow: hidden;
  width: 100%;
}
section.reviews .wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}
@media only screen and (min-width: 640px) {
  section.reviews .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.reviews .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.reviews .wrapper {
    gap: 4rem;
  }
}
section.reviews .wrapper > * {
  width: 100%;
}
@media only screen and (min-width: 1280px) {
  section.reviews .wrapper {
    display: grid;
    grid-template-columns: 33.33% 66.67%;
    gap: 8rem;
  }
  section.reviews .wrapper .reviews__content {
    width: 100%;
    z-index: 2;
    background-color: var(--bg);
    position: relative;
    isolation: isolate;
    z-index: 1;
  }
  section.reviews .wrapper .reviews__content::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8rem;
    width: 100vw;
    height: 100%;
    background-color: inherit;
    z-index: -1;
  }
  section.reviews .wrapper .reviews__slider {
    width: 100%;
  }
  section.reviews .wrapper .reviews__slider .slide:nth-child(odd) {
    margin-bottom: 4rem;
  }
  section.reviews .wrapper .reviews__slider .slide:nth-child(even) {
    margin-top: 4rem;
  }
  section.reviews .wrapper .reviews__slider .review__item {
    aspect-ratio: 3/4;
    max-width: 400px;
  }
}
section.reviews .wrapper .tns-ovh {
  overflow: visible;
}
section.reviews .wrapper .slide .review__item {
  background-color: var(--alt);
  color: var(--alt-text);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding-inline: 1rem;
  padding-block: 2rem;
  user-select: none;
}
@media only screen and (min-width: 640px) {
  section.reviews .wrapper .slide .review__item {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.reviews .wrapper .slide .review__item {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.reviews .wrapper .slide .review__item {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.reviews .wrapper .slide .review__item {
    padding-block: 4rem;
  }
}
section.reviews .wrapper .slide .review__item .image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  max-width: 300px;
  height: auto;
}

section.services-home {
  color: var(--fg);
  position: relative;
}
section.services-home .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
  padding-block: 2rem;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.services-home .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-home .wrapper {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-home .wrapper {
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: auto;
    gap: 8rem;
  }
}
section.services-home .wrapper .services__links {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.services-home .wrapper .services__links .services__link {
  position: relative;
  color: currentColor;
  text-decoration: none;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 32px;
  align-content: center;
  padding-right: 3.5rem;
  line-height: 1.2;
  height: 6rem;
  transition: color 300ms ease;
}
section.services-home .wrapper .services__links .services__link::before, section.services-home .wrapper .services__links .services__link:last-of-type::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--fg);
  opacity: 0.2;
}
section.services-home .wrapper .services__links .services__link:last-of-type::after {
  top: auto;
  bottom: 0;
}
section.services-home .wrapper .services__links .services__link .icon {
  grid-area: icon;
  background-color: currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  width: 2.5rem;
  height: fit-content;
  aspect-ratio: 1/1;
  transition: all 300ms ease;
}
section.services-home .wrapper .services__links .services__link .icon svg {
  fill: var(--bg);
  transition: opacity 300ms ease;
  width: 1rem;
  height: 1rem;
  transform: translate(2px, -2px);
}
section.services-home .wrapper .services__links .services__link:hover {
  color: var(--cl-primary);
  text-decoration: underline;
}
section.services-home .wrapper .services__links .services__link:hover svg {
  opacity: 1;
  animation: fly-by 300ms ease normal;
}

section.services {
  color: var(--fg);
}
section.services.background-dark {
  background-color: transparent;
}
section.services .wrapper .category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  height: auto;
  margin-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.services .wrapper .category {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services .wrapper .category {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.services .wrapper .category {
    height: auto;
    margin-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services .wrapper .category {
    height: 420px;
  }
}
section.services .wrapper .category .image {
  position: relative;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  height: 100%;
  display: none;
}
section.services .wrapper .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.services .wrapper .category .image img.service-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 300ms ease;
  z-index: 2;
}
section.services .wrapper .category .image img.service-image.visible {
  opacity: 1;
  scale: 1.025;
}
@media only screen and (min-width: 640px) {
  section.services .wrapper .category .image {
    display: block;
    height: 320px;
  }
}
@media only screen and (min-width: 1280px) {
  section.services .wrapper .category .image {
    height: 420px;
  }
}
section.services .wrapper .category .content {
  height: 100%;
}
section.services .wrapper .category .content .services-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0 4rem;
  height: 100%;
  padding-bottom: 4rem;
}
section.services .wrapper .category .content .services-list li {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
section.services .wrapper .category .content .services-list li img {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
}
section.services .wrapper .category .content .services-list li a {
  display: block;
  color: inherit;
  text-decoration: none;
}
section.services .wrapper .category .content .services-list li a:hover {
  text-decoration: underline;
}
section.services .wrapper .category .content .services-list li .tag {
  --size: 0.5rem;
  --margin: 0.5rem;
  --duration: 150ms;
  --first-delay: 300ms;
  --second-delay: 350ms;
  --third-delay: 50ms;
  display: block;
  position: relative;
  width: var(--size);
  height: var(--size);
  max-height: var(--size);
  border-radius: var(--size);
  background-color: var(--cl-secondary);
  text-align: center;
  color: transparent;
  overflow: hidden;
  user-select: none;
  transition: all var(--duration) ease, color var(--duration) ease var(--third-delay);
}
section.services .wrapper .category .content .services-list li .tag.popular {
  background-color: var(--cl-primary);
}
section.services .wrapper .category .content .services-list li:hover .tag {
  height: 1.5rem;
  max-height: 1.5rem;
  width: 4rem;
  transition: all var(--duration) ease var(--first-delay), color var(--duration) ease var(--second-delay);
  color: var(--cl-white);
}
section.services .wrapper .category .content .services-list li:hover .tag.popular {
  width: 6rem;
}
section.services .wrapper .category + .category {
  margin-top: 4rem;
}

.background-dark + section.services.background-dark .wrapper {
  border-top: solid white 1px;
}

section.services.variation {
  color: var(--fg);
}
section.services.variation.background-dark {
  background-color: transparent;
}
section.services.variation .wrapper .category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  height: auto;
  margin-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.services.variation .wrapper .category {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.services.variation .wrapper .category {
    margin-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category {
    max-height: 640px;
  }
}
section.services.variation .wrapper .category .image {
  position: relative;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  height: 100%;
  display: none;
}
@media only screen and (min-width: 640px) {
  section.services.variation .wrapper .category .image {
    height: 320px;
  }
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .image {
    display: block;
    height: 480px;
  }
}
section.services.variation .wrapper .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.services.variation .wrapper .category .image img.service-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 300ms ease;
  z-index: 2;
}
section.services.variation .wrapper .category .image img.service-image.visible {
  opacity: 1;
  scale: 1.025;
}
section.services.variation .wrapper .category .content {
  height: 100%;
  flex: 1;
}
section.services.variation .wrapper .category .content .services-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  height: 100%;
  padding-bottom: 4rem;
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .content .services-list {
    flex-direction: column;
    gap: 0rem 1rem;
    max-height: 640px;
  }
}
section.services.variation .wrapper .category .content .services-list li {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  position: relative;
  width: fit-content;
  overflow: hidden;
  background-color: var(--cl-background-alt);
  border-radius: 0.25rem;
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .content .services-list li {
    background-color: transparent;
    border-radius: 0;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0;
  }
}
section.services.variation .wrapper .category .content .services-list li:hover img {
  scale: 1.05;
}
section.services.variation .wrapper .category .content .services-list li img {
  aspect-ratio: 4/3;
  width: 6rem;
  border-radius: 0.25rem;
  object-fit: cover;
  transition: scale 300ms ease;
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .content .services-list li img {
    display: none;
  }
}
section.services.variation .wrapper .category .content .services-list li a {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 48px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--cl-background-alt);
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .content .services-list li a {
    font-size: 14px;
  }
}
section.services.variation .wrapper .category .content .services-list li a:hover {
  text-decoration: underline;
}
section.services.variation .wrapper .category .content .services-list li a:hover::after {
  background-color: var(--cl-secondary);
}
section.services.variation .wrapper .category .content .services-list li a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/arrow-up-right-regular.svg");
  mask-position: center;
  mask-size: 14px;
  mask-repeat: no-repeat;
  background-color: var(--cl-background);
  transition: background-color 300ms ease;
}
@media only screen and (min-width: 1280px) {
  section.services.variation .wrapper .category .content .services-list li a::after {
    background-color: var(--cl-background-alt);
  }
}
section.services.variation .wrapper .category .content .services-list li .tag {
  --size: 0.5rem;
  --margin: 0.5rem;
  --duration: 150ms;
  --first-delay: 300ms;
  --second-delay: 350ms;
  --third-delay: 50ms;
  display: block;
  position: relative;
  width: var(--size);
  height: var(--size);
  max-height: var(--size);
  border-radius: var(--size);
  background-color: var(--cl-secondary);
  text-align: center;
  color: transparent;
  overflow: hidden;
  user-select: none;
  transition: all var(--duration) ease, color var(--duration) ease var(--third-delay);
}
section.services.variation .wrapper .category .content .services-list li .tag.popular {
  background-color: var(--cl-primary);
}
section.services.variation .wrapper .category .content .services-list li:hover .tag {
  height: 1.5rem;
  max-height: 1.5rem;
  width: 4rem;
  transition: all var(--duration) ease var(--first-delay), color var(--duration) ease var(--second-delay);
  color: var(--cl-white);
}
section.services.variation .wrapper .category .content .services-list li:hover .tag.popular {
  width: 6rem;
}
section.services.variation .wrapper .category + .category {
  margin-top: 4rem;
}

.background-dark + section.services.background-dark .wrapper {
  border-top: solid white 1px;
}

section.services-featured {
  /* Odd rows: BIG (3 columns) + SMALL (1 column) */
  /* Even rows: SMALL (1 column) + BIG (3 columns) */
  /* Odd Rows: SMALL | BIG | SMALL */
  /* Even Rows: BIG | SMALL | BIG */
}
section.services-featured .wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
}
section.services-featured .image-container {
  width: 100%;
  height: 100%;
}
section.services-featured .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.services-featured .card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  section.services-featured .card-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 1280px) {
  section.services-featured .card-container {
    grid-template-columns: repeat(6, 1fr);
  }
}
section.services-featured .card-container .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--bg-alt);
  color: var(--fg);
  border: none;
  box-shadow: 0px 0px 8px 0 var(--bg, var(--cl-background));
  padding-bottom: 0;
}
section.services-featured .card:nth-child(4n+1) {
  grid-column: span 3;
}
section.services-featured .card:nth-child(4n+2) {
  grid-column: span 1;
  min-width: 350px;
}
section.services-featured .card:nth-child(4n+3) {
  grid-column: span 1;
  min-width: 350px;
}
section.services-featured .card:nth-child(4n+4) {
  grid-column: span 3;
}
section.services-featured .card:nth-child(6n+1),
section.services-featured .card:nth-child(6n+3) {
  grid-column: span 1;
}
@media only screen and (min-width: 640px) {
  section.services-featured .card:nth-child(6n+1),
  section.services-featured .card:nth-child(6n+3) {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-featured .card:nth-child(6n+1),
  section.services-featured .card:nth-child(6n+3) {
    grid-column: span 1;
    min-width: 350px;
  }
}
section.services-featured .card:nth-child(6n+2) {
  grid-column: span 1;
}
@media only screen and (min-width: 640px) {
  section.services-featured .card:nth-child(6n+2) {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-featured .card:nth-child(6n+2) {
    grid-column: span 4;
  }
}
section.services-featured .card:nth-child(6n+2)::after {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 8rem;
  height: 8rem;
  background: var(--bg);
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/logo.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
section.services-featured .card:nth-child(6n+4),
section.services-featured .card:nth-child(6n+6) {
  grid-column: span 1;
}
@media only screen and (min-width: 640px) {
  section.services-featured .card:nth-child(6n+4),
  section.services-featured .card:nth-child(6n+6) {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-featured .card:nth-child(6n+4),
  section.services-featured .card:nth-child(6n+6) {
    grid-column: span 3;
  }
}
section.services-featured .card:nth-child(6n+5) {
  grid-column: span 1;
}
@media only screen and (min-width: 640px) {
  section.services-featured .card:nth-child(6n+5) {
    grid-column: span 4;
  }
}
@media only screen and (min-width: 1280px) {
  section.services-featured .card:nth-child(6n+5) {
    grid-column: span 3;
  }
}
section.services-featured .content {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
section.services-featured .content h2:has(+ :not(h3)), section.services-featured .content .scroller .scroller__inner span:has(+ :not(h3)), .scroller .scroller__inner section.services-featured .content span:has(+ :not(h3)),
section.services-featured .content h3:has(+ :not(ul)),
section.services-featured .content section.hero .hero__services li a:has(+ :not(ul)),
section.hero .hero__services li section.services-featured .content a:has(+ :not(ul)) {
  padding-left: 2rem;
}
section.services-featured .content h2:has(+ :not(h3))::after, section.services-featured .content .scroller .scroller__inner span:has(+ :not(h3))::after, .scroller .scroller__inner section.services-featured .content span:has(+ :not(h3))::after, section.services-featured .content h2:has(+ :not(h3))::before, section.services-featured .content .scroller .scroller__inner span:has(+ :not(h3))::before, .scroller .scroller__inner section.services-featured .content span:has(+ :not(h3))::before,
section.services-featured .content h3:has(+ :not(ul))::after,
section.services-featured .content section.hero .hero__services li a:has(+ :not(ul))::after,
section.hero .hero__services li section.services-featured .content a:has(+ :not(ul))::after,
section.services-featured .content h3:has(+ :not(ul))::before,
section.services-featured .content section.hero .hero__services li a:has(+ :not(ul))::before,
section.hero .hero__services li section.services-featured .content a:has(+ :not(ul))::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--cl-primary);
  border-radius: 50%;
}
section.services-featured .content h2:has(+ :not(h3))::before, section.services-featured .content .scroller .scroller__inner span:has(+ :not(h3))::before, .scroller .scroller__inner section.services-featured .content span:has(+ :not(h3))::before,
section.services-featured .content h3:has(+ :not(ul))::before,
section.services-featured .content section.hero .hero__services li a:has(+ :not(ul))::before,
section.hero .hero__services li section.services-featured .content a:has(+ :not(ul))::before {
  mask-image: url(https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/check-solid.svg);
  mask-size: 0.64rem;
  mask-repeat: no-repeat;
  mask-position: center 4px;
  background: var(--cl-foreground);
  z-index: 1;
}
section.services-featured .content span {
  color: var(--cl-foreground-alt);
  margin-bottom: 0.5rem;
  display: none;
}
section.services-featured .content ul.features, section.services-featured .content section.interactive-features .wrapper .container-right .feature ul, section.interactive-features .wrapper .container-right .feature section.services-featured .content ul {
  margin-top: 0;
  grid-template-columns: 1fr;
}
section.services-featured .content h2, section.services-featured .content .scroller .scroller__inner span, .scroller .scroller__inner section.services-featured .content span,
section.services-featured .content h3,
section.services-featured .content section.hero .hero__services li a,
section.hero .hero__services li section.services-featured .content a {
  margin-top: 0;
  font-size: 24px;
  margin-bottom: 1rem;
}
section.services-featured .content p {
  margin-top: 0;
}
section.services-featured .content a {
  font-weight: 700;
}
section.services-featured .content .button-container .button {
  background-color: var(--bg);
  color: var(--fg);
}
section.services-featured .content .button-container .button:hover {
  background-color: var(--fg);
  color: var(--bg);
  border-color: var(--bg);
}

section.table.background-dark {
  background-color: var(--cl-background);
  color: var(--cl-foreground);
}
section.table.background-dark .row--note .col--left {
  background: var(--cl-foreground);
  color: var(--cl-background);
}
section.table.background-light {
  background-color: var(--cl-foreground-alt);
  color: var(--cl-background);
}
section.table .row {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
section.table .row .col {
  background: var(--cl-foreground-alt);
  padding: 16px;
}
@media only screen and (min-width: 640px) {
  section.table .row .col {
    padding: 16px 24px;
  }
}
section.table .row .col--left {
  width: 100%;
}
@media only screen and (min-width: 1280px) {
  section.table .row .col--left {
    width: 50%;
  }
}
section.table .row .col--right {
  width: 100%;
}
@media only screen and (min-width: 1280px) {
  section.table .row .col--right {
    width: 50%;
  }
}
section.table .row--title {
  margin-bottom: 16px;
}
section.table .row--title .col--left {
  background: var(--cl-primary);
  color: var(--cl-primary-text);
  font-weight: 600;
}
@media only screen and (min-width: 1280px) {
  section.table .row--title .col--left {
    width: 100% !important;
  }
}
section.table .row--title .col--right {
  display: none;
}
section.table .row--normal {
  margin-bottom: 8px;
}
section.table .row--normal .col {
  background: var(--cl-background-alt);
  color: var(--cl-primary-text);
}
section.table .row--normal .col--left {
  border-right: 1px solid var(--cl-foreground-alt);
}
section.table .row--note .col--left {
  width: 100%;
  background: var(--cl-background);
  color: var(--cl-primary-text);
}
section.table .row--note .col--right {
  display: none;
}
section.table.is-collapsible .row--title .col--left {
  cursor: pointer;
}
section.table.is-collapsible .row--normal.hide {
  display: none;
}

section.team-slider {
  isolation: isolate;
  --fg: var(--cl-foreground);
  --bg: var(--cl-background);
  overflow: hidden;
}
section.team-slider.background-semilight {
  background-color: var(--cl-foreground-alt);
}
section.team-slider::after {
  content: "";
  position: absolute;
  top: 33.33%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  z-index: -1;
}
section.team-slider .tns-slide-active:not(.outside) .team__info {
  opacity: 1;
  pointer-events: initial;
}
section.team-slider .tns-ovh {
  overflow: visible;
}
section.team-slider .slider {
  display: flex;
}
section.team-slider .tns-slider {
  cursor: auto;
}
section.team-slider .tns-slider:active {
  cursor: auto !important;
}
section.team-slider .tns-controls {
  justify-content: flex-end;
}
section.team-slider .slide {
  user-select: none;
}
section.team-slider .slide .team__image {
  aspect-ratio: 3/4;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  background-color: black;
  cursor: pointer;
  transition: scale 300ms ease;
}
section.team-slider .slide .team__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: scale 300ms ease;
}
section.team-slider .slide .team__image:hover {
  scale: 0.9;
}
section.team-slider .slide .team__image:hover img {
  scale: 1.11;
}
section.team-slider .slide .team__info {
  padding-inline: 1rem;
  padding-block: 2rem;
  padding-top: 1rem !important;
  padding-inline: 0 !important;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease;
}
@media only screen and (min-width: 640px) {
  section.team-slider .slide .team__info {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.team-slider .slide .team__info {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.team-slider .slide .team__info {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.team-slider .slide .team__info {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.team-slider .slide .team__info {
    padding-top: 2rem !important;
  }
}
section.team-slider .slide .team__info .function {
  font-weight: 600;
}
section.team-slider .slide .team__info .email {
  color: inherit;
  display: block;
}
section.team-slider .slide.outside + .tns-slide-active:not(.outside) .team__info {
  opacity: 1;
  pointer-events: initial;
}
@media only screen and (min-width: 640px) {
  section.team-slider .slide:nth-child(even) {
    position: relative;
    top: 64px;
    margin-bottom: 64px;
  }
  section.team-slider .slide:nth-child(odd) {
    position: relative;
    bottom: 64px;
    margin-top: 64px;
  }
}

section.team {
  color: var(--fg);
  --alt: var(--cl-background-alt);
}
section.team.background-light {
  --alt: var(--cl-foreground);
}
section.team .wrapper .team__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1rem;
}
@media only screen and (min-width: 640px) {
  section.team .wrapper .team__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.team .wrapper .team__container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1920px) {
  section.team .wrapper .team__container {
    grid-template-columns: repeat(4, 1fr);
  }
}
section.team .wrapper .team__container .cta {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  padding-inline: 1rem;
  padding-block: 2rem;
  background-color: var(--alt);
  grid-row: 3/span 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 640px) {
  section.team .wrapper .team__container .cta {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.team .wrapper .team__container .cta {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.team .wrapper .team__container .cta {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.team .wrapper .team__container .cta {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.team .wrapper .team__container .cta {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 1280px) {
  section.team .wrapper .team__container .cta {
    margin-bottom: calc(56px + 1rem);
  }
}
section.team .wrapper .team__container .cta .button-container {
  margin-left: auto;
  justify-self: flex-end;
  align-self: flex-end;
  margin-top: auto;
}

.team__member {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: currentColor;
  text-decoration: none;
}
.team__member .team__image {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: all 300ms ease;
  aspect-ratio: 3/4;
}
.team__member .team__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 300ms ease;
}
.team__member .team__info {
  transition: all 300ms ease;
}
.team__member .team__info h3, .team__member .team__info section.hero .hero__services li a, section.hero .hero__services li .team__member .team__info a {
  font-size: 20px;
}

a.team__member:hover .team__image {
  scale: 0.9;
}
a.team__member:hover .team__image img {
  scale: 1.11;
}

section.text-text {
  color: var(--fg);
}
section.text-text .wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.text-text .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.text-text .wrapper {
    gap: 2rem;
  }
}
section.text-text .wrapper blockquote {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 640px) {
  section.text-text .wrapper {
    grid-template-columns: repeat(2, 1fr);
    flex-direction: row;
  }
  section.text-text .wrapper .text-text__content * {
    max-width: 800px;
  }
}
@media only screen and (min-width: 1280px) {
  section.text-text .wrapper {
    gap: 4rem;
  }
}

section.map .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.map .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.map .wrapper {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.map .wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1280px) {
  section.map .wrapper {
    grid-template-columns: 1fr 2fr;
  }
}
section.map .map__info a {
  display: block;
  color: inherit;
  text-decoration: none;
}
section.map .map__info a:hover {
  text-decoration: underline;
}
section.map .map__info .social__link svg {
  display: none;
}
section.map .map__map {
  height: 100%;
  width: 100%;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
}
section.map .map__map .map {
  height: 100%;
  width: 100%;
}

#mapbox {
  height: 100%;
  width: 100%;
}
#mapbox .mapboxgl-popup-content {
  padding: 0 !important;
  margin: 0;
}
#mapbox .mapboxgl-popup-content .mapboxgl-popup-close-button {
  display: none;
  width: 3rem;
  aspect-ratio: 1/1;
  background-color: var(--cl-error);
  z-index: 10;
  color: var(--cl-error-text);
  font-size: 1.2rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}
#mapbox .mapboxgl-popup-content .mapboxgl-popup-close-button:hover {
  transition: all 0.15s ease;
  filter: brightness(1.2);
  background-color: var(--cl-error);
}
#mapbox .marker {
  display: none;
}
#mapbox .popup {
  color: var(--bg);
  background-color: var(--cl-bg);
}
#mapbox .popup .image-container {
  aspect-ratio: 16/9;
}
#mapbox .popup .text-container {
  padding: 1rem;
}

section.order {
  color: var(--fg);
}
section.order .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.order .container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.order .container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  section.order .container {
    align-items: flex-start;
    flex-direction: row;
  }
}
section.order .container.rows-3 {
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 960px) {
  section.order .container.rows-3 {
    align-items: flex-start;
    flex-direction: row;
  }
}
section.order .container > li {
  background-color: var(--fg);
  width: 100%;
  max-width: 480px;
  flex: 1;
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
@media only screen and (min-width: 640px) {
  section.order .container > li {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.order .container > li {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.order .container > li {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.order .container > li {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.order .container > li {
    max-width: 50%;
  }
}
section.order .container > li.featured h3, section.order section.hero .hero__services .container > li.featured a, section.hero .hero__services section.order .container > li.featured a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}
section.order .container > li.featured h3::before, section.order section.hero .hero__services .container > li.featured a::before, section.hero .hero__services section.order .container > li.featured a::before {
  content: "Beste keus!";
  position: absolute;
  top: -2rem;
  right: 0;
  padding: 0.5rem 1rem;
  width: fit-content;
  background-color: var(--cl-primary);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  flex-shrink: 0;
}
@media only screen and (min-width: 1280px) {
  section.order .container > li.featured h3::before, section.order section.hero .hero__services .container > li.featured a::before, section.hero .hero__services section.order .container > li.featured a::before {
    right: -2rem;
  }
}
section.order .container > li .price span {
  font-size: 14px;
}
section.order .container > li .price p {
  font-size: 24px;
  font-weight: 600;
  color: var(--cl-primary) !important;
}
section.order .container > li .price p em {
  font-weight: 300;
  font-size: 16px;
}
section.order .container > li .text-container {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bg);
}
@media only screen and (min-width: 640px) {
  section.order .container > li .text-container {
    padding-bottom: 32px;
  }
}
section.order .container > li .text-container * {
  color: var(--bg);
}
section.order .container > li .text-container .features, section.order .container > li .text-container section.interactive-features .wrapper .container-right .feature ul, section.interactive-features .wrapper .container-right .feature section.order .container > li .text-container ul {
  grid-template-columns: 1fr;
}
section.order .container > li .form.container {
  display: block;
}
section.order .container > li .form.container.background-light {
  background-color: transparent;
}
section.order .container > li .form.container.background-light form {
  background-color: transparent;
}
section.order .container > li .form.container form {
  width: 100%;
}
section.order .container > li .form.container form .gform-body .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
section.order .container > li .form.container form textarea {
  height: 128px;
  min-height: 128px;
}
section.order .container > li .form.container form .gform_page_footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
section.order .container > li .form.container form .gform_page_footer button {
  width: fit-content;
}
section.order .container > li .form.container form .gform_page_footer .gform_previous_button {
  display: none;
}

section.share .actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 1536px;
  margin: 0 auto;
}
section.share .actions .action {
  display: block;
  width: max-content;
  padding: 12px;
  line-height: 24px;
  color: currentColor;
  transition: all 300ms ease;
}
section.share .actions .action svg {
  width: 24px;
  aspect-ratio: 1/1;
}
section.share .actions .action svg path {
  transition: fill 300ms ease;
  fill: currentColor;
}
section.share .actions .action svg + span {
  display: none;
}
section.share .actions .action:hover {
  color: var(--cl-secondary);
  text-decoration-color: currentColor;
}
section.share .actions .action:hover svg path {
  fill: var(--cl-secondary);
}

.cta-cards .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
}
.cta-cards .cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  .cta-cards .cards-container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  .cta-cards .cards-container {
    gap: 2rem;
  }
}
.cta-cards .cards-container li {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  padding: 2rem 2rem 4rem;
  background-color: var(--fg);
  color: var(--bg);
  transition: all 0.3s ease;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
.cta-cards .cards-container li a {
  position: absolute;
  padding: 2rem 2rem 4rem;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  text-decoration: none;
  transition: all 0.3s ease;
  color: var(--bg);
}
.cta-cards .cards-container li a .link-text {
  position: absolute;
  bottom: 1rem;
  right: 3.25rem;
}
.cta-cards .cards-container li a .link-text::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  right: -2.5rem;
  width: 2rem;
  height: 2rem;
  margin-top: auto;
  background-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/arrow-circle.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: none;
  transition: all 0.3s ease;
  filter: invert(1);
}
.cta-cards .cards-container li:hover {
  background-color: var(--cl-background-alt);
  color: var(--fg);
  transform: scale(1.05);
}
.cta-cards .cards-container li:hover a {
  color: var(--fg);
}
.cta-cards .cards-container li:hover a .link-text {
  text-decoration: underline;
}
.cta-cards .cards-container li:hover a .link-text::after {
  filter: invert(0);
}

section.scroll-cards {
  position: relative;
  /* Wrapper expands naturally */
  /* The <ul> that holds the cards */
  /* Cards Start Centered */
  /* Ensuring each card stacks initially */
  /* Image container styling */
}
section.scroll-cards .wrapper {
  position: relative;
}
section.scroll-cards .card-container {
  position: relative;
  width: 100%;
}
section.scroll-cards .sticky-card {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  gap: 4rem;
  align-items: center;
  background: #fff;
  color: black;
  border: 1px solid #ddd;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding: 20px;
}
section.scroll-cards .sticky-card:nth-child(1) {
  z-index: 4;
}
section.scroll-cards .sticky-card:nth-child(2) {
  z-index: 3;
}
section.scroll-cards .sticky-card:nth-child(3) {
  z-index: 2;
}
section.scroll-cards .sticky-card:nth-child(4) {
  z-index: 1;
}
section.scroll-cards .image-container {
  width: 50%;
  aspect-ratio: 12/9;
}
section.scroll-cards .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.quote {
  padding-block: 2rem;
}
@media only screen and (min-width: 640px) {
  section.quote {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote {
    padding-block: 4rem;
  }
}
section.quote.background-dark .quote-container {
  background-color: var(--cl-foreground-alt);
  color: var(--cl-background);
}
section.quote.background-light .quote-container {
  background-color: var(--cl-background-alt);
  color: var(--cl-foreground);
}
section.quote .quote-container {
  position: relative;
  padding-inline: 1rem;
  padding-block: 2rem;
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 640px) {
  section.quote .quote-container {
    padding-inline: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote .quote-container {
    padding-inline: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.quote .quote-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote .quote-container {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 640px) {
  section.quote .quote-container {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote .quote-container {
    gap: 2rem;
  }
}
section.quote .quote-container .name {
  font-size: 1.2rem;
  font-weight: bold;
}
section.quote .quote-container .button {
  color: var(--fg);
  background-color: var(--bg);
}
section.quote .quote-container .button:hover {
  color: var(--bg);
  background-color: var(--fg);
  border-color: var(--bg);
}
@media only screen and (min-width: 640px) {
  section.quote .quote-container {
    flex-direction: row;
  }
  section.quote .quote-container .quote,
  section.quote .quote-container .author {
    flex-basis: 50%;
  }
  section.quote .quote-container .author {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote .quote-container .quote,
  section.quote .quote-container .author {
    padding-block: 2rem;
  }
}
@media only screen and (min-width: 1280px) and (min-width: 640px) {
  section.quote .quote-container .quote,
  section.quote .quote-container .author {
    padding-block: 4rem;
  }
}
@media only screen and (min-width: 1280px) and (min-width: 1280px) {
  section.quote .quote-container .quote,
  section.quote .quote-container .author {
    padding-block: 4rem;
  }
}
section.quote .quote-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3rem;
  aspect-ratio: 1/1;
  mask-image: url("https://teamswitch.nl/wp-content/themes/teamswitch-nl/img/icon/quotes.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: var(--cl-primary);
  opacity: 1;
  translate: 1rem -50%;
}
@media only screen and (min-width: 640px) {
  section.quote .quote-container::after {
    height: 12rem;
    translate: 2rem -50%;
  }
}
@media only screen and (min-width: 1280px) {
  section.quote .quote-container::after {
    translate: 4rem -50%;
  }
}
section.calendar {
  background-color: var(--bg);
  color: var(--fg);
}
@media only screen and (min-width: 1280px) {
  section.calendar {
    display: block;
  }
}
section.calendar .wrapper {
  --gap: 0.25rem;
  --padding: 0.5rem;
}
section.calendar .wrapper .calendar__container h3, section.calendar .wrapper .calendar__container section.hero .hero__services li a, section.hero .hero__services li section.calendar .wrapper .calendar__container a {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}
section.calendar .wrapper .calendar__container h3:not(:first-child), section.calendar .wrapper .calendar__container section.hero .hero__services li a:not(:first-child), section.hero .hero__services li section.calendar .wrapper .calendar__container a:not(:first-child) {
  margin-top: 4rem;
}
section.calendar .wrapper .calendar__container .month {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 4);
  background-color: var(--bg-alt);
  padding: var(--padding);
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
}
@media only screen and (min-width: 1280px) {
  section.calendar .wrapper .calendar__container .month {
    gap: var(--gap);
  }
}
section.calendar .wrapper .calendar__container span.daynames {
  display: none;
}
@media only screen and (min-width: 1280px) {
  section.calendar .wrapper .calendar__container span.daynames {
    display: grid;
    grid-template-columns: 0 repeat(7, 1fr);
    margin-left: 2rem;
    gap: var(--gap);
    padding: var(--padding);
    background-color: var(--cl-primary);
    color: var(--cl-primary-text);
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
  section.calendar .wrapper .calendar__container span.daynames span {
    text-align: center;
  }
}
section.calendar .wrapper .calendar__container .week {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media only screen and (min-width: 1280px) {
  section.calendar .wrapper .calendar__container .week {
    position: relative;
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    grid-template-rows: minmax(8rem, auto);
    gap: var(--gap);
  }
}
section.calendar .wrapper .calendar__container .week span.weeknumber {
  width: 8rem;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  left: 1rem;
}
section.calendar .wrapper .calendar__container .week span.weeknumber.current-week {
  background-color: var(--cl-primary);
  color: var(--cl-primary-text);
  border-radius: 100vw;
}
section.calendar .wrapper .calendar__container .week .day {
  margin-left: 2.5rem;
  background-color: var(--bg);
  border-radius: calc(1.5rem - var(--padding));
  padding: 1rem;
  transition: all 150ms ease;
  grid-row: 1;
}
@media only screen and (min-width: 1280px) {
  section.calendar .wrapper .calendar__container .week .day {
    margin-left: 0;
  }
}
section.calendar .wrapper .calendar__container .week .day.today {
  background-color: var(--cl-secondary);
  color: var(--cl-secondary-text);
}
section.calendar .wrapper .calendar__container .week .day span.date {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 12px;
  opacity: 0.75;
}
@media only screen and (min-width: 1280px) {
  section.calendar .wrapper .calendar__container .week .day span.date .weekdayName {
    display: none;
  }
}
section.calendar .wrapper .calendar__container .week .day .event {
  font-size: 14px;
}
section.calendar .wrapper .calendar__container .week .day .event + .event {
  margin-top: 0.5rem;
  border-top: 1px solid var(--cl-background-alt);
  padding-top: 0.5rem;
}/*# sourceMappingURL=style.min.css.map */