/* CSS */

body {
    line-height: 1;
}

.full-body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    background-color: black;
    height: 100vh;
    opacity: 1; /* Here we set body to 0, then 1 on main function to add a smooth fadein */
    /*background-size: cover;*/
    width: 2880vw;
    overflow: hidden;
    z-index: 0;
}

.opacityZero {
    opacity: 0;
}

.opacityOne {
    opacity: 1;
}

.transition {
    transition: 1.5s all ease-in-out;
}

.transition-fast {
    transition: 1s all ease-in-out;
}

.transition-slow {
    transition: 2.5s all ease-in-out;
}

.transition-menu {
    transition: 1.5s all ease;
}

/** Navigation **/

a {
    cursor: pointer;
}

/** Main Wrapper **/

#main-wrapper {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    background-image: url('../assets/00-HOME/images/BKGND-smart-venues.png');
    background-size: cover;
    transform-origin: top left;
    z-index: 0;
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    background: url('../assets/00-HOME/images/BKGND-smart-venues.png') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.4;
    z-index: 0;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url('../assets/BKGND-Video_PosterImage.png') no-repeat;
    background-size: cover;
    /*opacity: 0.34;*/
}

@media screen and (max-device-width: 800px) {
    html {
        background: url('../assets/BKGND-Video_PosterImage.png') #000 no-repeat center center fixed;
    }

    #bgvid {
        display: none;
    }
}

footer {
    transition: 2s;
    z-index: 10;
}

#copy-text {
    top: 1563px;
    left: 32px;
    width: 426px;
    height: 31px;
    text-align: center;
    float: left;
    font: normal normal normal 17px/18px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: relative;
    z-index: 999;
    opacity: .7;
}

/* HOME START */

#home a {
    cursor: pointer;
}

#home .icon {
    top: 680px;
    left: 523px;
    width: 247px;
    height: 195px;
    background: transparent url('../assets/00-HOME/images/sv-icon.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#home .title {
    top: 680px;
    left: 798px;
    width: 778px;
    height: 140px;
    color: #FFFFFF;
    font: normal normal normal 120px/110px HelveticaNeueMed;
    position: absolute;
    z-index: 1;
}

#home .sub-title {
    top: 800px;
    left: 802px;
    width: 578px;
    height: 47px;
    color: #F9F7D1;
    font: normal normal normal 40px/46px HelveticaNeueLt;
    position: absolute;
    z-index: 1;
}

/* HOME END */

/* MAIN MENU START */
/* MENU 1 */
#mainMenu .icon-bar-1 {
    top: -187px;
    left: 487px;
    width: 287px;
    height: 773px;
    background: transparent url('../assets/mainMenu/bar-enhancing.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .icon-1 {
    top: 247px;
    left: 435px;
    width: 391px;
    height: 391px;
    background: transparent url('../assets/mainMenu/icon-enhancing.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#mainMenu .card-1 {
    top: 516px;
    left: 355px;
    width: 551px;
    height: 879px;
    background: transparent url('../assets/mainMenu/pic-enhancing.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .box-1 {
    top: 816px;
    left: 260px;
    width: 741px;
    height: 207px;
    background: transparent url('../assets/mainMenu/box-enhancing.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
    
    /* background: rgba(85, 142, 143, 0.79);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    border: 1px solid rgba(85, 142, 143, 0.11); */
}

#mainMenu .text-1 {
    top: 886px;
    left: 363px;
    width: 536px;
    height: 53px;
    text-align: center;
    font: normal normal normal 45px/45px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

/* MENU 2 */

#mainMenu .icon-bar-2 {
    top: 1012px;
    left: 1293px;
    width: 287px;
    height: 773px;
    background: transparent url('../assets/mainMenu/bar-data.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .icon-2 {
    top: 963px;
    left: 1241px;
    width: 391px;
    height: 391px;
    background: transparent url('../assets/mainMenu/icon-data.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#mainMenu .card-2 {
    top: 201px;
    left: 1161px;
    width: 551px;
    height: 878px;
    background: transparent url('../assets/mainMenu/pic-data.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .box-2 {
    top: 569px;
    left: 1071px;
    width: 742px;
    height: 207px;
    background: transparent url('../assets/mainMenu/box-data.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .text-2 {
    top: 635px;
    left: 1181px;
    width: 522px;
    height: 53px;
    text-align: center;
    font: normal normal normal 45px/45px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

/* MENU 3 */

#mainMenu .icon-bar-3 {
    top: -171px;
    left: 2109px;
    width: 287px;
    height: 772px;
    background: transparent url('../assets/mainMenu/bar-how.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .icon-3 {
    top: 264px;
    left: 2057px;
    width: 391px;
    height: 391px;
    background: transparent url('../assets/mainMenu/icon-how.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#mainMenu .card-3 {
    top: 532px;
    left: 1977px;
    width: 551px;
    height: 879px;
    background: transparent url('../assets/mainMenu/pic-how.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .box-3 {
    top: 816px;
    left: 1882px;
    width: 742px;
    height: 207px;
    background: transparent url('../assets/mainMenu/box-how.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#mainMenu .text-3 {
    top: 882px;
    left: 2034px;
    width: 422px;
    height: 53px;
    text-align: center;
    font: normal normal normal 45px/45px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

/* MAIN MENU END */

/* Enhancing Fan Experience & Data Analytics Dashboard */

#menu-1 .photo-right {
    top: 0px;
    left: 1777px;
    width: 1103px;
    height: 1620px;
    background: transparent url('../assets/fanXp/photo-right.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 2;
}

#menu-2 .photo-right {
    top: 0px;
    left: 1777px;
    width: 1103px;
    height: 1620px;
    background: transparent url('../assets/dataAnalytics/photo-right.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 2;
}

#menu-1 .photo-line,
#menu-2 .photo-line {
    top: -103px;
    left: 1776px;
    width: 516px;
    height: 1723px;
    background: transparent url('../assets/fanXp/photo-line.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 2;
}

#menu-1 .header-frame,
#menu-2 .header-frame {
    top: 488px;
    left: 1849px;
    width: 581px;
    height: 182px;
    background: transparent url('../assets/fanXp/header-frame-fan-experience.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#menu-1 .header,
#menu-2 .header {
    /* top: 533px; */
    top: 518px;
    left: 1913px;
    width: 458px;
    height: 77px;
    text-align: center;
    font: normal normal normal 66px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 4;
}

#menu-1 .rectangle-1,
#menu-2 .rectangle-1 {
    top: -241.05078125px;
    left: 339px;
    width: 637px;
    height: 1343px;
    /* transform: matrix(0.97, 0.26, -0.26, 0.97, 0, 0); */
    background: transparent url('../assets/fanXp/Rectangle-experience.png') 0% 0% no-repeat padding-box;
    /* border-radius: 155px; */
    position: absolute;
    z-index: 2;
}

#menu-1 .rectangle-2,
#menu-2 .rectangle-2 {
    top: -235.609375px;
    left: 800px;
    width: 635px;
    height: 1338px;
    /* transform: matrix(0.97, 0.26, -0.26, 0.97, 0, 0); */
    background: transparent url('../assets/fanXp/Rectangle-demo.png') 0% 0% no-repeat padding-box;
    /* border-radius: 155px; */
    position: absolute;
    z-index: 2;
}

#menu-1 .rectangle-3,
#menu-2 .rectangle-3 {
    top: -225.984375px;
    left: 1254px;
    width: 633px;
    height: 1327px;
    /* transform: matrix(0.97, 0.26, -0.26, 0.97, 0, 0); */
    background: transparent url('../assets/fanXp/rectangle-success.png') 0% 0% no-repeat padding-box;
    position: absolute;
    /* border-radius: 155px; */
    z-index: 2;
}

#menu-1 .circle-1,
#menu-2 .circle-1 {
    top: 730px;
    left: 341px;
    width: 370px;
    height: 369px;
    background: transparent url('../assets/fanXp/circle-experience.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-1 .circle-2,
#menu-2 .circle-2 {
    top: 730px;
    left: 801px;
    width: 370px;
    height: 370px;
    background: transparent url('../assets/fanXp/circle-demo.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-1 .circle-3,
#menu-2 .circle-3 {
    top: 730px;
    left: 1260px;
    width: 370px;
    height: 370px;
    background: transparent url('../assets/fanXp/circle-success.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-1 .text-1,
#menu-2 .text-1 {
    top: 892px;
    left: 426px;
    width: 200px;
    height: 47px;
    text-align: center;
    font: normal normal normal 45px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#menu-1 .text-2,
#menu-2 .text-2 {
    top: 892px;
    left: 934px;
    width: 106px;
    height: 47px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#menu-1 .text-3,
#menu-2 .text-3 {
    top: 874px;
    left: 1371px;
    width: 152px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#menu-1 .line-1,
#menu-2 .line-1 {
    top: 1037px;
    left: 314px;
    width: 310px;
    height: 590px;
    background: transparent url('../assets/fanXp/line-bottom-experience.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-1 .line-2,
#menu-2 .line-2 {
    top: 1037px;
    left: 778px;
    width: 310px;
    height: 590px;
    background: transparent url('../assets/fanXp/line-bottom-demo.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-1 .line-3,
#menu-2 .line-3 {
    top: 1032px;
    left: 1228px;
    width: 310px;
    height: 590px;
    background: transparent url('../assets/fanXp/line-bottom-success.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}


/* How are we helping? */
#menu-3 .photo-1 {
    top: 478px;
    left: 435px;
    width: 621px;
    height: 1142px;
    background: transparent url('../assets/howHelp/photo-how.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 2;
}

#menu-3 .circle-1 {
    top: 544px;
    left: 489px;
    width: 517px;
    height: 517px;
    background: transparent url('../assets/howHelp/circle-how.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#menu-3 .text-1 {
    top: 750px;
    left: 623px;
    width: 250px;
    height: 120px;
    text-align: center;
    font: normal normal normal 55px/56px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#menu-3 .line-1 {
    top: 0px;
    left: 704px;
    width: 89px;
    height: 557px;
    background: transparent url('../assets/howHelp/line-how.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#menu-3 .photo-2 {
    top: 478px;
    left: 1130px;
    width: 621px;
    height: 1142px;
    background: transparent url('../assets/howHelp/photo-what.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#menu-3 .circle-2 {
    top: 544px;
    left: 1184px;
    width: 517px;
    height: 517px;
    background: transparent url('../assets/howHelp/circle-what.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-3 .text-2 {
    top: 750px;
    left: 1287px;
    width: 312px;
    height: 120px;
    text-align: center;
    font: normal normal normal 55px/56px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#menu-3 .line-2 {
    top: 0px;
    left: 1399px;
    width: 89px;
    height: 557px;
    background: transparent url('../assets/howHelp/line-what.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#menu-3 .photo-3 {
    top: 478px;
    left: 1820px;
    width: 621px;
    height: 1142px;
    background: transparent url('../assets/howHelp/photo-where.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 2;
}

#menu-3 .circle-3 {
    top: 544px;
    left: 1874px;
    width: 517px;
    height: 517px;
    background: transparent url('../assets/howHelp/circle-where.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#menu-3 .text-3 {
    top: 750px;
    left: 2014px;
    width: 238px;
    height: 120px;
    text-align: center;
    font: normal normal normal 55px/56px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#menu-3 .line-3 {
    top: 0px;
    left: 2089px;
    width: 89px;
    height: 557px;
    background: transparent url('../assets/howHelp/line-where.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}


/* FAN EXPERIENCE EXPERIENCE (Main Page 1) */
#main-1 .dropdown-left {
    top: 0px;
    left: 2591px;
    width: 131px;
    height: 221px;
    background: transparent url('../assets/fanXpMain/drop-down-3.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-1 .dropdown-right {
    top: -20px;
    left: 2736px;
    width: 131px;
    height: 299px;
    background: transparent url('../assets/fanXpMain/drop-down-11.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-1 .photo-main {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/fanXpMain/photo-main-page.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.55; */
}

#main-1 .circle-1 {
    top: 644px;
    left: 534px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/fanXpMain/header-traffic.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 6;
}

/* #main-1 .text-1 {
    top: 806px;
    left: 644px;
    width: 186px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
} */

#main-1 .circle-2 {
    top: 644px;
    left: 1003px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/fanXpMain/header-wayfinding.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 6;
}

/* #main-1 .text-2 {
    top: 824px;
    left: 1107px;
    width: 198px;
    height: 47px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
} */

#main-1 .circle-3 {
    top: 644px;
    left: 1472px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/fanXpMain/header-parking.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 6;
}

/* #main-1 .text-3 {
    top: 819px;
    left: 1607px;
    width: 136px;
    height: 47px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
} */

#main-1 .circle-4 {
    top: 644px;
    left: 1941px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/fanXpMain/header-new-experiences.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 6;
}

/* #main-1 .text-4 {
    top: 799px;
    left: 2038px;
    width: 220px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
} */


#main-1 .icon-1 {
    top: 604px;
    left: 494px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/fanXpMain/header-traffic-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-1 .popup-1 {
    top: 251px; 
    /* left: 747px; */
    left: 726px;
    width: 937px;
    height: 311px;
    background: transparent url('../assets/fanXpMain/pop-up-traffic.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-1 .heading-1 {
    top: 295px;
    left: 985px;
    width: 476px;
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 4;
}

#main-1 .desc-1 {
    top: 342px;
    left: 1036px;
    width: 513px;
    height: 71px;
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-1 .photo-1 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/fanXpMain/photo-traffic.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.7; */
}

#main-1 .icon-2 {
    top: 605px;
    left: 964px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/fanXpMain/header-wayfinding-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-1 .popup-2 {
    top: 251px; 
    left: 1197px;
    width: 937px;
    height: 311px;
    background: transparent url('../assets/fanXpMain/pop-up-wayfinding.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-1 .heading-2 {
    top: 296px;
    left: 1332px;
    width: 476px;
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 4;
}

#main-1 .desc-2 {
    top: 343px; 
    left: 1383px; 
    width: 513px; 
    height: 71px; 
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-1 .photo-2 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/fanXpMain/photo-wayfinding.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.9; */
}

#main-1 .icon-3 {
    top: 604px;
    left: 1434px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/fanXpMain/header-parking-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-1 .popup-3 {
    top: 251px; 
    left: 876px;
    width: 817px;
    height: 311px;
    background: transparent url('../assets/fanXpMain/pop-up-parking.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-1 .heading-3 {
    top: 295px;
    left: 965px; 
    width: 476px; 
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 4;
}

#main-1 .desc-3 {
    top: 342px; 
    left: 1016px; 
    width: 457px; 
    height: 71px; 
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-1 .photo-3 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/fanXpMain/photo-parking.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.8; */
}

#main-1 .icon-4 {
    top: 604px;
    left: 1903px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/fanXpMain/header-new-experiences-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-1 .popup-4 {
    top: 251px; 
    left: 1226px;
    width: 937px;
    height: 311px;
    background: transparent url('../assets/fanXpMain/pop-up-new-experiences.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-1 .heading-4 {
    top: 295px;
    left: 1325px; 
    width: 476px; 
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 4;
}

#main-1 .desc-4 {
    top: 342px; 
    left: 1376px; 
    width: 513px; 
    height: 71px; 
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-1 .photo-4 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/fanXpMain/photo-experiences.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.8; */
}


/* FAN EXPERIENCE DEMO (Main Page 2) */

#main-2 .frame-video,
#main-5 .frame-video {
    top: 95px; 
    left: 223px; 
    width: 2469px; 
    height: 1506px; 
    background: transparent url('../assets/fanXpDemo/video-screen.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-2 .video,
#main-5 .video {
    top: 151px; 
    left: 272px; 
    width: 2371px; 
    height: 1319px; 
    background: transparent url('../assets/fanXpDemo/video-thmbnail.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}


/* FAN EXPERIENCE SUCCESS STORIES (Main Page 3) */

#main-3 .bg-left {
    top: 91px;
    left: -562px;
    width: 1439px;
    height: 1439px;
    background: transparent url('../assets/fanXpStories/circles-success-stories.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-3 .header-frame {
    top: 719px;
    left: 118px;
    width: 581px;
    height: 182px;
    background: transparent url('../assets/fanXpStories/heeader-frame-success.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-3 .header {
    /* top: 766px; */
    top: 745px;
    left: 176px;
    width: 476px;
    height: 77px;
    text-align: center;
    font: normal normal normal 66px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 5;
}

#main-3 .frame {
    top: 159px;
    left: 1005px;
    width: 1688px;
    height: 589px;
    background: transparent url('../assets/fanXpStories/frame.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-3 .line-dotted {
    top: 877px;
    left: 1005px;
    width: 1643px;
    height: 10px;
    background: transparent url('../assets/fanXpStories/dotted-line.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-3 .dot-1 {
    top: 845px;
    left: 1239px;
    width: 75px;
    height: 75px;
    background: #295867 0% 0% no-repeat padding-box;
    /* opacity: 0.45; */
    position: absolute; 
    z-index: 4;
    border-radius: 50%; 
}

#main-3 .dot-2 {
    top: 845px;
    left: 1608px;
    width: 75px;
    height: 75px;
    background: #113873 0% 0% no-repeat padding-box;
    /* opacity: 0.45; */
    position: absolute; 
    z-index: 4;
    border-radius: 50%; 
}

#main-3 .dot-3 {
    top: 845px;
    left: 1977px;
    width: 75px;
    height: 75px;
    background: #825D39 0% 0% no-repeat padding-box;
    /* opacity: 0.45; */
    position: absolute; 
    z-index: 4;
    border-radius: 50%; 
}

#main-3 .dot-4 {
    top: 845px;
    left: 2346px;
    width: 75px;
    height: 75px;
    background: #397182 0% 0% no-repeat padding-box;
    /* opacity: 0.45; */
    position: absolute;
    z-index: 4;
    border-radius: 50%; 
}

#main-3 .box-1 {
    top: 830px;
    left: 1012px;
    width: 519px;
    height: 461px;
    background: transparent url('../assets/fanXpStories/box-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#main-3 .photo-1 {
    top: 311px;
    left: 1029px;
    width: 1595px;
    height: 294px;
    background: transparent url('../assets/fanXpStories/photo-01.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-3 .box-2 {
    top: 830px;
    left: 1381px;
    width: 519px;
    height: 461px;
    background: transparent url('../assets/fanXpStories/box-02.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#main-3 .photo-2 {
    top: 179px;
    left: 1303px;
    width: 1057px;
    height: 557px;
    background: transparent url('../assets/fanXpStories/photo-02.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-3 .box-3 {
    top: 830px;
    left: 1750px;
    width: 519px;
    height: 461px;
    background: transparent url('../assets/fanXpStories/box-03.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#main-3 .photo-3 {
    top: 174px;
    left: 1358px;
    width: 944px;
    height: 576px;
    background: transparent url('../assets/fanXpStories/photo-03.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-3 .box-4 {
    top: 830px;
    left: 2119px;
    width: 519px;
    height: 461px;
    background: transparent url('../assets/fanXpStories/box-04.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#main-3 .photo-4 {
    top: 186px;
    left: 1082px;
    width: 1489px;
    height: 548px;
    /* background: transparent url('../assets/fanXpStories/photo-04.png') 0% 0% no-repeat padding-box; */
    position: absolute; 
    z-index: 4;
}


/* DATA ANALYTICS EXPERIENCE (Main Page 4) */
#main-4 .dropdown-left {
    top: 0px;
    left: 2591px;
    width: 131px;
    height: 221px;
    background: transparent url('../assets/dataMain/drop-down-3.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-4 .dropdown-right {
    top: -20px;
    left: 2736px;
    width: 131px;
    height: 299px;
    background: transparent url('../assets/dataMain/drop-down-11.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-4 .photo-main {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/dataMain/photo-data-analytics.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.6; */
}

#main-4 .circle-1 {
    top: 644px;
    left: 754px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/dataMain/circle-crowd.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

/* #main-4 .text-1 {
    top: 803px;
    left: 876px;
    width: 162px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
} */

#main-4 .circle-2 {
    top: 644px;
    left: 1223px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/dataMain/circle-vehicle.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

/* #main-4 .text-2 {
    top: 803px;
    left: 1345px;
    width: 162px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
} */

#main-4 .circle-3 {
    top: 644px;
    left: 1692px;
    width: 406px;
    height: 406px;
    background: transparent url('../assets/dataMain/circle-behavioral.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

/* #main-4 .text-3 {
    top: 803px;
    left: 1801px;
    width: 188px;
    height: 83px;
    text-align: center;
    font: normal normal normal 40px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
} */

#main-4 .icon-1 {
    top: 603px;
    left: 714px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/dataMain/header-crowd-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-4 .popup-1 {
    top: 251px;
    left: 945px;
    width: 745px;
    height: 311px;
    background: transparent url('../assets/dataMain/pop-up-crowd.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-4 .photo-1 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/dataMain/photo-crowd.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;

}

#main-4 .icon-2 {
    top: 603px;
    left: 1183px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/dataMain/header-vehicle-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-4 .popup-2 {
    top: 251px;
    left: 602px;
    width: 849px;
    height: 311px;
    background: transparent url('../assets/dataMain/pop-up-vehicle.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-4 .photo-2 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/dataMain/photo-vehicle.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;

}

#main-4 .icon-3 {
    top: 603px;
    left: 1654px;
    width: 486px;
    height: 486px;
    background: transparent url('../assets/dataMain/header-behavioral-large.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-4 .popup-3 {
    top: 251px;
    left: 1064px;
    width: 849px;
    height: 311px;
    background: transparent url('../assets/dataMain/pop-up-behavioral.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-4 .photo-3 {
    top: 927px;
    left: 0px;
    width: 2880px;
    height: 758px;
    background: transparent url('../assets/dataMain/photo-behavioral.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-4 .heading-1 {
    top: 296px;
    left: 1124px;
    width: 476px;
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 5;
}

#main-4 .desc-1 {
    top: 343px;
    left: 1175px;
    width: 460px;
    height: 107px;
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
}

#main-4 .heading-2 {
    top: 295px;
    left: 684px;
    width: 476px;
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 5;
}

#main-4 .desc-2 {
    top: 342px;
    left: 735px;
    width: 445px;
    height: 71px;
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
}

#main-4 .heading-3 {
    top: 295px;
    left: 1164px;
    width: 476px;
    height: 39px;
    text-align: left;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 5;
}

#main-4 .desc-3 {
    top: 342px;
    left: 1215px;
    width: 445px;
    height: 71px;
    text-align: left;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 5;
}


/* DATA ANALYTICS SUCCCESS STORIES (Main Page 6) */
#main-6 .arrow-1 {
    top: 0px;
    left: 441px;
    width: 920px;
    height: 744px;  
    background: transparent url('../assets/dataStories/arrow-01.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 6;
}

#main-6 .circle-1 {
    top: 223px;
    left: 864px;
    width: 379px;
    height: 378px;
    background: transparent url('../assets/dataStories/circle-crowd.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-6 .text-1 {
    top: 341px;
    left: 971px;
    width: 166px;
    height: 143px;
    text-align: center;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-6 .arrow-2 {
    top: 634px;
    left: 951px;
    width: 641px;
    height: 591px; 
    background: transparent url('../assets/dataStories/arrow-02.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-6 .circle-2 {
    top: 732px;
    left: 1074px;
    width: 379px;
    height: 379px;
    background: transparent url('../assets/dataStories/circle-sport.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-6 .text-2 {
    top: 850px;
    left: 1173px;
    width: 190px;
    height: 143px;
    text-align: center;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-6 .arrow-3 {
    top: 365px;
    left: 1415px;
    width: 625px;
    height: 622px;
    background: transparent url('../assets/dataStories/arrow-03.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-6 .circle-3 {
    top: 469px;
    left: 1543px;
    width: 379px;
    height: 378px;
    background: transparent url('../assets/dataStories/circle-data.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-6 .text-3 {
    top: 587px;
    left: 1644px;
    width: 186px;
    height: 143px;
    text-align: center;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-6 .arrow-4 {
    top: 887px;
    left: 1627px;
    width: 954px;
    height: 724px;
    background: transparent url('../assets/dataStories/arrow-04.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-6 .circle-4 {
    top: 971px;
    left: 1746px;
    width: 379px;
    height: 379px;
    background: transparent url('../assets/dataStories/circle-vehicle.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-6 .text-4 {
    top: 1089px;
    left: 1827px;
    width: 222px;
    height: 143px;
    text-align: center;
    font: normal normal normal 30px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-6 .popup-1 {
    top: 39px; 
    left: 211px; 
    width: 720px; 
    height: 647px;
    background: transparent url('../assets/dataStories/popup-crowd.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 7;
}

#main-6 .popup-2 {
    top: 800px; 
    left: 241px; 
    width: 822px; 
    height: 550px;
    background: transparent url('../assets/dataStories/popup-sport.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 7;
}

#main-6 .popup-3 {
    top: 217px; 
    left: 1803px; 
    width: 873px; 
    height: 533px;
    background: transparent url('../assets/dataStories/popup-data.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 7;
}

#main-6 .popup-4 {
    top: 971px; 
    left: 1953px; 
    width: 775px; 
    height: 540px;
    background: transparent url('../assets/dataStories/popup-vehicle.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 7;
}


/* HOW ARE WE HELPING HOW DOES IT WORK (Main Page 7) */
#main-7 .icon {
    top: 566px; 
    left: 127px; 
    width: 268px; 
    height: 268px;
    background: transparent url('../assets/howItWorks/starburst.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 5;
}

#main-7 .caption {
    top: 1090px;
    left: 143px;
    width: 252px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-data-sources.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-7 .boxes-1 {
    top: 377px;
    left: 459px;
    width: 310px;
    height: 643px;
    background: transparent url('../assets/howItWorks/BOXES-Left-Jagged.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-7 .caption-1 {
    top: 1090px;
    left: 488px;
    width: 252px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-this-data.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-7 .boxes-2 {
    top: 377px;
    left: 787px;
    width: 312px;
    height: 645px;
    background: transparent url('../assets/howItWorks/BOXES-Middle.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-7 .caption-2 {
    top: 1090px;
    left: 821px;
    width: 252px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-big-engine.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-7 .boxes-2 {
    top: 377px;
    left: 787px;
    width: 312px;
    height: 645px;
    background: transparent url('../assets/howItWorks/BOXES-Middle.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-7 .caption-2 {
    top: 1090px;
    left: 821px;
    width: 252px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-big-engine.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-7 .boxes-3 {
    top: 377px;
    left: 1124px;
    width: 311px;
    height: 643px;
    background: transparent url('../assets/howItWorks/BOXES-Right-Straight.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-7 .caption-3 {
    top: 1090px;
    left: 1154px;
    width: 252px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-data-analytics.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-7 .col-4 .box-1 {
    top: 447px;
    left: 1492px;
    width: 257px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-we-create.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;

}

#main-7 .col-4 .box-2 {
    top: 627px;
    left: 1492px;
    width: 257px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-we-discover.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;

    /* background-color: #0B1332; */
}

#main-7 .col-4 .box-3 {
    top: 807px;
    left: 1492px;
    width: 257px;
    height: 139px;
    background: transparent url('../assets/howItWorks/box-we-generate.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-7 .col-5 {
    top: 352px;
    left: 1849px;
    width: 87px;
    height: 687px;
    border: 2px solid #00BAFE;
    border-radius: 20px 0px;
    position: absolute; 
    z-index: 4;

    /* background-color: #0B1332; */
}

#main-7 .col-5 p {
    font: normal normal bold 35px/19px HelveticaNeue;
    letter-spacing: 0px;
    color: #FFFFFF;
    writing-mode: vertical-lr;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 0; 
    bottom: 0;
    z-index: 4;
}

#main-7 .col-6 .box-1 {
    top: 352px;
    left: 2037px;
    width: 277px;
    height: 189px;
    background: transparent url('../assets/howItWorks/box-fan-experience.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-7 .col-6 .box-2 {
    top: 601px;
    left: 2037px;
    width: 277px;
    height: 189px;
    background: transparent url('../assets/howItWorks/box-safety.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-7 .col-6 .box-3 {
    top: 850px;
    left: 2037px;
    width: 277px;
    height: 189px;
    /* background: transparent url('../assets/howItWorks/box-revenue.png') 0% 0% no-repeat padding-box; */
    background: transparent url('../assets/howItWorks/box-copy-revenue.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-7 .col-7 {
    top: 352px;
    left: 2415px;
    width: 296px;
    height: 687px;
    border: 2px solid #00BAFE;
    border-radius: 20px 0px;
    position: absolute; 
    z-index: 4;
    display: flex; 
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto; 
    text-align: center;
    font: normal normal bold 35px/27px HelveticaNeue;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}


#main-7 .arrow-bar {
    top: 655px;
    left: 280px;
    width: 153px;
    height: 82px;
    background: transparent url('../assets/howItWorks/arrow-bar.svg') 0% 0% no-repeat padding-box;
    position: absolute;
    /* z-index: 4; */
    z-index: 3;
}

#main-7 .arrow-head {
    top: 633px; 
    left: 390px;
    width: 86px;
    height: 127px;
    background: transparent url('../assets/howItWorks/Arrowhead.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    /* z-index: 5; */
    z-index: 4;

}

.arrow-move-1 {
    animation: arrowMove1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-move-2 {
    animation: arrowMove2 1.5s ease-in-out;
    animation-fill-mode: forwards; 
}

.arrow-move-3 {
    animation: arrowMove3 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-move-4 {
    animation: arrowMove4 1.5s ease-in-out; 
    animation-fill-mode: forwards;
}

.arrow-move-5 {
    animation: arrowMove5 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes arrowMove1 {
    0% {
        opacity: 0;
        width: 0;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        width: 153px;
    }
}

@keyframes arrowMove2 {
    from {
        width: 153px;
    }
    to {
        width: 1160px;
    }
}

@keyframes arrowMove3 {
    from {
        width: 1160px; 
    }
    to {
        width: 1524px; 
    }
}

@keyframes arrowMove4 {
    from {
        width: 1524px;
    }
    to {
        width: 1712px;
    }
}

@keyframes arrowMove5 {
    from {
        width: 1712px; 
    }
    to {
        width: 2097px;
    }
}

.arrow-head-move-1 {
    animation: headMove1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-head-move-2 {
    animation: headMove2 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-head-move-3 {
    animation: headMove3 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-head-move-4 {
    animation: headMove4 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.arrow-head-move-5 {
    animation: headMove5 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes headMove1 {
    0% {
        opacity: 0;
        left: 200px;
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        left: 390px;
    }
}

@keyframes headMove2 {
    from {
        left: 390px;
    }
    to {
        left: 1397px;
    }
}

@keyframes headMove3 {
    from {
        left: 1397px
    }
    to {
        left: 1754px;
    }
}

@keyframes headMove4 {
    from {
        left: 1754px;
    }
    to {
        left: 1942px;
    }
}

@keyframes headMove5 {
    from {
        left: 1942px;
    }
    to {
        left: 2322px;
    }
}




/* HOW ARE WE HELPING WHAT ARE THE BENEFITS (Main Page 8) */
#main-8 .photo-left {
    top: 0px;
    left: -80px;
    width: 717px;
    height: 1620px;
    background: transparent url('../assets/howBenefits/photo-key-left.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#main-8 .header-frame {
    top: 233px;
    left: 189px;
    width: 581px;
    height: 182px;
    background: transparent url('../assets/howBenefits/heeader-frame.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-8 .header {
    top: 258px;
    left: 296px;
    width: 372px;
    height: 77px;
    text-align: center;
    font: normal normal normal 66px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FAF7D8;
    position: absolute; 
    z-index: 5;
}

#main-8 .card-1 {
    top: 723px;
    left: 647px;
    width: 422px;
    height: 553px;
    background: transparent url('../assets/howBenefits/box-enhance.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

/* #main-8 .text-1 {
    top: 1019px;
    left: 791px;
    width: 168px;
    height: 149px;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 6;
} */

#main-8 .card-2 {
    top: 551px;
    left: 1070px;
    width: 422px;
    height: 554px;
    background: transparent url('../assets/howBenefits/box-improve.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

/* #main-8 .text-2 {
    top: 856px;
    left: 1226px;
    width: 148px;
    height: 124px;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 6;
} */

#main-8 .card-3 {
    top: 723px;
    left: 1492px;
    width: 422px;
    height: 553px;
    background: transparent url('../assets/howBenefits/box-force.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

/* #main-8 .text-3 {
    top: 988px;
    left: 1621px;
    width: 194px;
    height: 209px;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 6;
} */

#main-8 .card-4 {
    top: 551px;
    left: 1914px;
    width: 422px;
    height: 554px;
    background: transparent url('../assets/howBenefits/box-revolutionize.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

/* #main-8 .text-4 {
    top: 885px;
    left: 2060px;
    width: 162px;
    height: 93px;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 6;
} */

#main-8 .card-5 {
    top: 723px;
    left: 2337px;
    width: 422px;
    height: 553px;
    background: transparent url('../assets/howBenefits/box-unlock.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

/* #main-8 .text-5 {
    top: 1021px;
    left: 2484px;
    width: 160px;
    height: 93px;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 6;
} */

#main-8 .photo-1 {
    top: 105px;
    left: 871px;
    width: 1723px;
    height: 530px;
    background: transparent url('../assets/howBenefits/photo-enhance.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-8 .photo-2 {
    top: 107px;
    left: 871px;
    width: 1723px;
    height: 530px;
    background: transparent url('../assets/howBenefits/photo-improve.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-8 .photo-3 {
    top: 107px;
    left: 871px;
    width: 1723px;
    height: 530px;
    background: transparent url('../assets/howBenefits/photo-force.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-8 .photo-4 {
    top: 107px;
    left: 871px;
    width: 1723px;
    height: 530px;
    background: transparent url('../assets/howBenefits/photo-revolutionize.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-8 .photo-5 {
    top: 107px;
    left: 871px;
    width: 1723px;
    height: 530px;
    background: transparent url('../assets/howBenefits/photo-unlock.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}


/* HOW ARE WE HELPING WHERE TO START (Main Page 9) */
#main-9 .circle-photo {
    top: 438px;
    left: 568px;
    width: 584px;
    height: 584px;
    background: transparent url('../assets/howStart/photo-circle.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-9 .header {
    top: 649px;
    left: 733px;
    width: 248px;
    height: 162px;
    text-align: center;
    font: normal normal normal 75px/75px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute; 
    z-index: 4;
}

#main-9 .slice-1 {
    top: 212px;
    left: 345px;
    width: 636px;
    height: 608px;
    background: transparent url('../assets/howStart/slice-01.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-9 .circle-1 {
    top: 222px;
    left: 254px;
    width: 294px;
    height: 294px;
    background: transparent url('../assets/howStart/circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-9 .number-1 {
    top: 323px;
    left: 380px;
    width: 42px;
    height: 87px;
    text-align: center;
    font: normal normal normal 75px/75px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#main-9 .slice-2 {
    top: 256px;
    left: 989px;
    width: 398px;
    height: 823px;
    background: transparent url('../assets/howStart/slice-03.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-9 .circle-2 {
    top: 450px;
    left: 1293px;
    width: 295px;
    height: 294px;
    background: transparent url('../assets/howStart/circle-02.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-9 .number-2 {
    top: 550px;
    left: 1422px;
    width: 42px;
    height: 87px;
    text-align: center;
    font: normal normal normal 75px/75px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#main-9 .slice-3 {
    top: 835px;
    left: 377px;
    width: 811px;
    height: 418px;
    background: transparent url('../assets/howStart/slice-02.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
}

#main-9 .circle-3 {
    top: 1135px;
    left: 516px;
    width: 295px;
    height: 295px;
    background: transparent url('../assets/howStart/circle-03.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#main-9 .number-3 {
    top: 1239px;
    left: 643px;
    width: 42px;
    height: 87px;
    text-align: center;
    font: normal normal normal 75px/75px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#main-9 .photo-1 {
    top: 0px;
    left: 1804px;
    width: 1251px;
    height: 1620px;
    background: transparent url('../assets/howStart/photo-half-circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.7; */
}

#main-9 .photo-2 {
    top: 0px;
    left: 1804px;
    width: 1251px;
    height: 1620px;
    background: transparent url('../assets/howStart/photo-half-circle-02.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.84; */
}

#main-9 .photo-3 {
    top: 0px;
    left: 1804px;
    width: 1251px;
    height: 1620px;
    background: transparent url('../assets/howStart/photo-half-circle-03.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 3;
    /* opacity: 0.7; */
}

#main-9 .box-1 {
    top: 538px; 
    left: 1987px; 
    width: 713px; 
    height: 508px;
    background: transparent url('../assets/howStart/box-right-01.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-9 .box-2 {
    top: 538px; 
    left: 1987px; 
    width: 713px; 
    height: 508px;
    background: transparent url('../assets/howStart/box-right-02.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}

#main-9 .box-3 {
    top: 538px; 
    left: 1987px; 
    width: 713px; 
    height: 508px;
    background: transparent url('../assets/howStart/box-right-03.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 4;
}


/* MENU SLIDEOUT NAVIGATION */
#menu-popup .popup-left{
    top: 655px;
    left: -9px;
    width: 178px;
    height: 141px;
    background: transparent url('../assets/menuPopup/nav-left.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 9;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

#menu-popup .popup-right {
    top: 655px;
    left: 2712px;
    width: 178px;
    height: 141px;
    background: transparent url('../assets/menuPopup/nav-right.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 9;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

#menu-popup .hamburger {
    cursor: pointer;
}

/* #menu-list  */
.nav-box-left {
    top: 657px;
    left: 189px;
    width: 288px;
    height: 558px;
    background: transparent url('../assets/menuPopup/menu-box-left.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 9;
    
    background: rgba(93, 117, 153, 0.75);
    /* border-radius: 16px; */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    /* border: 1px solid rgba(93, 117, 153, 0.11); */
    
}

/* #menu-list  */
.nav-box-right {
    top: 657px;
    left: 2404px;
    width: 288px;
    height: 558px;
    background: transparent url('../assets/menuPopup/menu-box-right.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 9;

    background: rgba(93, 117, 153, 0.75);
    /* border-radius: 16px; */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    /* border: 1px solid rgba(93, 117, 153, 0.11); */

}

ul {
    list-style-type: none;
}

.nav-list-left, 
.nav-list-right {
    text-align: left;
    font: normal normal normal 22px/36px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.nav-list-left .heading, 
.nav-list-right .heading {
    text-align: left;
    font: normal normal normal 16px/35px HelveticaNeue;
    letter-spacing: 0px;
    color: #FAF8D7;
    text-transform: uppercase;
}

.wrapper-left .home {
    top: 662px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-left .hamburger {
    top: 662px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-left .left {
    top: 729px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-left .right {
    top: 729px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-right .home {
    top: 662px;
    left: 2735px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-right .hamburger {
    top: 662px;
    left: 2801px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-right .left {
    top: 729px;
    left: 2735px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}

.wrapper-right .right {
    top: 729px;
    left: 2801px;
    width: 61px;
    height: 61px;
    position: absolute; 
    z-index: 99;
}


/* ANIMATIONS */
.hide {
    display: none;
}

.show {
    display: block;
}

.slide-up {
    animation: slideUp 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-down {
    animation: slideDown 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-left {
    animation: slideLeft 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-right {
    animation: slideRight 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */

}

.zoom-in {
    animation: zoomIn 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.zoom-out {
    animation: zoomOut 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.rotate-circle {
    animation: rotateCircle 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.rotate-circle-reverse {
    animation: rotateCircleReverse 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.roll-in {
    animation: rollin 1.5s ease-in-out; 
}

.slide-out-down {
    animation: slideOutDown 1s ease-in-out;
    animation-fill-mode: forwards;
}

.slide-out-up {
    animation: slideOutUp 1s ease-in-out;
    animation-fill-mode: forwards;
}

.slide-out-right {
    animation: slideOutRight 1s ease-in-out; 
    animation-fill-mode: forwards;
}

.move-up {
    animation: moveUp 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.move-down {
    animation: moveDown 1.3s ease-in-out;
    animation-fill-mode: forwards;
}



@keyframes slideUp {
    0% { 
        transform: translateY(100vh);
        opacity: 0;
    }
    60% {
        opacity: 0.5;
    }
    100% { 
        transform: translateY(0); 
        opacity: 1;
    }
}


@keyframes slideDown {
    0% { 
        transform: translateY(-100vh); 
        opacity: 0;
    }
    60% {
        opacity: 0.5;
    }
    100% { 
        transform: translateY(0); 
        opacity: 1;
    }
}


@keyframes slideLeft {
    0% { 
        transform: translateX(100vw); 
        opacity: 0;
    }
    60% {
        opacity: 0.5;
    }
    100% { 
        transform: translateX(0); 
        opacity: 1;
    }
}


@keyframes slideRight {
    0% { 
        transform: translateX(-100vw); 
        opacity: 0;
    }
    60% {
        opacity: 0.5;
    }
    100% { 
        transform: translateX(0); 
        opacity: 1;
    }
}


@keyframes zoomIn {
    0% {
        transform: scale(0.5, 0.5);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0;
    }
}


@keyframes rotateCircle {
    from {
        transform: scale(0.7) rotate(-90deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes rotateCircleReverse {
    from {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: scale(0.7) rotate(-90deg);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes rollin {
    from {
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
        opacity: 0;
    }
    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateY(0);
        opacity: 1; 
    }
    60% {
        transform: translateY(-50%);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideOutUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    40% {
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
    }
    60% {
        transform: translateX(40%);
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes moveDown {
    from {
        top: 560px;
    }
    to {
        top: 723px;
    }
}

@keyframes moveUp {
    from {
        top: 723px;
    }
    to {
        top: 560px;
    }

}

.fade {
    animation: fade 1s ease;
    animation-fill-mode: forwards;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.2;
    }
}

.opacityHalf {
    opacity: 0.45;
    transition: opacity 0.4s ease-in-out;
}



.fade-up {
    animation: fadeUp 1.3s ease-in-out;
}

@keyframes fadeUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fade-left {
    animation: fadeLeft 1.3s ease-in-out;
}

@keyframes fadeLeft {
    0% {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fade-right {
    animation: fadeRight 1.3s ease-in-out;
}

@keyframes fadeRight {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fade-in {
    animation: fadein 1s ease-in-out;
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

/* SLIDEOUT MENUS TOGGLING */

.right-retract {
    left: 2857px !important;
}

.left-retract {
    left: -156px !important;
}


/* DEMO MAIN-2 STYLES */
#main-2 .left-block {
    top: 400px;
    /* left: 282px; */
    left: 75px;
    width: 1130px;
    height: 636px;
    /* transform: translateX(-18%); */
    background: transparent url('../assets/fanXpDemo/video-screen-space-solutions-min.png') 0% 0% no-repeat padding-box;
    z-index: 5;
    position: absolute !important;
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#main-2 .right-block {
    top: 400px;
    /* left: 1467px; */
    right: 75px;
    width: 1130px;
    height: 636px;
    /* transform: translateX(-18%); */
    background: transparent url('../assets/fanXpDemo/video-screen-traffic-solutions-min.png') 0% 0% no-repeat padding-box;
    z-index: 5;
    position: absolute !important;
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#main-2 .title-left {
    top: 1064px;
    /* left: 612px; */
    left: 385px;
    width: 511px;
    height: 82px;
    text-align: left;
    font: normal normal normal 70px/99px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #F6F6F6;
    position: absolute;
    z-index: 4;
}

#main-2 .title-right {
    top: 1064px;
    /* left: 1777px; */
    right: 350px;
    width: 529px;
    height: 82px;
    text-align: left;
    font: normal normal normal 70px/99px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #F6F6F6;
    position: absolute;
    z-index: 4;
}

#main-2 .button-play-left {
    top: 680px;
    left: 575px;
    width: 100px;
    height: 100px;
    overflow: visible;
    background: transparent url('../assets/fanXpDemo/play-circle-solid.svg') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 6;
    cursor: pointer;
}

#main-2 .button-play-right {
    top: 680px;
    right: 575px;
    width: 100px;
    height: 100px;
    overflow: visible;
    background: transparent url('../assets/fanXpDemo/play-circle-solid.svg') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 6;
    cursor: pointer;
}