:root{--regular: system-ui, sans-serif;--black: hsl(0,0%,0%);--white: hsl(0,100%,100%);--white-alpha: hsla(0,0%,100%,.5);--white-alpha-border: hsla(0,0%,91%);--off-white: hsl(0,0%,88%);--gray: hsl(0,0%,17%);--gray-light: hsl(0,0%,22%);--gray-extra-light: hsl(0,0%,60%);--gray-extra-light-2: hsl(0, 0%, 85%);--hover: hsl(0,0%,95%);--hover-light: hsl(0, 0%, 90%);--box-shadow: 0 13px 27px -5px hsl(0,0%,11%),0 8px 16px -8px hsla(0,0%,0%,30%);--min: 75vw;--max: 1080px;--photo-grid: auto / repeat(3, 1fr);--grid: auto / 1fr 1fr;--gut: 60px;--gut-small: 30px;--gut-extra-small: 10px;--line-height: 1.8rem;--p-width: 50%;--p-margin: 35px;--table-width: ;--header-grid: auto / auto 1fr;--padding-header: 100px 50px;--header-background-position: bottom -100px center, top center;--intro-columns: 2;--padding-team: 100px 0;--team-job-size: .85rem;--team-job-line-height: 1.5rem;--team-job-padding: ;--projects-padding: 60px;--textile-padding: 100px 0;--footer-grid: auto / 2fr 1fr;--store-margin: 100px;--social-padding: 100px 0;--social-font-size: ;--show-filter: show-popover 500ms cubic-bezier(.2, 1, .2, 1.04) forwards}@media only screen and (max-width: 768px){:root{--min: 80vw;--photo-grid: auto / repeat(2, 1fr);--grid: auto auto / 1fr;--gut: 30px;--p-width: unset;--p-margin: 25px;--table-width: 100%;--padding-header: 70px 30px 50px;--header-background-position: bottom -150px center, top center;--intro-columns: 1;--padding-team: 100px 0 0;--team-job-size: .75rem;--team-job-line-height: 1rem;--team-job-padding: 5px;--projects-padding: 10px;--textile-padding: 50px 0;--footer-grid: auto / 2fr 1fr;--store-margin: 60px;--social-padding: 50px 0;--social-font-size: .75rem}}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body,h1,h2,h3,h4,p,ol,ul,figure,button,fieldset{margin:0;padding:0}summary::-webkit-details-marker{display:none}html:has(dialog[open]){overflow:hidden}button,a,input,textarea{outline:none}button{border:none;background:none}button,label,summary{cursor:pointer}button,a,label,summary{-webkit-tap-highlight-color:transparent}input,textarea{margin:0}img,svg{max-width:100%;vertical-align:middle}ul,ol,summary,details{list-style:none}abbr,ins{text-decoration:none}fieldset{border:none}html{font-family:var(--regular);color:var(--white)}@media (scripting: none){[data-src],.brand-filter{display:none}}body{background:var(--gray)}.wrap,.wrap-col,.pagination{width:var(--min);max-width:var(--max);margin:0 auto}@media only screen and (min-width: 768px){.wrap-col{display:grid;grid:max-content / auto 1fr;gap:var(--gut-small)}}#header{position:relative;padding:var(--padding-header);background-size:auto, cover;background-repeat:repeat-x, no-repeat;background-position:var(--header-background-position)}.shop #header{background-size:cover;background-repeat:no-repeat;background-position:top center}#header:before{position:absolute;inset:0;z-index:0;display:block;width:100%;height:auto;content:'';background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)}#header header{position:relative;z-index:1;display:grid;grid:var(--header-grid);margin:0 auto;max-width:var(--max)}#header:has(:not(h2)) header{margin-bottom:80px}.welcome #header header{margin-bottom:0}#header #logo{width:100%;margin-top:15px;fill:var(--white)}#header .since{display:grid;grid:auto/repeat(3, 1fr);place-items:center;font-size:.75rem;font-weight:normal;color:var(--white)}#header .since:before,#header .since:after{display:block;height:1px;width:100%;content:'';background:var(--white)}#header header a{display:block;text-decoration:none}#header h1 a:hover #logo path{fill:var(--hover)}#header header>a{place-self:end;font-size:.875rem;text-align:center}#header header>a span{display:block}#header header>a span:first-child{border-radius:30px;padding:15px 30px 16px;color:var(--black);background:var(--white)}#header header>a span:last-child{margin-top:10px;color:var(--white)}#header header>a:hover span:first-child,#header header>a:active span:first-child{background:var(--hover)}#header h2{grid-column:1 / 3;padding:100px 0;font-size:2.375rem;font-weight:400;line-height:3rem;text-align:center;color:var(--white)}.shop #header h2{padding-bottom:50px}@media only screen and (max-width: 600px){#header header{gap:40px}#header h1,#header h2{grid-column:1/4}#header h2{padding:0 0 70px;font-size:1.8rem;line-height:2.5rem}#header header>a{place-self:center;grid-column:1/4}.shop #header{--padding-header: 40px 30px 40px}.shop #header header{margin-bottom:40px}.shop #header header h1 a{margin:0 auto;max-width:224px}.shop #header header>a{display:none}}.small-header{--grid: auto / auto auto;--font-size: 1.7rem;--line-height: 2rem;grid-area:1/1/1/3;display:grid;grid:var(--grid);gap:var(--gut-small);margin-bottom:var(--gut-small)}.small-header h2{color:var(--black);font-weight:normal;font-size:var(--font-size);line-height:var(--line-height);text-wrap:balance}.small-header .by-jf{position:relative;white-space:nowrap}.small-header .by-jf:after{z-index:-1;position:absolute;top:calc(100% - 5px);left:0;display:block;width:100%;height:10px;content:'';background:url("https://cycle-gabriel-by-jf.imgix.net/by-jf.svg");background-repeat:no-repeat;background-position:center;background-size:100% auto}.small-header .shop-whatsapp{place-self:end}@media only screen and (max-width: 768px){.small-header{--grid: auto / auto;--font-size: 1.4rem;--line-height: 1.8rem}.small-header .shop-sub-title,.small-header .shop-whatsapp{display:none}}h3{display:inline-block;position:relative;margin-bottom:25px;padding-top:25px;font-size:1.875rem;font-weight:500}h3:before{position:absolute;top:0;display:block;height:2px;width:50%;content:'';background:var(--white-alpha)}.social-ride-by-jf h3:before{all:unset}#intro{background:var(--gray)}#intro div{margin:0 auto;max-width:var(--max);columns:var(--intro-columns);column-gap:60px}#intro p{line-height:var(--line-height)}#intro p+p{margin-top:var(--p-margin)}#intro a{display:inline-block;margin-top:5px}#intro a:first-of-type{margin-right:10px}#intro a:last-of-type{margin-left:10px}#team{position:relative;padding:var(--padding-team);background:var(--gray-light)}#team:before,#team:after{position:absolute;left:0;right:0;display:block;content:'';height:100px;background:var(--gray) url(https://cycle-gabriel-by-jf.imgix.net/light-mud.svg)}#team:before{top:0;background-position:top center}#team:after{bottom:0;background-position:bottom center}#team p{width:var(--p-width);line-height:var(--line-height)}#team ol{margin:50px 0;display:grid;grid:var(--photo-grid);gap:var(--gut)}#team img{width:100%;height:100%;border-radius:5px;background:var(--black);box-shadow:var(--box-shadow)}#team figcaption{margin-top:20px;text-align:center;color:var(--white-alpha);font-size:var(--team-job-size);line-height:var(--team-job-line-height)}#team strong{display:block;padding-bottom:var(--team-job-padding);font-size:initial;color:var(--white);font-weight:400}@media only screen and (max-width: 768px){#team ol{margin:50px 0 0}#team li:nth-child(2){margin-top:100px}#team li:not(:first-of-type):nth-child(odd){transform:translateY(-100px)}#team li:last-of-type{margin-bottom:100px}}nav{background:url("https://cycle-gabriel-by-jf.imgix.net/sprayed-mud.svg") no-repeat}nav a::first-letter{text-transform:uppercase}nav span,nav a{display:inline-block}nav a,nav .call-popover{padding:var(--gut-extra-small) 20px}@media only screen and (max-width: 768px){nav a,nav .call-popover{font-size:.875rem;padding:var(--gut-extra-small) calc(var(--gut-extra-small) *2)}}nav a,nav .call-popover,nav .close-popover{margin:5px;border-radius:var(--gut-small);text-decoration:none;color:var(--black);background-color:var(--hover);transition:color 250ms, background-color 250ms}nav a.current,nav a:hover,nav .call-popover.current,nav .call-popover:hover,nav .close-popover.current,nav .close-popover:hover{color:var(--white);background-color:var(--black)}nav .call-popover{padding-left:calc(var(--gut-small) * 1.2);background-image:url("https://cycle-gabriel-by-jf.imgix.net/filters.svg");background-repeat:no-repeat;background-size:10px;background-position:left 15px center}nav .call-popover:hover{background-image:url("https://cycle-gabriel-by-jf.imgix.net/filters-white.svg")}nav .close-popover{place-self:center end;aspect-ratio:1;width:30px;background-image:url("https://cycle-gabriel-by-jf.imgix.net/close.svg");background-repeat:no-repeat;background-size:10px;background-position:center}nav .close-popover:hover{background-image:url("https://cycle-gabriel-by-jf.imgix.net/close-white.svg")}nav.pagination{--link-width: 40px;margin-top:var(--gut);text-align:center;background-position:right}@media only screen and (max-width: 768px){nav.pagination{--link-width: 30px}nav.pagination .prev,nav.pagination .next{display:none}nav.pagination a{max-width:35px}}nav.pagination a{display:inline-grid;place-content:center;margin:0 2px;min-width:var(--link-width);font-size:.8rem;aspect-ratio:1;padding:0}nav.pagination .dots{display:inline-grid;place-content:center;margin:0;min-width:20px;font-size:.8rem;aspect-ratio:1;padding:0;color:var(--gray-extra-light)}nav.pagination .sr-only{display:none}nav.pagination .prev,nav.pagination .next{aspect-ratio:unset;padding:var(--gut-extra-small) var(--gut-small)}@media only screen and (min-width: 768px){[popover]:not(:popover-open){display:inline;position:unset;transform:scale(0.8)}.call-popover,[popover] h2{display:none}}[popover] span{display:block}[popover]{margin:0;border:none;padding:0}@media only screen and (max-width: 767px){.shop-filters{display:grid;grid:auto / max-content auto}.call-popover{place-self:center end}}[popover]:popover-open{display:block;margin:auto;width:90vw;height:90vh;border:none;padding:var(--gut);background:transparent;background-image:url("https://cycle-gabriel-by-jf.imgix.net/sprayed-mud-white.svg");background-position:bottom 30px right 30px;background-repeat:no-repeat}[popover]:popover-open h2{display:grid;grid:auto / auto max-content;align-items:center;margin-bottom:var(--gut);font-size:1rem;color:var(--white)}[popover]:popover-open span{display:block}html:has(:popover-open),body:has(:popover-open){overflow-y:hidden;max-height:100dvh}::backdrop,:popover-open{animation:var(--show-filter)}::backdrop{background-color:rgba(0,0,0,0.7);backdrop-filter:blur(20px)}@keyframes show-popover{0%{opacity:0}100%{transform:none}}.shop{background:var(--white)}#shop{position:relative;margin-bottom:calc(var(--gut) *1.5)}#shop:before{position:absolute;top:-100px;left:0;right:0;display:block;content:'';height:100px;background:url(https://cycle-gabriel-by-jf.imgix.net/white-mud.svg);background-position:top center}#shop>div{margin:0 auto;max-width:var(--max);padding:var(--gut-small) 0}.items{--grid: max-content / 1fr 1fr;display:grid;grid:var(--grid);gap:var(--gut-small)}@media only screen and (max-width: 1024px){.items{--grid: max-content / 1fr}}@media only screen and (max-width: 767px){.items{margin-top:var(--gut)}}.items a{position:relative;display:grid;gap:var(--gut-extra-small);height:100%;border-radius:6px;padding:var(--gut-small);color:var(--black);text-decoration:none;border:1px solid var(--white-alpha-border);background:var(--white);transition:border-color 250ms, box-shadow 250ms}.items a:hover{border-color:var(--gray-light);box-shadow:0 0 5px 0 var(--white-alpha-border)}.items time{position:absolute;top:var(--gut-extra-small);right:var(--gut-extra-small);font-size:.65rem;color:var(--gray-extra-light)}.items .elec a{position:relative}.items .elec a:before{position:absolute;top:var(--gut-extra-small);left:var(--gut-extra-small);display:block;width:15px;aspect-ratio:1;content:'';background:url(https://cycle-gabriel-by-jf.imgix.net/elec.svg) no-repeat;background-position:center;background-size:65%}.items div{width:100%;aspect-ratio:3/2;background-repeat:no-repeat;background-position:center;background-size:contain}.items h3{font-weight:bold;margin:0;padding:0;font-size:1rem;line-height:1.5rem}.items h3:before{all:unset}.items h3 span{display:block;font-weight:normal}.shop-item-details{--grid: auto / 1fr .5fr;--margin-top: ;display:grid;gap:var(--gut);grid:var(--grid);margin-top:var(--gut)}@media only screen and (max-width: 1024px){.shop-item-details{--grid: auto auto/ 1fr;--margin-top: var(--gut-small)}.shop-item-details h3{font-size:1.4rem}}.shop-item-details img{width:100%;height:auto}.shop-item-details figcaption{margin-top:var(--margin-top);color:var(--black)}.shop-item-details figcaption h3{width:100%;padding-top:0;color:var(--black);background-image:url("https://cycle-gabriel-by-jf.imgix.net/sprayed-mud.svg");background-repeat:no-repeat;background-position:right top}.shop-item-details figcaption h3:before{all:unset}.shop-box{display:grid;grid:auto / max-content 1fr;align-items:center}.shop-ean{display:grid;grid:auto / max-content 1fr;align-items:center}.shop-ean span{place-self:center end;color:var(--gray-extra-light)}.shop-box,.shop-ean,.shop-item-desc,.shop-whatsapp.big,.shop-item-elec{border:solid var(--gray-extra-light-2);padding:var(--gut-small) 0;border-width:1px 0 0 0;line-height:1.5rem}.shop-item-elec{display:grid;grid:auto / max-content 1fr;align-items:center;text-align:right}.shop-item-elec span{display:inline-block;width:2.5rem;aspect-ratio:1;border-radius:4px;border:1px solid var(--gray-extra-light-2);background:url(https://cycle-gabriel-by-jf.imgix.net/elec.svg) no-repeat;background-position:center;background-size:.8rem}.shop-item-size{display:inline-block;border-radius:4px;border:1px solid var(--gray-extra-light-2);padding:var(--gut-extra-small);font-size:.9rem}.shop-item-price{place-self:center end}.shop-item-price abbr{color:var(--gray-extra-light)}.shop-whatsapp{--display: inline-grid;--padding: var(--gut-extra-small) var(--gut-small) var(--gut-extra-small) var(--gut-extra-small);border-bottom-width:0;text-align:center;--width: auto}.shop-whatsapp.small{--display: block;border:none;--padding: var(--gut-extra-small)}@media only screen and (max-width: 500px){.shop-whatsapp{text-align:center;--width: 100%}}.shop-whatsapp a{position:relative;display:var(--display);grid:auto / max-content 1fr;align-items:center;gap:var(--gut-extra-small);width:var(--width);border-radius:var(--gut-small);padding:var(--padding);color:var(--white);text-decoration:none;background-color:var(--black);transition:background 250ms}.shop-whatsapp a span:first-of-type{place-self:start center;display:block;aspect-ratio:1;border-radius:var(--gut-small);width:30px;background-color:#65D072;background-image:url("https://cycle-gabriel-by-jf.imgix.net/icon-whatsapp.svg");background-size:50%;background-repeat:no-repeat;background-position:center}.shop-whatsapp a:hover{color:#022D07;background-color:#65D072}.shop-whatsapp a:hover span:first-of-type{background-color:var(--black)}.shop-whatsapp>span{display:block;margin-top:10px;font-size:.85rem}.shop-teaser{--gap: 30px;--padding: 50px 7.8%;--bg: ;--box-shadow-white: 0 0 0 4px hsl(180, 0%, 90%);--dark-bg: hsla(0, 0%, 0%, .2);position:relative;z-index:1;display:block;border-radius:8px;margin:0 auto;width:100%;max-width:1280px;aspect-ratio:16/6;background-color:var(--gray);border:none;box-shadow:var(--box-shadow-white),var(--box-shadow)}@media only screen and (max-width: 768px){.shop-teaser{--gap: 50px;--padding: 30px;--box-shadow-white: 0 0 0 2px hsl(180, 0%, 90%);--bg: hsla(0, 0%, 0%, .5);--dark-bg: hsla(0, 0%, 0%, .6)}}.shop-teaser div{display:grid;grid:auto / auto;place-items:center start;gap:var(--gap);min-height:100%;border-radius:8px;padding:var(--padding);background-color:var(--dark-bg);transition:background-color 250ms}.shop-teaser div h3{place-self:start}.shop-teaser div nav{place-self:end start}.shop-teaser div h3{place-self:end start;margin:0;padding:0}.shop-teaser div h3:before{all:unset}.shop-teaser div span{display:block;margin-top:10px;font-weight:normal;font-size:1.2rem}.shop-teaser div nav{place-self:start}.shop-teaser div nav a{padding:15px var(--gut-small) 16px}.wrap-filters-items{display:grid;grid:max-content auto / auto}.brand-filter{--gap: 10px;--margin: 5px 0 var(--gut-small) 0;--font-size: 1rem;-webkit-scrollbar:none;-ms-overflow-style:none;scrollbar-width:none;scroll-snap-type:x mandatory;display:flex;flex-direction:row-reverse;gap:var(--gap);overflow-x:scroll;position:relative;margin:var(--margin);color:var(--black)}@media only screen and (max-width: 768px){.brand-filter{--gap: 2px;--margin: calc(var(--gut-small) - 5px) 0 0 0}}.brand-filter:has(.active) :not(.active){color:#999}.brand-filter button{--by-jf-url: url('https://cycle-gabriel-by-jf.imgix.net/by-jf-black.svg');scroll-snap-align:start;padding:10px;color:currentColor;font-size:var(--font-size);transition:color 250ms}.brand-filter button:hover{color:var(--gray-light)}.brand-filter button.active,.brand-filter button.active:hover{position:relative;white-space:nowrap;background:var(--by-jf-url);background-repeat:no-repeat;background-position:center;background-size:contain}#projects{position:relative;padding-bottom:100px;color:var(--off-white);background:var(--gray)}#projects:after{position:absolute;left:0;right:0;bottom:0;display:block;content:'';height:100px;background:var(--gray-light) url(https://cycle-gabriel-by-jf.imgix.net/dark-mud.svg);background-position:bottom center}#projects .wrap{padding-top:var(--gut);display:grid;grid:var(--grid);gap:var(--gut-small) var(--gut)}#projects p{line-height:var(--line-height)}#projects p+p{margin-top:var(--p-margin)}#projects section{padding-bottom:var(--projects-padding)}#projects .bike-wash{background:url(https://cycle-gabriel-by-jf.imgix.net/muc-off-mud.svg) no-repeat bottom right}@media only screen and (max-width: 768px){#projects .bike-wash{background-size:18px}}#projects .bike-wash h4{display:inline-flex;align-items:stretch;margin:20px 0 28px}#projects .bike-wash h4 span{padding:20px}#projects .bike-wash h4 span:first-of-type{border-radius:8px 0 0 8px;font-size:1.875rem;background:#f910b3}#projects .bike-wash h4 span:last-of-type{display:inherit;border-radius:0 8px 8px 0;background:var(--black)}#projects .social-ride-by-jf a{color:var(--white)}#bikes-accessories,#textile{background:var(--gray-light)}#bikes-accessories p,#textile p{width:var(--p-width);line-height:var(--line-height)}#bikes-accessories ol,#textile ol{margin-top:60px;display:grid;grid:var(--photo-grid);place-items:center;gap:45px 30px}#bikes-accessories ol li,#textile ol li{width:100%}#bikes-accessories ol img,#textile ol img{height:100%}#bikes-accessories ol .jools,#textile ol .jools{height:60px;width:81px}#bikes-accessories{padding-top:var(--gut)}#textile{padding:var(--textile-padding)}#textile .gobik{height:35px}footer{position:relative;padding-top:100px;color:var(--black);background:var(--white)}footer .wrap{display:grid;grid:var(--footer-grid)}footer:before{position:absolute;left:0;right:0;top:0;display:block;content:'';height:100px;background:url(https://cycle-gabriel-by-jf.imgix.net/white-mud.svg);background-color:var(--gray-light);background-position:top center}footer h4{display:inline-block;margin-bottom:25px;border-bottom:2px solid var(--white-alpha-border);padding-bottom:25px}footer p{line-height:var(--line-height)}footer a{color:currentColor;text-decoration:none}footer .store{margin-top:var(--store-margin)}footer a:hover{text-decoration:underline;text-underline-offset:2px}footer .illu{transform:translateY(-120px);background:url(https://cycle-gabriel-by-jf.imgix.net/sprayed-mud.svg) no-repeat;background-position:right bottom}footer .illu img{height:auto}footer .social{--grid: auto / repeat(4, 1fr);display:inherit;grid:var(--grid);grid-column:1/4;padding:var(--social-padding)}@media only screen and (max-width: 768px){footer .social{--grid: auto auto / repeat(2, 1fr);gap:50px 0}footer .social a.linkedin{border:none}}footer .social a{font-size:var(--social-font-size);text-align:center;border-left:2px solid var(--white-alpha-border)}footer .social a.instagram{border:none}footer .social span{display:block;margin-top:25px}@media only screen and (max-width: 768px){footer{position:relative}footer .store{grid-column:1/4}footer .illu{transform:none;position:absolute;top:0;right:50px;display:inherit;grid-column:1/4;grid-row:1/2}footer .illu img{place-self:end;width:150px;height:100%}}.shop footer{color:var(--white);background:var(--gray)}.shop footer:before{background:url(https://cycle-gabriel-by-jf.imgix.net/dark-mud.svg);background-color:var(--white)}.shop footer h4{border-bottom:2px solid var(--gray-light)}.shop footer a{border-color:var(--gray-light)}table td:last-of-type{padding-right:0}.contact td{padding:6px 3vw 6px 0}.schedules{width:var(--table-width);margin:25px 0;border:solid var(--white-alpha-border);border-width:2px 0;padding:25px 0}.schedules caption{padding-bottom:10px}.schedules th{font-size:.8rem;font-weight:normal;text-align:left;padding-bottom:15px}.schedules tr:nth-child(even){color:gray}.schedules td{padding:6px 2vw 6px 0}.shop .schedules{border-color:var(--gray-light)}.sitemap{--count: 3;color:var(--black)}@media only screen and (max-width: 1024px){.sitemap{--count: 2}}@media only screen and (max-width: 768px){.sitemap{--count: }}.sitemap h3 span{font-weight:normal;font-size:1rem}.sitemap div{columns:var(--count);column-gap:var(--gut-small)}.sitemap p{column-span:all}.sitemap p strong{display:block;margin:var(--gut-small) 0}.sitemap p::first-letter{text-transform:uppercase}.sitemap p:before{all:unset}.sitemap li+li{margin-top:5px}.sitemap a{color:currentColor}