/* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); */
@import 'flickity.css';
@import 'menu.css';
@import 'dist/jquery.fancybox.css';

/* @font-face {
    font-family: 'DM Serif Display';
    src: url('dmserifdisplay-regular-webfont.woff2') format('woff2'),
         url('dmserifdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

} */


@font-face {
    font-family: 'old_standard_ttregular';
    src: url('oldstandardtt-regular-webfont.woff2') format('woff2'),
         url('oldstandardtt-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




/* CORE STYLES */
:root {
    --white: #fff;
    --background: #fff; 
    --gradient: linear-gradient(145deg,rgba(242, 242, 242, 1) 0%, rgba(211, 215, 224, 1) 80%, rgb(203, 204, 209) 100%);
    --writing: #555;
    --black: #000; 
    --green: #0163c0; 
    --grey: #627b7e; 
    --grey: #263b80; 
    --lightgrey: #EFF1F2;
    --transgrey: rgba(30,30,30, 0.8);
    --nearlywhite: #f7f9f9;
    --transred: rgba(237, 28, 36, 0.9);
    --halfgrey: rgba(30,30,30, 0.4);
    --shadow: 4px 4px 4px rgba(30,30,30, 0.4);
    --smallshadow: 3px 3px 3px rgba(30,30,30, 0.2);
    --teal: #bfced4; 

    --darkgreen: #6a800b; 
    --alternate: #0163c0; 
    --alternate2: #4e7ac2; 


    --lightgrey2: #e0e0e0;



    --transwhite: rgba(255,255,255,0.7);
    --transdarkgrey: rgba(0,0,0,0.8);
    --nicegrey: #9db5cc;
    --linetwo: #afceeb; 
    --lightgreen: #c5efa5;
    --accent: #741277; 

    --br: 2rem;
    --fancyfont: 'old_standard_ttregular'; 
  }



body{
    background: var(--background);
    color: var(--writing); 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif,  Sans, Arial, Helvetica, sans-serif;
    margin: 0;
    /* box-shadow: 0 0 200px rgba(0, 0, 0, 0.1) inset; */
}
img{
    border: 0;
    max-width: 100%;
}
table{
    width: 100%; 
    border-collapse: collapse;
}
td, th{
    padding: 0.5rem;
    vertical-align: top;
}
h1, h2, h3, h4{
    font-weight: 400;
}
h4{
    font-size: 1.5rem;
}
 input, textarea, select {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif,  Sans, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	padding: 7px;
	background-color: var(--white);
	border: 2px solid var(--green);
	max-width: 100%;
    color: var(--writing); 

}

footer{
    max-width: 1500px;
    margin: auto;
    clear: both;
}
.container{
    background-color: var(--white);
    container-type: inline-size;
}
 .search{
    display: grid;
}
.search .searchbox{
    padding: 1rem 0.5rem;
}
.search .searchbox form#search input{
    font-size: 0.75rem;
    vertical-align: middle;
    outline: 2px solid var(--green);
    border: 0;
}
.search .searchbox form#search input[type=image]{
    width: 1rem; 
}
.search .searchbox form#search input[type=text]{
    padding: 7px 1rem;
    margin-right: 0.5rem; 
 }
.search .searchbox form#search input:invalid:focus {
    outline: 2px solid red;
  }
header{
    background-color: var(--green);
    padding: 1rem;
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.3) inset;
    color: var(--white);
}
header > div{
    max-width: 800px;
    margin: auto;
}
main, 
.maindesc{
    font-size: 1.1rem;
}
.front .maindesc h2:first-of-type{
    background-color: var(--grey); 
    padding: 1rem;
    color: var(--white); 
    max-width: calc(900px -  2rem);
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.3) inset;
}
main a{
    color: var(--grey); 

}
 main li::marker {
    color: var(--green);
} 
main > div{
    max-width: 900px;
    margin: auto;
    line-height: 1.7;
    padding: 1rem;
}
main.admin > div, 
main > div.frontgrid{
    max-width: none;
}
main > div > h3,
footer{
    clear: both;
}
main::after{
    content: '';
    clear: both;
    display: block;
}
.maindesc{
        max-width: 900px;
    margin: auto;
}
main h1{
    font-size: clamp(3rem, 5vw, 5rem);
}
.hero h1,
main h1{
    line-height: 1;
    font-family: var(--fancyfont), serif;     
    font-style: normal; 
    margin: 2rem auto ; 
    font-weight: 400;
    text-align: left;

}
main h1{
    color: var(--grey); 
}
.hero h1{
    font-size: clamp(3rem, 7vw, 7rem);
}
main div tr:nth-of-type(2n) td{
    background-color: var(--nearlywhite);
}
 header img{
    width: 220px; 
}
header img{
    display: block;
    margin: auto;
}
header h2{
    text-align: center;
    color: var(--white); 
    font-weight: 400;
    margin-block: 0.5rem;
    font-size: 1.2rem;
}
footer{
    background-color: var(--green);
    color: var(--white); 
    padding: 3rem 0;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 0 0 300px rgba(0, 0, 0, 0.3) inset;
}
footer > div{
    max-width: 800px;
    margin: 2rem auto; 
    display: grid;
    gap: 2rem;
}
footer a{
    color: var(--white); 
    transition: 0.4s;
    text-decoration: none;
}
footer a:hover{
    color: var(--lightgrey); 
}
footer:nth-of-type(2){
    background-color: var(--green);
}
.gallery-cell {
	width: 100%;
	/* max-height: 600px; */
	margin-right: 10px; 
}
.page{
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px; 
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.page.contain{
    background-size: contain; 
    background-color: var(--nearlywhite);
}
.page .alt{
    position: absolute;
    inset: auto 0 0 auto; 
    color: var(--white); 
    padding: 1rem 2rem; 
    text-shadow: 1px 1px 3px var(--transgrey);
}
.page .hero{
    grid-column: 1/3;
    grid-row: 1/2
}
.page > .hero{
    grid-row: 1/3;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.3) inset;
}
.page.single .hero{
    grid-column: 1/3;
    grid-row: 1/3; 
}
.page.contain, 
.page.contain .hero{
    background-size: contain; 
    background-repeat: no-repeat;
}
.page .blurred{
    position: relative;
    grid-column: 1/3;
    grid-row: 1/3;
    background-position: center center;
    background-size: cover;
    z-index: 1;

}
.page:has(.blurred) .hero {
    z-index: 2;
    backdrop-filter: blur(10px) brightness(30%);

}
section.cards{
    display: grid;
    max-width: 1500px;
    margin: auto;
}
section.cards > .card{
    display: grid;
    margin: 0.5rem; 
    background-color: var(--green);
    color: var(--white); 
    width: -moz-available;
    width: -webkit-fill-available;
}
section.cards h3{
    margin: 0;
}
section.cards h3 a, 
section.cards h4{
    display: block;
    font-weight: 400;
}
section.cards h4{
    font-size: 1.2rem; 
    margin: 0;
}
section.cards .cardtop a:hover{
    background-color: var(--green);
    color: var(--white); 
    transition: 0.4s;
}
section.cards .cardtop, 
section.cards .cardtop a{
    border-radius: 6px 6px 0 0 ;
}
section.cards .cardtop a, 
section.cards .text{
    padding: 1rem; 
}
section.cards a{
    color: var(--white); 
    text-decoration: none;
}
section.cards .text.moretext{
    grid-row: span 2;
}
section.cards.cards > .card img.leaf {
    margin: auto;
    width: 150px;
    object-fit: unset;
    display: block;
    box-shadow: none;
}
section.cards > .card a:has( > img) {
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.3) inset;
    height: 100%; 
    display: block;
}
.oops {
	font-size: 250px;
	float: right;
	line-height: 250px;
	color:#000;
}
.contactform{
	margin: auto;
	transition: 0.5s;
}
.contactform div{
    padding: 0.5rem;
}
.contactform input[type=submit],
.contactform input[type=button],
.contactform input[type=text],
.contactform input[type=email],
.contactform input[type=date],
.contactform input[type=tel],
.contactform textarea,
.contactform label
{
    font-size: 16px;
	border: 2px solid var(--green); 

}
.contactform * + p{
    margin-top: 0; 
}
.contactform label {
    display:block;
    margin-bottom: 10px;
}
.contactform label > span{
    display: inline-block;
    width: 250px;
}
.contactform input[type=text],
.contactform input[type=email],
.contactform input[type=tel],
.contactform input[type=password],
.contactform input[type=date],
.contactform input[type=number]
{
    background: transparent;
    width: 275px;
    outline: none;
    padding: 10px;
}
.contactform textarea{
    padding: 10px;
    background: transparent;
    outline: none;
    width: 275px;
    overflow: hidden;
    resize:none;
    min-height:100px;
}

.contactform textarea:focus,
.contactform input[type=text]:focus,
.contactform input[type=email]:focus,
.contactform input[type=email] :focus
{
    border: 2px solid var(--green);
}

.contactform input[type=submit],
.contactform input[type=button]{
    background: var(--green);
    border: none;
    padding: 8px 10px 8px 10px;
    color: #fff;
	width: 300px;
}
.contactform input[type=submit]:hover,
.contactform input[type=button]:hover{
background: #394D61;
}
.contactform input:not([type="submit"]),
.contactform textarea {
    border: 2px solid var(--green);

}
.contactform:focus-within input:not([type="submit"]):invalid,
.contactform:focus-within textarea:invalid {
	border: 2px solid red !important;

}
.contactform:focus-within input:not([type="submit"]):valid,
.contactform:focus-within textarea:valid {
	border: 2px solid green !important;

}
.contactform:focus-within input[type="radio"]:invalid{
	outline: 2px solid red;
    outline-offset: 2px;
}
.contactform div:nth-of-type(4n+3), 
.contactform div:nth-of-type(4n+4){
    background-color: var(--nearlywhite);
}
.contactform > div{
    position: relative;
}
.contactform > div:has(textarea:required)::after, 
.contactform > div:has(input:required)::after, 
.contactform > div:has(select:required)::after{
    content: "\002A";
    color: #800; 
    font-size: 2rem;
    inset: 0 1rem auto auto; 
    position: absolute;
}
.contactform > div:has(textarea:required)::after{
    inset: 0 -1rem auto auto; 
}
section.cards .more{
    padding: 0 1rem 1rem 1rem;
}
section.cards .more a{
    background-color: var(--grey);
    border-radius: 6px;
    display: block;
    color: var(--white);
    text-transform: uppercase;
    transition: 0.4s;
    padding: 0.5rem 1rem;
    width: fit-content;
}
section.cards .more a:hover{
    background-color: var(--writing);
}
.picturegrid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.contentgrid{
    display: grid;
    gap: 1rem
}
.grid{
    display: grid;
}
.grid > div{
    container-type: inline-size;
}
.sidebar{
    background-color: var(--nearlywhite);
    padding: 1rem; 
    line-height: 1.7;
}
.sidebar a{
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px dashed var(--black);
}
.sidebar a:hover{
    color: var(--writing);
}
.sidebar h3 img{
    width: 30px; 
    vertical-align: middle;
    margin-left: 1rem;
}
.sidebar .downloads{
    padding-block: 0.5rem;
}
.tube{
    margin: auto; 
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tube button{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    display: grid;
    align-items: center ;
    justify-content: center;
    width: 100%;
    background-color: transparent;
    pointer-events: none;
}
.tube button a{
    background-color: var(--transred);
    display: block;
    color: var(--white); 
    padding: 12px 24px;
    border-radius: 5px;
    pointer-events: auto;
    text-decoration: none;
}
.tube button a:hover{
    background-color: var(--grey);
}
.hlw{
    background-color: purple;
    padding: 0 6px;
    border-radius: 3px;
}
#loadMore {
	padding-bottom: 30px;
	padding-top: 30px;
	text-align: center;
	width: 100%;
}
#loadMore a {
	background: var(--green);
	border-radius: 0.5rem;
	color: var(--white);
	display: inline-block;
	padding: 1rem 2rem;
	transition: all 0.25s ease-out;
	-webkit-font-smoothing: antialiased;
}
#loadMore a:hover{
  background-color: var(--grey);
}
.iw{
    max-width: 1300px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    text-align: right;
    margin: auto;
}
.iw a{
    color: var(--lightgrey);
    text-decoration: none;
}
.vimeo-wrapper, .vimeo-wrapper2 {
  width: 100%;
	background-image: url('/images/load.png'); 
	background-position: center center; 
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative; 
    max-width: 1200px;
    margin: auto;
}
.vimeo-wrapper:after {
    padding-top: 31.25%;
    display: block;
    content: ""; 
}

.vimeo-wrapper iframe, .vimeo-wrapper2 iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; 
}

.vimeo-wrapper2:after {
    padding-top: 56.2%;
    display: block;
    content: ""; 
}
big{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
big a{
    display: block;
    flex: 1 1 auto;
    width: minmax(100%,300px);
    background-color: var(--green);
    color: var(--white);
    text-decoration: none;
    transition: background-color 0.3s;
    padding: 1rem; 
    text-align: center;
    border-radius: 5px;
}
big a:hover{
    background-color: var(--grey);
}
 .picturegrid > div p{
    padding: 0.5rem; 
    font-size: 0.8rem;
    margin: 0;
}
.frmSearch > div{
    position: relative;
    z-index: 10;
    text-align: center;
}
.frmSearch ul {
    position: absolute;
    width: 300px;
    left: 0;
    top: 10px; 
    list-style: none;
    padding: 0;
    position: absolute;
    margin: 0; 
}

.frmSearch li {
    padding: 10px;
    background: var(--green);
    border-bottom: var(--grey) 1px solid;
    color: var(--white)
}

.frmSearch li:hover {
    background: var(--writing);
    cursor: pointer;
}

#map{
    height: 600px; 
}
main:has( + main) > div {
    padding-bottom: 0;

}
main:has( + main) + main > div{
    padding-top: 0;
}
section.sports{
    background-color: var(--lightgrey);
}
section.sports > div{
    padding: 1rem; 
    display: grid;
    max-width: 900px;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
    margin: auto;
}
section.sports > div > a{
    display: block;
    background-color: var(--green);
    padding: 1rem;
    color: var(--white);
    max-width: calc(900px - 2rem);
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.3) inset;
    text-decoration: none;
    transition: 0.4s;
}
section.sports > div > a:hover{
    background-color: var(--grey);
    box-shadow: var(--smallshadow);
}
.four04{
    font-size: 12rem;
    line-height: 1;
    margin: 1rem;
    color: var(--green); 
    text-shadow: var(--smallshadow);

}
#mapCanvas {
    width: 900px;
    height: 700px;
    max-width: 100%; 
    max-height: 70vh; 
} 
#map{
    height: 700px; 
    max-height: 70vh; 
}
.info_content{
    width: 300px;
    max-width: 100%;
    line-height: 1.5;
}
.info_content img{
    float: right;
    margin-left: 1rem;
    max-width: 150px;
}
.breadcrumbs a, 
main p > a{
    text-decoration-style: dotted;
    text-decoration-color: var(--halfgrey);
    transition: 0.3s;
    padding: 0 0.25rem;
}
.breadcrumbs a:hover, 
main p > a:hover{
    color: var(--white); 
    text-decoration-style: none;
    background-color: var(--grey); 
}
.navigation{
    max-width: 1500px;
    margin: auto; 
}


/* calendar */

#calendar { 
	font-size: 13px;
	line-height: 13px;
	border-collapse:collapse;
	table-layout: fixed ;
	width: 100% ;

}
#calendar a {
	color: var(--black); 
	padding-bottom: 10px;
	display: block; 
    text-decoration: none;
}
#calendar a:hover {
	color: var(--alternate);
} 
#calendar td {
	padding: 0.5rem;
	border: 1px solid var(--white);
}
main div #calendar tr:nth-of-type(2n) td{
    background-color: var(--linetwo);
}
td {
	vertical-align: top;
} 
#calendar .topdays td{ 
	text-align: center; 
	background: var(--alternate);
	color: var(--white);
	padding: 20px; 
} 
#calendar a .time{
	color: var(--black);
}
#calendar .highlighteddayboxes a .time{
	color: var(--black);
}
#calendar td  a ~ div {
	display: none; 
}
#calendar  .time,
#calendar a .time {
	color: var(--accent);
}
#schedule {
	position: relative; 
    margin-bottom: 2rem;
    padding: 0;
}
#schedule .russ{
	font-size: 30px; 
    font-family: Russo One;
	vertical-align: middle;
	padding : 0px 10px 3px 10px; 
	background-color: var(--alternate);
	border-radius: 30px;
	line-height: 30px; 
	transition: 0.4s;
}
#schedule .russ:first-of-type{
	margin-right: 20px; 
}
#schedule .russ:last-of-type{
	margin-left: 20px; 
}
#schedule .russ:hover{
	background-color: #333;
	color: #fff;
}
#schedule h3{
	font-weight: normal; 
}
#schedule > .nextprevious{
    display: flex;
    justify-content: center;
    gap: 0.25rem; 
    flex-wrap: wrap;
    margin-block: 1rem;
}
/* #schedule > .nextprevious > *{
    flex: 1 1 auto;
} */
#schedule > .nextprevious .next, 
#schedule > .nextprevious .previous {
    background-color: var(--alternate);
    border-radius: 4px;
    padding: 0.5rem;
    display: grid;
    align-items: center;
    justify-content: center;
}
#schedule > .nextprevious .next img, 
#schedule > .nextprevious .previous img {
    height: 40px;
    width: 40px;
}
#schedule > .nextprevious .next img{
    transform: rotate(90deg);
}
#schedule > .nextprevious .previous img{
    transform: rotate(270deg);
}
.highlighteddayboxes {
	background: var(--alternate); 
	text-align: left;
}
.dayboxes { 
	background: var(--nicegrey); 
	text-align: left;
} 
.booked { 
	background: #414141; 
	text-align: left;
	color: #fff !important; 
}
.beforedayboxes, .afterdayboxes{
    background-color: var(--white) !important;
}
.numbers { 
	font-size: 2rem;
	float: right;
	line-height: 32px; 
	 color: var(--writing); 
	padding: 0px 0px 5px 5px;  
    font-family: Anton;
} 
.highlighteddayboxes .numbers {
    color: var(--white); 
}

.arrows {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	background-color: #555;
}
.arrows:hover{
	background-color: #333;	
}
.help-actions{
    display: grid;
    gap: 1rem;
    margin-block: 1rem;
}
.help-actions a{
    padding: 1rem;
    border: 1px solid var(--alternate); 
    text-align: center;
    transition: 0.4s;
}
.help-actions a:hover{
    background-color: var(--alternate);
    color: var(--white); 
}
.contentgrid .picture img{
    max-width: 200px;
}
.dayofweekforthissquare{
  display: none; 

}
sup{
    font-size: 0.7rem;
}
.afterdayboxes, .booked, .highlighteddayboxes, .dayboxes { 
	min-height: 90px;

} 








@media(min-width: 500px){
section.cards{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(250px + 7vw), 1fr));
    grid-auto-rows: auto 250px auto auto;
    container-type: inline-size;
}
section.cards > .card{
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    margin: 0.5rem; 
    background-color: var(--green);
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.3) inset;
}
section.cards > .card img, 
.picturegrid img{
    object-fit: cover;
    object-position: center;
    height: 100%; 
    width: 100%; 
}
.picturegrid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(250px + 7vw), 1fr));
    justify-items: center;
    gap: 10px;
    border-top: 10px solid var(--white);
    border-bottom: 10px solid var(--white);
}
.picturegrid > div {
	height: 40vh;
	width: 100%;
	max-height: 500px;
    text-align: center;
    position: relative;
}
.picturegrid > div.contain img{
    object-fit: contain;
}
.picturegrid > div p{
    position: absolute;
    inset: auto 0 0 0;
    background-color: var(--halfgrey);
    color: var(--white);
}
.picturegrid:has(.ping) {
    grid-template-columns: repeat(auto-fill,minmax(calc(300px + 3vw), 1fr));
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.picturegrid:has(.ping) div,
 .picturegrid .ping{
    height: auto; 
    text-align: center;
    padding: 2rem;
}
.picturegrid:has(.ping) div img,
.picturegrid .ping img{
    object-fit: contain;
    max-width: 300px;
    max-height: 300px;
}
/*  .picturegrid:has(.ping) div a,
.picturegrid .ping a{
    pointer-events: none;
}*/
.picturegrid:has(.ping) div p,
 .picturegrid .ping p{
    display: none;
}  
#calendar td  a + div {
        background-color: var(--transdarkgrey); 
        color: #fff;
        opacity	: 0; 
        line-height: 160%; 
        border-radius: 15px; 
        position: fixed;
        top: 300px;
        left: calc( 50%	 - 195px);
    }
#calendar td  a:hover + div, #calendar td  a:focus + div {
    opacity	: 1; 
    z-index: 1;
    width: 350px;
    padding: 20px;
    transition: opacity 0.5s;
    box-shadow: 2px 2px 5px var(--transgrey); 
    font-size: 15px;
    display: block;
}
}

@media screen and (orientation:landscape)
and (min-width: 1300px) {
      .frontgrid  .page{
        height: 100svh;
        max-height: 100svh;
        background-attachment: fixed;
        background-position: center center;
    }
    .frontgrid header{
        background-color: transparent;
        box-shadow: none;
        z-index: 30;
        grid-row: 1/2;
        grid-column: 1/2;
        align-self: self-end;
        grid-area: 1 / 1 / 2 / 2;
        padding: 3rem;

        h2{
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        }
    }
    .page.single > .hero{
        background-attachment: fixed;
    }
    .page.single:has(.blurred) > .hero{
        background-attachment: initial;
    }
    
    body:has(.frontgrid){
        position: relative;

        .navigation{
            position: absolute;
            inset: 0 0 auto 0;
            z-index: 100;
  }     
        .search{
            position: absolute;
            inset: 60px 0 auto 0;
            z-index: 100;
        } 
        .search .searchbox form#search input{
            outline: none;
        }
        }

     .front{
        padding: 0; 
    }
    .front header{
        animation: fade 2s 1s forwards;
        opacity: 0;
    }
      body:has(.front) .search{
        animation: fade 2s 2s forwards;
        opacity: 0;
    }  
     .hero{
        text-align: center;
        grid-area: 1 / 1 / 2 / 2;
        height: 100%; 
        z-index: 2;
        align-content: center;
        pointer-events: none;
        display: grid;
        justify-content: left;

    }
    main > div{
        padding: 3rem;
    }
    main.cal > div{
        padding: 0 3rem;
    }
    .gallerycontainer{
        grid-area: 1 / 1 / 2 / 2;
        max-height: 100svh;
        z-index: 1;
  }
@supports (animation-timeline: scroll()) {
    .cards .card,
    .front .maindesc h2:first-of-type{
            animation: fade-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
    } 
     .page.single > .hero{
        animation: backgroundmove linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 100%;
    } 
} 
     .hero h1{
        font-size: clamp(3rem, 7vw, 6rem);
        color: var(--white);
        text-shadow: var(--shadow);
        width: min-content; 
        margin: auto; 
        font-weight: 400;
        text-align: left;
        padding: 5rem; 
        overflow: hidden;
        line-height: 1;
        font-kerning: normal;

    }
    .hero  h1 > span{
        margin-left: calc(sibling-index() * 1.5rem - 1.5rem); 
        animation: fade 2s forwards;
        animation-delay: calc(sibling-index() * 300ms);
        opacity: 0;
    }
    .hero h1 span span{
        font-size: clamp(3rem, 11vw, 11rem);
        letter-spacing: -10px;
        line-height: 0.8;
        vertical-align: middle;
    }
     .frontgrid{
        max-width: none;
        display: grid;
        align-items: center;
        padding: 0; 
    }
     .frontgrid > div.maindesc {
        padding: 3rem; 
        grid-row: 2/3;
    }
    .frontgrid > div.maindesc > *{
        max-width: 900px;
        margin-inline: auto; 
    }
    section.sports > div{
        padding: 3rem; 
    }
    section.cards h3{
        line-height: 2;
    }
    body:has(.front) {
    nav ul {
        overflow: hidden;
        li{
            animation: slidein 0.7s ease-in-out forwards;
            animation-delay: calc(sibling-index() * 70ms);            
            translate: 0 -4rem; 
        }
    }
} 
        @keyframes linearwipe{ 
      from { width: 0; opacity: 0;} 
    }  
    @keyframes fade{ 
        from { opacity: 0;} 
        to { opacity: 1;} 
      }  
        @keyframes backgroundmove{ 
    from { background-position: 50% 30%;} 
    to { background-position: 50% 70%;} 
}  
      @keyframes fade-in {
        from {
            opacity: 0.7;
            translate: 0 4rem;
            scale: 0.9 0.95;
        }

        to {
            opacity: 1;
            translate: 0;
            scale: 1 1;
        }
}
    @keyframes slidein{
        from{
            translate: 0 -4rem; 
            opacity: 0.5;
        }
        to{
            translate: 0;
            opacity: 1;
        }
        
    }
#calendar tbody{
    display: grid;
    gap: 0.25rem; 
} 
#calendar tr{
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.25rem; 
}
#calendar td{
    border-radius: 0.5rem;
    border: 0;
}
}

@media(min-width: 1600px){

     footer{
        border-radius: var(--br) var(--br)  0 0; 
        margin-top: 2rem;
    }
    .navigation{
        border-radius: 0 0 var(--br) var(--br); 
    }
    .navigation li:first-child a{
        border-radius: 0 0 0 var(--br);
    }
    .navigation li:last-child a{
        border-radius: 0 0 var(--br) 0;
    }

    .front .maindesc h2:first-of-type{
        border-radius: var(--br);
        padding: 2rem 4rem; 
        max-width: calc(900px - 8rem);
        margin-block: 5rem;
    }
	@supports (corner-shape: squircle) {
		:root{
			--br: 4rem;
			}
        section.cards > .card.card,
        big a{
            border-radius: calc(var(--br) / 2);
        }
        section.cards .cardtop a{
            border-radius: calc(var(--br) / 2) calc(var(--br) / 2) 0 0; 
            padding-inline: 3rem;    
        }
        .front .maindesc h2:first-of-type,
        footer, 
        .navigation,
        .navigation li:first-child a,
        .navigation li:last-child a,
        section.cards > .card, 
        section.cards .cardtop a, 
        big a{

			corner-shape: squircle;
		}


	}
} 







@media(min-width: 900px){
    header{
        display: grid;
    }
    header > div{
        margin-left: auto;
        margin-right: 10vw;
    }
    .search {
        max-width: 1400px;
        margin: auto; 
        align-items: right;
    }
    .search .searchbox {
        padding: 0;
        display: grid;
    }
    .search .searchbox form#search input[type=text] {
        width: 250px; 
        padding: 0.75rem;
    }
    .search .searchbox form#search input[type="image"]{
        padding: 0.75rem;
    }
     footer> div:nth-of-type(1) {
        grid-template-columns: 1fr 1fr;
    }
    section.cards{
        padding: 1rem; 
        justify-content: center;
    }
    section.cards > .card{
        border-radius: 6px;
    }
    section.cards > .card img, 
    .picturegrid img{
        object-fit: cover;
    }
    /* .picturegrid .contain img{
        object-fit: contain;
    } */
     section.cards > .card .text{
        font-size: 0.95rem;
        max-width: 400px; 
        padding: 1rem;
        line-height: 1.7;
    }
     /* section.cards > .card .cardtop{
        max-width: 400px; 
      padding: 0 1rem;
    }

     section.cards > .card > *{
        max-width: 450px; 
    }
     */
    .page{
        height: 700px; 
        max-height: 80svh;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 3fr 2fr;         
    }
    .page > .hero{
        grid-column: 1/3;
        grid-row: 1/3; 
    }
    .contentgrid{
        grid-template-columns: 300px auto;
    }
     blockquote{
        background-color: var(--grey);
        color:var(--white); 
        padding: 1rem; 
        border-radius: 6px; 
    }
     .grid{
        grid-template-columns: auto 250px;
    }
     .color-picker > fieldset {
        padding: 0 3rem 0.5rem 1.5rem;
        margin-left: auto;
}
    .search .searchbox form#search{
        padding: 1rem 3rem;
        margin-left: auto; 
        margin-right: 2rem;
}
.contactform {
    display: grid;
    justify-content: center;
}
.contactform.form{
    grid-template-columns: 1fr 1fr; 
}
#loadMore {
    grid-column: span 3;
}

}


@container (width > 900px) {
    .picturegrid{
        grid-template-columns: 1fr 1fr 1fr;
    }   
    section.cards{
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: auto 300px auto auto;
    }
}


 @media only screen and ( max-width: 900px ) {
/* .color-picker > fieldset label{
    flex-basis: 70%;
} */
a[href^="mailto:"],
h1,
h2,
.sidebar
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
header > div, 
header h2, 
.searchbox{
    text-align: center;
}
header img{
    margin: auto;
}
#calendar td, 
#calendar tr, 
#calendar th, 
#calendar tbody,
#calendar{
    display: block;
    height: auto;
    width: auto; 
}
#calendar .topdays,
#calendar .beforedayboxes,
#calendar .afterdayboxes{
    display: none;
}
 } 

 @media only screen and ( max-width: 600px ) {
    tr{
        display: grid;
    }
    td{
        display: block;
    }
    .picturegrid, 
    .picturegrid > div,
    .picturegrid > div img{
        height: unset !important;
        width: unset !important; 
        display: block;
        margin: auto;
    }
    .page{
        height: auto;
        width: 100%; 
        aspect-ratio: 1.5;
        min-height: auto;
    }
    .frontgrid{
        padding: 0;
    }
    .frontgrid .hero, 
    .frontgrid .maindesc{
        padding: 1rem;
    }
    section.cards > .card{
        margin-inline: auto; 
    }
    footer{
        padding: 1rem; 
    }
    main img{
        float: none !important;
        display: block !important;
}
 }


 @container (width < 470px) {
.color-picker label{
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
.color-picker fieldset{
    display: grid;
    grid-template-columns: 1fr;
}

} 










@media (prefers-reduced-motion: reduce) {
    *{
        animation: none !important;
    }
}