*, *:before, *:after {box-sizing: border-box; margin: 0; padding: 0; border: none; line-height: inherit; font: inherit; color: inherit;}
button {appearance: button; color: inherit;}
iframe {max-width: 100%; height: auto; display: block;}
img {max-width: 100%; height: auto; display: block; object-fit: cover; background-repeat: no-repeat; background-size: cover;}
ul {list-style-type: none;}

a {color: var(--primary);}
a:hover {text-decoration: none;}
b {font-weight: bold;}

:root {
	--primary: #436429;
	--secondary: #0b1503;
}

html {font-size: 100%;}
body {font: 300 1rem/1.6 "Poppins", sans-serif; background-color: var(--secondary); color: #fff; text-underline-offset: 5px;}

html.app-golf {
	--primary: #f2aa00;
	--secondary: #347b33;
}

.btn {text-decoration: none!important; display: inline-block; vertical-align: top; line-height: 1.222; background: none; border: 1px solid transparent; border-radius: 0.25em; color: #000; padding: 0.5em 1.45em; letter-spacing: 0.5px; font-size: 0.875rem; font-weight: 600; line-height: 1.2222; cursor: pointer;}
.btn-white {background: #fff; border: 1px solid #fff; color: #000;}
.btn-primary {background: var(--primary); border: 1px solid var(--primary); color: #fff;}
.icon {display: inline-block; vertical-align: top;}
.btn:hover {opacity: 0.9;}
a.icon:hover {opacity: 0.7;}

.logo img {display: block; border-radius: 50%;}
.logo a:hover img {opacity: 0.9;}

.sr-only, .skipnav {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(var(--blackRGB),0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0;}


.page-bg {pointer-events: none; width: 100%; /*aspect-ratio: 16/9;*/}

.content-area {display: flex; flex-wrap: wrap;}
.title {font-size: 1.25rem; font-weight: 600; line-height: 1.4;}
.text {font-size: 0.9375rem;}

.sidebar {width: 100%; background-color: var(--secondary); color: #fff; padding: 2rem 4.5%;}
.sidebar .logo {padding: 2rem;}
.sidebar .logo img {margin: 0 auto;}
.sidebar-content {width: 100%; text-align: center;}
.sidebar-content > * {margin-bottom: 1.4rem;}
.sidebar-content > *:last-child {margin-bottom: 0;}

.main-content {width: 100%; padding: 5rem 4.5%;}
.gallery {display: grid; grid-template-columns: repeat(3, 1fr); margin: -1rem 0 0 -1rem;}
.gallery li {padding: 1rem 0 0 1rem;}
.gallery img {width: 100%; transition: opacity 0.2s ease;}
@media (hover: hover) and (pointer: fine) {
	.gallery:has(li:hover img) li:not(:hover) img {
		opacity: 0.6;
	}
}
@media screen and (min-width: 1921px){
	.sidebar {padding-left: 5rem; padding-right: 5rem;}
	.main-content {padding-left: 3rem; padding-right: 3rem;}
}

@media screen and (min-width: 640px){
	.gallery {grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));}
}
@media screen and (min-width: 1200px){
	.page-bg {position: fixed; top: 0; right: 0; width: 90.2545%; height: 100%; z-index: 0; aspect-ratio: auto;}
	.content-area > * {position: relative; z-index: 1;}
	.sidebar {width: 28.68rem; min-height: 100vh; display: flex;}
	.main-content {width: calc(100% - 28.68rem); max-width: 92rem;}
}
@media screen and (max-width: 1199px){
	.page-bg {height: clamp(14rem, 9.70918rem + 19.07032vw, 24rem);}

	.sidebar .logo {position: absolute; top: 0; left: 0; padding: 1rem; z-index: 1; width: 8rem;}
	.main-content {padding-top: 2rem;}
}
@media screen and (max-width: 639px){
	.main-content {padding-top: 0;}
}