/*============================================================*/
/*                     Table of Contents                      */
/*============================================================*/
/*--------------- Fonts --*/
/*--------------- General --*/
/*--------------- Tab 1 - Start --*/
/*--------------- Header --*/
/*--------------- Store Assist --*/
/*--------------- Walmart Track --*/
/*--------------- Modal --*/
/*--------------- Carousel General --*/
/*--------------- Carousel One --*/
/*--------------- Carousel Two --*/
/*--------------- Carousel Three --*/
/*--------------- Carousel Four --*/
/*--------------- Carousel Five --*/
/*--------------- Carousel Six --*/
/*--------------- Carousel Seven --*/
/*--------------- Carousel Eight --*/
/*--------------- Animations --*/
/*============================================================*/



/*--------------- Fonts --*/
@font-face { 
    font-family: 'blackFont';
    src: url('../assets/fonts/BOGLEBLACK.OTF') format('otf'), 
         url('../assets/fonts/BOGLEBLACK.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { 
    font-family: 'boldFont';
    src: url('../assets/fonts/BOGLEBOLD.OTF') format('otf'), 
         url('../assets/fonts/BOGLEBOLD.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face { 
    font-family: 'regularFont';
    src: url('../assets/fonts/BOGLEREGULAR.OTF') format('otf'), 
         url('../assets/fonts/BOGLEREGULAR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/*--------------- General --*/
:root {
    --brand-yellow: #FFC220;
    --brand-white: #FFFFFF;
    --brand-light-blue: #0E1457;
    --brand-dark-blue: #041F41;
    --brand-off-white: #FAFAFA;
    --brand-black: #000000;
    --brand-blue-tone-1: #8CD1FC;
    --brand-blue-tone-2: #D3EFF8;
    --brand-yellow-tone: #F8E6A5;

    --carousel-blue: var(--brand-light-blue); /*#49ABF3*/
    --carousel-grey: var(--brand-blue-tone-2); /*#DFDFDF*/
    --brand-grey: grey;
    --bubble-color: var(--brand-light-blue); /*#71749E*/


    --bold-font: 'boldFont', sans-serif;
    --regular-font: 'regularFont', sans-serif;
    --black-font: 'blackFont', sans-serif;

    --base-fs: 16px;
    --title-fs: 2.6rem;
    --sub-title-fs: 2.5rem;
    --start-btn-fs: 2.5rem;
    --start-logo-fs: 5rem;
    --store-assist-inst-fs: 2rem;
    --button-fs: 2rem;
    --store-assist-menu-title-fs: 2.5rem;
    --store-assist-menu-text-fs: 2rem;
    --store-assistant-section-header-fs: 3rem;
    --store-assistant-section-desc-fs: 2rem;


    --space-from-edge: 46px;
}
* {
    /*transition: all 250ms ease-in-out;*/
    transition: 0s;
    box-sizing: border-box;
    font-family: var(--regular-font);
}
body {
    background-color: var(--brand-white) !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; 
    overflow: hidden;
    font-size: var(--base-fs) !important;
}
.container {
    max-width: unset !important;
    padding: 0 !important;
    margin: 0 !important; 
}
.timertext {
    background-color: var(--brand-white);
    color: var(--brand-black);
    position: fixed;
    top: 0;
    left: 0;
    display: none !important;
}
.timertext > * {
    color: var(--brand-black);
}
h1,h2,h3,h4,h5,h6,p,span,div {
    color: var(--brand-white);
}
h1,h2,h3,h4,h5,h6, .bold, strong {
    font-family: var(--bold-font) !important;
    font-weight: bold !important;
}
button, .btn {
    font-family: var(--bold-font);
}
.tabContainer {
    height: 100vh;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.lowerButtons {
    margin: 0 !important;
}



/*--------------- Tab 1 - Start --*/
body.pageStart {
    /* background-image: url('../assets/screen_1/start_screen_bg_v2.png'); */
    background: linear-gradient(179.99deg, #054A91 23.67%, #52A2FF 100%);
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageStart .tabsHeader, 
body.pageStart .upperButtons, 
body.pageStart .lowerButtons, 
body.pageStart .navContainer {
    display: none;
}
body.pageStart .startLogo {
    display: flex;
    flex-direction: column;
    height: 14.4%;
    position: absolute;
    top:  12.2%;
    width: 100%;
    /* animation: home-text 20s linear infinite; */
}
/*
body.pageStart .startLogo img {
    width: 150px;
    margin: 43px auto 0 auto;
} 
*/
body.pageStart .startLogo p {
    margin: 0;
    font-size: var(--start-logo-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    text-align: center;
}
body.pageStart .title {
    font-size: var(--title-fs);
    margin: 0;
    text-align: center;
    margin-top: 37px;
}
body.pageStart .subTitle {
    font-size: var(--sub-title-fs);
    line-height: 3rem;
    margin: 0;
    text-align: center;
    font-weight: normal;
    margin-top: 10px;
}

body.pageStart .waveContainer {
    position: absolute;
    background-color: transparent;
    top: 30%;
    height: 41.3%;
    width: 100%;
   /* background-image: url('../assets/screen_1/white_wave_v2.png');*/
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageStart .startButtons {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 40px;
}
.startButtons img{
    width: 93.1%;
    animation: pulse 2s linear infinite;
}
body.pageStart .startButton p {
    color: var(--brand-black);
    text-align: center;
    font-size: var(--start-btn-fs);
    font-family: 'boldFont' !important;
}
body.pageStart .touchToStartContainer {
    bottom: 20%;
    position: absolute;
}


/*--------------- Header --*/
.tabsHeader {
    /* background-color: var(--brand-light-blue); */
    height: 200px;
}
body.pageOne .tabsHeaderWalmartTrack,
body.pageTwo .tabsHeaderWalmartTrack, 
body.pageThree .tabsHeaderWalmartTrack,
body.pageFour .tabsHeaderWalmartTrack,
body.pageFive .tabsHeaderWalmartTrack,
body.pageSix .tabsHeaderWalmartTrack,
body.pageSeven .tabsHeaderStoreAssist,
body.pageEight .tabsHeaderStoreAssist,
body.pageNine .tabsHeaderStoreAssist,
body.pageTen .tabsHeaderStoreAssist,
body.pageEleven .tabsHeaderStoreAssist  {
    display: none;
}
img.rtlg {
    width: 85px !important;
    top: 3.5%;
    left: 9.4%;
    position: absolute;
}
.tabsHeaderWalmartTrack, .tabsHeaderWalmartTrack img {
    background-color: #EEF6FF;
    width: 100%;
}
.tabsHeaderStoreAssist {
    height: 100%;
    display: flex;
}
img.img2 {
    width: 100%;
    BACKGROUND-COLOR: #FAF2EA;
}


/*--------------- Store Assist --*/
.storeAssist .tabContainer {
    height: calc(91.2% - 725px);
    background-color: #FAF2EA;
}
body.pageTwo, body.pageThree, body.pageFour, body.pageFive, body.pageSix {
    background-color: #FAF2EA !important;
}
.routeOpt .tabContainer{
    height: calc(91.2% - 725px);
    background-color: #EEF6FF;
}

.pageTwo .storeAssist .tabContainer, 
.pageThree .storeAssist .tabContainer, 
.pageFour .storeAssist .tabContainer,
.pageFive .storeAssist .tabContainer,
.pageSix .storeAssist .tabContainer,
.pageSeven .routeOpt .tabContainer,
.pageEight .routeOpt .tabContainer,
.pageNine .routeOpt .tabContainer,
.pageTen .routeOpt .tabContainer,
.pageEleven .routeOpt .tabContainer,
.pageThirtyOne .routeOpt .tabContainer  {
    height: 100%;
}

#v-pills-start-tab, 
#v-pills-page-one-tab, 
body.pageOne .routeOpt, 
body.pageTwo .routeOpt, 
body.pageThree .routeOpt, 
body.pageFour .routeOpt,
body.pageFive .routeOpt, 
body.pageSix .routeOpt {
    display: none;
}

body.pageOne .navContainer, 
body.pageTwo .navContainer,
body.pageThree .navContainer, 
body.pageFour .navContainer,
body.pageFive .navContainer, 
body.pageSix .navContainer,
body.pageSeven .navContainer,
body.pageEight .navContainer,
body.pageNine .navContainer,
body.pageTen .navContainer,
body.pageEleven .navContainer,
body.pageThirtyOne .navContainer{
    /* background-color: var(--brand-off-white);*/
    height: 523px;
    position: absolute;
    top: 1225px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

body.pageOne .upperButtons, 
body.pageTwo .upperButtons,
body.pageThree .upperButtons,
body.pageFour .upperButtons,
body.pageFive .upperButtons ,
body.pageSix .upperButtons  {
    justify-content: center;
    gap: 43px;
}
/*
.upperButtons button.active {
    border: 3px solid var(--brand-black);
}*/
p.storeAssistBtnInst {
    margin: 0;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assist-inst-fs);
    margin-top: 37px;
}
body.pageOne .routeOptBtnInst, 
body.pageTwo .routeOptBtnInst,
body.pageThree .routeOptBtnInst,
body.pageFour .routeOptBtnInst,
body.pageFive .routeOptBtnInst,
body.pageSix .routeOptBtnInst {
    display: none;
}
button.storeAssist {
    padding: 0;
    max-width: 280px;
}
button.storeAssist.active{
    max-width: 288px;
    border-radius: 20px;
}
button.storeAssist span {
    display: none;
}
/*.lowerButtons button.btnExit,*/ 
/*
.lowerButtons button.btnExit:active, 
.lowerButtons button.btnExit:hover {
    background-color: var(--brand-white) !important;
    border-color: var(--brand-black) !important;
    color: var(--brand-black) !important;
    border-radius: 30px !important;
}
.lowerButtons button.btnExit span, 
.lowerButtons button.btnExit:active span, 
.lowerButtons button.btnExit:hover span {
    color: var(--brand-black) !important;
}
*/
.btnExit {
    width: 115px;
    height: 60px;
    align-self: center;
    margin-top: 6px;
}
.btnExit span {
    color: var(--brand-black);
    font-size: var(--button-fs);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--brand-black);
    background-color: transparent !important;
}
.blueWaveImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.blueWaveImg img {
    width: 100%;
}
.storeAssistMenuContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 330px;
}
p.storeAssistMenuTitle {
    color: var(--brand-light-blue);
    text-align: center;
    font-size: var(--store-assist-menu-title-fs);
    font-family: var(--bold-font);
}
p.storeAssistMenuText {
    color: var(--brand-black);
    text-align: center;
    font-size: var(--store-assist-menu-text-fs);
}




/*--------------- Walmart Track --*/

.routeOpt .tabContainer {
    height: 100%;
    background-color: #EEF6FF;
}
.yellowWaveImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.yellowWaveImg img {
    width: 100%;
}
.routeOptMenuContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 330px;
}
.routeOptMenuTitle {
    color: var(--brand-light-blue);
    text-align: center;
    font-size: var(--store-assist-menu-title-fs);
    font-family: var(--bold-font);

}
.routeOptMenuText {
    color: var(--brand-black);
    text-align: center;
    font-size: var(--store-assist-menu-text-fs);
    line-height: 2.4rem;
}
body.pageSeven .storeAssistBtnInst,
body.pageEight .storeAssistBtnInst,
body.pageNine .storeAssistBtnInst,
body.pageTen .storeAssistBtnInst,
body.pageEleven .storeAssistBtnInst {
    display: none;
}
body.pageSeven .storeAssist, 
body.pageEight .storeAssist, 
body.pageNine .storeAssist,
body.pageTen .storeAssist,
body.pageEleven .storeAssist {
    display: none;
}
body.pageSeven .upperButtons, 
body.pageEight .upperButtons, 
body.pageNine .upperButtons,
body.pageTen .upperButtons,
body.pageEleven .upperButtons {
    background-color: transparent;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: center;
    position: static;

    width: 100%;
    margin: 0 auto !important;
    height: 371px !important;
}

body.pageSeven .upperButtons .routeOpt, 
body.pageEight .upperButtons .routeOpt, 
body.pageNine .upperButtons .routeOpt,
body.pageTen .upperButtons .routeOpt,
body.pageEleven .upperButtons .routeOpt  {
    border-radius: 50%;
    width: 125px;
    height: 125px;
    position: absolute;
}

button#v-pills-page-six-tab {
    gap: 15px;
}
p.routeOptBtnInst {
    margin: 0;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assist-inst-fs);
    margin-top: 34px;
}





/*--------------- Modal --*/
.modal, 
.modal > *, 
.modal h1, 
.modal h2,
.modal h3, 
.modal h4, 
.modal h5, 
.modal h6, 
.modal p, 
.modal span,
.modal div {
    color: var(--brand-black) !important;
}



/*--------------- Carousel General --*/
@keyframes nextSlide {
    75% {
        left: 0;
    }
    95% {
        left: 100%;
    }
    98% {
        left: 100%;
    }
    99% {
        left: 0;
    }
}
  
@keyframes startSlide {
    75% {
        left: 0;
    }
    95% {
        left: -300%;
    }
    98% {
        left: -300%;
    }
    99% {
        left: 0;
    }
}
  
@keyframes snapSlide {
    96% {
        scroll-snap-align: center;
    }
    97% {
        scroll-snap-align: none;
    }
    99% {
        scroll-snap-align: none;
    }
    100% {
        scroll-snap-align: center;
    }
}
  

.carousel * {
    box-sizing: border-box;
    scrollbar-color: transparent transparent;  /* thumb and track color */
    scrollbar-width: 0px;
    -ms-overflow-style: none;
}
  
.carousel *::-webkit-scrollbar {
    width: 0;
}

.carousel *::-webkit-scrollbar-track {
    background: transparent;
}

.carousel *::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
}

.carousel ol, 
.carousel li {
    list-style: none;
    margin: 0;
    padding: 0;
    /*  touch-action: none; disables swipe actions */
}
  
.carousel {
    /*position: relative;
    padding-top: 75%;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;*/
    height: 100%;
    margin: 0;
    padding: 0;
}
  
.carousel .slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    background-color: transparent;
    counter-increment: item;
}
  
.carousel .slide:before {
    /*content: counter(item);*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-40%,70px);
    color: #fff;
}

.carousel .snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
}
  
@media (hover: hover) {
    /*Auto Scroll*/
    /*.carousel .snapper {
        animation-name: nextSlide, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }*/

    .carousel .slide:last-child .snapper {
        animation-name: startSlide, snap;
    }
}
  
@media (prefers-reduced-motion: reduce) {
    .carousel .snapper {
        animation-name: none;
    }
}
  
.carousel:hover .snapper,
.carousel:focus-within .snapper {
    animation-name: none;
}

.carousel .carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    text-align: center;
}

.carousel .carousel__navigation-list,
.carousel .carousel__navigation-item {
    display: inline-block;
}
  
.carousel .carousel__navigation-button {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: var(--carousel-grey);
    background-clip: content-box;
    border: 0.25rem solid transparent;
    border-radius: 50%;
    font-size: 0;
    transition: transform 0.1s;
}

.carousel::before,
.carousel::after {
    content: '';
    display: none;
}
.carousel .carousel_prev,
.carousel .carousel_next {
    /*position: absolute;*/
    position: fixed;
    top: 0;
    width: 35px !important;
    height: 50px !important;
    font-size: 0;
    outline: 0;
    margin-top: 250px !important;
    background-size: 25px 40px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 380px 45px;
}
  
.carousel .carousel_prev {
    /*left: 121px;*/
    left: 60px;
    background-image: url('../assets/Arrow-Left.svg') !important;

}

.carousel .carousel_next {
    right: 60px;
    background-image: url('../assets/Arrow-right.svg') !important;
}

.carousel .carousel_prev,
.carousel .carousel_next {
    display: none;
}

.carousel .active-slide .carousel_prev,
.carousel .active-slide .carousel_next {
    display: block;
}
  

/*Allows Scroll Reset*/
div#v-pills-page-two,
div#v-pills-page-three,
div#v-pills-page-four,
div#v-pills-page-five,
div#v-pills-page-six,
div#v-pills-page-seven,
div#v-pills-page-eight,
div#v-pills-page-nine,
div#v-pills-page-ten,
div#v-pills-page-eleven {
    display: block !important;
    position: fixed;
    width: 100%;
    height: 53.5%;
    opacity: 0;
    z-index: 0;
}

div#v-pills-page-two.active, 
div#v-pills-page-three.active,
div#v-pills-page-four.active, 
div#v-pills-page-five.active,
div#v-pills-page-six.active,
div#v-pills-page-seven.active,
div#v-pills-page-eight.active,
div#v-pills-page-nine.active,
div#v-pills-page-ten.active,
div#v-pills-page-eleven.active {
    opacity: 1;
    z-index: 2;
    top: 199px;
}



/*--------------- Carousel One --*/
#storeAssistScreen3Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 5px;
    pointer-events: none;
}
#storeAssistScreen3Carousel.slide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen3Carousel.slide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen3Carousel.slide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen3Carousel.slide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen3Carousel.slide5 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen3Carousel #slide1 .carousel_prev {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_one {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_one li > * {
    position: absolute;
}
.carousel_one li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_one li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_one li > img {
    top: 122px;
    width: 485px;
    left: calc(50% - 230px);
}



/*--------------- Carousel Two --*/
#storeAssistScreen4Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen4Carousel.twoSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen4Carousel.twoSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen4Carousel.twoSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen4Carousel.twoSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}

.carousel .carousel_two {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_two li > * {
    position: absolute;
}
.carousel_two li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_two li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_two li > img {
    top: 122px;
    width: 485px;
    left: calc(50% - 230px);
}
.carousel_two li > img.img1 {
    left: 158px;
}
.carousel_two li > img.img2 {
    right: 158px;
    left: unset;
}



/*--------------- Carousel Three --*/
#storeAssistScreen5Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen5Carousel.threeSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen5Carousel.threeSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen5Carousel.threeSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen5Carousel.threeSlide3 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen5Carousel.threeSlide3 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
}
.carousel .carousel_three {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_three li > * {
    position: absolute;
}
.carousel_three li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_three li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_three li > img {
    top: 122px;
    width: 485px;
    left: calc(50% - 230px);
}

/*--------------- Carousel Four --*/
#storeAssistScreen6Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen6Carousel.fourSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen6Carousel.fourSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen6Carousel.fourSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}

.carousel .carousel_four {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_four li > * {
    position: absolute;
}
.carousel_four li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_four li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_four li > img {
    top: 122px;
    width: 485px;
    left: calc(50% - 230px);
}

/*--------------- Carousel Five --*/
#storeAssistScreen7Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen7Carousel.fiveSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen7Carousel.fiveSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen7Carousel.fiveSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen7Carousel.fiveSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen7Carousel.fiveSlide5 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
} 
#storeAssistScreen7Carousel #fiveSlide5 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_five {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_five li > * {
    position: absolute;
}
.carousel_five li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_five li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_five li > img {
    top: 122px;
    width: 485px;
    left: calc(50% - 230px);
}


/*--------------- Carousel Six --*/
#storeAssistScreen8Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen8Carousel.sixSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen8Carousel.sixSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen10Carousel #eightSlide1 .carousel_prev,
/* #storeAssistScreen8Carousel #sixSlide1 .carousel_prev,  */
#storeAssistScreen8Carousel #sixSlide3 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_six {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_six li > * {
    position: absolute;
}
.carousel_six li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_six li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_six li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 427px);
}

.carousel .carousel_seven {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_seven li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 420px);
}

/*--------------- Carousel Seven --*/
#storeAssistScreen9Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    pointer-events: none;
}
#storeAssistScreen9Carousel.sevenSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen9Carousel.sevenSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen9Carousel.sevenSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen9Carousel.sevenSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen9Carousel.sevenSlide5 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
}
 
#storeAssistScreen9Carousel #sevenSlide5 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_seven {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_seven li > * {
    position: absolute;
}
.carousel_seven li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_seven li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_seven li > img {
    top: 174px;
    width: 860px;
    left: calc(50% - 431px);
}

/*--------------- Carousel Seven --*/
#storeAssistScreen10Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#storeAssistScreen10Carousel.eightSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen10Carousel.eightSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen10Carousel.eightSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen10Carousel.eightSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen10Carousel.eightSlide5 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
} 
#storeAssistScreen10Carousel #eightSlide5 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}

.carousel .carousel_eight {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_eight li > * {
    position: absolute;
}
.carousel_eight li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_eight li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_eight li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 427px);
}

/*--------------- Carousel Seven --*/
#storeAssistScreen11Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#storeAssistScreen11Carousel.nineSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#storeAssistScreen11Carousel.nineSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen11Carousel.nineSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen11Carousel.nineSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#storeAssistScreen11Carousel.nineSlide5 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
} 
#storeAssistScreen11Carousel #nineSlide5 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}

.carousel .carousel_ten {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_ten li > * {
    position: absolute;
}
.carousel_ten li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_ten li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    position: fixed;
}
.carousel_ten li > img {
    top: 145px;
    width: 850px;
    left: calc(50% - 427px);
}




/*--------------- Carousel Four --*/
#routeOptScreen3Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#routeOptScreen3Carousel.fourSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen3Carousel.fourSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen3Carousel.fourSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen3Carousel.fourSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen3Carousel #fourSlide1 .carousel_prev, 
#routeOptScreen3Carousel #fourSlide4 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_four {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_four li > * {
    position: absolute;
}
.carousel_four li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_four li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    line-height: 2rem;
    position: fixed;
}
.carousel_four .sectionLowerDescription {
    top: 1100px;
    color: var(--brand-black);
    font-size: 2rem;
    text-align: center;
    width: 100%;
}

div#routeOptScreen3Carousel .carousel .carousel__navigation {
    bottom: 145px;
}
div#routeOptScreen3Carousel .carousel .carousel_prev, 
div#routeOptScreen3Carousel .carousel .carousel_next {
    width: 47px !important;
    height: 69px !important;
    margin-top: 461px !important;
}



/*--------------- Carousel Five --*/
#routeOptScreen4Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#routeOptScreen4Carousel.fiveSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen4Carousel.fiveSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen4Carousel #fiveSlide1 .carousel_prev, 
#routeOptScreen4Carousel #fiveSlide2 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_five {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_five li > * {
    position: absolute;
}
.carousel_five li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_five li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    line-height: 2rem;
    position: fixed;
}
.carousel_five .sectionLowerDescription {
    top: 1095px;
    color: var(--brand-black);
    font-size: 2rem;
    text-align: center;
    width: 100%;
    margin: 0;
}

div#routeOptScreen4Carousel .carousel .carousel__navigation {
    /*bottom: 100px;*/
    bottom: 145px;
}
div#routeOptScreen4Carousel .carousel .carousel_prev, 
div#routeOptScreen4Carousel .carousel .carousel_next {
    width: 47px !important;
    height: 69px !important;
    margin-top: 461px !important;
}



/*--------------- Carousel Six --*/
#routeOptScreen8Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#routeOptScreen7Carousel.sixSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen5Carousel.sixSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen5Carousel.sixSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen5Carousel.sixSlide1 ol.carousel__navigation-list li:nth-child(4) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen5Carousel.sixSlide2 ol.carousel__navigation-list li:nth-child(5) a  {
    background-color: var(--carousel-blue);
}

#routeOptScreen5Carousel #sixSlide1 .carousel_prev, 
#routeOptScreen5Carousel #sixSlide3 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_six {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_six li > * {
    position: absolute;
}
.carousel_six li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_six li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    line-height: 2rem;
    position: fixed;
}
.carousel_six .sectionLowerDescription {
    top: 1100px;
    color: var(--brand-black);
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
.carousel_six li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 427px);
}
.carousel_six li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 427px);
}
div#routeOptScreen5Carousel .carousel .carousel__navigation {
    bottom: 145px;
}
div#routeOptScreen8Carousel .carousel .carousel_prev, 
div#routeOptScreen8Carousel .carousel .carousel_next {
    width: 47px !important;
    height: 69px !important;
    margin-top: 461px !important;
}
div#routeOptScreen8Carousel .carousel_six #sixSlide3 > img {
    width: 425px;
    left: calc(50% - 212.5px);
}



/*--------------- Carousel Seven --*/
#routeOptScreen6Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#routeOptScreen6Carousel.sevenSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen6Carousel.sevenSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen6Carousel.sevenSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen6Carousel.sevenSlide4 ol.carousel__navigation-list li:nth-child(4) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen6Carousel #sevenSlide1 .carousel_prev, 
#routeOptScreen6Carousel #sevenSlide4 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_seven {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_seven li > * {
    position: absolute;
}
.carousel_seven li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_seven li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    line-height: 2rem;
    position: fixed;
}
.carousel_seven .sectionLowerDescription {
    top: 1100px;
    color: var(--brand-black);
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
.carousel_seven li > img {
    top: 174px;
    width: 860px;
    left: calc(50% - 431px);
}
div#routeOptScreen9Carousel .carousel .carousel__navigation {
    bottom: 145px;
}
div#routeOptScreen9Carousel .carousel .carousel_prev, 
div#routeOptScreen9Carousel .carousel .carousel_next {
    width: 47px !important;
    height: 69px !important;
    margin-top: 461px !important;
}



/*--------------- Carousel Eight --*/
#routeOptScreen7Carousel ol.carousel__navigation-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}
#routeOptScreen7Carousel.eightSlide1 ol.carousel__navigation-list li:nth-child(1) a {
    background-color: var(--carousel-blue);
}
#routeOptScreen7Carousel.eightSlide2 ol.carousel__navigation-list li:nth-child(2) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen7Carousel.eightSlide3 ol.carousel__navigation-list li:nth-child(3) a  {
    background-color: var(--carousel-blue);
}
#routeOptScreen7Carousel #eightSlide1 .carousel_prev, 
#routeOptScreen7Carousel #eightSlide3 .carousel_next {
    display: none !important;
/*    opacity: 0.5;*/
    pointer-events: none;
}
.carousel .carousel_eight {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
}
.carousel_eight li > * {
    position: absolute;
}
.carousel_eight li .sectionHeader {
    width: 100%;
    text-align: center;
    color: var(--brand-light-blue);
    font-size: var(--store-assistant-section-header-fs);
    font-weight: bold;
    font-family: var(--bold-font);
    top: 155px;
    position: fixed;
}
.carousel_eight li .sectionDescription {
    width: 100%;
    text-align: center;
    color: var(--brand-black);
    font-size: var(--store-assistant-section-desc-fs);
    top: 225px;
    line-height: 2rem;
    position: fixed;
}
.carousel_eight .sectionLowerDescription {
    top: 1100px;
    color: var(--brand-black);
    font-size: 2rem;
    text-align: center;
    width: 100%;
    height: 76px;
    line-height: 2.1rem;
}
.carousel_eight li > img {
    top: 174px;
    width: 850px;
    left: calc(50% - 427px);
}

div#routeOptScreen7Carousel .carousel .carousel__navigation {
    bottom: 145px;
}
div#routeOptScreen7Carousel .carousel .carousel_prev, 
div#routeOptScreen7Carousel .carousel .carousel_next {
    width: 47px !important;
    height: 69px !important;
    margin-top: 461px !important;
}




/*--------------- Animations --*/
.startTextFadeIn1 {
    animation: startTextFadeIn1 15s ease-in-out infinite, startTextSlideIn1 15s ease-in-out infinite;
    -webkit-animation: startTextFadeIn1 15s ease-in-out infinite, startTextSlideIn1 15s ease-in-out infinite;
}
.startTextFadeIn2 {
    animation: startTextFadeIn2 15s ease-in-out infinite, startTextSlideIn2 15s ease-in-out infinite;
    -webkit-animation: startTextFadeIn2 15s ease-in-out infinite, startTextSlideIn2 15s ease-in-out infinite;
}
.startTextFadeIn3 {
    animation: startTextFadeIn3 15s ease-in-out infinite, pulse 15s ease-in-out infinite;
    -webkit-animation: startTextFadeIn3 15s ease-in-out infinite, pulse 15s ease-in-out infinite;
}
.startImgSlideIn1 {
    animation: startImgSlideIn1 15s ease-in-out infinite;
    -webkit-animation: startImgSlideIn1 15s ease-in-out infinite;
}
.pageFadeIn {
    /*animation: pageFadeIn 1s ease-in-out;
    -webkit-animation: pageFadeIn 1s ease-in-out;*/
    pointer-events: none;
}


/*Learn More Button Pulse & Slide in*/
@-webkit-keyframes pulse  {
    0%, 98%, 100% {
        transform: scale(1) translateX(-110%);
	}
    8%, 95% {
        transform: translateX(0);
    }
    12%, 33%, 54%, 75%  {
        transform: scale(1);
    }
    22.5%, 43.5%, 64.5%, 85.5% {
        transform: scale(1.1);
    }
    96% {
        transform: scale(1);
    }

}
@keyframes pulse {
    0%, 98%, 100% {
        transform: scale(1) translateX(-110%);
	}
    8%, 95% {
        transform: translateX(0);
    }
    12%, 33%, 54%, 75%  {
        transform: scale(1);
    }
    22.5%, 43.5%, 64.5%, 85.5% {
        transform: scale(1.1);
    }
    96% {
        transform: scale(1);
    }
}


/*Home Text Fade In*/
@-webkit-keyframes startTextFadeIn1 {
    0% {
        opacity: 0;
	}
    8%{
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes startTextFadeIn1 {
    0% {
        opacity: 0;
	}
    8% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


@-webkit-keyframes startTextFadeIn2 {
    0% {
        opacity: 0;
	}
    10%{
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes startTextFadeIn2 {
    0% {
        opacity: 0;
	}
    10%{
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


@-webkit-keyframes startTextFadeIn3 {
    0% {
        opacity: 0;
	}
    12%{
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes startTextFadeIn3 {
    0% {
        opacity: 0;
	}
    12%{
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/*Home Text Slide In*/
@-webkit-keyframes startTextSlideIn1 {
    0% {
        transform: translateX(-110%);
	}
    4%{
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}
@keyframes startTextSlideIn1 {
    0% {
        transform: translateX(-110%);
	}
    4% {
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}


@-webkit-keyframes startTextSlideIn2 {
    0% {
        transform: translateX(-110%);
	}
    6%{
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}
@keyframes startTextSlideIn2 {
    0% {
        transform: translateX(-110%);
	}
    6%{
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}


/*Learn More Button Slide in without pulse - need to update class*/
/*
@-webkit-keyframes startTextSlideIn3 {
    0% {
        transform: translateX(-110%);
	}
    8%{
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}
@keyframes startTextSlideIn3 {
    0% {
        transform: translateX(-110%);
	}
    8%{
        transform: translateX(0);
    }
    95% {
        transform: translateX(0);
    }
    98% { 
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-110%);
    }
}
*/


/*Home Image Slide In*/
@-webkit-keyframes startImgSlideIn1 {
    0% {
        transform: translateY(170%);
	}
    4%{
        transform: translateY(0);
    }
    95% {
        transform: translateY(0);
    }
    98% { 
        transform: translateY(170%);
    }
    100% {
        transform: translateY(170%);
    }
}
@keyframes startImgSlideIn1 {
    0% {
        transform: translateY(170%);
	}
    4%{
        transform: translateY(0);
    }
    95% {
        transform: translateY(0);
    }
    98% { 
        transform: translateY(170%);
    }
    100% {
        transform: translateY(170%);
    }
}





/*Page Transition*/ 
@-webkit-keyframes pageFadeIn {
    0% {
        opacity: 0;
	}
    98% { 
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes pageFadeIn {
    0% {
        opacity: 0;
	}
    98% { 
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}




/*Testing*/
/*
body.pageStart {
    background-image: url('../assets/screen_1/start_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageOne {
    background-image: url('../assets/store_assist/examples/screen_2_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageTwo {
    background-image: url('../assets/store_assist/examples/screen_3_ex_v2.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageThree {
    background-image: url('../assets/store_assist/examples/screen_4_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageFive {
    background-image: url('../assets/me_at_wal/examples/screen_2_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageSix {
    background-image: url('../assets/me_at_wal/examples/screen_3_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageEight {
    background-image: url('../assets/me_at_wal/examples/screen_5_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
body.pageTen {
    background-image: url('../assets/me_at_wal/examples/screen_7_ex.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.tabContainer {
    border: 1px solid red;
}
*/


.modal-header{
    justify-content: center!important;
    padding: 30px 0px 15px 0px;
    width: 88%;
    margin: auto;
  }
  .modal-title {
    margin-top: 20px;
    font-size: 26px;
  }
  
  .modal-body p {
    text-align: center;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 0;
  }
  
  button.btn.btn-secondary,button.btn.btn-primary {
    border-radius: 32px;
    width: 150px;
    height: 40px;
  }
  button.btn.btn-secondary {
    margin-right: 10px;
  }
  .modal-footer {
    margin: auto;
    border-top: none!important;
    margin-bottom: 20px;
  }
  button.btn.btn-secondary {
    background-color: #0071DC!important;
    border: none;
  }
  button.btn.btn-primary{
    background-color: #FFF!important;
    color: #000;
    font-weight: bold;
  }

  /* NEW STYLES */
.touchToStartContainer img {
    width: 100%;
}
img.bottom-start {
    position: absolute;
    bottom: 0;
    width: 100%;
}
img.video-ladning, img.header-title {
    width: 100%;
}
img.video-ladning{
    margin-top: 80px;
}
p.bottom-slide-text {
    text-align: center;
    width: 100%;
    bottom: 80px;
    font-size: 32px;
    color: black;
    margin-bottom: 0px;
}
img.bottom-buttons {
    margin-top: -4%;
}
div#v-pills-tab {
    position: absolute;
}

button#v-pills-page-two-tab {
    position: absolute;
    top: 112px;
    border-radius: 50%;
    left: 97px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-three-tab {
    position: absolute;
    top: 112px;
    border-radius: 50%;
    left: 285px;
    background: transparent !important;
    width: 122px;
    height: 130px;
}
button#v-pills-page-four-tab {
    position: absolute;
    top: 112px;
    border-radius: 50%;
    left: 476px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-five-tab {
    position: absolute;
    top: 112px;
    border-radius: 50%;
    left: 665px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-six-tab {
    position: absolute;
    top: 112px;
    border-radius: 50%;
    left: 847px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
/* MENU HIDE AND SHOW - STORE ASSIST */

/*.landing-menu-buttons,*/ .menu-buttons-screen-1,
.menu-buttons-screen-2, .menu-buttons-screen-3,
.menu-buttons-screen-4, .menu-buttons-screen-5,
.menu-buttons-screen-6, .menu-buttons-screen-7,
.menu-buttons-screen-8, .menu-buttons-screen-9, .menu-buttons-screen-10 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 1080px;
}
body.pageOne .landing-menu-buttons{
    display: block!important;
}
/* SCREEN 2 */
body.pageTwo .menu-buttons-screen-1{
    display: block!important;
}
/* SCREEN 2 */
body.pageThree .menu-buttons-screen-2{
    display: block!important;
}
/* SCREEN 3 */
body.pageFour .menu-buttons-screen-3{
    display: block!important;
}
/* SCREEN 4 */
body.pageFive .menu-buttons-screen-4{
    display: block!important;
}
/* SCREEN 5 */
body.pageSix .menu-buttons-screen-5{
    display: block!important;
}

body.pageSeven .menu-buttons-screen-6{
    display: block!important;
}
body.pageEight .menu-buttons-screen-7{
    display: block!important;
}
body.pageNine .menu-buttons-screen-8{
    display: block!important;
}
body.pageTen .menu-buttons-screen-9{
    display: block!important;
}
body.pageEleven .menu-buttons-screen-10{
    display: block!important;
}

button.btn.btnExit {
    position: absolute;
    top: 418px;
    left: 435px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    z-index: 9;
}
button.btn.btnPrevious{
    position: absolute;
    top: 418px;
    left: 460px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
button.btn.btnNext {
    position: absolute;
    top: 418px;
    left: 545px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
button.btn.btnStoreInfo{
    position: absolute;
    top: 418px;
    left: 545px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    z-index: 9;
}
button.btn.btnStoreInfo2{
    position: absolute;
    top: 418px;
    left: 545px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    z-index: 9;
}
body.pageSix button.btn.btnNext{
    display: none!important;
}
.info-modal, .info-modal2 {
    position: absolute;
    top: 0px;
    z-index: 999;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);

}
.info-modal img{
    width: 101%;
}
.info-modal2 img{
    width: 101%;
}
body.pageOne {
    /* background-image: url('assets/store_assist/example.png')!important; */
    background-repeat: no-repeat;
    background-size: cover;
}
button#v-pills-page-eight-tab{
    position: absolute;
    top: 135px;
    border-radius: 50%;
    left: 152px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-nine-tab{
    position: absolute;
    top: 135px;
    border-radius: 50%;
    left: 367px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-ten-tab{
    position: absolute;
    top: 135px;
    border-radius: 50%;
    left: 582px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
button#v-pills-page-eleven-tab {
    position: absolute;
    top: 135px;
    border-radius: 50%;
    left: 800px;
    background: transparent !important;
    width: 130px;
    height: 130px;
}
body.pageSeven, body.pageEight, body.pageNine, body.pageTen, body.pageEleven{
    background-color: #EEF6FF!important;
}

body.pageEight .carousel .carousel_next, body.pageNine .carousel .carousel_next, body.pageTen .carousel .carousel_next, body.pageEleven .carousel .carousel_next{
    right: 25px;
}
body.pageEight .carousel .carousel_prev, body.pageNine .carousel .carousel_prev, body.pageTen .carousel .carousel_prev, body.pageEleven .carousel .carousel_prev{
    left: 25px;
}

.touchToStartContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    gap: 15%;
}
img.button-start {
    width: 12.5%;
    background: transparent;
    padding: 25px 39px;
    /* border: 1px solid black; */
    border-radius: 43%;
   /* animation: pulse 1s infinite; */
}
img.start-btn-text {
    width: 32.5%;
}



@keyframes pulse {
	0% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        border-radius: 7%;
	}

	70% {
		/* transform: scale(1); */
		box-shadow: 0 0 0 28px rgba(255, 105, 180, 0);
    border-radius: 7%;
	}

	100% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.0);
    border-radius: 7%;
	}
}

video#store-video, video#route-video {
    width: 920px;
    height: 800px;
    margin-top: -50px;
    margin-left: 90px;
}
.btnStoreInfo, .btnStoreInfo2{
    display: none!important;
}
body.pageOne .btnStoreInfo,
body.pageTwo .btnStoreInfo,
body.pageThree .btnStoreInfo,
body.pageFour .btnStoreInfo,
body.pageFive .btnStoreInfo,
body.pageSix .btnStoreInfo,
body.pageSeven .btnStoreInfo2,
body.pageEight .btnStoreInfo2,
body.pageNine .btnStoreInfo2,
body.pageTen .btnStoreInfo2,
body.pageEleven .btnStoreInfo2{
    display: block!important;
}


img.cloud-s {
    opacity: 0.3;
    width: 13%;
    position: absolute;
    bottom: 30%;
    left: 64%;
    animation: cloud-s-animate 60s linear infinite; 
}
img.cloud-m {
    opacity: 0.3;
    width: 18.3%;
    position: absolute;
    bottom: 26.8%;
    left: 9%;
    animation: cloud-m-animate 60s linear infinite; 
}
img.cloud-l {
    opacity: 0.3;
    width: 27%;
    position: absolute;
    bottom: 22%;
    left: 28%;
    animation: cloud-l-animate 60s linear infinite 
    
}
img.cloud-xl {
    opacity: 0.3;
    width: 37%;;
    position: absolute;
    bottom: 21.1%;
    left: 83.5%;
    animation: cloud-xl-animate 60s linear infinite 

}


@keyframes cloud-s-animate {
	0% {
        left: 64%;
	}

    29%{
        opacity: 1;
    }
	30% {
        left: 105%;
        opacity: 0;
	}

    35%{
        left: -26%;
        opacity: 0;
    }
    36%{
        opacity: 1;
    }

	100% {
        left: 64%;
	}
}

@keyframes cloud-m-animate {
	0% {
        left: 9%;
	}
    69%{
        opacity: 1;
    }
    70%{
        left: 105%;
        opacity: 0;
    }
    75%{
        left: -28%;
        opacity: 0;
    }
    76%{
        opacity: 1;
    }
	100% {
        left: 9%;
	}
}

@keyframes cloud-l-animate {

	0% {
        left: 28%;
	}

    54%{
        opacity: 1;
    }
	55% {
        left: 105%;
        opacity: 0;
	}

    60%{
        left: -29%;
        opacity: 0;
    }
    61%{
        opacity: 1;
    }

	100% {
        left: 28%;
	}
}

@keyframes cloud-xl-animate {

	0% {
        left: 83.5%;
	}

    14%{
        opacity: 1;
    }
	15% {
        left: 105%;
        opacity: 0;
	}

    17%{
        left: -37%;
        opacity: 0;
    }
    18%{
        opacity: 1;
    }

	100% {
        left: 83.5%;
	}
}
.buildings-verlay{
    height: 380px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent, rgba(6, 242, 123, 0.3));
}

.mask1 {
    top: 325px;
    -webkit-mask-image: url(../assets/Vector.png) !important;
    mask-image: url(../assets/Vector.png) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat;
    position: absolute; 
  }

  .stage {
    animation: animateBg 10s linear infinite;
    background-image: linear-gradient(-45deg,#054A91, #52A2FF,#06F27B, #52A2FF, #054A91 ,#52A2FF) ;
    background-size: 100% 1100%;
    height: 500px;
    width: 100%;
  }
  @keyframes animateBg {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
  }
  @keyframes home-text
   {
    0%{
        top: -330px;
    }

    15%{
        top: 330px;
    }
    100%{
        top: 330px;
    }
  }
  span.startButton.storeAssist {
    width: 40%;
    position: absolute;
    left: 10%;
}

  @keyframes home-btn-store
  {
    0%{
        left: -500px;
    }
    13%{
        left: 125px;
    }
    15%{
        left: 100px;
    }
    100%{
        left: 100px;
    }
   
 }
 span.startButton.meAtWalmart {
    width: 40%;
    position: absolute;
    right: 7%;
}

span.startButton.retailMedia {
    width: 40%;
    position: absolute;
    right: 29%;
    top: 48%;
}
 @keyframes home-btn-route
 {
    0%{
        right: -500px;
    }
    13%{
        right: 125px;
    }
    15%{
        right: 100px;
    }
    100%{
        right: 100px;
    }
  
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    border-color: white!important;
}

img.elipse {
    top: 223px !important;
    z-index: 1;
}
img.screenshot {
    width: 304px !important;
    top: 128px !important;
    z-index: 2;
    left: calc(50% - 140px) !important;
    background-color: #FFF;
}

.carousel_three li > img.screenshot2 {
    background-color: transparent;
    width: 440px !important;
    left: calc(50% - 205px) !important;
    z-index: 2;
}
img.center-card {
    position: absolute;
    z-index: 99999;
    top: 328px;
    width: 689px;
    left: 202px;
}

img.md-exit-icon {
    top: 0;
    position: absolute;
    width: 30px;
    right: 188px;
    top: 272px;
}

img.r {
    left: calc(50% - 420px) !important;
}

img.t {
    left: calc(50% - 426px) !important;
    width: 855px !important;
}
img.rg {
    left: calc(50% - 422px) !important;
}
img.r1 {
    left: calc(50% - 422px) !important;
}
img.tl {
    left: calc(50% - 427px) !important;
    width: 855px !important;
}

.car1{
    position: absolute;
    bottom: 2%;
    left: 64%;
    animation: cloud-s-animate 20s linear infinite; 
}
.car2{
    position: absolute;
    bottom: 1.8%;
    left: 9%;
    opacity: 1;
    animation: cloud-m-animate 20s linear infinite; 
}
.h-menu {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}
body.pageThirtyOne .h-menu {
    display: none;
}
body.pageThirtyOne .tabsHeaderStoreAssist, .pageThirtyOne .tabsHeaderWalmartTrack{
    display: none;
}
body.pageThirtyOne #v-pills-page-thirtyOne{
    height: 100vh;
    width: 1080px;
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;
    align-items: center;
    background: linear-gradient(179.99deg, #054A91 23.67%, #52A2FF 100%);
}
body.pageThirtyOne .mask1{
    display: none!important;
}
#v-pills-page-thirtyOne h1{
    margin: 10% 0px;
    text-align: center;
}
body.pageThirtyOne #v-pills-page-thirtyOne .lockOptions{
    margin-top: 30%;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
body.pageThirtyOne .storeALockBtn{
    width: 60%;
    height: 20%;
    background: #fff;
    font-family: 'boldFont';
    text-align: center;
    font-size: 50px;
    border-radius: 16px;
    color: #054A91;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.pageThirtyOne .routOptLockBtn{
    width: 60%;
    height: 20%;
    background: #fff;
    font-family: 'boldFont';
    text-align: center;
    font-size: 50px;
    border-radius: 16px;
    color: #054A91;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.pageThirtyOne .retailMLockBtn{
    width: 60%;
    height: 20%;
    background: grey;
    text-align: center;
    font-size: 30px;
}
body.pageThirtyOne .resetModule{
    width: 30%;
    height: 10%;
    font-family: 'boldFont';
    background: #fff;
    text-align: center;
    font-size: 40px;
    border-radius: 16px;
    color: #054A91;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}
.retailMedia{
    display: none;
}
button#v-pills-page-thirtyOne-tab {
    display: none;
}