@font-face {
font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
src: local('Roboto'), url('/fonts/roboto-v29-latin-regular.woff2') format('woff2'), url('/fonts/roboto-v29-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
src: local('Roboto'), url('/fonts/roboto-v29-latin-700.woff2') format('woff2'), url('/fonts/roboto-v29-latin-700.woff') format('woff');
}
@font-face {
font-family: 'Titillium'; font-style: normal; font-weight: 400; font-display: swap;
src: local(''), url('/fonts/titillium-web-v10-latin-regular.woff2') format('woff2'), url('/fonts/titillium-web-v10-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Titillium'; font-style: normal; font-weight: 700; font-display: swap;
src: local(''), url('/fonts/titillium-web-v10-latin-700.woff2') format('woff2'), url('/fonts/titillium-web-v10-latin-700.woff') format('woff');
}

/* RESET */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html{scroll-behavior:smooth;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;height:auto;}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* SITE */
body { background: #222; color: #333; font: 1em Roboto, Arial, Helvetica, sans-serif; }
h1,h2,h3,h4 { font-family: Titillium, Arial, Helvetica, sans-serif; }
p { line-height: 1.3; }
.wrapper { max-width: 2000px; margin: 0 auto; background: #fff; box-shadow: 0 0 30px 10px rgba(0,0,0,0.4)}
.inner { max-width: 1200px; margin: 20px auto; position: relative;}

a.button, a.button:link { display: inline-block; background: #77b229; color: #fff; text-decoration: none; text-transform: uppercase; padding: 14px 30px; border-radius: 30px; font-weight: bold; font-size: 0.8em; transition: all .2s; text-shadow: 0 0 8px rgba(0,0,0,0.25); will-change: transform; }
a.button:hover, a.button:active, a.button:focus { background: #5b9214; transform: scale(1.05, 1.1);}

section { margin: 0 0 15px; }

/* Header */
.topbar { background: #253B2B; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.topbar div { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; }
.topbar .pt2 { -webkit-flex: 1 1 1100px; -ms-flex: 1 1 1100px; flex: 1 1 1100px; text-align: right; overflow-y: hidden; }
.topbar .pt3 { background: #8BC63E; }
.topbar p { display: inline-block; background: #8BC63E; color: #fff; position: relative; min-width: 200px; text-align: left; }
.topbar p:before { content: ''; display: block; height: 0; width: 0; position: absolute; left: -49px; top: -1px; border: 25px solid; border-color: transparent #8BC63E #8BC63E transparent; }
.topbar p a.tel:link { display: inline-block; color: #fff; text-decoration: none; padding: 8px 10px 8px 30px; margin-left: 6px; font-weight: 700; position: relative; }
.topbar a.tel:before { content: ''; display: block; width: 24px; height: 22px; position: absolute; left: 0px; background: url(/assets/icons.png) no-repeat 0 0; background-size: 25px; }

header { position: relative; z-index: 1; text-align: center; }
#logo { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); }
header ul, header li { list-style-type: none; margin: 0; padding: 0; display: block; }
header ul { display: flex; }

header .social { display: flex; position: absolute; top: 50%; left: 40px; transform: translateY(-50%);  }
header .social li { margin: 0 2px; }
.social a { display: block; width: 28px; height: 28px; background: url(/assets/icons.png) no-repeat 5px -45px; background-size: 25px; }
.social .tw a { background-position: 5px -145px; }
.social .ig a { background-position: 5px -245px; }
.social a:hover, .social a:active, .social a:focus { background-position: 5px -95px; }
.social .tw a:hover, .social .tw a:active, .social .tw a:focus { background-position: 5px -195px; }
.social .ig a:hover, .social .ig a:active, .social .ig a:focus { background-position: 5px -295px; }

.menubtn,#mobmenutoggle { display: none; }
.mobmenu-items { display: block; height: 0; overflow: hidden; transition: all .3s; }
header nav { padding: 40px 2%; display: flex; max-width: 1100px; margin: 0 auto; }
header nav a:link, header nav a:visited, .mobmenu-items a:link, .mobmenu-items a:visited { text-decoration: none; text-transform: uppercase; color: #263A2A; font-weight: bold; display: inline-block; padding: 10px; transition: color .2s; white-space: nowrap; }
header nav a:hover, header nav a:active, header nav a:focus, .mobmenu-items:hover, .mobmenu-items:active, .mobmenu-items:focus { color: #177b37; }

header nav ul { width: 30%; flex: 1 1 auto; }
header .left { margin-right: 300px; }

header nav li { flex: 1 1 auto; }
.intro { background: #3e5328 url(/assets/photos/paintball-players-in-forest-lrg.jpg) no-repeat center center; background-size: cover; color: #fff; text-align: center; position: relative; padding-top: 52.43%; }
.supportsAvif .intro { background-image: url(/assets/photos/paintball-players-in-forest-lrg.avif); }

.intro h1, .intro h2 { text-transform: uppercase; text-shadow: 0 0 15px rgba(0,0,0,0.7); line-height: 1; padding: 0 15px;}
.intro h1 { margin: 0 0 0.2em; font-size: 3.2em; font-size: 4vw; }
.intro h2 { font: 1.8em Roboto, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 2.2vw;}
.intro .headings { position: absolute; top: 50%; transform: translateY(-50%); width: 100%;}
.intro p { position: absolute; bottom: 30px; width: 100%; padding: 0 20px; }

.three-boxes { display: flex; overflow-x: auto; }
.three-boxes .item { flex: 1 1 auto; position: relative; min-width: 330px; }
.three-boxes .divider { flex: 0 1 15px; min-width: 15px; max-width: 15px; }
.three-boxes img { width: 100%; height: auto; }
.overview .title { position: absolute; bottom: 20px; width: 100%; color: #fff; display: table; padding: 0 20px; }
.overview .title div { display: table-cell; vertical-align: top;}
.overview h3 { text-transform: uppercase; font-size: 1.4em; font-size: 1.5vw; line-height: 1;margin-bottom: 0.4em; }
.overview p { font-size: 0.9em; font-size: 0.95vw; }
.overview .link { text-align: right; padding-left: 15px; }


.welcome { background: #253B2B url(/assets/photos/intro-paintball-lasertag-aiming.jpg) no-repeat right center; background-size: contain; color: #fff; padding: 80px 5% 80px 5%; }
.welcome .text { max-width: 1200px; padding-right: 400px; margin: 0 auto;}
.welcome h2 { font-size: 2.6em; line-height: 1; text-transform: uppercase; margin: 0 0 1em;}
.welcome p { font-size: 1.2em; margin: 1em 0 0; line-height: 1.6;}
.welcome img { display: none; }

.details { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center }
.details > div { width: 50%; }
.details .text { padding: 50px; }
.details h2 img { margin: -5px 0 5px -5px; }
.details h3 span, .addresses h2 { padding: 8px 20px; background: #253B2B; color: #fff; text-transform: uppercase; display: inline-block; font-size: 1.4em;}
.details h3 { font-size: 1em; line-height: 1.2; margin: 0.2em 0 0.5em; font-weight: 400; }
.details p { margin: 0.9em 0; line-height: 1.3; }
p.buttonpara { margin: 1.5em 0 0; }

.addresses h2 { display: block; text-align: center; margin: 0 0 15px; padding: 8px 20px; font-weight: 400; line-height: 1.2; }
.locations .content { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; color: #fff; padding: 0 20px; text-align: center; }
.locations h3 { text-transform: uppercase; font-size: 1.4em; line-height: 1.2; margin-bottom: 0.6em; }
.locations p { font-size: 0.95em; line-height: 1.4; }



footer { background: #404041; color: #fff; text-align: center; padding: 22px; font-size: 0.9em; }



/* min-width */
@media screen and (min-width:1300px) {
.intro p { font-size: 1.1em; }
.locations { font-size: 1.1em; }
.addresses h2 { font-size: 1.5em; padding: 9px 20px;}
}

@media screen and (min-width:1420px) {
.details { font-size: 1.1em; }
.details p { line-height: 1.4; }
}


@media screen and (min-width:1600px) {

header nav, .topbar { font-size: 1.1em; }
.details.paintball .text, .details.zorbing .text { padding-left: 65px; padding-right: 100px;}
.details.lasertag .text { padding-left: 100px; padding-right: 75px; }
a.button, a.button:link { font-size: 0.9em; }
.locations { font-size: 1.2em; }
.addresses h2 { font-size: 1.6em; padding: 12px 20px;}
}

@media screen and (min-width:1900px) {
.locations { font-size: 1.4em; }
}

@media screen and (min-width:2300px) {
.intro h1 { font-size: 5.7em; }
.intro h2 { font-size: 3.2em; }
.overview h3 { font-size: 2em; }
.overview p { font-size: 1.3em; }
}


/* max-width */
@media screen and (max-width:1450px) {
.welcome .text {  max-width: 1300px; padding-right: 500px; }
}

@media screen and (max-width:1330px) {
header nav { max-width: 75%; }
.intro h1 { font-size: 3.2em; font-size: 4.4vw; }
.intro h2 { font-size: 1.8em; font-size: 2.4vw;}
.overview h3 {font-size: 1.4em; }
.overview p { font-size: 0.9em; }
.welcome { padding: 60px 4%; background-position: center right -5%; }
.welcome h2 { margin: 0 0 0.7em; }
.welcome .text { padding-right: 400px; }
.details .text { padding: 30px 40px; }
.details h2 img { width: 280px; }
}

@media screen and (max-width:1250px) {
.welcome { background-position: center right -10%; }
.welcome p { font-size: 1.1em; line-height: 1.5;}

.details .text { padding: 10px 30px; }
.details h2 img { width: 250px; }
.details h3 span { font-size: 1.2em; }
.details h3 { margin-bottom: 0.4em; }
.details p { margin: 0.8em 0; line-height: 1.2; font-size: 0.9em; }
.details p.buttonpara { font-size: 1em; }
}

@media screen and (max-width:1100px) {
.welcome { padding: 40px 4%; }
.welcome .text { padding-right: 360px; }
.details .text { padding: 10px 30px; }
.details h2 img { width: 220px; }
.details h3 span { font-size: 1.15em; padding: 6px 16px; }
.details h3 { margin-bottom: 0.2em; }
}

@media screen and (max-width:1040px) {
header nav { padding: 35px 2%;  }
header .social { left: 30px; }
#logo { width: 260px; top: 12px;}
.intro h1 { font-size: 3em;}
.intro h2 { font-size: 1.8em;}
.welcome { background: #253B2B url(/assets/photos/intro-paintball-aiming.jpg) no-repeat right center; background-size: contain; }
.supportsAvif .welcome { background-image: url(/assets/photos/intro-paintball-aiming.avif); }
.welcome .text { padding-right: 260px; }
.welcome h2 { font-size: 2.4em; }
}

@media screen and (max-width:1000px) {
.details { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.details > div { width: 100%; max-width: 600px; }
.details.paintball .images, .details.zorbing .images { order: 1; }
.details .images { margin-bottom: 20px;}
.details.zorbing .images { margin: 0; }
.details h2, .details h3, .details .buttonpara { text-align: center; }
.details h2 img { margin: -5px auto 5px; }
.details h3 span { margin-left: auto; margin-right: auto; font-size: 1.2em; }
.details h3 { margin-bottom: 0.4em; }
.details p { margin: 0.9em 0; line-height: 1.4em; font-size: 0.95em; }

}

@media screen and (max-width:960px) {
header .social { left: 20px; }
ul.social, .social li { display: block; }
header nav { max-width: 88%; }

}

@media screen and (max-width:900px) {
.welcome, .supportsAvif .welcome { background: #253B2B; }
.welcome .text { padding-right: 0; overflow: hidden;}
.welcome h2 { text-align: center; }
img.welcomepic1 { display: block; float: right; margin: 0 0 10px 15px; }
img.welcomepic2 { display: block; float: left; margin: 0 15px 10px 0; }
}

@media screen and (max-width:840px) {
header { height: 100px; }
header nav { display: none; }
.menubtn { display: block; position: absolute; width: 40px; height: 40px; top: 30px; right: 10px; transition-duration: 0.5s; }
.menubtn .icon, .menubtn .icon:before, .menubtn .icon:after { transition-duration: 0.5s; content: ''; position: absolute; width: 30px; height: 4px; background: #253B2B; top: 17px; left: 5px; }
.menubtn .icon:before { top: -10px; left: 0; }
.menubtn .icon:after { top: 10px; left: 0; }

.mobmenu input:checked ~ label .icon { transition-duration: 0.5s; background: transparent; }
.mobmenu input:checked ~ label .icon:before { transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px); }
.mobmenu input:checked ~ label .icon:after { transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px); }
.menubtn:hover { cursor: pointer; }
.menubtn:hover .icon, .menubtn:hover .icon:before, .menubtn:hover .icon:after { background: #5b9214; }
.mobmenu-items { width: 200px; position:absolute; top: 100px; right: 0; z-index: 999; background: #253B2B; color: #fff;  }
.mobmenu-items a:link, .mobmenu-items a:visited { color: #fff; }
.mobmenu-items a:hover, .mobmenu-items a:active { color: #c7e3a2; }
.mobmenu input:checked ~ .mobmenu-items {height: 160px; transition: all .3s; }

#logo { width: 225px; top: 14px;}
ul.social { display: flex; left: 10px;}
.intro { padding-top: 56%; }
.intro h1 { font-size: 2.6em;}
.intro h2 { font-size: 1.5em;}
.intro p { font-size: 0.9em; bottom: 20px;}
.addresses h2 { font-size: 1.3em; }
}

@media screen and (max-width:680px) {
.intro br { display: none; }
}

@media screen and (max-width:600px) {
header { height: 85px; }
#logo { width: 200px; top: 10px;}
.menubtn { top: 23px; }
.mobmenu-items { top: 85px;}
.intro { padding-top: 60%; }
.intro h1 { font-size: 2.4em;}
.intro h2 { font-size: 1.4em;}
img.welcomepic1 { width: 270px; }
img.welcomepic2 { width: 250px; }
}

@media screen and (max-width:520px) {
.intro { background-image: url(/assets/photos/paintball-players-in-forest-sml.jpg); padding-top: 104%; }
.supportsAvif .intro { background-image: url(/assets/photos/paintball-players-in-forest-sml.avif); }
.topbar, .topbar div, .topbar .pt2 { background: #8BC63E; display: block; }
.topbar .pt1, .topbar .pt3 { display: none; }
.topbar p { display: block; background: #8BC63E; text-align: center; }
.topbar p:before { display: none; }
header { height: 80px; }
#logo { width: 180px; top: 10px;}
.menubtn { top: 21px; }
.mobmenu-items { top: 80px;}
.intro h2 br { display: none; }
.welcome h2 { font-size: 2.3em; }
.welcome p { font-size: 1.05em;}
}

@media screen and (max-width:480px) {
img.welcomepic1, img.welcomepic2 { display: block; float: none; width: 85%; margin: 0 auto 15px; }
}
@media screen and (max-width:400px) {
ul.social { display: none; }

.three-boxes .item { min-width: 320px; max-width: 320px; }
.overview .title { padding: 0 15px; display: block; }
.overview .title div { display: block; text-align: left;}
.overview h3 { margin-bottom: 0.2em; }
.overview .link { padding: 10px 0 0; }
.overview a.button:link { padding: 12px 28px; } 
.intro .headings { top: 47%; }
.intro h2 { font-size: 1.3em; }
.intro p { font-size: 0.8em; bottom: 10px;}
.welcome h2 { font-size: 2.1em; }
.welcome p { font-size: 1em; }
}

@media screen and (max-width:370px) {
.intro h1 { font-size: 2em; }
.intro h2 { font-size: 1.2em; }
.three-boxes .item { min-width: 300px; max-width: 300px; }
}

@media screen and (max-width:350px) {
.three-boxes .item { min-width: 285px; max-width: 285px; }
}