:root {
    --vc-green: #C7D82f;
    --vc-blue: #05B1CC;
    --vc-orange: #F8A51C;
    --vc-text: #353F42;
    --vc-grey: #F3F3F3;
    --vc-darkOverlay: rgba(53, 63, 66, .85);
    --vc-greenOverlay: rgba(199, 216, 47, .8);
    --vc-blueOverlay: rgba(5, 177, 204, .8);
    --vc-orangeOverlay: rgba(248, 165, 28, .8);
}

body {
    color: var(--vc-text);
    padding-top: 145px;
    margin-bottom: -190px; 
}

* {
    scroll-padding-top: 190px;
}

body.brochuePage {
    padding-top: 135px;
}

.brochuePage img {
    width: 100%;
}

#homeHero {
    /*background: linear-gradient(var(--vc-green) 25%, var(--vc-blue) 50%, white 80%);*/
    /*background-image: url(../../test/homePageHeader-bg.gif);*/
    background-size: cover;
    background-position: bottom;
    padding:75px 32px 25px;
    display: flex;
    justify-content: center;
    gap: 50px;
    text-align: center;
    flex-wrap: wrap;
}

#heroVideo {
    width: 100%;
    height: calc(100vh - 150px);
    min-height: 800px;
    object-fit: cover;
    object-position: bottom;
    z-index: -1;
    position: absolute;
    top: 50px;
    left:0px;
}

#homeHero h1 {
    font-size: 85px;
    font-weight: 100;
    color: white;
    text-transform: uppercase;
    letter-spacing: 16px;
}

#homeHero h4 {
    font-size: 28px;
    font-weight: bold;   
    color: white;
}

.heroStats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px;
}

.three-col {
    display: grid;
    width: 100%;
    gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}

#heroContentContainer {
    max-width: 850px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

#homeHero .heroStats p {
    font-size: 70px;
    font-weight: bold;
}

#homeHero .three-col h5 {
    font-size: 18px;
    font-weight: bold;
}

.heroBTNs {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.btn2, .btnAlt {
    padding: 12px 32px !important;
    font-weight: bold;
    background-color: var(--vc-green);
    font-size: 18px;
    border-radius: 40px;
    height: fit-content;
    border: none;
}

.btn2:hover, .btnAlt:hover {
    color: var(--vc-text);
}

.btn2.small {
    font-size: 14px;
    margin-inline: 16px 0px;
}

.btn2.close2 {
    font-size: 14px;
    padding: 8px 32px !important;
}

h2 {
    font-size: 48px;
    line-height: 1.3;
    font-weight: bold;
    max-width: 1280px;
    margin: 0px auto 32px;
}

h3 {
    font-size: 24px;
    font-weight: 100;
    max-width: 1280px;
    margin: 0px auto 18px;
}

#logoSalad #logoSaladContainer {
    width: 100%;
    display: grid;
    gap: 64px;
    overflow-x: hidden;
}

#logoSalad #logoSaladContainer div {
    display: flex;
    gap: 90px;
}

#logoSalad #logoSaladContainer img {
    width: fit-content;
    height: 75px;
    max-width: 300px;
    object-fit: contain;
}

#logoSalad .btn2 {
    margin: 64px auto 0px;
    display: block;
    width: fit-content
}

.two-col-b, .two-col-a {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.two-col-b p:last-of-type, .two-col-a p:last-of-type {
    margin-bottom: 64px;
}

.two-col-b > div:nth-of-type(2), .two-col-a > div:nth-of-type(1) {
    width: clamp(200px, 680px, 900px);
}


.two-col-b > div:nth-of-type(1), .two-col-a > div:nth-of-type(2) {
    width: clamp(200px, 480px, 900px);
}

#interactiveSolContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 0px;
    width: 100%;
}

#interactiveSolContainer > a {
    padding: 0px;
    min-height: 640px;
    width: 100%;
    color: white !important;
    background-color: #353F42;
    text-align: center;
    width: clamp(200px, 20%, 500px);
    background-position: center;
    transition: .5s;
}

#interactiveSolContainer > a > div {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 32px;
    background-size: cover;
    flex-direction: column;
    align-items: center;
}

#interactiveSolContainer h3 {
    font-size: 30px;
    font-weight: bold;
    color:white;
    width: 100%;
    max-width: 275px;
}

#interactiveSolContainer div *{
    margin: 0px
}

#interactiveSolContainer img {
    width: 100px;
}

#interactiveSolContainer a {
    color: white;
}

#interactiveSolContainer a:hover {
    color: white;
    width: 600px;
}

#interactiveSolContainer .learnMore {
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 25px;
    border: solid 1px white;
    width: fit-content;
    margin: auto;
    border-radius: 40px;
}

#vmi-sol {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/solutionsBG/vmi-bg.jpg);
}

#ecomm-sol {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/solutionsBG/ecomm-bg.jpg);
}

#bi-sol {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/solutionsBG/bi-bg.jpg);
}

#liquid-sol {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/solutionsBG/liquid-bg.jpg);
}

#private-sol {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/solutionsBG/pl-bg.jpg);
}

#retail-digitalization {
    background-image: linear-gradient(45deg, var(--vc-darkOverlay), var(--vc-darkOverlay)), url(../../test/retailDig.jpg);
}

@keyframes solAnimate {
    from {opacity: 0;}
    to {opacity: 1;}
}

#interactiveSolContainer p {
    opacity: 0;
    margin-bottom: 32px;
    display: none;
}

#interactiveSolContainer > div > div {
    display: none;
}

#interactiveSolContainer > div:hover {
    position: relative;
    width: 720px;
    transition: .5s;
}

#interactiveSolContainer > a > div:hover p, #interactiveSolContainer > a > div:hover a {
    animation: solAnimate .5s linear .5s 1 normal both;
    display: block;
}

#interactiveSolContainer > div:hover div {
    display: block;
    opacity: 1;
}

#vmi-sol:hover {
    background-image: linear-gradient(45deg, var(--vc-greenOverlay), var(--vc-blueOverlay)), url(../../test/solutionsBG/vmi-bg.jpg);
}

#ecomm-sol:hover {
    background-image: linear-gradient(45deg, var(--vc-blueOverlay), var(--vc-orangeOverlay)), url(../../test/solutionsBG/ecomm-bg.jpg);
}

#bi-sol:hover {
    background-image: linear-gradient(45deg, var(--vc-orangeOverlay), var(--vc-greenOverlay)), url(../../test/solutionsBG/bi-bg.jpg);
}

#liquid-sol:hover {
    background-image: linear-gradient(45deg, var(--vc-blueOverlay), var(--vc-greenOverlay)), url(../../test/solutionsBG/liquid-bg.jpg);
}

#private-sol:hover {
    background-image: linear-gradient(45deg, var(--vc-orangeOverlay), var(--vc-blueOverlay)), url(../../test/solutionsBG/pl-bg.jpg);
}

#retail-digitalization:hover {
    background-image: linear-gradient(45deg, var(--vc-greenOverlay), var(--vc-orangeOverlay)), url(../../test/retailDig.jpg);
}

.cusGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.cusGrid div {
    width: clamp(100px, 150px, 400px);
}

.cusGrid img {
    width: 100px;
}

.brochuePage > div {
    margin-bottom: 160px;
}

#phygridSolVid video {
    width: 100%;
    height: fit-content;
}

/*brands page*/

.landingPageHeader, .sub-landingPageHeader {
    background-size: cover;
    background-position: right;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.landingPageHeader div, .sub-landingPageHeader div {
    max-width: 650px;
    margin-left: 150px;
}

#brand24 .landingPageHeader{
    background-image: url(../../test/brands-header.jpg);
}

.landingPageHeader h1, .sub-landingPageHeader h1 {
    font-size: 90px;
    font-weight: 100;
    text-transform: uppercase;
    margin-top: 0px;
}

.landingPageHeader p, .sub-landingPageHeader p {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.33;
}

.landingPageHeader p {
    max-width: 600px;
}

.largeGrid h2 {
    text-align: center;
}

.largeGrid p {
    text-align: center;
    max-width: 750px;
    margin: auto;
}

.largeGrid > div {
    display: flex;
    flex-wrap: wrap;
    column-gap: 64px;
    row-gap: 32px;
    justify-content: center;
    max-width: 1200px;
    margin: 32px auto;
}

.largeGrid > div > * {
    max-width: 150px;
    text-align: center;
    margin: auto;
}

.largeGrid#categories > div > * {
    width: 250px;
    max-width: 250px;
}

.largeGrid > div h5 {
    font-size: 20px;
    font-weight: bold;
    height: 45px;
}

.largeGrid#categories > div img {
    max-width: 100px;
    margin: auto;
    display: block;
}

/*about page*/

#about24 .landingPageHeader {
    background-image: url(../../test/about-header.jpg);
}

.bigQoute {
    max-width: 1250px;
    padding: 0px 25px;
    margin: auto;
    text-align: center;
}

.bigQoute p {
    font-size: 48px;
    line-height: 1.3;
    font-weight: bold;
}

#diffPics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#diffPics img:not(:first-child) {
    width: calc(50% - 8px);
}

#difference .sub-landingPageHeader {
    background-image: url(../../test/difference-header-bg.jpg);
}

.largeB {
    font-size: 24px;
    font-weight: bold;
}

#history {
    max-width: 1250px;
    margin: auto;
}

#history > img {
    max-width: 1250px;
    padding: 0px 25px;
    margin: auto;
    display: block;
}

#history > div {
    margin-bottom: 60px;
}

#history h4 {
    font-size: 32px;
}

#culture h2, #culture h3 {
    color: white;
    text-align: center;
}

#culture {
    background-color: var(--vc-text);
    padding: 35px;
    color: white;
}

#culture > div {
    max-width: 700px;
    margin: auto;
}

/*customers page*/

#customers24 .landingPageHeader {
    background-image: url(../../test/customers-header.jpg);
}

#customerTypes > *:not(div) {
    text-align: center;
    max-width: 700px;
    margin:auto;
}

#customerTypes > div {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    max-width: 1200px;
    margin: 64px auto 0px;
}

#testimonals {
    min-height: 380px;
    max-width: 1690px;
}

#testimonals > div {
    background-color: var(--vc-text);
    background: linear-gradient(45deg, var(--vc-text), var(--vc-text));
    color:white;
    max-width: 720px;
    min-height: 480px;
    padding: 64px;
    margin: auto;
    position:absolute ;
    transition: .5s;
}

#testimonals h3 {
    color: white;
    font-weight: bold;
    text-align: center;
}

.testBox h4 {
    text-align: center;
    margin-block: 5px;
    font-weight: normal;
    font-style: italic;
}

#testimonals img {
    width: 100px;
    display: block;
    margin: 0px auto 32px;
}

#testimonals > div {
    filter: blur(5px);
}

#testimonals > div.active {
    filter: none;
    z-index: 1000;
    color: var(--vc-text);
    background-color: var(--vc-text);
    background: linear-gradient(45deg, var(--vc-green), var(--vc-blue));
}

#testimonals > div.active h3 {
    color: var(--vc-text);
}

#testimonals > div[testimonal="1"] {
    transform: translateX(calc(50vw - 367.5px));
}

#testimonals > div[testimonal="2"] {
    transform: scale(.9) translateX(calc(50vw + 40px));
    z-index: 50;
}

#testimonals > div[testimonal="3"] {
    transform: scale(.8) translateX(1390px);
    opacity: .7;
}

#testimonals > div[testimonal="4"] {
    transform: scale(.8) translateX(-290px);
    opacity: .7;
}

#testimonals > div[testimonal="5"] {
    transform: scale(.9) translateX(calc(50vw - 740px));
    z-index: 50;
}

#testimonals p {
    font-size: 24px;
    line-height: 1.4em;
}

#testimonalButtons {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -344px;
    max-width: 900px;
    margin: auto;
    z-index: 1000;
}

#testimonalButtons button {
    position: relative;
    height: 100px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
}

#leftTestimonalButton {
    background-image: url(../../test/left-arrow.png);
}

#rightTestimonalButton {
    background-image: url(../../test/right-arrow.png);
}

@media screen and (max-width: 920px) {
    #testimonals > div {
        display:none;
    }
    #testimonals > div[testimonal="1"] {
        transform: none;
        display: block;
    }
}

.customerCard {
    background-color: var(--vc-text);
    background-size: cover;
    color:white;
    max-width: 350px;
    padding: 32px 16px;
}

.customerCard h3 {
    font-weight: bold;
    color:white;
}

.customerCard img {
    width: 100px;
    margin-bottom: 100px;
}

.customerCard#prepaid-cus {
    background-image: url(../../test/customer-bg/prepaid.jpg);
}

.customerCard#postpaid-cus {
    background-image: url(../../test/customer-bg/postpaid.jpg);
}

.customerCard#cable-cus {
    background-image: url(../../test/customer-bg/cable.jpg);
}

.customerCard#repair-cus {
    background-image: url(../../test/customer-bg/repair.jpg);
}

.customerCard#national-cus {
    background-image: url(../../test/customer-bg/national.jpg);
}

.customerCard#special-cus {
    background-image: url(../../test/customer-bg/spcecial.jpg);
}

.customerCard#ecomm-cus {
    background-image: url(../../test/customer-bg/ecomm.jpg);
}

.customerCard#liquid-cus {
    background-image: url(../../test/customer-bg/liquid.jpg);
}

.customerCard#b2b-cus {
    background-image: url(../../test/customer-bg/b2b.jpg);
}

/*solutions page*/

#solutions24 .landingPageHeader {
    background-image: url(../../test/solutions-header.jpg);
}

#fundamentals {
    max-width: 800px;
    text-align:center;
    margin:120px auto;
}

#fundamentals img {
    max-width: 100px;
}

#fundamentals h5 {
    font-size: 24px;
    font-weight: bold;
}

.darkCard {
    background-color: var(--vc-grey);
    padding: 48px 32px;
}

.darkCard * {
    margin: 0px;
}

.darkCard h4 {
    font-size: 24px;
}

.bullets {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.bullets h6 {
    width: 45%;
    font-weight: normal;
}

.bullets p {
    font-weight: bold;
}

.bullets p, .bullets h6 {
    font-size: 16px;
    display: flex;
    line-height: 1.4;
    margin-bottom: 0px;
}

.bullets p::before, .bullets h6::before {
    content: "";
    background-color: var(--vc-blue);
    height: 16px;
    min-width: 16px;
    border-radius: 20px;
    display: block;
    margin: 3px 8px 0px;
}

.checkmarks h6::before {
    content: "";
    background-color: transparent;
    background-image: url(../../test/checkmark.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 22px;
    min-width: 22px;
    border-radius: 0px;
    display: block;
    margin: 3px 8px 0px;
}

.gradCard {
    max-width: 500px;
    background: linear-gradient(172deg, var(--vc-green) 20%, var(--vc-blue) 110%);
    padding: 16px 32px;
    min-height: 250px;
    color: white;
}

.gradCard:before {
    content: "";
    width: 500px;
    height: 100px;
    display: block;
    position: absolute;
    z-index: 0;
    background-image: url(../../test/grey-triangle.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: -16px 0px 0px -32px;;
}

.gradCard.alt {
    background: linear-gradient(172deg, var(--vc-orange) 20%, var(--vc-green) 70%);
}

.gradCard .btn2 {
    background-color: transparent;
    border: 3px white solid;
    color: white;
}

.gradCard h4 {
    margin: 0px 0px 64px;
    color: white;
    z-index: 1;
    position: relative;
}

.gradCard p {
    position: relative;
    z-index: 1;
}

.gradCard a {
    display: block;
    width: fit-content;
    margin:auto
}

.gradCardContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin:auto;
}

#liquidation h2 {
    text-align: center;
}

#liquidation p {
    text-align: center;
    max-width: 600px;
    margin:32px auto;
}

/*vmi page*/

.sub-landingPageHeader h1 {
    color: white;
}

.sub-landingPageHeader {
    color:white;
    background-position: bottom;
    min-height: 56vh;
    padding-bottom: 20px;
}

.sub-landingPageHeader div {
    max-width: 100%;
}

#vmi24 .sub-landingPageHeader {
    background-image: url(../../test/vmi-header-bg.jpg);
}

#customSolutions {
    text-align: center;
}

#customSolutions > p {
    max-width: 600px;
    margin: 32px auto;
}

#customSolutions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}

#customSolutions > div > div {
    max-width: 450px;
}

#whyVMI.three-col {
    max-width: 1250px;
    margin: 0px auto 160px;
}

#whyVMI h3 {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 16px;
}

#whyVMI .bullets h6 {
    width: 100%;
}

#whyVMI .darkCard {
    padding: 32px;
}

/*ecomm page*/

#ecomm24 .sub-landingPageHeader {
    background-image: url(../../test/ecomm-header-bg.jpg);
}

#dropshipServices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    justify-content: center;
    align-items: center;
}

#dropshipServices h3 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

#dropshipServices img {
    max-width: 125px;
    margin: 25px auto;
    display: block;
}

#dropshipServices div div {
    margin-bottom: 64px;
}

#integrations h4, #integrations h6 {
    width: 100%;
}

#integrations .darkCard .bullets {
    margin-top: 0px;
}

#integrations p {
    margin-bottom: 32px;
}

.flexLogoGrid {
    text-align: center;
    max-width: 1250px;
    padding: 0px 25px;
    margin: auto;
}

.flexLogoGrid p {
    max-width: 700px;
    margin: 32px auto;
}

.flexLogoGrid div {
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    justify-content: center;
}

.flexLogoGrid div img {
    max-height: 80px;
    width: fit-content;
}

.bs-contactForm {
    width: placeholder;
}

.bs-contactForm label {
    display: none;
}

.bs-contactForm label.hs-error-msg {
    display: block;
    color: red;
}

.bs-contactForm input, .bs-contactForm textarea, #email_in_stock input {
    width: 100% !important;
    background-color: var(--vc-grey);
    border: none;
    padding: 15px;
    margin-bottom: 16px;
    border-radius: 5px;
    font-family: 'Open Sans';
    box-shadow: none;
}

.bs-contactForm .hs_email {
    width: 100% !important;
}

/*footer style*/
footer {
    background: var(--vc-text);
    padding: 32px 100px 16px;
}

#footer {
    padding: 0px !important;
}

footer * {
    color: white;
}

footer h4 {
    margin: 0px 0px 32px;
}

footer h4:not(:first-of-type) {
    margin-top: 32px;
}

footer h6 {
    margin: 0px 0px 16px;
}

footer p {
    margin-bottom: 16px;
}

footer .footerlinks p {
    margin-block: 4px;
}

footer img {
    width: 100%;
}

.footerContact i {
    padding-right: 8px;
}

.footerContact .fa-linkedin {
    font-size: 22px;
}

.footerContact .fa-mobile {
    font-size: 25px;
    position: relative;
    top: 3px;
}

footer #creditCards {
    display: flex;
    gap: 16PX;
    max-width: 150px;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#smallPrint {
    text-align: center;
    margin-top: 32px;
}

#callToAction {
    background: linear-gradient(45deg, var(--vc-orange) -5%, var(--vc-blue) 60%);
    padding: 64px 32px;
    margin-bottom: 0px !important;
}

#callToAction * {
    color: white !important;
}

#callToAction .btn2 {
    background-color: transparent;
    border: solid white 2px;
    display: block;
    width: fit-content;
    margin: 16px auto;
}

.three-col.awards {
    grid-template-columns: repeat(3, 1fr);
}

.three-col.awards img {
    max-width: 100px;
}



/*animations*/
@keyframes leftScroll1 {
    from {margin-left:0px;}
    to {margin-left: -2491px;}
}

@keyframes leftScroll2 {
    from {margin-left:0px;}
    to {margin-left: -2903px;}
}

@keyframes rightScroll {
    from {margin-left: -3292px;}
    to {margin-left: 0px;}
}

#logoSaladContainer div {
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#logoSaladContainer div:nth-child(even) {
    animation-name: rightScroll;
}

#logoSaladContainer div:nth-child(1) {
    animation-name: leftScroll1;
}

#logoSaladContainer div:nth-child(3) {
    animation-name: leftScroll2;
}

/* nav header */

nav#header {
    background-color: var(--vc-text);
    color:white !important;
    overflow: visible;
}

nav#header a {
    color: white;
    padding: 5px 10px; 
}

nav#header #header-container {
    width: 100%;
}

#brochureMenu {
    list-style-type: none;
    display: flex;
    gap: 16px;
    margin-top: 20px;
    width: fit-content;
    font-size: 16px;
    padding-inline-start: 0px;
}

.navbar2 .navbar-brand.fixed-theme {
    height: 65px;
}

.navbar-brand {
    height: 65px;
    padding: 0px !important; 
}

.searchbarcontainer {
    width: 100%;
}

.searchbaraddon *{
    color: var(--vc-text);
}

.searchbarLength {
    min-width: 450px;
}

.searchbarcontainer .inner {
    padding: 10px 0px;
    display: flex;
}

.searchbaraddon {
    height: 34px;
}

.fa-caret-down {
    color: var(--vc-green);
}

.well p {
    color: var(--vc-text);
}

#headerButtons {
    color: var(--vc-text) !important;
    display: flex;
    align-items: top;
    gap: 32px;
    position: absolute;
    right: 100px;
    
    z-index: 100;
}

#headerButtons a {
    color: #353F42 !important;
}

#headerButtons .btnAlt {
    background-color: #353F42;
    color: white !important;
    border: solid 2px white;
}
.sub-landingPageHeader .btn2 {
    background-color: transparent;
    color: white !important;
    border: solid 2px white;
}

#test {
    display: none;
}

#loginForm {
    height: 0px;
    width: 0px;
    transition: .5s;
    overflow: hidden;
}

#loginButton {
    cursor: pointer;
}

#loginButton p {
    margin: 0px;
}

#loginForm a {
    color: white !important;
    font-size: 12px;
}

#loginForm input[type=submit] {
    color: var(--vc-text);
    display: block !important;
}

.smartsearchlink img {
    width: 50px;
}

.fa-times {
    color: var(--vc-text);
}

nav#header a.smartsearchlink {
    color: var(--vc-text);
}

#nav-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 70px 65px;
    padding-inline: 75px
}

#nav-container:has(#accountInfo) {
    grid-template-columns: 1fr 200px;
}

.navbar-header {
    float: none !important;
    width: fit-content;
    align-items: center;
}

div#nav-browse-inner a {
    color: var(--vc-text);
}

.mainLogo img {
    height: fit-content;
    max-width: 250px;
    margin-top: 10px !important;
}

@media screen and (max-width: 1589px) {
    #nav-container:has(#accountInfo) {
        grid-template-rows: 70px 65px;
    }

    #nav-container:has(#accountInfo) #brochureMenu {
        margin-top: 8px;
        padding-inline-start: 0px;
    }
}

@media screen and (max-width: 1510px) {
    #nav-container {
        padding-inline: 75px;
    }
}

@media screen and (max-width: 1405px) {
    #headerButtons {
        width: 200px;
        display: block;
        top: 55px;
    }
    #headerButtons .btn2, #headerButtons .btnAlt {
        font-size: 14px;
        padding: 6px 32px !important;
        width: fit-content;
        margin: 16px auto;
        display: block;
    }
    
    #loginText {
        font-size: 14px;
    }

    #nav-container {
        padding-inline: 25px;
    }
}

#main-menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 32px;
    align-items: center;
}

#accountStuff {
    display: flex;
    align-items: center;
    justify-content: end;
    grid-column: 2;
    grid-row: 1 / 3;
}

#accountInfo {
    display: flex;
    text-align: right;
    gap: 16px;
    align-items: center;
}


#accountName {
    font-weight: bold;
}

#accountInfo p {
    margin-block: 5px;
    font-size: 14px;
}

#repNumber a {
    padding: 0px !important;
}

#profileImage {
    width: 65px;
    height: 65px;
    border-radius: 35px;
    background-color: var(--vc-green);
    color: var(--vc-text);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    cursor: pointer;
    margin: auto;
}

#accountInfo .fa-shopping-cart {
    font-size: 40px;
    color: white;
}

#cartStuff {
    display: flex;
    align-items: center;
}

p.cartNumber {
    background: var(--vc-green);
    color: var(--vc-text);
    position: relative;
    top: -15px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 100px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin: 0px;
}

#accountLinks {
    display:block;
    background-color: var(--vc-grey);
    text-align: right;
    border-top: solid .5px var(--vc-text);
}

#accountLinks h4 {
    margin-block: 18px;
    font-size: 14px;
    font-weight: normal;
}

#accountLinks a {
    color: var(--vc-text) !important;
}

#accountPopOut {
    display: none;
    min-height: 100vh;
    position: fixed;
    top: 0px;
    right: -268px;
    background-color: var(--vc-grey);
    padding: 32px;
    z-index: 10000;
    transition: .5s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#accountPopOut.openAccountInfo {
    display: block;
    right: 0px;
    animation: accountPopUp .25s ease-out 0s 1 normal both;
}

#accountPopOut a:hover {
    color: var(--vc-blue);
}

@keyframes accountPopUp {
    from {right:-268px;}
    to {right: 0px;}
}

.accountText {
    text-align: center;
}

.accountText p {
    margin-bottom: 8px;
}

.dropdown-btn:hover > a {
    background-color: var(--vc-grey);
    color: var(--vc-text) !important;
}

.dropdown-content {
    background-color: var(--vc-grey);
    color: var(--vc-text);
    padding: 10px;
    position: absolute;
    display: none;
    z-index: 10;
}

.dropdown-content ul {
    list-style: none;
    padding: 0px;
}

.show {
    display: block;
}

.dropdown-btn a:first-of-type {
    padding: 15px 5px;
}

.dropdown-content a {
    color: var(--vc-text) !important; 
}

.dropdown-content li {
    margin-bottom: 16px;
}

.dropdown-content li:last-of-type {
    margin-bottom: 0px;
}

@keyframes openLogin {
    from {width: 0px;
        height: 0px;}
    to {width: 300px;
        height: 140px;}
}

.openLogin {
    animation: openLogin .5s linear 0s 1 normal both;
}

.location-div {
    display:none;
}

/*mobile stuff*/
@media screen and (max-width: 1000px) {
    #homeHero {
        padding: 75px 32px 25px
    }
    
    #interactiveSolContainer {
        flex-wrap: wrap;
    }

    #interactiveSolContainer > div {
        width: 100%;
        min-height: 300px;
    }

    .two-col-b, .two-col-a {
        gap: 32px;
    }
    #interactiveSolContainer a {
        width: 100%;
    }

    #interactiveSolContainer a:hover {
        width: 100%;
    }

    #interactiveSolContainer p {
        opacity: 1;
        display: block;
    }

    #interactiveSolContainer > a > div:hover p, #interactiveSolContainer > a > div:hover a {
        animation: none;
    }

    #vmi-sol {
        background-image: linear-gradient(45deg, var(--vc-greenOverlay), var(--vc-blueOverlay)), url(../../test/solutionsBG/vmi-bg.jpg);
    }
    
    #ecomm-sol {
        background-image: linear-gradient(45deg, var(--vc-blueOverlay), var(--vc-orangeOverlay)), url(../../test/solutionsBG/ecomm-bg.jpg);
    }
    
    #bi-sol {
        background-image: linear-gradient(45deg, var(--vc-orangeOverlay), var(--vc-greenOverlay)), url(../../test/solutionsBG/bi-bg.jpg);
    }
    
    #liquid-sol {
        background-image: linear-gradient(45deg, var(--vc-blueOverlay), var(--vc-greenOverlay)), url(../../test/solutionsBG/liquid-bg.jpg);
    }
    
    #private-sol {
        background-image: linear-gradient(45deg, var(--vc-orangeOverlay), var(--vc-blueOverlay)), url(../../test/solutionsBG/pl-bg.jpg);
    }
}


/*mobile menu*/

#mobileNav {
    display: none;
}

.mobileLogo {
    display: none;
}

.mobileLogo img {
    margin-top: 0px !important;
}

#mobilePopOut {
    display: none;
    position: fixed;
    top:0px;
    right: 0px;
    width: 250px;
    height: 100vh;
    background-color: var(--vc-grey);
    color: var(--vc-text);
    z-index: 2000;
    overflow: scroll;
    scrollbar-width: none;
    padding: 32px;
    flex-wrap: wrap;
    justify-content: end;
    align-content: baseline;
    gap: 32px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    animation: accountPopUp .25s ease-out 0s 1 normal both;
}

#mobileBrochureMenu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
}

#mobileBrochureMenu ul {
    list-style: none;
    padding: 0px;
    width: 100%;
}

#mobileBrochureMenu ul li {
    font-size: 14px;
    font-weight: normal;
}

#mobileBrochureMenu li {
    font-size: 16px;
    color: var(--vc-text);
    width: 100%;
    text-align: right;
    font-weight: bold;
    margin-bottom: 8px;
}

#mobileBrochureMenu ul {
    margin-bottom: 16px;
}

#mobileBrochureMenu a:hover {
    color: var(--vc-blue);
}

#mobilePopOut .btn2, #mobilePopOut .btnAlt {
    font-size: 16px;
    padding: 6px 24px !important;
    display: inline-block;
}

.container:has(.product-container) {
    height: 480px;
}

.mobileSearchBTN {
    display:none;
}

@media screen and (max-width: 1405px) {
    #mobileNav {
        display: flex;
        align-items: center;
    }

    #headerButtons .btn2, #headerButtons .btnAlt {
        font-size: 14px;
        padding: 6px 32px !important;
        width: fit-content;
        margin: 16px auto;
        display: block;
    }

    #navbar {
        display: none;
    }

    #hamburger {
        width: 40px;
        height: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        cursor: pointer;
    }

    #hamburger div {
        height: 2px;
        width: 100%;
        background-color: white;
    }

    #accountStuff {
        grid-row: 1;
    }

    #headerButtons {
        display: none;
    }

    img.navbar-brand {
        height: 50px !important;
    }

    #nav-container {
        grid-template-columns: 1fr 400px;
    }

    .searchbar {
        grid-column: 1 / 3;
        background-color: transparent;
    }

    #main-menu {
        width: fit-content;
    }

    .searchbarcontainer .inner {
        flex-wrap: wrap;
    }

    #accountInfo p {
        font-size: 12px;
        margin-block: 0px;
    }

}

@media screen and (max-width: 920px) {
    #nav-container {
        grid-template-rows: 65px 65px !important;
    }

    #homeHero h1 {
        font-size: 8vw;
        letter-spacing: 12px;
    }

    .two-col-b div:first-of-type, .two-col-a div:nth-of-type(2), h3, h2  {
        padding-inline: 16px;
    }

    .two-col-b div:first-of-type h3, .two-col-a div:nth-of-type(2) h3, .two-col-b div:first-of-type h2, .two-col-a div:nth-of-type(2) h2 {
        padding-inline: 0px;
    }

    footer {
        padding-inline: 15px;  
    }
}

.show-filter-column {
    display: block !important;
}

#filterColumn .fa.fa-times {
    display: none;
    float: right;
    font-size: 18px;
}

#filterColumn.show-filter-column .fa.fa-times {
    display: block;
}

@media screen and (max-width: 715px) {
    #nav-container {
        grid-template-columns: 1fr !important;
    }
    .accountText{
        display:none;
    }
    .landingPageHeader h1, .sub-landingPageHeader h1 {
        font-size: 50px;
    }
    .bigQoute p {
        font-size: 38px;
    }
    #headerButtons {
        flex-wrap: wrap;
        max-width: 125px;
        gap: 8px;
        display:none;
    }
    #headerButtons .btn2, #headerButtons .btnAlt {
        padding: 6px 32px !important;
        margin: 0px auto;
    }
    .searchbarLength {
        width: 100%;
        margin-right: 0px;
        min-width: 0px;
    }
    #main-menu {
        justify-content: space-between;
        margin-left: 0px;
    }

    #nav-container:has(#accountInfo) #main-menu {
        justify-content: left;
    }
}

#popOutClose {
    position: absolute;
    left: 16px;
    top: 8px;
    cursor: pointer;
}

#team .sub-landingPageHeader {
    background-image: url(../../test/team-header.jpg);
}

#teamGroups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:48px;
}

#teamGroups img {
    max-width: 500px;
}

.execTeam {
    max-width:1200px;
    margin: 64px auto 64px;
    text-align:center;
}

.execTeam p {
    text-align: left;
}

.execTeam img {
    width: 80%
}

.darkBG {
    background-color: var(--vc-text);
    color: white;
    padding: 120px 0px;
    margin-bottom: 0px !important;
}

.darkBG h2 {
    color:white;
    text-align: center;
}

.darkBG a {
    display: block;
    margin: auto;
    width: fit-content
}

.darkBG div {
    max-width: 600px;
    margin: auto;
}

@media screen and (max-width: 1190px) {
    .landingPageHeader {
        background-position-x: -5px;
    }
    footer .three-col{
        grid-template-columns: 1fr;
    }
}

.faqHeader {
    font-size: 36px;
}

.faq-list-title {
    margin-top: 32px;
}

.breadcrumb .fa-times {
    color:white;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.certsAndRels {
    background-color: var(--vc-text);
    padding-block: 64px;
    color: white !important;
}

.certsAndRels h2 {
    color: white;
    text-align: center;
}

.certsAndRels h4 {
    color: white;
}

.certsAndRels .three-col {
    max-width: 1200px;
    margin:auto;
    text-align: center;
    gap: 120px;
}

.certsAndRels .bullets {
    gap: 16px;
}

.certsAndRels .bullets h6 {
    width: fit-content;
    color:white;
    border: solid 2px white;
    border-radius: 20px;
    padding: 5px 22px 5px 12px;
    margin-top: 0px;
}

.certsAndRels .bullets .full {
    width: 100%;
}

.certsAndRels .bullets .half {
    width: calc(50% - 8px);
}

#qlikVid {
    max-width: 100%;
}

@media screen and (min-width: 900px) {
    #compCap .bullets {
        flex-direction: column;
        max-height: 400px;
    }
}

#businessIntell .sub-landingPageHeader {
    background-image: url(../../test/busiIntell-bg.jpg);
}

#privateLabel .sub-landingPageHeader {
    background-image: url(../../test/privateLabel-bg.jpg);
}

.align-top {
    align-items: flex-start;
}

.moreProductInfo {
    max-width: 1200px;
    margin: 0px auto 60px;
}

.searchform {
    height: 65vh;
}

.tooltipPopUp {
    position: fixed;
    top: 95px;
    right: 250px;
    background: white;
    color: var(--vc-text);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    display: none;
    z-index: 2000;
    cursor: pointer;
}

.tooltipPopUp::after {
    content: "";
    background-image: url(../../test/triangle.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    right: -25px;
    top: 10px;
}

.tooltipPopUp .fa-times::before {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 11px;
}

@media screen and (max-width: 1405px) {
    #nav-container {
        grid-template-rows: 60px 65px;
    }

    #brochureMenu {
        margin-top: 8px;
        padding-inline-start: 0px;
    }

    .landingPageHeader div, .sub-landingPageHeader div {
        margin-left: 25px;
    }
    #profileImage {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    #accountInfo .fa-shopping-cart {
        font-size: 25px;
    }
    p.cartNumber {
        width: 20px;
        height: 20px;
        font-size: 10px !important;
        right: 15px;
        padding: 0px;
    }
    #nav-container {
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .searchbarLength {
        width: 100%;
    }
    .mainLogo {
        padding: 0px !important;
        margin-top: -20px;
    }
    img.navbar-brand {
        margin-top: 0px !important;
    }
    body {
        padding-top: 90px !important;
    }
    body.brochuePage {
        padding-top: 80px !important;
    }
    #headerButtons {
        position: unset;
        margin-right: 32px;
    }
    #browseBy {
        margin-top: 0px;
    }
    #browseBy label {
        padding-left: 0px;
    }
    .searchbarcontainer, .searchbarcontainer .inner {
        padding-bottom: 0px;
    }
}

@media screen and (max-width: 1005px) {
    .mainLogo {
        display:none;
    }
    .mobileLogo {
        display: block;
    }
    .mobileLogo img {
        max-width: 50px;
    }
    #main-menu {
        margin-left: 0px;
    }
}

@media screen and (max-width: 700px) {
    #nav-container {
        flex-wrap: wrap;
        gap: 0px;
        justify-content: space-between;
    }
    body, body.brochuePage {
        padding-top: 60px !important;
    }
    .mobileLogo img {
        width: 50px;
    }
    .mobileLogo {
        width: 50px;
        padding: 5px 0px !important;
    }
    .searchbar {
        align-self: flex-end;
        display: none;
        order: 3;
    }
    .mobileSearchBTN {
        display: block;
        margin-right: 16px;
        font-size: 24px;
    }
    #main-menu {
        order: 1;
    }
    #accountStuff {
        order: 2;
    }
}

#headerButtons:has(.openLogin) {
    position: absolute;
}

form#filter_form label {
color: var(--vc-text);
}

form#filter_form .badge label {
color: white;
}

/*New Logo Slider*/

.logo-slider {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 300px;
    gap: 10px;
    padding: 20px 0;
  }
  
  .track {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 32px;
  }
  
  .logo-line {
    display: inline-flex;
    animation: scroll-left 60s linear infinite;
  }
  
  .track.reverse .logo-line {
    animation: scroll-right 60s linear infinite;
  }
  
  .slider-logo {
    flex: 0 0 auto;
    padding: 0 20px;
  }
  
  .slider-logo img {
    height: 100px;
    width: auto;
  }
  
  @keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  @keyframes scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }