/* Passion Tennis static site. Own CSS, written from measured values of the live site (2026-11-02).
   No theme or plugin stylesheet is reused. Fonts are self-hosted (Google Fonts woff2, Font Awesome 4.7 OFL). */

@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/robotocondensed-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/opensans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"FontAwesome";font-style:normal;font-weight:400;font-display:block;src:url(/fonts/fontawesome-subset.woff2) format("woff2")}

:root{
  --green:#00b34f; --green2:#007a3d; --navy:#0c1755; --navy2:#27286b; --blue:#4a50d3; --blue2:#151654;
  --text:#595959; --head:#444444; --hdr:90px;
  --rc:"Roboto Condensed",Arial,sans-serif; --ms:Montserrat,Arial,sans-serif; --os:"Open Sans",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 14px/26px var(--os);color:var(--text);background:#fff;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{border:0;max-width:100%;height:auto}
a{color:var(--green);text-decoration:none;transition:color .3s}
ul,ol{margin:0;padding:0}
p{margin:0;padding-bottom:21px}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--head);font-weight:400}
h1{font:700 60px/70px var(--rc);margin-bottom:7px}
h2{font:400 40px/50px var(--rc);margin-bottom:7px}
h3{font:400 20px/30px var(--ms);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
h4{font:600 18px/32px var(--os)}
h5{font:600 16px/26px var(--os);margin-bottom:10px}
h6{font:600 14px/24px var(--os)}
.h1-look{font:700 60px/70px var(--rc);margin-bottom:7px}
.h2-look{font:400 40px/50px var(--rc);margin-bottom:7px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#fff;padding:8px 14px;color:var(--navy2)}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--navy2);outline-offset:2px}
em{font-style:italic}

/* Font Awesome glyphs (only the ones used) */
.fa{display:inline-block;font:normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased}
.fa-facebook:before{content:"\f09a"}.fa-youtube-play:before{content:"\f16a"}.fa-instagram:before{content:"\f16d"}
.fa-envelope:before{content:"\f0e0"}.fa-angle-down:before{content:"\f107"}.fa-plus-circle:before{content:"\f055"}
.fa-phone:before{content:"\f095"}.fa-comment:before{content:"\f075"}.fa-check:before{content:"\f00c"}.fa-asterisk:before{content:"\f069"}
.fa-child:before{content:"\f1ae"}.fa-bookmark:before{content:"\f02e"}.fa-user:before{content:"\f007"}
.fa-low-vision:before{content:"\f2a8"}.fa-star:before{content:"\f005"}.fa-chevron-right:before{content:"\f054"}
.fa-refresh:before{content:"\f021"}.fa-arrow-right:before{content:"\f061"}.fa-angle-right:before{content:"\f105"}

/* ---------- wrapper that scales when the side menu opens ---------- */
#wrap{position:relative;flex:1 0 auto;display:flex;flex-direction:column;min-height:100vh;background:#fff;z-index:10;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.15,.2,.1,1)}
#site{flex:1 0 auto;display:flex;flex-direction:column}
body{background:#fff}

/* ---------- header ---------- */
#header{position:fixed;top:0;left:0;width:100%;height:var(--hdr);background:#fff;z-index:9999;transition:box-shadow .42s}
#header.scrolled{box-shadow:0 3px 45px rgba(0,0,0,.15)}
#header .in{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 28px}
#logo{display:block;height:60px;margin:15px 0}
#logo img{display:block;height:60px;width:auto}
#header-space{height:var(--hdr);flex:none}
.nav{display:flex;align-items:center;height:var(--hdr)}
.nav>ul{display:flex;list-style:none;height:var(--hdr)}
.nav>ul>li{position:relative;display:flex;align-items:center;height:var(--hdr)}
.nav>ul>li>a{display:block;font:700 18px/28px var(--rc);text-transform:uppercase;padding:0 10px;color:var(--green);transition:color .2s}
.nav>ul>li.cur>a,.nav>ul>li:hover>a,.nav>ul>li:focus-within>a{color:var(--navy2)}
.nav>ul>li.btn>a{color:#fff;background:var(--navy);border-radius:200px;margin:0 10px;padding:6px 20px;line-height:28px}
.nav>ul>li.btn:hover>a{color:#fff}
.nav>ul>li.social{margin-left:30px}
.nav>ul>li.social>a{padding:0;width:36px;height:23.25px;text-align:center;line-height:22px;color:var(--green);overflow:hidden}
.nav>ul>li.social>a .fa{font-size:18px;line-height:24px;width:36px}
.nav>ul>li.social:hover>a{color:var(--green)}
.nav>ul>li.social>a:hover{color:var(--navy2)}
.sub{position:absolute;top:var(--hdr);left:0;width:240px;padding:20px;list-style:none;background:#fff;border-top:1px solid #eee;box-shadow:0 6px 28px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
li:hover>.sub,li:focus-within>.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sub a{display:block;padding:6px;font:700 18px/28px var(--rc);text-transform:uppercase;color:var(--navy2);transition:color .2s}
.sub a:hover{color:var(--green)}
.burger{display:none}
@media (max-width:999px){
  :root{--hdr:48px}
  #header{padding:12px 0}
  #header .in{height:24px;padding:0 18px}
  #logo{height:24px;margin:0}#logo img{height:24px}
  .nav{display:none}
  .burger{display:block;position:relative;width:22px;height:20px;margin:-1px 0 0}
  .burger i{position:absolute;left:0;height:2px;background:var(--green);width:22px;transition:transform .25s,opacity .25s,width .25s}
  .burger i:nth-child(1){top:3px}.burger i:nth-child(2){top:10px}.burger i:nth-child(3){top:16px;width:16px}
}

/* ---------- side widget area ("#sidewidgetarea") ---------- */
#sidewidgetbg{position:fixed;inset:0;background:var(--green);z-index:1;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s linear .8s}
#sidewidgetarea{position:fixed;top:0;bottom:0;right:0;width:78vw;max-width:520px;z-index:5;display:flex;align-items:center;padding:10vh 50px;color:#fff;visibility:hidden;transform:translateX(30%);opacity:0;transition:transform .8s cubic-bezier(.15,.2,.1,1),opacity .5s,visibility 0s linear .8s}
#sidewidgetarea .menu{list-style:none;width:100%}
#sidewidgetarea .menu>li{margin:0 0 12px;line-height:16.8px}
#sidewidgetarea .menu a{position:relative;display:inline-block;font:700 20px/30px var(--rc);text-transform:uppercase;color:#fff;transition:color .37s cubic-bezier(.52,.01,.16,1)}
#sidewidgetarea .menu>li.cur>a{color:#c9c9c9}
#sidewidgetarea .menu>li.cur>a:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#c9c9c9}
#sidewidgetarea .menu a:hover{color:#c9c9c9}
#sidewidgetarea .menu>li.has>a{margin-right:20px}
#sidewidgetarea .sub-m{list-style:none;max-height:0;overflow:hidden;padding:0 0 0 20px;transition:max-height .5s cubic-bezier(.215,.61,.355,1),padding .25s}
#sidewidgetarea li.open>.sub-m{max-height:900px;padding-top:12px}
#sidewidgetarea .sub-m li{margin:0 0 12px}
#sidewidgetarea .sub-m a{font-size:16px;line-height:22px}
#sidewidgetarea .osoc{margin-top:50px;display:flex}
#sidewidgetarea .osoc a{display:inline-block;padding:0 14px;line-height:24px;height:24px;color:#fff}
#sidewidgetarea .osoc li:first-child a{padding-left:0}
#sidewidgetarea .osoc .fa{font-size:18px;line-height:24px}
#sidewidgetarea .osoc{list-style:none}
.swclose{position:absolute;top:28px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.1);display:block}
.swclose i{position:absolute;left:21px;top:12px;width:2px;height:20px;background:#fff;transform:rotate(45deg)}
.swclose i+i{transform:rotate(-45deg)}
body.ocm-open{overflow:hidden}
body.ocm-open #sidewidgetbg{visibility:visible;opacity:1;transition-delay:0s}
body.ocm-open #sidewidgetarea{visibility:visible;transform:none;opacity:1;transition-delay:0s}
body.ocm-open #wrap{transform:translateX(-78.12vw) scale(.84);overflow:hidden;height:100vh;min-height:0;cursor:pointer}
body.ocm-open #wrap *{pointer-events:none}
@media (min-width:1000px){#sidewidgetarea,#sidewidgetbg{display:none}}

/* ---------- layout: bands, container, columns ---------- */
.band{position:relative}
.band>.bg{position:absolute;inset:0;overflow:hidden;z-index:1}
.band>.bg>.ov{position:absolute;inset:0;z-index:2}
.wrap{position:relative;z-index:100;max-width:1425px;margin:0 auto;padding:0 90px}
.cols{display:flex;flex-wrap:wrap;margin:0 -1%;align-items:stretch}
.col{position:relative;padding:0 1%}
.c12{width:100%}.c6{width:50%}.c4{width:33.3333%}.c8{width:66.6666%}.c3{width:25%}
.inner{position:relative;height:100%}
.pad2>.inner{padding:2%}
.pad1>.inner{padding:1%}
.pad3>.inner{padding:3%}
.ctr{text-align:center}
.split{display:flex;position:relative;z-index:100}
.split>.half{position:relative;width:50%;flex:none}
@media (min-width:1000px){.wrap{max-width:1425px}}
@media (min-width:691px) and (max-width:999px){.wrap{max-width:600px;padding:0}}
@media (min-width:480px) and (max-width:690px){.wrap{max-width:420px;padding:0}}
@media (max-width:479px){.wrap{max-width:320px;width:calc(100% - 20px);padding:0}}
@media (max-width:999px){
  h1,.h1-look{font-size:42px;line-height:49px}
  h2,.h2-look{font-size:28px;line-height:35px}
  .col{width:100%!important;margin-bottom:25px}
  .cols>.col:last-child{margin-bottom:0}
  .split{flex-direction:column}
  .split>.half{width:100%}
}
@media (max-width:690px){
  h1,.h1-look{font-size:39px;line-height:45.5px}
  h2,.h2-look{font-size:30px;line-height:37.5px}
  h3{font-size:16px;line-height:24px}
}