:root {
    --dark-green: #006431;/*00a651*/
    --white: #ffffff;
    --black: #000000;
     --grey-500: hsl(0 0% 25% / 1);
            --grey-400: hsl(0 0% 50% / 1);
            --grey-300: hsl(0 0% 75% / 1);
            --grey-200: hsl(0 0% 90% / 1);
            --grey-100: hsl(0 0% 95% / 1);
            --grey-000: hsl(0 0% 97% / 1);
}
html {scroll-behavior: smooth;}
body {line-height: 1.2;margin: auto;padding: 0;font-family: system-ui, Arial, Helvetica, sans-serif;}
main {min-height: 40svh;}
.clear:after { content: " "; display: table; clear: both; }
.wash-details li {list-style-position: outside;list-style-image: url(/Content/images/drop.png);}
h1 {font-size:2rem;color:var(--dark-green);text-transform: uppercase;line-height:1;text-wrap-style: balance;}
h2 {font-size: 1.75rem;color:var(--dark-green);margin: 1em 0 0.5em 0;line-height:1;text-wrap-style: balance;}
@media screen and (max-width: 800px) {
h1 {text-align: center;}
}
ul {padding-inline-start: 1rem;}
a {color:var(--dark-green);}
* { box-sizing: border-box; }
.grid {display:flex;gap:20px;}
.grid img {width: 100%;height: auto;display: block;margin: auto;}
.grid-wrap {display:flex;flex-wrap:wrap;gap:20px;justify-content: center;}
.grid2-1 {flex-basis: 50%;}
.grid3-1 {flex-basis: 30%;}
@media screen and (max-width: 600px) {
    .grid {flex-wrap:wrap;}
    .grid2-1, .grid3-1 {flex-basis: 100%;}
}
/********************* HEADER ********************/
.sale-banner {background-color: #5f0000;}
.sale-banner img {display: block;margin: auto;width: 100%;max-width: 1000px;height: auto;}

.banner {min-width: 300px;width: 100%;max-width: 600px;height: auto;display: block;margin: 2rem auto -1.6rem;}
@media screen and (max-width: 600px) {
    .banner {max-width: 350px;margin: 1rem auto -15px;}
}
/********************* SYSTEM PAGE ********************/
.system_page {padding:60px 10px; margin:auto;}
.system_message { text-align: center; }
.big_letter {font-size: 9em;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block; fill:#dc1f2c;}
.system_title{font-size:24px;line-height:1.25;margin:0 0 20px;text-align:center}
.system_text{margin-bottom:45px;text-align:center}
.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 10px 0;text-align:left;vertical-align:top}
.system_table td:last-child{text-align:right;padding:10px 10px 0 5px}
@media screen and (max-width: 600px) {
   .system_table{width:100%}
}
/********************* NAVIGATION ********************/
nav {background: var(--dark-green);padding-block-start: 2rem;}
.topnav {max-width:1000px;margin:auto;}
.topnav a {text-decoration:none;color:#ffffff;display: inline-block;text-align: center;padding: 0 16px 15px;}
.topnav a:hover {font-weight:bold;}
.topnav .icon {display: none;}
a.icon{font-size: 2rem;margin: 0;padding: 0 20px 20px 0;line-height: .6;}
@media screen and (max-width: 800px) {
    nav {padding-block-start: 0;}
  .topnav a {display: none;padding:16px 15px;}
  .topnav a.icon {display: block;text-align: right;}
  .responsive {position: relative;}
  .responsive .icon {position: absolute;right: 0;top: 0;}
  .responsive a {display: block;}
}
/********************* ARTICLE/GENERAL ********************/
article {width:96%;max-width: 1280px;margin: 10px auto;}
.online {margin: 40px auto;text-align:center;}
.map-icons a { margin: 0 10px; }
/********************* WASH ********************/
.wash-group {display: flex;gap: 20px;justify-content: center;}
.wash-grid {width:100%;}
@media screen and (max-width: 800px) {
    .wash-group {flex-wrap:wrap;}
    .wash-grid {width:48%;}
}
@media screen and (max-width: 600px) {
    .wash-grid {width:75%;}
}
.wash-item {height: 100%;position:relative;border-radius: 10px;padding: 20px;text-shadow: none;}
.wash-deluxe {background-color: #207abf;}
.wash-best {	background-color: #E2122B;}
.wash-ultimate {background-color: #010101;}
.wash-level {text-align: center;font-size: 2em;color: #ffdc0a;font-weight:900;font-style: italic;margin-bottom: 10px;}
.wash-details {color: #ffffff;}
.lava {color: #FF0000;font-weight: bold;}
.wash-price {display: inline;color: #ffffff;font-size: 3.5em;font-weight: bold;position: absolute;bottom: 0;right: 10px;}
.dollar-sign {vertical-align: super;font-size: 50%;}

.price-wrapper {display: flex;justify-content: space-between;align-items: center;}
.punch-wrap {color: #ffffff;text-align: center;line-height: 1;}
.punch-wrap {    color: #ffffff;text-align: center;line-height: 1;}
.save-price {font-size: 1.5rem;}
.price {font-size: 3.5rem;font-weight: bold;}
.punch-item {position:relative;border-radius: 10px;padding: 20px;}
.punch-circle {width: 60px;height: 60px;align-content: center;text-align: center;line-height: 1;background-color: #fedc04;border-radius: 50px;outline: black solid 2px;margin: .25rem 0 0 0;}
.punch-qty {color: #000000;font-size: 3rem;font-weight: bold;}
.white {color:#ffffff;}
/********************* CAR CARE ********************/
.cc-header-wrap {display: flex;justify-content: center;align-items: center;margin-bottom: 30px;}
.cc-header-wrap img { margin:0 30px 0 0;width:200px;height:auto;}
.cc-header-text {font-size: 1.8em;color:var(--dark-green);margin:0;text-transform: capitalize;font-weight:normal;letter-spacing: .5em;    text-align: center;}
.cc-group {display: flex;gap: 20px;justify-content: center;align-items: center;}
.cc-grid {width:100%;}
.cc-details {height: 135px;border-radius: 10px;margin-bottom: 10px;}
.cc-price-group {display: flex;gap: 20px;}
.cc-price-wrap {width: 100%;text-align: center;color: white;}
.cc-price {font-size: 3.5em;font-weight: 600;}
.disclaimer {font-size: .5em;text-align: center;}
.cc-unlimited {text-align: center;color: red;font-size: 4rem;text-transform: uppercase;text-shadow: 1px 2px black;line-height: 1em;margin: 0;}
.cc-unlimited-text {text-align: center;font-size: 3rem;line-height: 1em;margin: 20px 0 0;}
@media screen and (max-width: 1100px) {
    .cc-group {flex-wrap:wrap;}
    .cc-grid {width:48%;min-width:400px;}
}
@media screen and (max-width: 600px) {
    .cc-header-wrap {flex-wrap:wrap;}
    .cc-header-wrap img { margin:0 0 30px 0;}
    .cc-grid {width:100%;min-width:auto;}
    .cc-price {font-size: 3em;}
}
.cc-group img {width: 100%;height: auto;display: block;max-width: 300px;margin: auto;}
/********************* FOOTER ********************/
footer {background-color: var(--dark-green);color:var(--white);padding: 30px 0;}
.footer-container {width: 96%;max-width: 1280px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center;text-align: center;gap: 1rem;}
.footer-container > div {flex: auto;}
footer a {color:var(--white);text-decoration:none;}
.copyright {text-align: center;font-size: .8em;font-style: italic;margin: 2rem auto;width: 90%;text-wrap: balance;}
.footer-title {font-size:1.2em;font-weight:bold;margin-top: 0;}
.social-icons {display: flex;column-gap: 20px;margin: 0 2%;justify-content: center;}
.social-icon {width: 30px;height: auto; border-radius:5px; }

/********************* FORM ********************/
.form-wrapper {width: 100%;margin: auto;max-width: 800px;}
.form-note {font-size:.8rem;color:#9c0000;padding-left: 10px;}
.fsection {border: thin solid #d7d7d7;border-radius: 5px;box-shadow: 2px 2px 5px #adadad;}
.job-postings-section {padding: 30px 20px 20px;border-radius: 5px;}
.job-postings-section-grey {padding: 30px 20px 20px;background-color: #eeeeee;border-radius: 5px;}
.fg {display: flex;column-gap: 20px;}
.fg div {width:100%;}
@media screen and (max-width: 600px) {
    .fg {flex-wrap: wrap;}
}
        .form {max-width: 800px;}
        .form input[type=text], .form input[type=url], .form input[type=tel], .form input[type=email], .form select {width: 100%;}
        .form-flex, .form-flex-auto, .form-flex-cszip {display: flex;flex-wrap: wrap;column-gap: 1rem;}
        .form-flex > div {flex: 1 1 250px;}
        .form-flex-cszip > div:first-of-type {flex: 1 1 auto;}
        .form-flex-cszip > div {flex: 1 1 80px;}
        
        fieldset {background-color: var(--white);border: thin solid var(--grey-200);border-radius: .5em;margin-block-end: 2rem;padding-block-end: 1.5rem;}
        fieldset > legend {padding: .15rem 2rem;background: var(--dark-green);color: var(--white);border-radius: .25rem;}
        fieldset:last-of-type {margin-block-end: 0;}
        fieldset p {line-height: 1.3;margin-inline: 1rem;}
        fieldset .important {margin-block-end: 0;}
        fieldset hr {margin-block: 2rem 1rem;}
        
        .checkbox-radio-list {margin-block-start: 2.2rem;outline: 1px solid #cccccc;border: none;padding-block: 1rem 0;position: relative;column-count: 1;}
        .checkbox-radio-column {column-count: 2;margin-block-start: 2.2rem;outline: 1px solid #cccccc;border: none;padding-block: 1rem 0;position: relative;}
        .checkbox-radio-list legend, .checkbox-radio-column legend {background: none;color: inherit;letter-spacing: inherit;position: absolute;top: -23px;left: -27px;line-height: 1;font-size: 1rem;font-weight: 500;}
        .checkbox-radio-list > div, .checkbox-radio-column > div {display: flex;align-items: center;gap: .5em;padding-left: 1rem;margin-block-end: 1rem;}
        input[type=checkbox], input[type=radio] {background: var(--white);width: 1rem;height: 1rem;min-width: 20px;-webkit-appearance: checkbox; outline: thin solid white;}
        .checkbox-radio-list label, .checkbox-radio-column label {margin: 0;}
        .checkbox-radio-column.error {outline-color:salmon;}
        
        label, form .label { font-weight:500;display: inline-block;margin: 1rem 0 .2rem .5rem;line-height: 1;}
        label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after, label:has(~ div > input:required):after, label:has(~ select:required):after, .required legend:after {content: ' *';color: red;}
        
        input:not([type=submit]), select, textarea,#paymentFields_payment_form_0, .stripe_payment_wrapper {font-family:inherit;font-size:inherit;background-color: var(--white);color:inherit;font-weight: inherit;outline:1px solid #cccccc;transition:outline-color .5s ease-out;border: none;padding: .7em; margin: 0; border-radius: 5px; -webkit-appearance: none; overflow: auto;}
         #paymentFields_payment_form_0, .stripe_payment_wrapper {margin-block: 1rem;}
         #paymentErrors_fundraiser_0 {color: red;text-align: center;}
        optgroup {font-weight: bold;}
        option {font-weight: 300;}
        textarea {width: 100%;line-height: 1.3rem;field-sizing: content;max-height: 80vh;}
        .input-full-width {width:100%}
        input::placeholder {color:var(--grey-400);}
        input[type="color"] {padding: 0.1rem;height: 3rem;width: 3rem;}
        
        
        
        .note {font-size: .8em;font-style: italic;color: var(--red);margin-block-start: .25rem;margin-inline-start: .5rem;line-height: 1.2;}
        
        input:focus:user-valid, select:focus:user-valid, textarea:focus:user-valid {outline-color:palegreen;}
        input:invalid, select:invalid, textarea:invalid{outline-color:salmon;}
        input:focus:invalid, select:focus:invalid, textarea:focus:invalid {outline-color:orange;}
        
        @media screen and (max-width: 800px) {
            fieldset > legend {top: 0;}
            }
        @media screen and (max-width: 400px) {
                    input, select, textarea {width:100%;}
                }
input:focus, textarea:focus, select:focus { outline:none; border-bottom: solid 3px #000000;}


#form_search {display: flex;max-width:100%;width: fit-content;padding: .5rem 1rem;border-radius: 0.5em;margin-inline: auto;margin-block: 1rem;background-color: var(--grey-100);align-items: center;flex-wrap: wrap;justify-content: center;gap: .5em;}
        #form_search input[type=text], #form_search select {font-size: 1rem;padding: .25em;border-radius: .25em;border: solid thin var(--grey-300);background-color:var(--white);}
        #form_search input[type=datetime-local] {font-size: 1rem;padding: .2em;border-radius: .25em;border: solid thin var(--grey-300);background-color:var(--white);}
        .reset-btn {color: var(--black);font-size: .9rem;border-radius: 5px;padding: .25rem .5rem;margin: 3px 4px;border: none;white-space: nowrap;display: inline-block;text-decoration: none;line-height: 1.1;}
        @media screen and (max-width: 600px) {
            #form_search input[type=text], #form_search select {width:100%;}
        }
/********************* BUTTONS ********************/
.a-btn, input[type=submit] {font-weight: bold;background: var(--dark-green);background: linear-gradient(135deg, #00a651 0%,#a6ce39 100%);border-radius: 10px;padding: 10px 20px;text-shadow: 1px 1px 2px black;    display: inline-block;margin:0;cursor: pointer;border: none;color: white;font-size: 1rem;text-decoration:none;}
input[type=submit] {width: 100%;}
.a-btn a {color: #ffffff;text-decoration:none;}
.a-btn:hover, input[type=submit]:hover {background: var(--dark-green);text-shadow: -1px -1px 2px black;}
/********************* CONTACT ********************/
iframe {width: 100%;height:300px;border:0;}
.title {font-size:1.2em;font-weight:bold;margin-top: 0;}