@media (prefers-color-scheme: light) {
:root {
    --white: hsl(204, 33%, 97%);
    --black: hsl(203, 31%, 5%);
  --text: hsl(203, 31%, 5%);
  --background: hsl(204, 33%, 97%);
  --primary: hsl(209, 100%, 32%);
  --secondary: hsl(209, 56%, 72%);
  --accent: hsl(209, 65%, 32%);
}
}
@media (prefers-color-scheme: dark) {
:root {
    --white: hsl(204, 33%, 97%);
    --black: hsl(203, 31%, 5%);
  --text: hsl(203, 31%, 95%);
  --background: hsl(203deg 31% 8%);
  --primary: hsl(209, 100%, 32%);
  --secondary: hsl(209, 56%, 72%);
  --accent: hsl(209 65% 66%);;
}
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {animation-delay: -1ms !important;animation-duration: 1ms !important;animation-iteration-count: 1 !important;background-attachment: initial !important;scroll-behavior: auto !important;transition-delay: 0s !important;transition-duration: 0s !important;}
}

html { -webkit-text-size-adjust: 100%;scroll-behavior: smooth; }
.sreen-reader-only {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;color: var(--white);}
#skip a:focus {position:static;width:auto;height:auto;}
*, ::before, ::after { box-sizing: border-box; }

:target {scroll-margin-top: 6rem;}
@media screen and (max-width: 800px) {
    :target {scroll-margin-top: 190px;}
}
h2:target  {animation: 3s fadeout;}
@keyframes fadeout {
    0% { background-color: var(--secondary);color:var(--black);}
    80% { background-color: var(--secondary);color:var(--black);}
    100% { background-color: var(--background);color:var(--text);}
}

body {font-size: 1.1rem;line-height: 1.5;margin: auto;padding: 0;font-family: system-ui, Arial, Helvetica, sans-serif;background-color: var(--background);color: var(--text);}

h1 {font-size: clamp(3rem, 7vw - .1rem, 5rem);color: var(--text);letter-spacing: 2px;font-weight: 500;text-transform: capitalize;text-wrap: balance;}
.h1-highlight {background: linear-gradient(120deg, hsl(209deg 100% 45.08%), hsl(209 65% 65% / 1));-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-style: italic;white-space: nowrap;}
h2 {font-size: clamp(2rem, 7vw - .1rem, 3rem);color:var(--text);margin: .75em -.25em 0.25em -.25em;padding: .25em;font-weight: 300;text-wrap-style: balance;line-height: 1;}
h1 a, h2 a {text-decoration:none;}
h3 {font-size: 1.5rem;margin:0;}
small {font-size: 0.8rem;} 
a {color:var(--accent);}
a:hover {color: var(--text);text-decoration: none;}
ul {line-height: inherit;}
main p, main ul {margin-block-start: 0;margin-inline-start:.25em; text-wrap:pretty;max-width:800px;}
img {max-width: 100%;height: auto;display: block;}

/********************* HEADER ********************/
header {background-color:var(--primary);}
.head-bg {border-bottom: solid 1px var(--text);transition: all 0.5s ease-in;}
.stick { position: sticky; top: 0; width: 100%; z-index:2; }


/********************* SYSTEM PAGE ********************/
.system_message { text-align: center; }
.big_letter {font-size: 9em;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block; fill: var(--primary);}
.system_title{line-height:1.25;margin:0 auto 20px;text-align:center;}
.system_text{margin-bottom:45px;text-align:center;max-width: 100%;}
.system_subtitle{font-size:20px;text-align:center;margin:0 0 15px}
.system_table{width:50%; margin:auto;}
.system_table td{width:50%;padding:10px 5px;}
.system_table td:first-child {text-align: right;font-weight: bold;}
.system_table td:last-child{text-align: left;}
@media screen and (max-width: 600px) {
   .system_table{width:100%}
}
/**************  NAVIGATION  ****************************************************/
nav.main {color: var(--white); font-size:1.2rem; display: flex; align-items: center;justify-content: space-between; width:96%; max-width: 1280px; margin: auto; }
nav.main img {height: 80px;width: auto;margin:.6rem;padding:.4rem;transition: all 0.5s ease-in-out;}

.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
.selected > :first-child{border-bottom:3px solid var(--black); }
.highlight > a {background-color: var(--secondary);}

.nav-hide {display:none!important;}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;}
.main ul li { display: inline-block; transition: background-color 0.4s ease-in-out;  }
.main ul li a, .main ul li button { text-decoration: none; display: block; padding: 10px; color:var(--white);transition: margin .3s ease-in-out;line-height: 1;/*background-color: inherit;--removed so i don't need important on highlight*/margin:auto;}
.main ul li a:hover, .main ul li button:hover {background-color: var(--secondary)!important;;transition: background-color 0.4s ease-in-out;color: var(--black);}
.main button:hover, .highlight > a:hover {  background: var(--accent);color:var(--white);transition: background 0.6s ease-in-out}
.main ul ul { position: absolute; z-index:2; text-align:left; display: none; background: var(--white);box-shadow: 2px 2px 5px var(--shadow);} 
.main ul ul li { display: block;  }
.main ul ul li a { color: var(--white);}
.main div { font-size: 2.5rem; padding: 0 4%; cursor: pointer; display: none;    margin-top: -10px; }
.main button {font-size: 1.3rem;cursor: pointer;display: none;padding: .6rem .5rem;color: var(--white);background: inherit;border: none;font-family: inherit;margin: 0 8% 0 auto;line-height:1;align-items: center;}
.main button span {/*font-size: 1.1rem;*/font-weight: 400;}
.mobilenav {display: block!important;position: absolute;right: 0;top: 90px;}

@media(max-width: 800px) {
    .main button {display: flex;}
    .main button svg {stroke:var(--white);}
    .main button:hover svg {stroke:white;}
    nav.main img {height: 80px;}
    nav.main {flex-wrap: wrap;}
    .main div {display: block; }
    .main ul { display: none; position: static; width: 100%;}
    .main ul li { display: block;  text-align: center;}
    .main ul ul { position: static; text-align:inherit;width: 90%;
    margin: auto; }
    nav:has(.mobilenav) ul {display: block;}
}
@media(min-width: 1070px) {
    .scroll-img { height: 60px!important;}
}
@media(min-width: 750px) and (max-width: 1070px) {
    .scroll-img { height: 50px!important;}
}
@media(max-width: 750px) {
    nav.main img { height:50px; }
    nav.main {flex-wrap:wrap;}
}
/********************* ARTICLE/GENERAL ********************/
.content-wrapper {max-width:1440px;margin-inline:auto;box-shadow:4px 0px 16px 0px hsl(209deg 100% 32% / 25%),-4px 0px 16px 0px hsl(209deg 100% 32% / 25%);}
main {min-height: 50vh;max-width: 1280px;padding: 1rem;margin: 0 auto;display: grid;grid-template-columns: 1fr 350px;gap: 3rem;}
aside h2 {margin-block-start: 0;}
aside h3 {margin-block-start:2rem;}

@media(max-width: 750px) {
    main {grid-template-columns: 1fr; }
}

/********************* FOOTER ********************/
footer a {color:white;text-decoration:none;}
footer a:focus {outline:2px solid white;}
footer a:hover {background: inherit;text-decoration:underline;color:var(--accent);}
footer { color: var(--white); background-color: var(--primary);padding: 2rem 0 4rem; text-align:center; }
footer h3 {margin-bottom: 1rem;font-weight: bold;}
footer p {margin: 0 auto 1rem auto;}
.footer-grid {width: 96%;max-width: 1280px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center;column-gap: 1rem;row-gap: 3rem;}
.footer-grid > div {flex: 1 1 220px;}
.footer-phone {color:var(--white);}
.footer-phone:hover {color:var(--black);}
.copyright { text-align:center; font-size: .8rem; font-style: italic;margin: 0 auto;width: 90%;text-wrap: balance; }
.phone {margin-inline-start: 1rem;}
.hours {display: grid;grid-template-columns: 50px 160px;column-gap: 1em;row-gap: .25em;text-align: left;     margin-inline-start: 1rem;}
.hours span:nth-child(odd) {text-align: right;}
.social-icons, .map-icons {display: flex;column-gap: 1.5rem;margin-inline-start: 1rem;}
.social-icon {width: 35px;height: auto; }
footer svg:hover, footer img:hover {filter: invert(1);}
.social-round {border-radius:50%;}

/********************* FORM ********************/
form {max-width: 500px;}
.form-flex {display: flex;gap: 1rem;}
@media only screen and (max-width:700px) { 
    .form-flex {display:block;}
}
.form-flex div {flex: 1 1 auto;}
label {line-height: 1;font-size: .9rem;margin: 1rem 0 .25rem 0;display: block;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input[type=radio])::after {content: '';}
input[type=email], input[type=tel], input[type=text], input[type=file] {border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--accent);}
textarea {display:block;border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:inherit;border: thin solid var(--accent);}
input[type=date], input[type=password], input[type=number] {border: none;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--accent);}
input[type=checkbox], input[type=radio]  {margin: .625em 0 .625em 0;background:var(--white);width: 1rem;height: 1rem;min-width: 20px;}
.checkbox-wrapper {display: flex;align-items: baseline;    gap: 1rem;}
select {border: none;width: 100%;padding: .85rem .75rem;font-family: inherit;font-size: inherit;line-height:1;background: inherit;-webkit-appearance: none;appearance: none;border: thin solid var(--accent);background:var(--white);}
input[type=submit] {background: var(--accent);border-radius: .5rem;padding: .5em 1em;display: inline-block;cursor: pointer;color: var(--background);font-size: inherit;text-decoration: none;border: thin solid var(--accent);font-weight: normal;margin: 1em;}
input[type=submit]:hover {background-color:var(--background);border: thin solid var(--primary);color: var(--text);}
fieldset {margin-bottom: 2rem;border: none;background: var(--background);}
fieldset:last-of-type {margin-bottom: 0;}
fieldset hr {margin: 2rem 1rem;}
legend {background: var(--accent);color: var(--primary);padding: .25rem .75rem;width: 100%;font-weight: bold;letter-spacing: 2px;position: sticky;
    top: 0;}
legend + p {font-style: italic;font-size: 1rem;margin: 0 0 1.5rem;}
input:user-invalid, select:user-invalid, textarea:user-invalid {border-bottom: 2px solid red;}
input:focus:invalid, select:focus:invalid, textarea:focus:invalid  {border-bottom: 3px solid  salmon;}
input:required:valid, select:required:valid, textarea:required:valid {border-bottom: 2px solid palegreen;}
input:required:focus:valid, select:required:focus:valid, textarea:required:focus:valid {border-bottom: 3px solid palegreen;}
input:focus, textarea:focus, select:focus { outline:none; border-bottom: solid 3px #000000;}

/********************* BUTTONS ********************/
.a-btn {background: var(--accent);border-radius: .5rem;padding: .5em 1em;display: inline-block;cursor: pointer;color: var(--background);font-size: inherit;text-decoration: none;border: thin solid var(--accent);font-weight: normal;}
.a-btn:hover {background-color:var(--background);border: thin solid var(--primary);color: var(--text);}
footer .a-btn:hover {background:none;border: thin solid var(--accent);color: var(--accent);}

/**************  SLIDESHOW  ****************************************************/
.slideshow-container { position: relative; width:100%; height:80vh;min-height: 500px;overflow: hidden;max-width: 1440px;margin: 0 auto;}
.mySlides { display: block; height: 80vh;min-height: 500px;width: 100%; overflow:hidden;background-color: var(--black);border-bottom: 2px solid var(--shadow);max-width: 1440px;margin: 0 auto;}
.mySlides .res-image { width: 100%; height: 100%; object-fit: cover; /*filter: brightness(0.5);*/     aspect-ratio: 1920 / 1132;}
.mySlides img {transform:scale(1.2); animation: kenburns 10.3s; /*animation-iteration-count: infinite;*/}
.slideshow-text {position: absolute;left: 0;bottom: 10%;padding: 1em 1em 1em 8%;background: hsl(0deg 0% 0% / 40%);z-index:1;}
.slideshow-text-line1 {font-size: clamp(2rem, calc(6vw - 1rem), 4rem);line-height: 1;text-wrap: balance;color:var(--white);font-weight: 600;margin:0;text-transform: none;}
.slideshow-text-line2 { font-size: clamp(1.25rem, calc(5vw - 1rem), 1.5rem);color: var(--white);line-height: 1;}
.slideshow-container .next { right: 10px; }
.slideshow-container .prev { left: 10px; }
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; bottom: 50%; /*padding: 10px 20px;*/ color: #f2f2f2;  font-size: 3em;  transition: .6s ease; opacity: .7; }
.slideshow-container .prev:hover, .slideshow-container .next:hover { color: var(--black); background-color: #f2f2f2; }
.dot-selector {text-align:center; position: absolute; bottom: 20px; left: 0; width:100%; z-index:1;}
.dot { cursor: pointer; height: 12px;  width: 12px;border-radius: 50%;  display: inline-block;border: thin solid var(--prime);margin: .2rem; }
.dot-selector .active {border:thin solid var(--prime);background:var(--prime); }
.dot:hover { background-color: var(--white); border:none;}
.slideshow-container a {text-decoration:none;}

@media screen and (max-width: 800px) {
    .slideshow-container { height:60vh;}
    .mySlides { height: 60vh;}
}
@keyframes kenburns {
    0%{transform: scale(1);opacity:0;} 
    10%{transform: scale(1);opacity:1;} 
    90% {transform: scale(1.2);opacity:1;}
    100% {transform: scale(1.2);opacity:0;}
}

/**************  Gallery  ****************************************************/

.image-gallery {display: flex;flex-wrap: wrap;gap: 1rem;justify-content: center;}
.gallery-card {padding: 0 0 40px 0;}
.image-card {flex: 1 1 auto;width: 250px;height: auto;aspect-ratio: 1 / 1;text-align: center;position: relative;}
.image-card img {width: 100%;height: 100%;object-fit: cover;}
.image-card p, .caption {font-size: .8em;margin: 5px 20px 10px;text-align: center;}
.image-edit-bar {position: absolute;bottom: 0;right: 0;padding: 5px;}
@media(max-width: 600px) {
    .image-card {flex: 1 1 auto;min-width: 300px;height: auto;aspect-ratio: 1 / 1;}
}