:root {
    /* standard used colors */
    --wht: #ffffff;
    --blk: #000000;
    --grn: #008327;
    --blk2: #252422;
    --blue: blue;
    --brn: #4f4739;
    --hov: #aab6be;

    /* alternate colors for user lighting preference */
    --alt1: var(--wht);
    --alt2: var(--blk);

}

/* @media screen and (prefers-color-scheme: light) {
    :root {
        --alt1: var(--blk) !important;
        --alt2: var(--wht) !important;
    }
} */

@keyframes slide {
    to {
        transform: translate(var(--slide-x), var(--slide-y));
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes hand-wobble {

    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

.no-scroll {
    overflow: hidden !important;
}

a {
    text-decoration: none;
    color: inherit;
}

a::selection {
    background: transparent;
}

::selection {
    color: var(--grn);
}

a:hover {
    color: var(--grn)
}

p {
    overflow-wrap: break-word;
}

body {
    position: relative;
    margin: 0;
    background-color: var(--alt2);
    color: var(--alt1);
    font-family: "Open Sans", Sans-serif;
    letter-spacing: 1.5px;
    scrollbar-color: var(--grn) var(--blk);
}

header {
    position: sticky;
    top: 0;
    padding-top: 10px;
    background-color: var(--alt2);
    z-index: 1;
}

html {
    scroll-behavior: smooth;
}

button {
    background-color: var(--grn);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--grn);
    border-radius: 10px 10px 10px 10px;
    padding: 1vw;
    cursor: pointer;
    font-weight: bold;
    color: var(--wht);
    font-size: clamp(12px, calc(1vw + 1em), 18px);
    white-space: nowrap;
}

button:hover {
    background-color: var(--wht)00 !important;
    color: var(--wht) !important;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--wht);
    transition: 0.3s;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--blk);
    z-index: 4;
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(../images/1.gif);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
}

.h1 {
    font-size: 36px;
    font-weight: 700;
    word-spacing: 1.5px;
    text-decoration: underline;
}

.h2 {
    font-size: 42px;
    font-weight: 700;
    word-spacing: 1.5px;
    padding-left: 50px;
}

.wide .h3 {
    font-size: 4.5vw;
    margin: 0;
}

.mobile .h3 {
    font-size: 9vw;
    margin: 0;
}

.main-links svg {
    padding-left: 10px;
    margin-bottom: -7px;
}

.alignsvg {
    padding-left: 4px;
    margin-bottom: -3px;
}

.wide .logo-image,
.logo-mobile {
    max-width: 200px;
    width: 100%;
    padding-left: 20px;
}

.wide .menu {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-items: center;
    align-items: center;
    padding-bottom: 15px;
}

.dropdown h5:hover {
    color: var(--grn);
    transition: all 0.25s ease-in-out;
}

.wide .menu .dropdown-content {
    display: none;
    position: absolute;
    gap: 1em;
    width: 100% !important;
    left: 0;
    top: 6em;
    background-color: var(--alt2);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-style: solid;
    border-width: 0px 0px 5px 0px;
    border-color: var(--grn);
    animation: fadeInAnimation ease .3s;
    margin-top: 1vh;
}

.wide .menu .dropdown-content0 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 24px 0px 24px 0px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    align-items: flex-end;
}

.vehicle-images {
    width: 200px;
    max-width: 200px;
}

.iconactive:hover {
    transition-duration: 0.3s;
    transform: scale(0.9);
}

.iconactive:not(:hover) {
    transition-duration: 0.3s;
}

.wide .menu .dropdown-content1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 50px 24px 26px 100px;
}

.wide .menu .dropdown-content2,
.wide .menu .dropdown-content3 {
    display: none;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 100px;
}

.wide .menu .show {
    display: grid;
}

.menu .support-image button {
    display: flex;
    align-items: center;
}

.wide .menu .support-image {
    background-color: var(--grn);
    width: 100%
}

.wide .menu .support-image h1,
.wide .menu .about-image h1 {
    color: var(--wht);
    font-size: 42px;
    margin-left: 1em;
}

.wide .menu .dropdown h5 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3vw;
    cursor: pointer;
}

.menu .about-image {
    padding-top: 25px;
    background-color: var(--grn);
    width: 100%
}

.menu .about-image button {
    display: flex;
    align-items: center;
}

.menu .support-image button,
.menu .about-image button,
.container-box button {
    color: var(--grn);
    font-size: clamp(12px, calc(1vw + 1em), 34px);
    border-radius: 10px 10px 10px 10px;
    padding: 12px 24px 12px 28px;
    background-color: var(--wht);
}

.warranty2 button {
    text-wrap: auto;
}

.menu .support-image button,
.menu .about-image button {
    margin-left: 1.5em;
    margin-bottom: 3em;
}

.hidden-content button {
    background-color: var(--wht);
    color: var(--blk2);
    width: 100%;
}

.wide .menu .closebtn {
    display: none;
}

.mobile .mobile-logo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    padding-left: 5px
}

.mobile .logo-image {
    max-width: 200px;
    width: 100%
}

.mobile .menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: var(--alt2);
    overflow-x: hidden;
    transition: 0.5s;
}

.mobile .menu .dropdown h5 {
    font-size: 7vw;
    cursor: pointer;
    padding-left: 30px;
}

.mobile .menu .dropdown-content {
    display: none;
    background-color: var(--alt2);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    border-style: solid;
    border-width: 0px 0px 5px 0px;
    border-color: var(--grn);
    padding-bottom: 30px;
}

.mobile .menu .dropdown-content0 {
    text-align: center;
}

.mobile .menu .dropdown-content2,
.mobile .menu .dropdown-content3 {
    display: none;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 100px;
}

.mobile .menu .show {
    display: block;
}

.mobile .menu .support-image,
.mobile .menu .about-image {
    padding: 25px 0 1px 0;
    background-color: var(--grn);
}

.mobile .menu .support-image h1,
.mobile .menu .about-image h1 {
    color: var(--alt1);
    font-size: 42px;
    text-transform: uppercase;
    line-height: 46px;
    letter-spacing: 0.7px;
    margin-left: 1em;
}

.support-menu,
.about-menu {
    font-size: 32px;
    line-height: 2em;
    font-weight: bold;
    padding-bottom: 32px;
}

.mobile .support-menu,
.mobile .about-menu {
    padding-left: 40px;
}

.wide .purpose {
    padding: 0 10vw 0 5vw;
}

.mobile .menu .closebtn {
    display: block;
    font-size: 60px;
}

.mobile-menu-text {
    font-size: 30px;
    text-align: end;
    grid-column: span 2;
    padding: 0 20px 20px 0;
}

.dot {
    height: 50px;
    width: 50px;
    background-color: var(--grn);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon {
    height: 2em;
    width: 2em;
    transition: 0.3s;
}

.industries-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: 0.3s;
}

.mobile .industries-icon {
    padding-top: 30px;
    padding-left: 30px;
}

.industries-name {
    bottom: 26px;
    font-family: "Noto Sans", Sans-serif;
    font-size: clamp(12px, calc(1vw + 1em), 30px);
    font-weight: bold;
    text-transform: none;
    font-style: normal;
    padding-left: 10px;
    box-decoration-break: clone;
    margin: 0;
}

.mobile-menu {
    margin-left: 100px;
    margin-bottom: 100px;
}

.title-Image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    overflow: hidden;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .3);
    background-size: cover;
    position: relative;
}

.wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.mobile .wave {
    position: unset;
    bottom: 1;
}

.mobile .wave2 {
    position: absolute;
}

.mobile .banner-lith .wave {
    bottom: -19px;
}

.wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: clamp(10px, calc(1vw + 0.5em), 38px);
}

.banner .shape-fill {
    fill: var(--alt2);
}

.models .shape-fill {
    fill: var(--blk2);
}

.svggrn .shape-fill {
    fill: var(--grn) !important;
}

.svgblk .shape-fill {
    fill: var(--blk) !important;
}

.svgblk2 .shape-fill {
    fill: var(--blk2) !important;
}

.banner-lith .shape-fill {
    fill: var(--hov) !important;
}

.waveflagtop,
.waveflagbottom {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.waveflagtop {
    top: -1px;
    transform: rotate(180deg);
}

.waveflagbottom svg,
.waveflagtop svg {
    width: 100%;
    height: clamp(56px, calc(10vw + .1em), 123px);
    fill: var(--alt2);
}

.waveflagbottom {
    bottom: -1px;
}

.model-menu .wave {
    transform: rotate(180deg);
    bottom: -20px;
}

.model-menu .wave svg {
    width: 100%;
    height: clamp(56px, calc(10vw + .1em), 123px);
}

.model-menu .wave svg {
    height: clamp(10px, calc(1vw + 0.5em), 38px);
}

.wide .wavetop {
    top: -1px;
    height: 30px;
}

.wavetop svg {
    transform: rotate(180deg);
}

.wavetop .shape-fill {
    fill: var(--grn) !important;
}

.mobile .wavetop {
    position: unset;
    bottom: unset;
}

.specs-container .shape-fill {
    fill: var(--blk);
}

.model-image {
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center center;
    aspect-ratio: 3 / 2;
    transition: all 0.25s ease-in-out;
}

.model-image:hover {
    transform: scale(1.1);
}

.banner {
    background-color: var(--blk2);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr .7fr;
    padding-top: 3%;
    position: relative;
}

.banner .banner-title {
    grid-area: 1 / 2 / 2 / 3;
    text-align: center;
    background-color: var(--brn);
    font-size: 5vw;
    text-shadow: 4px 4px 6px var(--grn);
    border-radius: 10px 0px 0px 10px;
}

.banner .banner-text {
    font-size: 3vw;
    grid-area: 2 / 2 / 3 / 3;
}

.banner .banner-image {
    background-image: url('../images/exv4-4.png');
    background-repeat: no-repeat;
    background-size: 100%;
    grid-area: 1 / 1 / 3 / 2;
}

.banner-image .video-container {
    width: 100% !important;
}

.banner2 {
    background: linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)),
        url('../images/flag.jpg');
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding: .6em;
    position: relative;
    min-height: 75vh;
    color: var(--wht);
}

.mobile .banner2 {
    min-height: 30vh;
}

.banner2 .banner-title1 {
    grid-area: 1 / 1 / 2 / 2;
    font-size: clamp(16px, calc(6vw + .1em), 60px);
    padding-top: clamp(16px, calc(6vw + .1em), 60px);
}

.banner2 .banner-title2 {
    grid-area: 2 / 1 / 3 / 2;
    font-size: clamp(16px, calc(12vw + 1em), 121px);
    font-weight: bold;
    background: linear-gradient(to left, var(--blk), var(--blue) 25%, var(--blue) 75%, var(--blk) 100%);
    background-clip: text;
    color: transparent;
    margin: 0;
}

.banner2 .banner-title3 {
    position: relative;
    grid-area: 3 / 1 / 4 / 2;
    background: linear-gradient(to left, var(--blk), var(--blue) 25%, var(--blue) 75%, var(--blk) 100%);
    height: 1.2em;
    font-size: clamp(12px, calc(1vw + 0.5em), 24px);
    margin: 0;
}

.banner2 .banner-image {
    background-image: url('../images/exv2-5.png');
    background-repeat: no-repeat;
    background-size: 65%;
    grid-area: 1 / 2 / 4 / 3;
    background-position: center;
}

.banner3,
.banner4,
.banner5,
.banner6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: repeat(2, auto);
    column-gap: 3rem;
    padding: 3rem;
    align-items: center;
    font-size: 18px;
}

.mobile .banner3,
.mobile .banner4,
.mobile .banner5,
.mobile .banner6 {
    padding: 0 20px 0 20px;
}

.banner3 .banner-image {
    background-image: url('../images/exv2-5.png');
}

.banner4 .banner-image {
    background-image: url('../images/front-suspension.png');
}

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

    .banner4 .banner-image {
        order: 1;
    }

    .banner4 .banner-text {
        order: -1;
    }

    .banner6 .banner-image {
        order: 1;
    }

    .banner6 .banner-text {
        order: -1;
    }

}

.wide .bannercontainer:nth-child(odd) {
    background-color: var(--blk2);
    color: var(--wht);

    .image-container {
        order: 1;
    }

    .vehicle-info {
        order: -1;
    }
}

.wide .bannercontainer:nth-child(even) {
    .wave .shape-fill {
        fill: var(--blk2);
    }
}

.mobile .bannercontainer:nth-child(odd) {
    background-color: var(--blk2);
    color: var(--wht);
}

.mobile .bannercontainer:nth-child(even) {
    .wave .shape-fill {
        fill: var(--blk2);
    }
}


.industrial:nth-child(odd) {
    background-color: var(--blk2);
    color: var(--wht);

    .ind-image-container {
        order: 1;
    }
}

.we-do {
    background-image: url('../images/exv2-54.webp');
    aspect-ratio: 1 / 1 !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 75%;
}

dl {
    font-size: 16px;
    font-weight: bold;
}

dl span {
    padding-right: 20px;
}

dt {
    display: flex;
    padding: 20px;
    cursor: pointer;
    color: var(--grn);
}

dt svg {
    color: var(--alt1);
}

dd,
.builderdd {
    padding-left: 30px;
    font-weight: normal;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s;
}

dd.visible,
.builderdd.visible {
    transition: max-height .75s;
}

.line {
    border-top: 1px var(--wht) solid;
}

.banner5 .banner-image {
    background-image: url('../images/interior.jpg');
}

.banner3 .banner-image,
.banner4 .banner-image,
.banner5 .banner-image {
    background-color: var(--alt2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    min-height: 20rem;
}

.hidden-content {
    display: none;
    color: var(--wht);
    font-weight: 400;
    padding-left: 15px;
    padding-right: 15px;
}

.image-box-text {
    position: absolute;
    top: 320px;
    color: var(--wht);
    font-size: 16px;
    font-weight: bold;
    padding-left: 15px;
}

.image-box1 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv2-33.webp');
}

.image-box2 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv2-31.webp');
}

.image-box3 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv2-30.webp');
}

.image-box4 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv4-7.webp');
}

.image-box5 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv2-32.webp');
}

.image-box6 {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../images/exv4-6.webp');
}

div[class^="image-box"] {
    position: relative;
    background-size: auto 108% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    min-height: 380px;
    box-sizing: border-box;
}

div[class^="image-box"]:hover,
div[class^="image-box"]:focus,
div[class^="image-box"]:focus-within {
    /* transition: padding 1s; */
    padding-top: calc(3em);
    background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8));

    .hidden-content {
        display: block;
        animation: fadeInAnimation ease 1s;
    }

    .image-box-text {
        transition: all cubic-bezier(0, 1.05, 1, 1) .5s;
        top: 10px;
        left: 0px;
    }

    .hidden-content-slide {
        animation: .5s slide 0s forwards;
        transform: translateY(50%);
        --slide-x: 0;
        --slide-y: 10vh
    }
}

.footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background-color: var(--blk);
    color: var(--wht);
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 30px;
}

.wide .footer div {
    max-width: 15vw;
}

.title {
    text-align: center;
    font-size: 48px;
}

.mobile .title {
    text-align: center;
    padding-left: 10px;
    font-size: 1em;
}

.models {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-content: center;
    position: relative;
}

.models h3 {
    min-height: 8vh;
}

.wide .models {
    grid-column-gap: 5vw;
    padding: 3rem;
}

.mobile .models {
    grid-gap: 1rem;
    padding: 1rem;
}

.models p:hover {
    color: var(--hov);
    transition: all 0.25s ease-in-out;
}

.view-all {
    color: var(--grn);
}

.wide .industries {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 338px));
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding-bottom: 5vh;
    /* padding: 0 3rem 3rem 3rem; */
    justify-content: center;
}

.mobile .industries {
    display: grid;
    grid-template-columns: repeat(1, minmax(240px, 338px));
    grid-gap: 1.5rem;
    padding: 1.5rem;
    justify-content: center;
}

.model-menu {
    display: grid;

    button {
        text-wrap: auto;
        border-radius: 0px;
    }

}

.wide .model-menu {
    grid-auto-flow: column
}

.wide .bannercontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    justify-items: center;
    scroll-margin-top: calc(50px + 2.5em);
    position: relative;
    min-height: 370px;
}

.mobile .warranty1,
.mobile .warranty2 {
    text-align: center;
    position: relative;
}

.mobile .warranty-info1 {
    width: 100%;
}

.mobile .industrial {
    padding-top: 1px;
}

.exv2-why-image {
    background-image: url("../images/exv2_fire.jpg");
}

.exv4-why-image {
    background-image: url("../images/exv4-4.png");
}

.serve-image {
    background-image: url("../images/exv2-55.webp");
}

.exv2-why-image,
.exv4-why-image,
.serve-image {
    aspect-ratio: 2 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 85%;
}

.mobile .bannercontainer {
    scroll-margin-top: 4em;
}

.wide .image-container {
    display: grid;
    grid-template-columns: 4vw 40vw 4vw;
    text-align: center;
    position: sticky;
    top: 8em;
    align-self: flex-start;
}

.mobile .image-container {
    padding-top: 50px;
    text-align: center;
}

.slideshow-container {
    display: grid;
    grid-template-rows: minmax(32vw, 1fr);
    align-items: center;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.wide .slide-img {
    width: 75%;
}

.mobile .slide-img {
    height: 160px;
    max-width: 100vw;
}

.wide .vehicle-info {
    padding: 4em;
}

.mobile .vehicle-info {
    padding: 0 20px 0 20px;
}

.vehicle-info li:before {
    content: "\276F";
    color: var(--grn);
    font-weight: bold;
    padding-right: 20px;
}

.vehicle-info li,
.timeline li {
    display: flex;
}

.vehicle-info li {
    margin-top: 10px;
}

.mobile .vehicle-info li {
    margin-left: -24;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: relative;
    top: 30%;
    width: 10px;
    height: 10px;
    padding: 16px;
    color: var(--wht);
    font-weight: bold;
    font-size: 18px;
    transition: 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.mobile .prev,
.mobile .next {
    display: none;
}

.image-dots {
    text-align: center
}

/* The dots/bullets/indicators */
.image-dot {
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin: 30px 10px;
    background-color: var(--grn);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.image-dot:hover {
    background-color: var(--hov);
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

.vehicle-info-list2 {
    padding-top: 10px;
}

.vehicle-info-links {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.mobile .vehicle-info-links {
    padding-bottom: 30px;
}

.vehicle-info-links .link {
    padding-left: 15px;
}

.vehicle-info-links svg {
    padding-left: 10px;
    margin-bottom: -7px;
}

.mobile .banner-lith-title {
    padding: 0 20px 0 20px;
}

/* .banner-lith {
    background: url('../images/lithiumbg.png');
    color: black !important;
    background-repeat: no-repeat;
} */

.battery-chart-info {
    text-align: center;
    padding: calc(4em);
    background-color: var(--hov);
    color: var(--blk) !important;
    position: relative;
}

.mobile .battery-chart-info {
    padding: 0;
    margin-bottom: 30px;
}

.battery-chart-header {
    border-top: .2em var(--grn) solid;
    border-right: .2em var(--grn) solid;
    display: grid;
    grid-template-columns: repeat(6, calc(100% / 6));
    font-weight: bold;
    min-height: 5em;
    font-size: 1.6vw;
}

.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
    color: var(--wht) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}


.title1 {
    background-color: var(--grn);
}

.title2 {
    background-color: #07283f;
}

.title3 {
    background-color: #086bb7;
}

.title4 {
    background-color: #24b59d;
}

.title5 {
    background-color: #7dcd69;
}

.title6 {
    background-color: #d1be39;
}

.gridcontainer1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.gridcontainer2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f3f4;
    margin: 0;
}

.battery-chart {
    font-size: 1.1em;
    text-align: center;
    border-bottom: .2em var(--grn) solid;
    border-right: .2em var(--grn) solid;
    display: grid;
    /*change to calc due to duckduckgo issue*/
    grid-template-columns: repeat(6, calc(100% / 6));
    grid-template-rows: repeat(6, 10vh);
}

.exltext {
    font-size: 1.1em;
    text-align: left;
    padding-top: 1%;
}

.mobile .battery-chart,
.mobile .exltext {
    font-size: .4em;
}

.specs-container {
    padding: 3em;
    background-color: var(--blk2);
    color: var(--wht);
    position: relative;
}

.specs-container button {
    position: absolute;
    transform: translateX(85vw);
}

.mobile .specs-container button {
    display: none;
}

.specscol p {
    border-bottom: .2em var(--grn) solid;
}

.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 330px));
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    align-items: start;
    scroll-margin-top: 2em;
    padding: 20px;
    justify-content: center;
}

.specscol {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 80px repeat(35, auto auto 10px);
    align-items: end;
}

.mobile button2 {
    display: none;
}

.optiontitle {
    padding: 3em;
    position: relative;
}

.optiontitle .wave svg {
    fill: var(--blk2);
}

.mobile .optiontitle {
    padding: 0;
}

.optiontitle p {
    font-size: 2rem;
}

.options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 5em;
    column-gap: 5em;
    align-items: center;
    padding: 4em;
    text-align: center;
}

.mobile .options {
    padding: 0;
    row-gap: 0;
    justify-items: center;
}

.option-img {
    height: 180px;
}

.mobile .option-img {
    max-width: 240px;
}

.option-text {
    font-size: 1.1rem !important;
}

.mobile .optioninfo {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.wide .industrial-image {
    display: grid;
    grid-template-columns: 200px 145px;
    padding-top: 30px;
    align-items: center;
}

.mobile .industrial-image {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    text-align: center;
    justify-content: center;
}

.wide .ind-vehicle-images {
    width: 150px;
    max-width: 150px;
    padding: 0px 30px 0px 30px;
}

.mobile .ind-vehicle-images {
    width: 100px;
    max-width: 100px;
    padding: 0px 30px 0px 30px;
}

.wide .industrial-vehicle-info {
    padding: 4em;
}

.mobile .industrial-vehicle-info {
    padding: 1em;
}

.industrial-vehicle-info2 {
    color: var(--alt1);
}

.contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.contact-info {
    padding-left: 8vw;
    font-size: 20px;
    grid-column: span 3;

    h1 {
        font-size: 4vw;
    }

    p {
        line-height: 1.3;
    }

    li:before {
        content: "\276F";
        color: var(--grn);
        font-weight: bold;
        padding-right: 20px;
    }

    ul,
    li {
        list-style-type: none;
        list-style-position: inside;
        margin: 0;
        padding: 0;
        line-height: 1.6;
    }
}

.contact-form {
    margin: 1vw;
    background-color: var(--blk2);
    padding: 20px;
    grid-column: span 4;
    border-radius: 20px;

    h3 {
        text-align: center;
    }
}

.quote-form,
.dealer-form {
    display: grid;
    background-color: var(--blk2);
    padding: clamp(0%, calc(-4px + 1.5625vw), 100%);
    margin: clamp(0%, calc(-20px + 7vw), 1%) clamp(0%, calc(-20px + 6vw), 6%) clamp(0%, calc(-20px + 7vw), 1%) clamp(0%, calc(-20px + 7vw), 6%);
    position: relative;
    padding-bottom: 50px;
}

.formBtn button {
    width: 100%;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--hov);
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

.mobile .formBox {
    width: 90%;
    padding-left: 5%;
}

.contactform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.formquote {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 330px));
    grid-gap: 20px;
    justify-content: center;
}

.formdealer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    grid-gap: 20px;
    padding-bottom: 50px;
    justify-content: center;
}

.wide .full-width {
    grid-column: 1 / -1;
}

.form button {
    width: 100%;
    display: block;
}

.warranty-image-container1 {
    background-image: url('../images/warranty.png');
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.warranty-info1 {
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(120px, 1fr));
    width: 75%;

    h2 {
        font-size: 40px;
    }

    p {
        font-size: 22px;
    }
}

.warranty-info1 button {
    margin-bottom: 10vw;
}

.warranty-circle {
    position: relative;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 5vw solid var(--grn);
    height: 30vw;
    width: 30vw;
    margin: 30px 0 30px 0
}

.mobile .warranty-circle {
    margin: 20px 0 20px 0;
}

.warranty-length {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 13vw;
    color: var(--grn);
    font-style: italic;
    font-weight: bold;
}

.warranty-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 4vw;
    color: var(--grn);
    font-style: italic;
    font-weight: bold;
}

.warranty-name {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--blk2);
    color: var(--grn);
    font-size: 7vw;
    font-weight: bold;
}

.warranty2 {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--grn);
    position: relative;

    h2 {
        font-size: 40px;
    }

    p {
        font-size: 22px;
        margin: 1%;
    }

    button {
        margin-top: 3%;
    }

    a {
        margin: 3%;
    }
}

.solidbanner {
    background-color: var(--grn);
    padding: 1vw;
    text-align: center;
    min-height: 20vw;
    position: relative;

    h1 {
        font-size: clamp(16px, calc(6vw + 1em), 72px);
    }

    h3 {
        padding: 2em 0 2em 0;
    }

    p {
        font-size: clamp(14px, calc(1vw + 0.7em), 24px);
        margin-top: 4vw;
    }
}

.divider {
    border-block-start: 5px solid var(--alt1);
    width: calc(100% - 65vw);
    margin: 0 auto;
}

.vin-image {
    background-image: url('../images/exv2-1.webp');
}

.wide .vin-text {
    width: 75%;
}

.vin-image {
    aspect-ratio: 2 / 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.vin {
    max-width: 50vw;
    padding-left: 61px;
    padding-top: 48px;
}

.manual-main {
    background-color: var(--blk2);
    border-style: solid;
    border-width: 5px 0px 0px 0px;
    border-color: var(--grn);
    padding: 20px 140px 20px 140px;
    display: flex;
    justify-content: space-around;
    color: var(--wht);
}

.mobile .manual-main {
    padding: 30px;
}

.wide .manuals {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
    padding: 30px;
}

.manual-each {
    padding: 10px;
}

.wide .container-box {
    background-color: var(--grn);
    margin: 2vw 15vw 2vw 15vw;
    display: inline-flex;
    align-items: center;
    padding-right: 1vw;

    h1 {
        margin: 2vw;
        font-size: 2vw;
    }
}

.mobile .container-box {
    background-color: var(--grn);
    padding: 5vw 0 5vw 0;
    text-align: center;

    h1 {
        margin: 2vw;
        font-size: 4vw;
    }

    button {
        margin: 2vw;
    }
}

.find-btn button {
    display: flex;
    align-items: center;
}

.manual2 {
    background-color: var(--blk2);
    position: relative;
}

.wide .faqs-list {
    margin: 5vw 15vw 5vw 15vw;
}

.mobile .faqs-list {
    margin: 1vw 2vw 1vw 2vw;
}

.faqs-list button {
    border-radius: 0;
}

.accordion {
    background-color: var(--blk2);
    padding: 1vw;
    width: 100%;
    position: relative;
    font-size: 2vw;
    white-space: normal;
    transition: max-height .5s;
    border-radius: 10px;
}

.mobile .accordion {
    font-size: 6vw;
}

.accordion svg {
    position: absolute;
    right: 2%;
    top: 25%;
}

.active,
.accordion:hover {
    background-color: var(--hov);
}

.panel {
    padding: 0 18px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s;
    overflow-wrap: break-word;

    .visible {
        max-height: 50vh;
        transition: max-height 2s;
    }
}

/* builder */
.interact-icon-360-container {
    position: absolute;
    width: 100px;
    height: 58px;
    background: rgba(38, 36, 36, 0.73);
    display: none;
    border-radius: 50px;
    padding: 0.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.animation-wrapper {
    display: flex;
    justify-content: center;
}

.wobble-hor-bottom {
    -webkit-animation: hand-wobble 2.8s ease-in-out infinite both;
    animation: hand-wobble 2.8s ease-in-out infinite both;
}

.hand-360 {
    position: absolute;
    top: 45px;
    height: 38px;
}

.icon-360 {
    position: absolute;
    top: 20px;
    width: 60%;
}

.builder {
    display: flex;
    justify-content: center;
    gap: 2em;
    /* pointer-events: none; */
}

.mobile .builder {
    flex-direction: column;
}

.builderimage {
    position: -webkit-sticky;
    position: sticky;
    top: 5em;
    align-self: flex-start;
    width: 50%;
    height: 50%;
    min-height: 30em;
    background-color: var(--blk);
    border-radius: 10px;
}

.mobile .builderimage {
    z-index: 1;
    width: 100vw;
    height: 30vh;
    min-height: 30vh;
    top: 10vh;
}

.buildertitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: 0.3s;
    margin: 20px 0 20px 0;

    .dot {
        height: 35px;
        width: 35px;
        background-color: var(--grn);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.builder-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.bottom-right {
    pointer-events: none;
    margin: 5px;
}

.horizontal-scroll-tiles {
    width: 500px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.mobile .horizontal-scroll-tiles {
    width: 100vw;
}

.inline-items-container {
    display: inline-flex;
}

.builder-model-image {
    background-position: center center;
    height: 200px;
    max-height: 7em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.more-info-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 1.5em;
    height: 1.5em;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
}

.more-info-icon:hover {
    transform: scale(1.2);
    opacity: 1;
}

.builder-model-image:hover {
    transition-duration: 0.3s;
    transform: scale(0.9);
}

.builder-model-image:not(:hover) {
    transition-duration: 0.3s;
}

.active1 {
    box-sizing: border-box;
    border: 3px solid var(--grn);
    border-radius: 10px;
}

.inline-item {
    margin: 10px;
    cursor: pointer;
}

.load-container {
    position: absolute;
    width: 150px;
    height: 58px;
    background: rgba(38, 36, 36, 0.73);
    display: none;
    border-radius: 50px;
    padding: 0.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader {
    position: absolute;
    top: 30%;
    left: 15%;

    --s: 25px;
    --g: 5px;

    width: calc(3*(1.353*var(--s) + var(--g)));
    display: grid;
    justify-items: end;
    aspect-ratio: 3;
    overflow: hidden;
    --_m: linear-gradient(90deg, var(--blk), var(--blk) 15px calc(100% - 15px), var(--blk));
    -webkit-mask: var(--_m);
    mask: var(--_m);
}

.loader:before {
    content: "";
    width: calc(4*100%/3);
    background:
        conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
            #fff 135deg, #666 0 270deg, #aaa 0);
    --_m:
        linear-gradient(to bottom right,
            #0000 calc(0.25*var(--s)), #000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)), #0000 0),
        conic-gradient(from -90deg at right var(--g) bottom var(--g), #000 90deg, #0000 0);
    -webkit-mask: var(--_m);
    mask: var(--_m);
    background-size: calc(100%/4) 100%;
    -webkit-mask-size: calc(100%/4) 100%;
    mask-size: calc(100%/4) 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: l8 1s infinite linear;
}

@keyframes l8 {
    to {
        transform: translate(calc(100%/4))
    }
}

.horizontal-scroll-tiles .thumbnail-item {
    /* height: 90px; */
    width: 120px;
}

.optiondd {
    all: initial;
    color: var(--alt1);
    border-bottom: 1px solid var(--alt1);
    width: 90%;
    margin: 20px;
    font-weight: bold;
    font-size: clamp(12px, calc(1vw + 1em), 30px);
}

.optiondd:hover {
    background-color: var(--hov) !important;
}

.optiondd.active {
    background-color: var(--hov);
}

.optiondd svg {
    vertical-align: middle;
    display: inline-block;
}

[data-type="color"] {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
}

.scroll-wide {
    overflow-x: scroll;
    scroll-behavior: smooth;
}

/* GUI HELPER */
/* .lil-gui.autoPlace {
    top: 130px;
} */

.jsonly {
    display: none;
}

/* contact form popup builder */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
}

.alertmodal,
.modal1 {
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: var(--blk2);
    border-radius: 10px;
    border: 10px solid var(--grn);
    outline: solid black;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 50vw;
}

.modal1 {
    padding: 20px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    border-bottom: 1px solid var(--hov);
}

.modal-body {
    padding: 15px;
    border-bottom: 1px solid var(--hov);
    /* text-transform: capitalize; */
    overflow: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
}

.modal-close {
    float: right;
}

.mobile .modal1,
.mobile .alertmodal {
    width: 95%;
}

.wide .contact-form-grid {
    display: grid;
    grid-gap: 20px;
}

.modal1 h3,
.modal1 .comment,
.modal1 .formBtn {
    grid-column: span 2;
}

.mobile .formBtn {
    width: 90%;
    padding-left: 5%;
}

#closePopup,
#closePopup2 {
    position: relative;
    width: 40px;
}

/* timeline */

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 50px;
    background: var(--grn);
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 800px;
    padding: 15px;
    background: var(--grn);
}

.timeline ul li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 2vw;
    border-radius: 10px 10px 10px 10px;
}

.timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--grn) transparent transparent;
}

.timeline ul li:nth-child(even) div {
    left: -33vw;
    border-radius: 10px 10px 10px 10px;
}

.timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent var(--grn);
}

.timeline p {
    min-width: 29vw;
}

time {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}


/* EFFECTS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: var(--grn);
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

/* .timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
} */

.timeline ul li.in-view div {
    /* transform: none; */
    visibility: visible;
    opacity: 1;
}

.timeline h2 {
    font-size: 5em;
    padding-left: 5vw;
}

.timeline img {
    max-width: 80%;
    max-height: 250px;
    border-radius: 10px;
    margin: auto;
    display: block;
}

.mobile .timeline ul li div {
    width: 250px;
}

.mobile .timeline ul li:nth-child(even) div {
    left: -289px;
}

.mobile .timeline ul li {
    margin-left: -20px;
}

.mobile .timeline ul li div {
    width: calc(100vw - 91px);
}

.mobile .timeline ul li:nth-child(even) div {
    left: 10vw;
}

.mobile .timeline ul li:nth-child(odd) div {
    left: 10vw;
}

.mobile .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--grn) transparent transparent;
}

.mobile .timeline p {
    min-width: 65vw;
}

.mobile .timeline h1 {
    font-size: 3em;
    padding-left: 5vw;
}

/* popup image modal */
.imgpopup1 {
    /* display: none; */
    position: fixed;
    z-index: 3;
    padding-top: 20vh;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--blk);
}

.imgmodal-content1 {
    margin: auto;
    display: block;
    height: 75vh;
    max-width: 100vw;
    border-radius: 30px;
}

#imgcaption1 {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--wht);
    padding: 10px 0;
    height: 150px;
}

.imgmodal-content1,
#imgcaption1 {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.wide .photo {
    cursor: zoom-in;
    transition: 0.3s;
}

.wide .photo:hover {
    opacity: 0.7;
}

.wide .photo2 {
    cursor: zoom-in;
    transition: 0.3s;
}

.wide .photo2:hover {
    opacity: 0.7;
}

/* Popup Slideshow container */
.popup-slideshow-prev,
.popup-slideshow-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.popup-slideshow-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.popup-slideshow-prev:hover,
.popup-slideshow-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.popup-slide-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 75vh;
    border-radius: 30px;
}

.policy-text {
    padding: 2vw;

    p {
        padding-left: 2vw;
    }
}

.why-eride {
    margin: auto;
    width: 50%;
}

.mobile .why-eride {
    width: 100%;
}

.scrollup {
    position: fixed;
    z-index: 2;
    bottom: 20px;
    right: 20px;
    display: none;
}

.case-study {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

/* video player */
.video-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    margin-inline: auto;
    background-color: black;
}

.video-container.theater,
.video-container.full-screen {
    max-width: initial;
    width: 100%;
}

.video-container.theater {
    max-height: 90vh;
}

.video-container.full-screen {
    max-height: 100vh;
}

video {
    width: 100%;
    border-radius: 10px;
}

.video-controls-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

.video-controls-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
    width: 100%;
    aspect-ratio: 6 / 1;
    z-index: -1;
    pointer-events: none;
}

.video-container:hover .video-controls-container,
.video-container:focus-within .video-controls-container,
.video-container.paused .video-controls-container {
    opacity: 1;
}

.video-controls-container .controls {
    display: flex;
    gap: .5rem;
    padding: 1rem;
    align-items: center;
}

.video-controls-container .controls button {
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    height: 30px;
    width: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: .85;
    transition: opacity 150ms ease-in-out;
}

.video-controls-container .controls button:hover {
    opacity: 1;
}

.video-container.paused .pause-icon {
    display: none;
}

.video-container:not(.paused) .play-icon {
    display: none;
}

.video-container.theater .tall {
    display: none;
}

.video-container:not(.theater) .wide {
    display: none;
}

.video-container.full-screen .open {
    display: none;
}

.video-container:not(.full-screen) .close {
    display: none;
}

.volume-high-icon,
.volume-low-icon,
.volume-muted-icon {
    display: none;
}

.video-container[data-volume-level="high"] .volume-high-icon {
    display: block;
}

.video-container[data-volume-level="low"] .volume-low-icon {
    display: block;
}

.video-container[data-volume-level="muted"] .volume-muted-icon {
    display: block;
}

.volume-container {
    display: flex;
    align-items: center;
}

.volume-slider {
    width: 0;
    transform-origin: left;
    transform: scaleX(0);
    transition: width 150ms ease-in-out, transform 150ms ease-in-out;
}

.volume-container:hover .volume-slider,
.volume-slider:focus-within {
    width: 100px;
    transform: scaleX(1);
}

.duration-container {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-grow: 1;
}

.video-container.captions .captions-btn {
    border-bottom: 3px solid red;
}

.video-controls-container .controls button.wide-btn {
    width: 50px;
}

.timeline-container {
    height: 7px;
    margin-inline: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.timeline-video {
    background-color: rgba(100, 100, 100, .5);
    height: 3px;
    width: 100%;
    position: relative
}

.timeline-video::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: calc(100% - var(--preview-position) * 100%);
    background-color: rgb(150, 150, 150);
    display: none;
}

.timeline-video::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: calc(100% - var(--progress-position) * 100%);
    background-color: red;
}

.timeline-video .thumb-indicator {
    --scale: 0;
    position: absolute;
    transform: translateX(-50%) scale(var(--scale));
    height: 200%;
    top: -50%;
    left: calc(var(--progress-position) * 100%);
    background-color: red;
    border-radius: 50%;
    transition: transform 150ms ease-in-out;
    aspect-ratio: 1 / 1;
}

.timeline-video .preview-img {
    position: absolute;
    height: 80px;
    aspect-ratio: 16 / 9;
    top: -1rem;
    transform: translate(-50%, -100%);
    left: calc(var(--preview-position) * 100%);
    border-radius: .25rem;
    border: 2px solid white;
    display: none;
}

.thumbnail-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 10px;
}

.video-container.thumbnailimg .thumbnail-img {
    display: block;
}

/* .video-container.scrubbing .thumbnail-img {
    display: block;
} */

.video-container.scrubbing .preview-img,
.timeline-container:hover .preview-img {
    display: block;
}

.video-container.scrubbing .timeline-video::before,
.timeline-container:hover .timeline-video::before {
    display: block;
}

.video-container.scrubbing .thumb-indicator,
.timeline-container:hover .thumb-indicator {
    --scale: 1;
}

.video-container.scrubbing .timeline-video,
.timeline-container:hover .timeline-video {
    height: 100%;
}

.wide .verify-form {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.verify-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 450px));
    grid-column-gap: 20px;
}

.case-studies {
    width: 90vw;
}

.alt-section {
    border-radius: .25rem;
    border: 2px solid white;
    padding: 0 10px 0 10px;
    margin-bottom: 20px;
}

.wide .alt-section.s1 {
    grid-row: span 5 / span 5;

}

.wide .formBox.s2 {
    grid-column: span 2 / span 2;
}

.wide .alt-section.s3 {
    grid-row: span 6 / span 6;
    grid-column-start: 3;
}

input[type=checkbox],
input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    accent-color: var(--grn);
}

input[type=radio] {
    float: left;
    width: 25px;
    height: 25px;
}

.radiolabel {
    margin-left: 50px;
    display: block;
    padding-top: 6px;
}

.verify-form dd {
    padding-left: inherit;
}

.triggerdd span {
    padding: 20px;
}

/* text over images for each page */

/* index */
.title-Image.index {
    background-position: center center;
}

.wide .title-Image.index {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.index {
    aspect-ratio: 1;
}

.title-Image.index {
    background-image: url('../images/exv2-56.webp');
    color: var(--wht);
}

.loaded .title-Image.index .main-title {
    text-align: end;
    font-size: clamp(16px, calc(7vw + 1em), 72px);
    animation: 1s slide 2s forwards;
    transform: translate(-2vw, 200vh);
    --slide-x: -2vw;
    --slide-y: 0vh
}

.loaded.wide .title-Image.index .main-text {
    text-align: end;
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 50vw;
    animation: 1s slide 2s forwards;
    transform: translate(47vw, 200vh);
    --slide-x: 47vw;
    --slide-y: -5vh
}

.loaded.mobile .title-Image.index .main-text {
    text-align: start;
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 90vw;
    animation: 1s slide 2s forwards;
    transform: translate(2vw, 200vh);
    --slide-x: 2vw;
    --slide-y: -10vh
}

.loaded .main-links.index {
    align-items: center;
    animation: 1s slide 2s forwards;
    transform: translate(86vw, 200vh);
    --slide-x: 86vw;
    --slide-y: -5vh;
}

.loaded.mobile .main-links.index {
    transform: translate(60vw, 200vh);
    --slide-x: 60vw;
    --slide-y: -19vh;
}

.loaded .main-links.index {
    display: inline-flex;

    p {
        margin-left: 10px;
        font-size: 2.5vw;
    }

    t2 {
        display: flex;
        padding-left: 15px;
        font-size: clamp(12px, calc(1vw + .5em), 24px);
    }
}

/* exv2 */

.wide .exv2.title-Image {
    aspect-ratio: 4 / 2;
}

.mobile .exv2.title-Image {
    aspect-ratio: 1;
}

.exv2.title-Image {
    background-image: url('../images/exv2-3.png');
    color: var(--wht);
}

.loaded .exv2.title-Image .main-title {
    font-size: clamp(16px, calc(7vw + 1em), 72px);
    width: 20%;
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    margin-left: 1vw;
}

.loaded.mobile .exv2.title-Image .main-title {
    width: 100%;
}

.loaded.wide .exv2.title-Image .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 46%;
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -23vh);
    text-align: end;
    --slide-x: 52vw;
    --slide-y: -23vh
}

.loaded.mobile .exv2.title-Image .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    width: 100%;
    transform: translate(0vw, 200vh);
    text-align: center;
    --slide-x: 0vw;
    --slide-y: 0vh
}

/* exv4 */

.title-Image.exv4 {
    background-position: bottom center;
}

.wide .title-Image.exv4 {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.exv4 {
    aspect-ratio: 1;
}

.title-Image.exv4 {
    background-image: url('../images/exv4-7.webp');
    color: var(--wht);
}

.loaded .title-Image.exv4 .main-title {
    font-size: clamp(16px, calc(7vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    margin-left: 1vw;
}

.loaded .title-Image.exv4 .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 46%;
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -4vh);
    --slide-x: 1vw;
    --slide-y: -4vh;
}

.loaded.mobile .title-Image.exv4 .main-text {
    width: 90%;
    transform: translate(200vw, -4vh);
    --slide-y: -4vh
}

/* about */

.wide .title-Image.about {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.about {
    aspect-ratio: 1;
}

.title-Image.about {
    background-image: url('../images/lineup2.webp');
    color: var(--wht);
    clip-path: polygon(0 0, 0 100%, 100% 90%, 100% 0);
    object-fit: scale-down;
    max-width: 100%;
    height: 100%;
}

.mobile .title-Image.about {
    clip-path: unset;
}

.loaded.wide .title-Image.about .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    width: 50%;
    transform: translate(1vw, -7vh);
}

.loaded.mobile .title-Image.about .main-title {
    font-size: clamp(10px, calc(3vw + 1em), 68px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(1vw, -3vh);
    line-height: 1em;
}

.loaded.wide .title-Image.about .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 42%;
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -30vh);
    text-align: end;
    --slide-x: 56vw;
    --slide-y: -30vh;
}

.loaded.mobile .title-Image.about .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -8vh);
    --slide-x: 1vw;
    --slide-y: -8vh;
}

@-moz-document url-prefix() {
    .loaded.mobile .title-Image.about .main-text {
        line-height: .8em;
    }
}

/* business-commercial */

.title-Image.business {
    background-position: bottom center;
}

.wide .title-Image.business {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.business {
    aspect-ratio: 1;
}

.loaded .title-Image.business .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(-2vw, -3vw);
    text-align: end;
}

.loaded.wide .title-Image.business .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -15vh);
    text-align: end;
    width: 50vw;
    --slide-x: 46vw;
    --slide-y: -15vh
}

.loaded.mobile .title-Image.business .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -4vh);
    text-align: end;
    width: 95vw;
    --slide-x: 5vw;
    --slide-y: -4vh
}

.ind-image-container.business {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* colleges-universities */

.title-Image.college {
    background-position: bottom center;
}

.wide .title-Image.college {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.college {
    aspect-ratio: 1;
}

.loaded .title-Image.college .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(-2vw, 0vw);
    text-align: end;
}

.loaded .title-Image.college .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -4vh);
    text-align: end;
    width: 50vw;
    --slide-x: 46vw;
    --slide-y: -4vh
}

.loaded.mobile .title-Image.college .main-text {
    width: 95vw;
    --slide-x: 5vw;
    --slide-y: -4vh
}

.ind-image-container.college {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* federal */

.wide .title-Image.federal {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.federal {
    aspect-ratio: 1;
}

.loaded .title-Image.federal .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(2vw, 0vh);
}

.loaded.mobile .title-Image.federal .main-title {
    transform: translate(2vw, -4vh);
}

.loaded.wide .title-Image.federal .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(-200vw, -4vh);
    width: 50vw;
    --slide-x: 2vw;
    --slide-y: -4vh;
}

.loaded.mobile .title-Image.federal .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    width: 95vw;
    transform: translate(-200vw, -10vh);
    --slide-x: 2vw;
    --slide-y: -10vh;
}

.ind-image-container.federal {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* park-recreation */

.title-Image.park {
    background-position: bottom center;
}

.wide .title-Image.park {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.park {
    aspect-ratio: 1;
}

.loaded .title-Image.park .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(2vw, -5vh);
}

.loaded.wide .title-Image.park .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -20vh);
    text-align: end;
    width: 26vw;
    --slide-x: 71vw;
    --slide-y: -20vh;
}

.loaded.mobile .title-Image.park .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -12vh);
    width: 95vw;
    --slide-x: 2vw;
    --slide-y: -12vh;
    line-height: .9rem;
}

.ind-image-container.park {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* private */

.title-Image.private {
    background-position: bottom center;
}

.wide .title-Image.private {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.private {
    aspect-ratio: 1;
}

.loaded .title-Image.private .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(3vw, 0vw);
}

.loaded .title-Image.private .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(-200vw, -6vh);
    width: 16vw;
    --slide-x: 3vw;
    --slide-y: -6vh;
}

.loaded.mobile .title-Image.private .main-text {
    width: 95vw;
    --slide-x: 5vw;
    --slide-y: -4vh;
}

.ind-image-container.private {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* state-governments */

.wide .title-Image.state {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.state {
    aspect-ratio: 1;
}

.loaded .title-Image.state .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    transform: translate(-2vw, 0vh);
    text-align: end;
}

.loaded .title-Image.state .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -4vh);
    text-align: end;
    width: 50vw;
    --slide-x: 46vw;
    --slide-y: -4vh
}

.loaded.mobile .title-Image.state .main-text {
    width: 95vw;
    --slide-x: 5vw;
    --slide-y: -4vh
}

.ind-image-container.state {
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    margin: 30px;
    width: 75%
}

/* warranty */

.wide .title-Image.warranty {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.warranty {
    aspect-ratio: 1;
}

.title-Image.warranty {
    background-image: url('../images/exv2-10.avif');
    color: var(--wht);
}

.loaded .title-Image.warranty .main-title {
    font-size: clamp(16px, calc(7vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
}

.loaded.mobile .title-Image.warranty .main-title {
    margin-top: 2vh;
    text-align: center;
}

.loaded .title-Image.warranty .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    width: 50%;
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -8vh);
    --slide-x: 1vw;
    --slide-y: -8vh
}

.loaded.mobile .title-Image.warranty .main-text {
    width: auto;
    text-align: center;
    transform: translate(200vw, -7vh);
    --slide-x: 0vw;
    --slide-y: -7vh
}

/* why */

.wide .title-Image.why {
    aspect-ratio: 4 / 2;
}

.mobile .title-Image.why {
    aspect-ratio: 1;
}

.title-Image.why {
    background-image: url('../images/assembly_line.webp');
    color: var(--wht);
    clip-path: polygon(0 0, 0 100%, 100% 90%, 100% 0);
    object-fit: scale-down;
    max-width: 100%;
    height: 100%;
}

.loaded .title-Image.why .main-title {
    font-size: clamp(16px, calc(6vw + 1em), 72px);
    animation: fadeInAnimation ease 3s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
    width: 100%;
    transform: translate(-3vw, -7vh);
    text-align: end;
}

.loaded .title-Image.why .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    animation: 2s slide 2s forwards;
    transform: translate(200vw, -13vh);
    text-align: end;
    --slide-x: 68vw;
    --slide-y: -13vh;
    width: 28%;
}

.loaded.mobile .title-Image.why .main-text {
    font-size: clamp(14px, calc(1vw + 0.7em), 24px);
    transform: translate(200vw, -13vh);
    text-align: center;
    --slide-x: 0vw;
    --slide-y: -13vh;
    width: 100%;
}

/* neeeded for content-editor */

.paragraph {
    word-break: break-all;
    white-space: normal;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.align-left {
    clear: initial;
    float: left;
    margin-right: 0.5em;
}

.align-right {
    clear: initial;
    float: right;
    margin-left: 0.5em;
}

.__se__float-left {
    float: left;
}

.__se__float-right {
    float: right;
}