:root {
    --fontmono: "Inconsolata", monospace;
    --fontsans: "Montserrat", sans-serif;
    /*--primaryColorDark: #1e283a;*/
    --primarycolordark: #41510e;
    --primarycolorlight: #fff;
    --secondarycolor: #eca72c;
    --secondarycolorlight: #f1c77e;
    --grey: #ccc6c6;
    --blue: #619ff0;
    --tertiarycolor: #ef4700;
    --tertiarycolordark: #d83200;
    --sectionpadding: 50px
    }
h1 {
    font-family: var(--fontSans);
    font-size: 4em;
    line-height: 1.25em;
    color: var(--primaryColorLight);
    font-weight: 300;
    margin: 0;
    position: relative;
    z-index: 3
    }
h2 {
    font-family: var(--fontSans);
    font-size: 1.6em;
    line-height: 1.5em;
    color: var(--primaryColorDark);
    font-weight: 300
    }
p {
    font-family: var(--fontMono);
    font-size: 1.1em;
    line-height: 1.75em;
    font-weight: 400
    }
p a {
    font-size: inherit
    }
a {
    font-family: var(--fontMono);
    font-size: 1.1em;
    line-height: 1.75em;
    font-weight: 400;
    color: var(--tertiaryColor);
    transition: all 0.2s ease-in-out
    }
a:hover {
    background: var(--tertiaryColor);
    color: var(--primaryColorLight)
    }
img, .sectionImg {
    max-width: 100%;
    height: auto
    }
.nav-links {
    padding: 0 0.5em
    }
.red {
    color: var(--tertiaryColor)
    }
.button {
    display: inline-block;
    color: var(--primaryColorLight);
    background: var(--tertiaryColor);
    font-family: var(--fontMono);
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-align: center;
    padding: 0.75em 2em;
    border-radius: 2em;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
    }
.button:hover {
    background: var(--tertiaryColorDark)
    }
.button.buttonLarge {
    font-size: 1.1em;
    padding: 0.75em 4em
    }
.button.secondary {
    background: var(--primaryColorDark);
    color: var(--primaryColorLight);
    transition: all 0.2s ease-in-out
    }
.button.secondary:hover {
    background: var(--tertiaryColor)
    }
input[type="email"] {
    padding: 0.75em 1.25em;
    border: 0;
    min-width: 200px;
    border-radius: 2px;
    margin-right: 1em;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.3);
    color: var(--primaryColorLight)
    }
input[type="email"]::-webkit-input-placeholder {
    color: var(--primaryColorLight);
    opacity: 1;
    font-family: var(--fontSans);
    font-weight: 500
    }
input[type="email"]:-ms-input-placeholder {
    color: var(--primaryColorLight);
    opacity: 1;
    font-family: var(--fontSans);
    font-weight: 500
    }
input[type="email"]::-ms-input-placeholder {
    color: var(--primaryColorLight);
    opacity: 1;
    font-family: var(--fontSans);
    font-weight: 500
    }
input[type="email"]::placeholder {
    color: var(--primaryColorLight);
    opacity: 1;
    font-family: var(--fontSans);
    font-weight: 500
    }
body {
    min-width: 350px;
    margin: 0;
    padding: 0;
    font-family: var(--fontMono);
    background-color: var(--primaryColorLight);
    display: flex;
    flex-direction: column
    }
.new {
    color: var(--primaryColorLight);
    background: #028250;
    padding: 0.5em 1em;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-size: 0.85em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
    }
header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 80px 4fr 1fr
    }
.headerBg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--primaryColorDark);
    z-index: 1;
    -webkit-transform: skewy(-8deg);
    transform: skewy(-8deg);
    -webkit-transform-origin: top left;
    transform-origin: top left
    }
.headerCopy {
    grid-column: 2/6;
    grid-row: 2/3;
    color: var(--primaryColorLight);
    position: relative;
    z-index: 3;
    padding: 3em 0
    }
.headerImage {
    background-repeat: no-repeat;
    background-image: url(images/home-00.jpg);
    background-color: #f7f2f1;
    background-size: cover;
    background-position: 20% bottom;
    height: 100%;
    grid-column: 7/12;
    grid-row: 2/4;
    z-index: 2;
    box-shadow: 0 4px 70px rgba(0, 0, 0, 0.2)
    }
nav {
    grid-column: 2/12;
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 3fr 3fr;
    align-items: center;
    position: relative;
    z-index: 3
    }
nav .logo {
    font-family: var(--fontMono);
    font-size: 1.1em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    color: var(--secondaryColor);
    transition: all 0.2s ease-in-out
    }
nav .logo:hover {
    color: var(--primaryColorLight)
    }
/* nav .navLinksWrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2em;
  align-items: center;
}
nav .navLinksWrapper a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primaryColorLight);
  font-size: 1.1em;
  text-shadow: 1px 1px 2px rbga(255, 255, 255, 0.4);
} */
main {
    background: var(--primaryColorLight);
    display: flex;
    flex-direction: column
    }
.section {
    padding: 4em 0
    }
.section h3 {
    font-family: var(--fontSans);
    font-size: 2em;
    line-height: 1.5em;
    color: var(--primaryColorDark);
    font-weight: 500
    }
.section .button {
    margin: 1em 0
    }
.section.intro {
    margin: auto;
    text-align: center;
    padding: 0.8rem 0
    }
.section.Overview {
    padding: 0 var(--sectionPadding) 5em
    }
.section.Overview h3 {
    text-align: center
    }
.covid {
    text-align: center;
    margin: 1em auto 0;
    max-width: 60%
    }
.grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2.5em
    }
.grid-2 .grid-2-item h4 {
    font-weight: 500;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.075em
    }
.grid-2 .grid-2-item .grid-2-img {
    margin: 2em 0;
    width: 100%;
    height: 250px
    }
/* group 01 */
.grid-2 .grid-2-item:nth-of-type(1) .grid-2-img {
    background: url(images/scene-01.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 02 */
.grid-2 .grid-2-item:nth-of-type(2) .grid-2-img {
    background: url(images/scene-02.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 03 */
.grid-2 .grid-2-item:nth-of-type(3) .grid-2-img {
    background: url(images/scene-03.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
.section.teaser {
    display: grid;
    grid-template-columns: repeat(12, 1fr)
    }
.section.teaser.teaserStart .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/home-01.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 450px;
    grid-column: 1/7
    }
.section.teaser.teaserStart .sectionCopy {
    grid-column: 8/12
    }
.section.teaser.teaserStory02 .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/home-02.jpg);
    background-size: cover;
    background-position: center 10%;
    width: 100%;
    height: 450px;
    grid-column: 1/7
    }
.section.teaser.teaserStory02 .sectionCopy {
    grid-column: 8/12
    }
.section.teaser.teaserStory01 .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/home-03.jpg);
    background-size: cover;
    width: 100%;
    height: 450px;
    grid-column: 7/13;
    grid-row: 1/2
    }
.section.teaser.teaserStory01 .sectionCopy {
    grid-column: 2/6
    }
.section.valueProps {
    padding: 0 var(--sectionPadding) 5em
    }
.section.valueProps h3 {
    text-align: center
    }
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2.5em
    }
.grid-3 .grid-3-item h4 {
    font-weight: 500;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.075em
    }
.grid-3 .grid-3-item .grid-3-img {
    margin: 2em 0;
    width: 100%;
    height: 250px
    }
/* group 04 */
.grid-3 .grid-3-item:nth-of-type(1) .grid-3-img {
    background: url(images/scene-04.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 05 */
.grid-3 .grid-3-item:nth-of-type(2) .grid-3-img {
    background: url(images/scene-05.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 06 */
.grid-3 .grid-3-item:nth-of-type(3) .grid-3-img {
    background: url(images/scene-06.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
.section.shopCTA {
    background: var(--secondaryColor);
    padding-left: var(--sectionPadding);
    padding-right: var(--sectionPadding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
    }
.section.teaser.teaserCont .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/Hwy_299.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 450px;
    grid-column: 1/7
    }
.section.teaser.teaserCont .sectionCopy {
    grid-column: 8/12
    }
.section.teaser.teaserStory03 .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/Day-Bench.jpg);
    background-size: cover;
    background-position: center 10%;
    width: 100%;
    height: 450px;
    grid-column: 1/7
    }
.section.teaser.teaserStory03 .sectionCopy {
    grid-column: 8/12
    }
.section.teaser.teaserStory04 .sectionImg {
    background-repeat: no-repeat;
    background-image: url(images/Repairs.jpg);
    background-size: cover;
    width: 100%;
    height: 450px;
    grid-column: 7/13;
    grid-row: 1/2
    }
.section.teaser.teaserStory04 .sectionCopy {
    grid-column: 2/6
    }
.section.valueRide {
    padding: 0 var(--sectionPadding) 5em
    }
.section.valueRide h3 {
    text-align: center
    }
.grid-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2.5em
    }
.grid-4 .grid-4-item h4 {
    font-weight: 500;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.075em
    }
.grid-4 .grid-4-item .grid-4-img {
    margin: 2em 0;
    width: 100%;
    height: 250px
    }
/* group 07 */
.grid-4 .grid-4-item:nth-of-type(1) .grid-4-img {
    background: url(images/scene-07.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 08 */
.grid-4 .grid-4-item:nth-of-type(2) .grid-4-img {
    background: url(images/scene-08.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
/* group 09 */
.grid-4 .grid-4-item:nth-of-type(3) .grid-4-img {
    background: url(images/scene-09.jpg) no-repeat;
    background-size: cover;
    background-position: center center
    }
.section.finalCTA {
    background: var(--blue);
    padding-left: var(--sectionPadding);
    padding-right: var(--sectionPadding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
    }
.section.finalCTA h3 {
    color: var(--primaryColorLight)
    }
.meal {
    margin: 0 20%
    }
.section.old-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr)
    }
.section.old-body .sectionLinks {
    grid-column: 2/7;
    grid-row: 1/2
    }
.section.old-body .sectionCopy {
    grid-column: 8/12
    }
.sectionLinks ul, .sectionCopy ul {
    text-decoration: none;
    list-style: none;
    font-family: var(--fontMono);
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 400;
    padding: 0 1em
    }
.sectionLinks ul li a:hover, .sectionCopy ul li a:hover {
    padding: 0.1em 1em
    }
.newLinks {
    padding: 0.1em 1em
    }
.section.old-body .RouteMaps {
    grid-column: 1/-1;
    background: var(--grey);
    padding: var(--sectionPadding);
    text-align: center
    }
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly
    }
.section.old-body .Testimonials {
    grid-column: 1/-1;
    background: var(--secondaryColorLight);
    padding: var(--sectionPadding);
    text-align: center
    }
.section.old-body .Photos {
    grid-column: 1/-1;
    padding: var(--sectionPadding);
    text-align: center
    }
.prices li {
    padding-left: 2em
    }
.yellow {
    display: inline-block;
    background: var(--secondaryColor);
    padding: 0 0.4em;
    border-radius: 1em
    }
blockquote {
    font-family: var(--fontMono);
    font-size: 1.3em;
    line-height: 1.75em;
    font-weight: 600;
    display: inline-block;
    border-bottom: var(--tertiaryColorDark) 1px solid;
    margin-bottom: 1em
    }
.footer {
    padding: 4em 0;
    background: var(--primaryColorDark);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr)
    }
.footer {
    padding: 4em 0;
    background: var(--primaryColorDark);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr)
    }
.footerLinksContainer {
    display: flex;
    align-items: start;
    grid-column: 2/5;
    grid-row: 1/5
    }
.footerLinks {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: start;
    margin-right: 1em
    }
.footerLinks p {
    color: var(--primaryColorLight);
    text-transform: uppercase;
    letter-spacing: 0.1em
    }
.footerLinks a {
    text-decoration: none;
    color: var(--primaryColorLight);
    margin: 0.5em 0;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
    padding: 0 1em
    }
.footerLinks a:hover {
    opacity: 1
    }
.newsletter {
    grid-column: 7/13;
    grid-row: 1/3;
    color: var(--primaryColorLight)
    }
.newsletter .button {
    margin-top: 1em
    }
.socialLinks {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    grid-column: 7/12;
    grid-row: 3/5
    }
.socialLinks .iconSocial {
    margin: 0 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer
    }
.socialLinks .iconSocial:first-of-type {
    margin-left: 0
    }
.socialLinks .iconSocial .fab {
    font-size: 32px;
    color: var(--secondaryColor);
    transition: all 150ms ease-in
    }
.socialLinks .iconSocial .fab:hover {
    color: var(--primaryColorLight);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
    }
@media (max-width: 800px) {
    .grid-3-item, .grid-2-item, .grid-4-item {
        grid-column: 1/4
        }
    .covid {
        max-width: 90%
        }
    }
@media (max-width: 700px) {
    :root {
        --sectionpadding: 40px
        }
    p, a {
        font-size: 1.3em
        }
    nav {
        grid-column: 1/13;
        background: rgba(0, 0, 0, 0.7)
        }
    nav h3 {
        grid-column: 1/3;
        text-align: center
        }
    nav {
        display: block;
        z-index: 1000
        }
    .main-nav li {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 1000;
        background-color: black
        }
    .covid {
        max-width: 100%
        }
    .headerCopy h1 {
        display: block;
        padding-top: 15rem
        }
    .headerCopy {
        display: block;
        grid-column: 1/13;
        grid-row: 2/4;
        padding: 0 var(--sectionPadding) 5em;
        z-index: 3;
        text-align: center;
        background: rgba(0, 0, 0, 0.7)
        }
    .headerImage {
        grid-column: 1/13;
        grid-row: 1/4;
        z-index: 2;
        box-shadow: none
        }
    .section {
        padding: 2em 0
        }
    .new {
        margin: auto
        }
    .section.teaser.mobileCenter, .section.old-body.mobileCenter {
        grid-template-rows: 1fr;
        text-align: center
        }
    .section.teaser.mobileCenter .sectionImg, .section.old-body.mobileCenter .sectionLinks {
        grid-column: 1/13;
        grid-row: 1/2;
        height: 100%
        }
    .section.teaser.mobileCenter .sectionCopy, .section.old-body.mobileCenter .sectionCopy {
        grid-column: 2/12;
        grid-row: 2/3;
        margin-top: 2em;
        padding: 0
        }
    .section.intro {
        padding-top: 2em
        }
    .section.valueProps {
        border-top: 1px solid lightgrey
        }
    .flex-row {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly
        }
    .jersey {
        max-width: 500px
        }
    .footer {
        grid-template-rows: auto auto auto
        }
    .footerLinksContainer {
        grid-column: 2/12;
        grid-row: 4/5
        }
    .footerLinksContainer .footerLinks {
        flex-grow: 1;
        text-align: center;
        align-items: center
        }
    .newsletter {
        grid-column: 2/12;
        grid-row: 2/3;
        text-align: center;
        padding: 1em 0 3em;
        margin: 3em 0;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5)
        }
    .socialLinks {
        grid-column: 1/13;
        grid-row: 1/2;
        justify-content: center
        }
    .socialLinks .fab {
        font-size: 38px
        }
    }