/* Static rebuild of moto-mecca.com (originally Wix). Desktop = 980px grid, mobile (<=767px) = 320-unit scaled layout. */
@font-face{font-family:"MM Bold";src:url(/fonts/blinker-bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"MM Light";src:url(/fonts/blinker-extralight.woff2) format("woff2");font-display:swap}
@font-face{font-family:"MM Caption";src:url(/fonts/caption.woff2) format("woff2");font-display:swap}
/* Substitutes for Monotype fonts that only licensed for use on Wix */
@font-face{font-family:"Michroma";src:url(/fonts/michroma.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito Sans";font-weight:300;src:url(/fonts/nunito-sans-light.woff2) format("woff2");font-display:swap}

:root{--ink:#020202;--grey:#a29c9c;--orange:#ff7817}
*{box-sizing:border-box}
html{background:#fff;overflow-y:scroll}
html:has(body.dark),body.dark{background:var(--ink)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:"MM Light",sans-serif;color:var(--ink);background:#fff}
main{flex:1 0 auto;position:relative}
a{color:inherit}
img{display:block}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:20;height:154px;background:var(--ink) url(/img/header-bg.png) repeat-x}
.wrap{position:relative;width:980px;max-width:100%;height:100%;margin:0 auto}
.logo{position:absolute;left:0;top:10px}
.logo img{width:270px;height:156px}
.nav a{position:absolute;top:39px;height:98px;line-height:98px;text-align:center;text-decoration:none;color:#fff;font:700 17px/98px "Michroma",sans-serif;white-space:nowrap}
.nav a:nth-child(1){left:384.5px;width:97px}
.nav a:nth-child(2){left:554.5px;width:178px}
.nav a:nth-child(3){left:803.5px;width:141px}
.nav a[aria-current]{color:var(--orange)}
.nav a:hover{color:var(--orange)}
.m-title,.m-social,.burger,.m-bar{display:none}

/* ---- desktop social bar ---- */
.social{position:fixed;right:0;top:50%;transform:translateY(-50%);width:100px;height:226px;background:rgba(2,2,2,.5);z-index:15}
.social a{position:absolute;left:36px;width:40px;height:40px}
.social a:nth-child(1){top:28px}.social a:nth-child(2){top:93px}.social a:nth-child(3){top:158px}
.social img{width:40px;height:40px}

/* ---- footer ---- */
.ftr{flex:0 0 auto;height:40px;padding-top:7px;text-align:center;font:400 18px/21px "MM Light",sans-serif;letter-spacing:.9px;color:var(--grey)}
.ftr p{margin:0}

/* ---- home ---- */
.hero{position:relative;height:767.8px;background:#fafafa;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
main.home{min-height:771.8px}
.hero h1{position:absolute;left:0;right:0;top:467px;width:980px;max-width:100%;margin:0 auto;text-align:center;font:400 97px/116.4px "MM Bold",sans-serif;letter-spacing:-2.91px;color:#fff;text-decoration:underline}

/* ---- rental ---- */
main.rental{padding-bottom:21px}
main.rental::before{content:"";position:absolute;left:0;right:0;top:145px;height:652px;background:#fcfcfc}
main.rental>*{position:relative}
.rental h1{margin:35px 0 0;text-align:center;font:400 41px/49px "MM Bold",sans-serif;letter-spacing:2.05px}
.rental .intro{margin:37px auto 0;text-align:center;font:400 18px/25.2px "MM Light",sans-serif}
.bikes{width:980px;max-width:100%;margin:87px auto 0;display:grid;grid-template-columns:475px 475px;column-gap:30px;row-gap:64px;list-style:none;padding:0}
.bikes a{text-decoration:none}
.bikes figure{margin:0}
.bikes img{width:475px;height:317px;object-fit:cover}
.bikes figcaption{margin-top:2px;text-align:center;font:400 28px/39px "MM Caption",sans-serif}

/* ---- contact ---- */
body.dark .hdr{background-color:var(--ink)}
main.contact{height:449px;flex:0 0 auto}
.contact .col{position:relative;width:980px;max-width:100%;height:100%;margin:0 auto}
.contact h1{position:absolute;left:376.5px;top:46px;margin:0;font:400 56px/67px "MM Caption",sans-serif;color:var(--grey)}
.contact .row{position:absolute;left:293.5px;color:#fff;font:400 24px/31px "MM Light",sans-serif}
.contact .row img{position:absolute;left:0}
.contact .row div{position:absolute;left:115px;white-space:nowrap}
.contact .r1{top:179px}.contact .r2{top:272px}.contact .r3{top:348px}
.contact .r1 img{top:18px;left:5px;width:21px;height:29px}
.contact .r2 img{top:4px;width:25px;height:24px}
.contact .r3 img{top:8px;left:1px;width:25px;height:16px}
.contact .rule{position:absolute;left:80px;right:80px;bottom:0;border-top:.67px solid #eee6e6}
body.dark .ftr{height:auto;padding-top:28px;flex:1 0 auto}

/* ================= mobile ================= */
@media (max-width:767px){
  :root{--u:min(calc(100vw / 320),1.5px)}
  html{background:var(--ink)}
  body{--w:calc(var(--u) * 320);background:var(--ink);padding-bottom:calc(var(--u) * 56)}
  main,.ftr{width:var(--w);margin:0 auto}
  .hdr{height:calc(var(--u) * 108)}
  .wrap{width:var(--w)}
  .logo{display:none}
  .m-title{display:block;position:absolute;left:0;right:0;top:calc(var(--u) * 6);text-align:center;font:300 calc(var(--u) * 28)/calc(var(--u) * 40) "Nunito Sans",sans-serif;color:#fff;text-shadow:0 0 calc(var(--u) * 8) rgba(255,255,255,.75)}
  .m-social{display:block}
  .m-social a{position:absolute;top:calc(var(--u) * 60);width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
  .m-social a:nth-child(1){left:calc(var(--u) * 20)}.m-social a:nth-child(2){left:calc(var(--u) * 61)}.m-social a:nth-child(3){left:calc(var(--u) * 102)}
  .m-social img{width:100%;height:100%}
  .burger{display:block;position:absolute;right:0;top:calc(var(--u) * 48);width:calc(var(--u) * 50);height:calc(var(--u) * 50);padding:0;border:0;background:none;cursor:pointer}
  .burger i{position:absolute;height:calc(var(--u) * 3);background:#fff;transition:transform .25s,opacity .25s,width .25s,left .25s,top .25s}
  .burger i:nth-child(1){left:calc(var(--u) * 12);top:calc(var(--u) * 14.5);width:calc(var(--u) * 13)}
  .burger i:nth-child(2){left:calc(var(--u) * 12);top:calc(var(--u) * 23.5);width:calc(var(--u) * 26)}
  .burger i:nth-child(3){left:calc(var(--u) * 25);top:calc(var(--u) * 32.5);width:calc(var(--u) * 13)}
  .open .burger i:nth-child(1),.open .burger i:nth-child(3){left:calc(var(--u) * 12);top:calc(var(--u) * 23.5);width:calc(var(--u) * 26)}
  .open .burger i:nth-child(1){transform:rotate(45deg)}.open .burger i:nth-child(3){transform:rotate(-45deg)}
  .open .burger i:nth-child(2){opacity:0}

  .nav{display:none;position:fixed;left:0;right:0;top:calc(var(--u) * 108);bottom:0;background:var(--ink);padding:calc(var(--u) * 34) calc(var(--u) * 20);z-index:19}
  .open .nav{display:block}
  .nav a{position:static;display:block;width:auto!important;height:calc(var(--u) * 56);text-align:left;font:400 calc(var(--u) * 24)/calc(var(--u) * 56) "MM Caption",sans-serif;letter-spacing:.02em;color:#fff}
  .nav a[aria-current]{color:var(--grey)}

  .social{display:none}
  .ftr{height:calc(var(--u) * 62);padding-top:calc(var(--u) * 10);font-size:calc(var(--u) * 17);line-height:1.2;letter-spacing:calc(var(--u) * .85)}
  body.dark .ftr{padding-top:calc(var(--u) * 10);height:calc(var(--u) * 62);flex:0 0 auto;margin-top:auto}

  /* quick-action bar (Wix mobile feature) */
  .m-bar{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;background:#fff;z-index:25;box-shadow:0 -1px 4px rgba(0,0,0,.2)}
  .m-bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#000;font:400 15px/1.1 "Nunito Sans",Arial,sans-serif}
  .m-bar a+a{border-left:1px solid #ddd}
  .m-bar svg{width:24px;height:24px}

  /* home */
  main.home{min-height:0}
  .hero{height:calc(var(--u) * 282)}
  .hero h1{top:calc(var(--u) * 185);width:100%;font-size:calc(var(--u) * 35);line-height:calc(var(--u) * 42);letter-spacing:calc(var(--u) * -1.05);text-shadow:calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,10,60,.7)}

  /* rental: white panel inset 10 units */
  main.rental{background:var(--ink);padding:0 calc(var(--u) * 10);height:calc(var(--u) * 1472);flex:0 0 auto}
  main.rental{background:linear-gradient(#fff,#fff) calc(var(--u) * 10) 0/calc(var(--u) * 300) 100% no-repeat,var(--ink)}
  main.rental::before{display:none}
  .rental h1{margin-top:calc(var(--u) * 27);font-size:calc(var(--u) * 27);line-height:calc(var(--u) * 32);letter-spacing:calc(var(--u) * 1.35)}
  .rental .intro{margin-top:calc(var(--u) * 82);width:auto;font-size:calc(var(--u) * 17);line-height:calc(var(--u) * 23.8)}
  main.rental>.bikes{position:static;display:block;width:auto;margin:0}
  .bikes li{position:absolute;left:calc(var(--u) * 20);width:calc(var(--u) * 280)}
  .bikes li:nth-child(1){top:calc(var(--u) * 249.5)}
  .bikes li:nth-child(2){top:calc(var(--u) * 481.7)}
  .bikes li:nth-child(3){top:calc(var(--u) * 739.5)}
  .bikes li:nth-child(4){top:calc(var(--u) * 1002.5)}
  .bikes li:nth-child(5){top:calc(var(--u) * 1233.3)}
  .bikes img{width:calc(var(--u) * 280);height:calc(var(--u) * 187)}
  .bikes figcaption{margin-top:calc(var(--u) * 11);font-size:calc(var(--u) * 17);line-height:calc(var(--u) * 24)}
  .bikes li:nth-child(3) figcaption{font-size:calc(var(--u) * 20);line-height:calc(var(--u) * 28);width:calc(var(--u) * 228);margin-left:auto;margin-right:auto}

  /* contact */
  main.contact{height:calc(var(--u) * 342);flex:0 0 auto}
  .contact .col{width:100%}
  .contact h1{left:0;right:0;top:calc(var(--u) * 20);text-align:center;font-size:calc(var(--u) * 31);line-height:calc(var(--u) * 37)}
  .contact .row{left:0;right:0;font-size:calc(var(--u) * 20);line-height:calc(var(--u) * 19);text-align:center}
  .contact .row div{position:static;white-space:normal}
  .contact .r1{top:calc(var(--u) * 114.5)}.contact .r2{top:calc(var(--u) * 221)}.contact .r3{top:calc(var(--u) * 300)}
  .contact .row img{left:50%;transform:translateX(-50%)}
  .contact .r1 img{top:calc(var(--u) * -46.5);left:50%;width:calc(var(--u) * 20);height:calc(var(--u) * 28)}
  .contact .r2 img{top:calc(var(--u) * -48);left:50%;width:calc(var(--u) * 30);height:calc(var(--u) * 29)}
  .contact .r3 img{top:calc(var(--u) * -38);left:50%;width:calc(var(--u) * 30);height:calc(var(--u) * 19)}
  .contact .r2,.contact .r3{font-size:calc(var(--u) * 19)}
  .contact .rule{left:calc(var(--u) * 20);right:calc(var(--u) * 20);border-top-width:1px}
}

/* 404 */
main.nf{text-align:center;padding:120px 20px;font:400 24px/1.4 "MM Light",sans-serif}
main.nf h1{margin:0 0 16px;font:400 56px/1.2 "MM Bold",sans-serif}