/* CORE STYLES */
:root {

    --background: #fff; 
    --white: #fff;
    --writing: #444;
    --black: #000; 
    --charcoal: #222;
    --green: #879b2f; 
    --alternate: rgba(115,132,40,0.8);  
    --alternate2: #6d7c27; 
    --grey: #627b7e; 
    --lightgrey: #EFF1F2;
    --lightgrey2: #e0e0e0;
    --transgrey: rgba(30,30,30, 0.8);
    --nearlywhite: #f0f0f0;
    --transred: rgba(237, 28, 36, 0.9);
    --halfgrey: rgba(30,30,30, 0.25);
    --transwhite: rgba(255,255,255,0.7);
    --accent: #000;
    --border: #2a2a35;  

    --radius: 1rem;
    --width: 940px; 
    --gap: 0.5rem;

} 


body {
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	font-family: system-ui,  sans-serif, sans;
    color: #444;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
input, textarea, select{
	font-family: system-ui,  sans-serif, sans;
	font-size: 15px;
	border-radius: 5px;
	padding: 7px;
	border: 2px solid #757761;
	background-color: #fff;
	max-width: 80vw;
} 
a[href^="mailto:"],
h1,
h2
{
  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;
}
table{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
th{
	padding: 5px 3vw 5px 5px;
	vertical-align: top;
	text-align: left;
	background-color: #666666;
	color: #fff;
	font-size: 20px; 
}
td{
	padding: 5px 3vw 5px 5px;
	vertical-align: top;
}
h1, 
h2{
    font-weight: 400;
}
form input, textarea, select {
    font-family: Open Sans, system-ui, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	padding: 7px;
	background-color: var(--white);
	border: 2px solid var(--alternate);
	max-width: 100%;
    color: var(--writing); 

}

header{
    display: grid;
    margin: auto;
}
header img{
    width: 350px;
    margin: auto;
    text-align: center;
}
main, 
footer{
    background-color: #444;
    color: #fff;
}
main > div,
footer > div, 
section > div{
    max-width: 960px;
    padding: var(--gap);
    margin: auto; 
    font-size: 1.1rem;
    line-height: 1.7;
}
main a, 
footer a{
    color: #d4d6c4;
    text-decoration: dotted;
}
main a:hover, 
footer a:hover{
    color: #fff;
    text-decoration: none;
}
.topgallery, 
.maingallery{
    display: grid;
    gap:var(--gap);
}
.topgallery img, 
.maingallery img{
    display: block;
}
.contact{
    display: grid;
    gap: 0.5rem;
    margin-block: var(--gap);
}
.contact a{
    display: block;
    background-color: #444;
    color: #fff;
    padding: var(--gap);
    font-size: 1.var(--gap);
    text-align: center;
    transition: 0.4s;
    text-decoration: none;
}
.contact a:hover{
    background-color: #111;
}
.grecaptcha-badge{
    z-index: 20;
}
.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;
}
.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;
    outline: none;
    padding: 10px;
}
.contactform textarea{
    padding: 10px;
    background: transparent;
    outline: none;
    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:focus-within input[type="checkbox"]: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(--lightgrey);
}
.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; 
}
.grecaptcha-badge{
    position: absolute;
    bottom: 0; 
    right: 0;
}






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


.topgallery, 
.maingallery{
    grid-template-columns: repeat(2, 1fr); 
    margin-block: var(--gap);
}
.topgallery > div{
    width: 100%;
    max-height: 500px;
    aspect-ratio: 3/4;
}
.maingallery > div{
    width: 100%;
    max-height: 500px;
    aspect-ratio: 1;
   
}
.topgallery img, 
.maingallery img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: block;
}


} 






@media only screen and (min-width: 640px) {
    :root{
        --gap: 1rem
    } 
.topgallery, 
.maingallery{
    grid-template-columns: repeat(3, 1fr); 
}

.contact {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}
 .contactform {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 835px;
        margin: auto;
    }
    .contactform label > span{
        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]
    {
        width: 275px;
    }
    .contactform textarea{
        width: 275px;
    }
    .contactform input[type=radio] + p {
        display: inline-block;
        padding-left: 1rem; 
    }
} 


@media only screen and (min-width: 1200px) {
.topgallery,
.maingallery{
    grid-template-columns: repeat(6, 1fr); 

}
main,
footer, 
section{
    padding: calc(var(--gap)*3) var(--gap);
}
@supports (scroll-marker-group: after){
    .topgallery{
        anchor-name: --carousel;
        width: 85%;
        margin: auto;
        display: flex;
        gap: 1em;
        scroll-behavior: smooth;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-marker-group: after;
    }
    .topgallery > div {
  scroll-snap-align: start;
  flex: 0 0 30rem;
  background: var(--surface);
  /* padding: 2em;
  border-radius: .5em; */
  /* border: 1px solid var(--border); */
  list-style: none;
}

.topgallery::-webkit-scrollbar {
  display: none;
}

.topgallery::scroll-button(*) {
  border: none;
  background-color: var(--accent);
  font-family: Consolas;
  font-size: 2rem;
  color: white;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer;
  position: fixed;
  position-anchor: --carousel;
}

.topgallery::scroll-button(left) { 
  content: '<';
  position-area: left center;
  translate: 50%;
}

.topgallery::scroll-button(right) {
  content: '>';
  position-area: right center;
  translate: -50%;
}

.topgallery::scroll-button(*):disabled {
  opacity: 0.5;
  cursor: auto;
}

.topgallery::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0 1.75rem 0;    
}

.topgallery > div::scroll-marker {
  content: '';
  height: .67rem;
  width: .67rem;
  border-radius: 50%;
  background: var(--border);
}

.topgallery > div::scroll-marker:target-current {
  background: var(--accent);
} 

.topgallery > div span {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .1rem;
}
}
@supports (animation-timeline: scroll()){
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 0.25rem;
  transform-origin: left;
  background: var(--accent);
  animation: page-progress linear;
  animation-timeline: scroll();
}

@keyframes page-progress {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
.maingallery > div{
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}
@keyframes fade-in {
  from {
    opacity: 0;
    translate: 0 3rem;
    scale: 0.9;
  }

  to {
    opacity: 1;
    translate: 0;
    scale: 1;
  }
}
}
main div p, 
main div ul{
    animation: linearwipe 2s  linear both;
    opacity: 0;
}
main div > *:nth-child(2){
    animation-delay: 0.25s;
}
main div > *:nth-child(3){
    animation-delay: 0.5s;
}
main div > *:nth-child(4){
    animation-delay: 0.75s;
}
main div > *:nth-child(5){
    animation-delay: 1s;
}
@keyframes linearwipe{ 
    0% {  opacity: 0;} 
    100% { opacity: 1;}
}  
}