:root {--lightgrey:#dadada ;--red:#DF0101;--redtrans:#F8EEEE;--dark:#171717; --darktrans:rgba(3,3,3,0.7); --almostblack:rgba(3,3,3,1); --normal :'Montserrat', sans-serif; --slow:opacity 1s linear; --fast:all 0.3s linear;}
*,*::before,*::after {box-sizing:border-box;}
html, body, h1, h2, h3, h4, img, ul, li, form, label, footer, header, nav, section  {margin:0; padding:0; border:0; outline:0; position:relative;}
body {font-family:var(--normal); text-align:center; font-size:1em; font-weight:400;}
section {width:100%; max-width:960px; margin:auto; display:grid; grid-template-columns:1fr; grid-gap:0; background-image:url(/assets/weelz4uback.jpg); background-repeat:no-repeat; background-position:top center; color:white; padding:0 6px; margin-top:0; background-color:var(--dark);}
header {grid-row:1;}
footer {grid-row:3;}
header {display:grid; grid-template-columns:1fr; align-items:center; margin-bottom:0.6em;}
header a {justify-self:flex-start;}
header div {text-align:left; line-height:1.3; font-weight:600;}
header div a {display:block; color:white; text-decoration:none; transition:var(--fast);}
header div a:hover{color:var(--red);}
header nav {grid-column:1; text-align:left;}
header nav a {display:inline-block; margin:1em 0 0.5em 0; background-color:var(--almostblack); color:white; padding:0.5em 1em; text-decoration:none; position:relative; transition:var(--fast); font-weight:500;}
header nav {transform: scaleY(0); max-height: 0; overflow: hidden; margin-bottom: 1em; margin-top: -1em; transition:var(--fast);transform-origin: top center;}
header nav.show {transform: scaleY(1); max-height: 50vh; overflow: visible;}
header nav a {display: block;margin: 0;background-color: var(--almostblack);color: white;padding: 0.5em 1em;text-decoration: none;position: relative;transition: var(--fast);font-weight: 500;}
header nav a.selected {background-color:var(--red);}
header nav {position:relative;}
header nav a:hover{color:red;}
header nav a.selected:hover{color:white;}
header a.contact {grid-column:1 / span 1; display:block; background-color:var(--darktrans); color:white; width:100%; padding:0.3em 0.5em; text-align:right; text-decoration:none; transition:var(--fast); margin-top:-0.4em;}
header a.contact:hover {color:var(--red);}
footer {background-color: #000;display: grid;grid-template-columns: 1fr;justify-items: flex-start;color: white;padding: 0.5em;grid-row-gap: 0.5em;}
footer a {color:white; transition:var(--fast); text-decoration:none;}  
footer a:hover {color:var(--red);}
section main {position:relative;min-height: calc(100vh - 229px);text-shadow:1px 1px 1px var(--dark);} 
section main #testimonials {width:100%; padding:0.1em 0.5em; background-color:#999; color:white; border-radius:0.5em;margin-bottom:1em;}
section main #testimonials p {margin:0; padding:0; opacity:0; max-height:0; overflow:hidden; transition:var(--slow);}
section main #testimonials p.show {opacity:1; max-height:30vh;}
section main #testimonials p:before {font:var(--fa-font-solid); display:inline-block; margin-right:0.4em; content:'\f10d';}
section main #testimonials p:after {font:var(--fa-font-solid); display:inline-block; margin-left:0.4em; content:'\f10e';}
section main #testimonials::after {content:""; width:0; aspect-ratio:1; background:none; position:absolute; display:inline-block; top:0;}
section main h1 {background-color:var(--darktrans); color:var(--red); padding:0.25em; font-size:2em; font-weight:900; text-shadow:2px 2px #000;}
section main > p {text-align:justify; font-size:0.9em; line-height:1.3; font-weight:500;}
section main  a {color:white; text-decoration:none; transition:var(--fast);}
section main  a:hover {color:var(--red);}
section main  img {width:97%; height:auto;}
section main .photobar {display: flex;justify-content: center;margin-bottom: 1em;margin-top: 1em;}
section main .photobar img {height: 120px;width: auto;}
section main .photobar img:not(:first-child) {display:none; }
section main .pricing {margin: 0 2em 2em 2em;text-align: left;padding-left: 1em;list-style: disc;}
section main .pricing li {padding-left: 1em;display: flex;justify-content: space-between; align-items: flex-start; width: 19em; margin-top: 0; margin-bottom: 0.5em; margin-left: 1em;}
section main .pricing li p {display: inline-block; margin: 0; padding: 0;}
section main .pricing li span {text-align: right;font-weight: 600;letter-spacing: 1px;}
section main .twocol {text-align: left;display: grid;grid-template-columns: 1fr 1fr;margin-bottom: 2em;padding-top:2em;padding-bottom:2em;}
section main .twocol ul {margin-left: 1em;padding-left: 1em;}
section main .twocol ul li {padding-left: 1em;margin-bottom: 0.3em;line-height: 1.5;}
section main.contact {display: flex;justify-content: center;align-items: center;padding: 0;}
section main.contact form {width: 90%;max-width: 500px;border: solid 1px var(--red);padding: 1em 2em;display: grid;grid-template-columns: 1fr;text-align: left;grid-row-gap: 0.5em;background-color: var(--almostblack);}
section main.contact form p {grid-column: 1 / span 1; margin-bottom:1em;}
section main.contact form label {font-size: 0.9em;}
section main.contact form input,section main.contact  form button, section main.contact form textarea {font-family: inherit;color: var(--dark);font-size: 0.9em;border: solid 1px transparent;padding: 0.3em;border-radius: 0.2em;}
section main.contact form input:invalid , section main.contact form textarea:invalid {color: var(--red);background-color: var(--redtrans);}
section main.contact form textarea {grid-column: 1 / span 1;height: 8em;}
section main.contact button {grid-column: 1 / span 1;cursor: pointer;font-weight: 500;background-color: var(--lightgrey);transition: var(--fast);}
section main.contact button:hover {color: white;background-color: var(--red);}
.smallnav {display: block;justify-self: flex-end;background-color: var(--dark);padding: 0.5em 1em;margin-bottom: 1em;color: var(--red);transition:var(--fast);cursor:pointer;}
.smallnav:hover {color:var(--dark);background-color:var(--red); }
@media (min-width:500px) {
header {grid-template-columns:1fr 1fr; }
footer {display:flex; justify-content:space-between; align-items:center;padding:0;}
header nav {grid-column:1 / span 2;}
header a.contact {grid-column:1 / span 2;}
header div {text-align:right;}
section {padding:0 20px;}
section main #testimonials {width:240px;}
section main #testimonials::after {content:""; width:calc(100% - 292px); aspect-ratio:4 / 1; background:url("/assets/carcrop2.jpg"); background-repeat:no-repeat; background-position:right center; background-size:contain; right:0; position:absolute; display:inline-block; top:0;}
header nav a {display:inline-block; margin:1em 0 0.5em 0;}
header nav {grid-column:1 / span 2; text-align:left;transform: scaleY(1);max-height: 50vh;overflow: visible;grid-column: 1 / span 2;margin-bottom: 0;}
.smallnav {display: none;}
section main .photobar {justify-content: space-between;}
section main .photobar img:not(:last-child) {display:inline-block;}
section main.contact form {display: grid;grid-template-columns:136px 1fr;}
section main.contact form p {grid-column: 1 / span 2; }
section main.contact form textarea {grid-column: 1 / span 2;}
section main.contact button {grid-column: 1 / span 2;}
}
@media (min-width:700px) {
section main .photobar img:nth-child(3) {display:block; }
}