:root{
	--teal : #17dfdb;
	--green : #7eff88;
	--yellow : #e8d837;
	--red : #f0526e;
	--slate : #33333f;
}

:where(.theme-teal){
  --colour: var(--teal);
  --hover : var(--slate);
}

:where(.theme-green){
  --colour: var(--green);
  --hover : var(--slate);
}

:where(.theme-yellow){
  --colour: var(--yellow);
  --hover : var(--slate);
}

:where(.theme-red){
  --colour: var(--red);
  --hover : white;
}

:where(.theme-slate){
  --colour: var(--slate);
  --hover : white;
}

:where(.theme-grey){
  --colour: var(--slate);
  --hover : white;
}

:where(.accent-teal){
  --accent : var(--teal);
  --accentHover : var(--slate);
}

:where(.accent-green){
  --accent : var(--green);
  --accentHover : var(--slate);
}

:where(.accent-yellow){
  --accent : var(--yellow);
  --accentHover : var(--slate);
}

:where(.accent-red){
 	--accent : var(--red);
 	--accentHover : white;
}

:where(.accent-slate){
  --accent : var(--slate);
  --accentHover : white;
}

:where(.accent-grey){
  --accent : var(--slate);
  --accentHover : white;
}

section.sportHero{color:white;padding:150px 0;background-size:cover;background-position: center;position: relative;overflow: visible;}
section.sportHero h1{font-size:calc(30px + 33 * ((100vw - 300px)/ 1620));color:white;line-height:1.2;}
section.sportHero .heroTitle{position: relative;}
section.sportHero h1 span{display: block;}
section.sportHero h1 span:last-child{color:var(--colour);}
section.sportHero p{max-width: 440px}
section.sportHero .buttons{display:flex;gap:15px;flex-wrap:wrap}
section.sportHero .button{border-radius:40px;border:1px solid var(--colour);background-color: transparent;color:white}
section.sportHero .button:hover{background-color: var(--colour);color:var(--hover);}
section.sportHero .hero__bottomleft {bottom: 0px;top: auto;left: -20px;background-color:var(--colour);height: 5px;width: 40px;display: block;position: relative;}
section.sportHero .hero__bottomleft .triangle {height: 40px;width: 5px;position: absolute;bottom: 0;left: 0;background-color:var(--colour);}
section.sportHero .hero__topleft {top: 0px;top: auto;left: -20px;background-color:var(--colour);height: 5px;width: 40px;display: block;position: relative;}
section.sportHero .hero__topleft .triangle {height: 40px;width: 5px;position: absolute;top: 0;left: 0;background-color:var(--colour);}
section.sportHero .stats{position: absolute;bottom:0;left:0;transform:translateY(50%);width: 100%;}
section.sportHero .statsIn{display:grid;grid-auto-columns: 1fr;grid-auto-flow: column;grid-gap:40px}
section.sportHero .stats .statBox{background-color:var(--colour);color:var(--hover);border-radius: 90px;padding:8px 25px;min-width: max-content;font-family:'Museo Sans 300',sans-serif}
section.sportHero .stats .statBox span{text-align: center;display: block;}
section.sportHero .stats .statBox .stat{font-size:3rem;font-family:'DM Serif Display',sans-serif;white-space: nowrap;margin-bottom:8px;line-height: 1}



section.sport5050{padding:100px 0;}
section.sport5050 h2{font-size:calc(28px + 12 * ((100vw - 300px)/ 1620));line-height: 1.3}
section.sport5050 .sport5050Grid{display:grid;gap:50px;grid-template-columns: 1fr 1fr;}
section.sport5050{background-color:var(--colour);color:var(--hover)}
section.sport5050 .sport5050Grid .right img{width: 100%;height: 100%;object-fit: cover;}
section.sport5050 .sport5050Grid .left strong{color:var(--accent);}
section.sport5050 .button{border-radius:40px;border:1px solid var(--accent);background-color: transparent;color:white}
section.sport5050 .button:hover{background-color: var(--accent);color:var(--accentHover);}


section.sportServices{padding:50px 0;}
section.sportServices .coreBoxes{display:grid;grid-template-columns: repeat(3, 1fr);gap:40px;margin-bottom:80px}
section.sportServices .coreBox{background-size:cover;background-position: center;}
section.sportServices .coreBoxInner{padding:30px;background-color:#33333f85;color:white;display: grid;height: calc(100% - 60px);}
section.sportServices .coreBoxInner :is(h2,h3,h4){color:white;margin:0}
section.sportServices .coreBoxInner .coreButton{margin-top:auto}

section.sportServices{margin-bottom:50px}
section.sportServices .coreBoxInner .coreButton .button{border-radius:40px;border:1px solid var(--accent);background-color: transparent;color:white}
section.sportServices .coreBoxInner .coreButton .button:hover{background-color: var(--accent);color:var(--accentHover);}
section.sportServices .banner{background-color:var(--colour);color:var(--hover);display:flex;}
section.sportServices .banner .bannerImage{background-size:cover;background-position: center;min-width:470px;position: relative;}
section.sportServices .banner .bannerImage:before{background-image:linear-gradient(to right, rgba(51, 51, 63, 1) 10%, transparent 100%);position:absolute;top:0;left:0;width: 100%;height:100%;content:""}
section.sportServices .banner .bannerImage img{display: block;}
section.sportServices .banner .bannerContent{text-align: center;padding:30px}
section.sportServices .banner .bannerContent .button{border-radius:40px;border:1px solid var(--accent);background-color: transparent;color:white}
section.sportServices .banner .bannerContent .button:hover{background-color: var(--accent);color:var(--accentHover);}


@media only screen and (max-width: 900px) {
  section.sportServices .banner{display:block;}
  section.sportServices .banner .bannerImage{min-height:400px}
  section.sportServices .banner .bannerImage:before{background-image:linear-gradient(to bottom, rgba(51, 51, 63, 1) 10%, transparent 100%);}
}



section.sportImageTwoCol .container{padding:50px 0}
section.sportImageTwoCol .imageColumns{display:grid;gap:50px;grid-template-columns: 1fr 1fr;}
section.sportImageTwoCol .imageColumns > div{padding:30px;background-color:white;color:#33333f;}
section.sportImageTwoCol .imageColumns > div *{color:#33333f}
section.sportImageTwoCol .imageColumns li{margin-bottom:15px}
section.sportImageTwoCol .imageColumns .button{border-radius:40px;border:1px solid var(--accent);background-color: transparent;color:var(--colour)}
section.sportImageTwoCol .imageColumns .button:hover{background-color: var(--accent);color:var(--hover);}
section.sportImageTwoCol .imageWithOverlay{position: relative;background-size:cover;background-position:bottom center;padding:50px;min-height:500px;margin-bottom:50px;display:grid;align-items:flex-end}
section.sportImageTwoCol .imageWithOverlay .imageOverlay{position: relative;z-index: 1;width:50%}
section.sportImageTwoCol .imageWithOverlay:before{content:"";position: absolute;top:0;left:0;width:100%;height:100%;background:#33333f55;}



@media only screen and (max-width: 900px) {
section.sportImageTwoCol .imageColumns{grid-template-columns: 1fr;}
section.sportImageTwoCol .imageWithOverlay .imageOverlay{width:100%}
}


section.sportContact .sportContactInner{display:flex;gap:50px;align-items: center;}
section.sportContact .sportContactInner .left{min-width:400px}
section.sportContact .sportContactInner .right{padding-right:50px}
section.sportContact .sportContactInner .right h2{font-size:calc(30px + 30 * ((100vw - 300px)/ 1620));margin-top:0}
section.sportContact .sportContactInner .left img{width:100%;height:100%;object-fit: cover;}
section.sportContact .sportContactInner .right .button{border-radius:40px;border:1px solid #33333f;background-color: transparent;color:#33333f}
section.sportContact .sportContactInner .right .button:hover{background-color: white;color:#33333f;}


@media only screen and (max-width: 900px) {
section.sportContact .sportContactInner .left{width:100%;}
section.sportContact .sportContactInner{display:flex;gap:0px;align-items: center;flex-wrap:wrap}
section.sportContact .sportContactInner .right{padding:50px}
}