/* CSS */

body {
    line-height: 1;
    font-family: HelveticaNeue, Helvetica, sans-serif;
}

.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;
    /* transition: opacity 1.5s ease-in-out; */
}

.invisible  {
    visibility: hidden;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.opacityOne {
    opacity: 1;
}

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

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

.transition-slow {
    transition: 2s 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/home/vid.background.gif');
    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/home/vid.background.png') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.45;
    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/home/vid.launch_screen_PosterImage.png') no-repeat;
    background-size: cover;
}

@media screen and (max-device-width: 800px) {
    html {
        background: url('../assets/home/vid.launch_screen_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 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: relative;
    z-index: 999;
}


/* HOME START */
#home a {
    cursor: pointer;
}

#home .logo {
    top: 700px; 
    left: 800px;
    width: 235px;
    height: 235px;
    background: transparent url('../assets/home/icon.launch_screen.01.png') no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

#home .title {
    top: 725px;
    left: 1031px;
    width: 1051px;
    height: 165px;
    background: transparent url('../assets/home/text.launch_screen.01.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

/* MAIN MENU */

#mainMenu .img-bottom {
    top: 941px;
    left: 0px;
    width: 2881px;
    height: 679px;
    background: transparent url('../assets/menu/apng.globe.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

#mainMenu .pill-1 {
    top: 438px;
    left: 597px;
    width: 478px;
    height: 893px;
    background: transparent url('../assets/menu/img.menu.01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#mainMenu .pill-2 {
    top: 315px;
    left: 1201px;
    width: 478px;
    height: 893px;
    background: transparent url('../assets/menu/img.menu.02.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#mainMenu .pill-3 {
    top: 438px;
    left: 1804px;
    width: 478px;
    height: 893px;
    background: transparent url('../assets/menu/img.menu.03.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#mainMenu .ring-1 {
    top: 413px;
    left: 575px;
    width: 524px;
    height: 524px;
    background: transparent url('../assets/menu/shape.menu_circle.01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-size: cover;
    z-index: 3;
}

#mainMenu .ring-2 {
    top: 290px;
    left: 1178px;
    width: 524px;
    height: 524px;
    background: transparent url('../assets/menu/shape.menu_circle.02.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#mainMenu .ring-3 {
    top: 413px;
    left: 1783px;
    width: 524px;
    height: 524px;
    background: transparent url('../assets/menu/shape.menu_circle.03.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

/* MAIN 1 - VISION */

#main-1 .shape-1 {
    top: 34px;
    left: 65px;
    width: 345px;
    height: 300px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.01.png');
    background-size: cover;
}

#main-1 .shape-2 {
    top: 1170px;
    left: 65px;
    width: 135px;
    height: 135px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.02.png');
    background-size: cover;
}

#main-1 .shape-3 {
    top: 129px;
    left: 1116px;
    width: 110px;
    height: 110px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.03.png');
    background-size: cover;
}

#main-1 .shape-4 {
    top: 393px;
    left: 2631px;
    width: 163px;
    height: 163px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.04.png');
    background-size: cover;
}

#main-1 .shape-5 {
    top: 0px;
    left: 1317px;
    width: 1563px;
    height: 351px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.05.png');
    background-size: cover;
}

#main-1 .shape-6 {
    top: 1464px;
    left: 2419px;
    width: 212px;
    height: 212px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/vision/shape.vision_bgcircles.06.png');
    background-size: cover;
}

#main-1 .arrow {
    top: 864px;
    left: 388px;
    width: 2154px;
    height: 687px;
    position: absolute;
    z-index: 4;
    background: url('../assets/vision/shape.vision_arrow.01.png');
    background-size: cover;
}

#main-1 .shadow {
    position: absolute; 
    z-index: 4;
}

#main-1 .shadow-1 {
    top: 182px;
    left: 454px;
    width: 389px;
    height: 1184px;
    background: url('../assets/vision/shape.vision_blurred.01.png');
    background-size: cover;
}

#main-1 .shadow-2 {
    top: 283px;
    left: 908px;
    width: 1047px;
    height: 921px;
    background: url('../assets/vision/shape.vision_blurred.02.png');
    background-size: cover;
}

#main-1 .shadow-3 {
    top: 502px;
    left: 2077px;
    width: 328px;
    height: 483px;
    background: url('../assets/vision/shape.vision_blurred.03.png');
    background-size: cover;
}

#main-1 .glass{
    position: absolute; 
    z-index: 5;
}

#main-1 .glass-1 {
    top: 182px;
    left: 505px;
    width: 329px;
    height: 1123px;
    background: url('../assets/vision/shape.vision_glass.01.png');
    background-size: cover;
}

#main-1 .glass-2 {
    top: 283px;
    left: 959px;
    width: 329px;
    height: 921px;
    background: url('../assets/vision/shape.vision_glass.02.png');
    background-size: cover;
}

#main-1 .glass-3 {
    top: 379px;
    left: 1412px;
    width: 590px;
    height: 733px;
    background: url('../assets/vision/shape.vision_glass.03.png');
    background-size: cover;
}

#main-1 .glass-4 {
    top: 502px;
    left: 2127px;
    width: 328px;
    height: 483px;
    background: url('../assets/vision/shape.vision_glass.04.png');
    background-size: cover;
}

#main-1 .title {
    position: absolute;
    z-index: 6;
}

#main-1 .title-1 {
    top: 591px;
    left: 610px;
    width: 116px;
    height: 77px;
    background: url('../assets/vision/text.vision.01.png'); 
    background-size: cover;
}

#main-1 .title-2 {
    top: 591px;
    left: 1044px;
    width: 158px;
    height: 79px;
    background: url('../assets/vision/text.vision.02.png'); 
    background-size: cover;
}

#main-1 .title-3 {
    top: 591px;
    left: 1628px;
    width: 158px;
    height: 79px;
    background: url('../assets/vision/text.vision.03.png'); 
    background-size: cover;
}

#main-1 .title-4 {
    top: 591px;
    left: 2232px;
    width: 120px;
    height: 79px;
    background: url('../assets/vision/text.vision.04.png'); 
    background-size: cover;
}

#main-1 .icon, 
#main-1 .outline, 
#main-1 .subtitle {
    position: absolute; 
    z-index: 7;
}

#main-1 .marker-wrapper {
    z-index: 8;
}

#main-1 .marker {
    position: absolute;
    z-index: 8;
}

#main-1 .icon-1 {
    top: 712px;
    left: 577px;
    width: 184px;
    height: 184px;
    background: url('../assets/vision/icon.vision.01.png');
    background-size: cover;
}

#main-1 .icon-2 {
    top: 712px; 
    left: 1032px;
    width: 184px;
    height: 184px;
    background: url('../assets/vision/icon.vision.02.png');
    background-size: cover;
}

#main-1 .icon-3 {
    top: 712px; 
    left: 1615px;
    width: 184px;
    height: 184px;
    background: url('../assets/vision/icon.vision.03.png');
    background-size: cover;
}

#main-1 .icon-4 {
    top: 712px; 
    left: 2200px;
    width: 184px;
    height: 184px;
    background: url('../assets/vision/icon.vision.04.png');
    background-size: cover;
}

#main-1 .outline-1 {
    top: 699px;
    left: 564px;
    width: 210px;
    height: 210px;
    background: url('../assets/vision/shape.vision_dashedcircle.01.png'); 
    background-size: cover;
}

#main-1 .outline-2 {
    top: 699px;
    left: 1019px;
    width: 210px;
    height: 210px;
    background: url('../assets/vision/shape.vision_dashedcircle.02.png'); 
    background-size: cover;
}

#main-1 .outline-3 {
    top: 699px;
    left: 1601px;
    width: 210px;
    height: 210px;
    background: url('../assets/vision/shape.vision_dashedcircle.03.png'); 
    background-size: cover;
}

#main-1 .outline-4 {
    top: 699px;
    left: 2187px;
    width: 210px;
    height: 210px;
    background: url('../assets/vision/shape.vision_dashedcircle.04.png'); 
    background-size: cover;
}

#main-1 .marker-1 {
    top: 923px;
    left: 647px;
    width: 46px;
    height: 455px;
    background: url('../assets/vision/shape.vision_marker.01.png'); 
    background-size: cover;
}

#main-1 .marker-2 {
    top: 923px;
    left: 1101px;
    width: 46px;
    height: 365px;
    background: url('../assets/vision/shape.vision_marker.02.png'); 
    background-size: cover;
}

#main-1 .marker-3 {
    top: 923px;
    left: 1684px;
    width: 46px;
    height: 241px;
    background: url('../assets/vision/shape.vision_marker.03.png'); 
    background-size: cover;
}

#main-1 .marker-4 {
    top: 923px;
    left: 2268px;
    width: 46px;
    height: 163px;
    background: url('../assets/vision/shape.vision_marker.04.png'); 
    background-size: cover;
}

#main-1 .subtitle-1 {
    top: 1409px;
    left: 633px;
    width: 72px;
    height: 36px;
    background: url('../assets/vision/text.vision.01_2.png');
    background-size: cover;
}

#main-1 .subtitle-2 {
    top: 1315px;
    left: 1072px;
    width: 102px;
    height: 36px;
    background: url('../assets/vision/text.vision.02_2.png');
    background-size: cover;
}

#main-1 .subtitle-3 {
    top: 1193px;
    left: 1630px;
    width: 152px;
    height: 36px;
    background: url('../assets/vision/text.vision.03_2.png');
    background-size: cover;
}

#main-1 .subtitle-4 {
    top: 1115px;
    left: 2241px;
    width: 100px;
    height: 36px;
    background: url('../assets/vision/text.vision.04_2.png');
    background-size: cover;
}

/* MAIN 2 - OUTCOMES */
#main-2 .btn {
    top: 1053px;
    left: 906px;
    width: 1069px;
    height: 123px;
    background: url('../assets/outcomes/button.vision_collab.png') no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 4;
    cursor: pointer;
}

#main-2 .shapes-bottom {
    top: 1029px;
    left: 864px;
    width: 1151px;
    height: 480px;
    background: transparent url('../assets/outcomes/shape.outcomes_bgcollab.01.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    background-position: center center; 
    position: absolute;
    z-index: 3;
}

#main-2 .container-1 {
    top: 272px;
    left: 155px;
    width: 1214px;
    height: 693px;
    background: url('../assets/outcomes/shape.outcomes_box.01.png'); 
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#main-2 .container-2 {
    top: 272px;
    left: 1512px;
    width: 1214px;
    height: 693px;
    background: url('../assets/outcomes/shape.outcomes_box.02.png'); 
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#main-2 .arrow {
    top: 293px;
    left: 1388px;
    width: 108px;
    height: 124px;
    background: url('../assets/outcomes/shape.outcomes_arrow.01.png'); 
    background-size: cover;
    position: absolute;
    z-index: 4;
}

#main-2 .heading-1 {
    top: 293px;
    left: 176px;
    width: 1173px;
    height: 124px;
    background: url('../assets/outcomes/text.outcomes.01.png');
    background-size: cover;
    position: absolute;
    z-index: 4;
}

#main-2 .heading-2 {
    top: 293px;
    left: 1532px;
    width: 1173px;
    height: 124px;
    background: url('../assets/outcomes/text.outcomes.02.png');
    background-size: cover;
    position: absolute;
    z-index: 4;
}

#main-2 .subheading-1 {
    top: 456px;
    left: 610px;
    width: 304px;
    height: 37px;
    background: url('../assets/outcomes/text.outcomes.01_2.png');
    background-size: cover;
    position: absolute;
    z-index: 4;
}

#main-2 .subheading-2 {
    top: 456px;
    left: 1674px;
    width: 888px;
    height: 37px;
    background: url('../assets/outcomes/text.outcomes.02_2.png');
    background-size: cover;
    position: absolute;
    z-index: 4;
}

#main-2 .content-1 {
    top: 554px; 
    left: 224px;
    width: 1072px;
    height: 312px;
    position: absolute;
    z-index: 4;
    background: url('../assets/outcomes/icon.outcomes.01.png'); 
    background-size: cover;
}

#main-2 .content-2 {
    top: 537px; 
    left: 1532px;
    width: 953px;
    height: 128px;
    position: absolute;
    z-index: 4;
    background: url('../assets/outcomes/icon.outcomes.05.png'); 
    background-size: cover;
}

#main-2 .content-3 {
    top: 675px; 
    left: 1532px;
    width: 1168px;
    height: 128px;
    position: absolute;
    z-index: 4;
    background: url('../assets/outcomes/icon.outcomes.06.png'); 
    background-size: cover;
}

#main-2 .content-4 {
    top: 812px; 
    left: 1532px;
    width: 1138px;
    height: 128px;
    position: absolute;
    z-index: 4;
    background: url('../assets/outcomes/icon.outcomes.07.png'); 
    background-size: cover;
}

#main-2 .bracket-1 {
    top: 917px;
    left: 155px;
    width: 716px;
    height: 253px;
    background: url('../assets/outcomes/shape.outcomes_bracket.01.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-2 .bracket-2 {
    top: 917px;
    left: 2009px;
    width: 716px;
    height: 253px;
    background: url('../assets/outcomes/shape.outcomes_bracket.02.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-2 .cat-1 {
    top: 1009px;
    left: 250px;
    width: 304px; 
    height: 361px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.01.png');
    background-size: cover;
}

#main-2 .cat-2 {
    top: 1009px;
    left: 596px;
    width: 304px; 
    height: 392px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.02.png');
    background-size: cover;
}

#main-2 .cat-3 {
    top: 1009px;
    left: 942px;
    width: 304px; 
    height: 391px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.03.png');
    background-size: cover;
}

#main-2 .cat-4 {
    top: 1009px;
    left: 1290px;
    width: 304px; 
    height: 361px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.04.png');
    background-size: cover;
}

#main-2 .cat-5 {
    top: 1009px;
    left: 1634px;
    width: 304px; 
    height: 361px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.05.png');
    background-size: cover;
}

#main-2 .cat-6 {
    top: 1009px;
    left: 1983px;
    width: 304px; 
    height: 362px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.06.png');
    background-size: cover;
}

#main-2 .cat-7 {
    top: 1009px;
    left: 2325px;
    width: 304px; 
    height: 361px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/img.outcomes_collab.07.png');
    background-size: cover;
}

#main-2 .arrow-1 {
    top: 1437px;
    left: 90px;
    width: 1322px;
    height: 145px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/shape.outcomes_bigarrow.01.png');
    background-size: cover;
}

#main-2 .arrow-2 {
    top: 1437px;
    left: 1467px;
    width: 1322px;
    height: 145px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/shape.outcomes_bigarrow.02.png');
    background-size: cover;
}

#main-2 .arrowheads {
    top: 1447px;
    left: 1328px;
    width: 223px;
    height: 124px;
    position: absolute;
    z-index: 6;
    background: url('../assets/outcomes/shape.outcomes_midarrows.01.png');
    background-size: cover;
}


/* MAIN 3 - CO-INNOVATION */
#main-3 .bg-left {
    top: 0px;
    left: 0px;
    width: 866px;
    height: 1620px;
    position: absolute;
    z-index: 3; 
    background: url('../assets/coInnovation/shape.coinnov_bg.01.png');
    background-size: cover;
}

#main-3 .header {
    top: 704px;
    left: 0px;
    width: 600px;
    height: 228px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/text.coinnov.01.png');
    background-size: cover;
}

#main-3 .bg-right {
    top: 36px;
    left: 1319px;
    width: 1078px;
    height: 1584px;
    position: absolute;
    z-index: 3;
    background: url('../assets/coInnovation/shape.coinnov_bg.02.png');
    background-size: cover;
}

#main-3 .bubble-1 {
    top: 191px;
    left: 648px;
    width: 182px;
    height: 181px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/icon.coinnov_idea.01.png');
    background-size: cover;
    background-position: center center;
}

#main-3 .bubble-2 {
    top: 542px;
    left: 711px;
    width: 183px;
    height: 181px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/icon.coinnov_spark.01.png');
    background-size: cover;
    background-position: center center;
}

#main-3 .bubble-3 {
    top: 897px;
    left: 711px;
    width: 180px;
    height: 182px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/icon.coinnov_incubate.01.png');
    background-size: cover;
    background-position: center center;
}

#main-3 .bubble-4 {
    top: 1250px;
    left: 648px;
    width: 180px;
    height: 185px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/icon.coinnov_scale.01.png');
    background-size: cover;
    background-position: center center;
}

#main-3 .arrows {
    top: 393px; 
    left: 745px;
    width: 80px;
    height: 837px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/shape.coinnov_curvedarrows.01.png');
    background-size: cover;
}

#main-3 .text-1 {
    top: 65px;
    left: 1028px;
    width: 126px;
    height: 66px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/text.coinnov.02.png');
    background-size: cover;
}

#main-3 .text-2 {
    top: 65px;
    left: 1792px;
    width: 126px;
    height: 66px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/text.coinnov.03.png');
    background-size: cover;
}

#main-3 .text-3 {    
    top: 65px;
    left: 2557px;
    width: 102px;
    height: 66px;
    position: absolute;
    z-index: 4;
    background: url('../assets/coInnovation/text.coinnov.04.png');
    background-size: cover;
}

#main-3 .content-1 {
    top: 222px;
    left: 945px;
    width: 300px;
    height: 119px;
    background: url('../assets/coInnovation/img.coinnov.01.png');
    background-size: cover; 
    position: absolute;
    z-index: 5;
}

#main-3 .content-2 {
    top: 515px;
    left: 1341px;
    width: 1035px;
    height: 235px;
    background: url('../assets/coInnovation/img.coinnov.02.png');
    background-size: cover; 
    position: absolute;
    z-index: 5;
}

#main-3 .content-3 {
    top: 932px;
    left: 945px;
    width: 1847px;
    /* height: 118px; */
    height: 135px;
    background: url('../assets/coInnovation/img.coinnov.03.png') no-repeat;
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 5;
}

#main-3 .content-4 {
    top: 1281px;
    left: 2429px;
    width: 363px;
    height: 119px;
    background: url('../assets/coInnovation/img.coinnov.04.png');
    background-size: cover; 
    position: absolute;
    z-index: 5;
}

#main-3 .icon-1 {
    top: 384px; 
    left: 1015px;
    width: 154px;
    height: 117px;
    background: url('../assets/coInnovation/icon.coinnov_mini.01.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-3 .icon-2 {
    top: 587px; 
    left: 1632px;
    width: 68px;
    height: 106px;
    background: url('../assets/coInnovation/icon.coinnov_mini.02.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-3 .icon-3 {
    top: 785px; 
    left: 2138px;
    width: 212px;
    height: 116px;
    background: url('../assets/coInnovation/icon.coinnov_mini.03.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-3 .icon-4 {
    top: 1119px; 
    left: 2214px;
    width: 71px;
    height: 117px;
    background: url('../assets/coInnovation/icon.coinnov_mini.04.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

#main-3 .line {
    top: 351px; 
    left: 1094px; 
    width: 1326px;
    height: 989px;
    background: url('../assets/coInnovation/shape.coinnov_dashedline.01.png');
    background-size: cover;
    position: absolute;
    z-index: 5;
}

/* MAIN 4 - STUDIOS PLATFORM */
#main-4 .bg-left {
    top: 0px;
    left: 0px;
    width: 818px;
    height: 1227px;
    background: url('../assets/studios/shape.platform_circle.01.png');
    position: absolute;
    z-index: 3;
}

#main-4 .bg-right {
    top: 892px;
    left: 1493px;
    width: 1387px;
    height: 728px;
    background: url('../assets/studios/shape.platform_circle.02.png');
    position: absolute;
    z-index: 3;
}

#main-4 .form-left {
    top: -758px;
    left: -1192px;
    width: 2216px;
    height: 2216px;
    background: url('../assets/studios/shape.platform_circle_rotate.01.png');
    position: absolute;
    z-index: 3;
}

#main-4 .form-right {
    top: 386px;
    left: 987px;
    width: 2885px;
    height: 2885px;
    background: url('../assets/studios/shape.platform_circle_rotate.02.png');
    position: absolute;
    z-index: 3;
}

#main-4 .heading-left {
    top: 334px;
    left: 0px;
    width: 518px;
    height: 223px;
    background: url('../assets/studios/text.platform.01.png');
    position: absolute;
    z-index: 4;
}

#main-4 .heading-right {
    top: 1263px;
    left: 2209px;
    width: 366px;
    height: 357px;
    background: url('../assets/studios/text.platform.02.png');
    position: absolute;
    z-index: 4;
}

#main-4 .circle-1 {
    top: 1214px;
    left: 435px;
    width: 89px;
    height: 88px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.01.png') no-repeat;
    background-size: cover;
}

#main-4 .circle-2 {
    top: 1167px;
    left: 897px;
    width: 180px;
    height: 182px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.02.png') no-repeat;
    background-size: cover;
}

#main-4 .circle-3 {
    top: 173px;
    left: 1260px;
    width: 180px;
    height: 181px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.03.png') no-repeat;
    background-size: cover;
}

#main-4 .circle-4 {
    top: 354px;
    left: 1493px;
    width: 88px;
    height: 89px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.04.png') no-repeat;
    background-size: cover;
}

#main-4 .circle-5 {
    top: 1001px;
    left: 2138px;
    width: 88px;
    height: 88px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.05.png') no-repeat;
    background-size: cover;
}

#main-4 .circle-6 {
    top: 386px;
    left: 2183px;
    width: 180px;
    height: 181px;
    position: absolute;
    z-index: 5;
    background: url('../assets/studios/shape.platform_bubble.06.png') no-repeat;
    background-size: cover;
}

#main-4 .btn {
    top: 621px;
    left: 1252px;
    width: 376px;
    height: 380px;
    background: url('../assets/studios/icon.platform.01.png') no-repeat;
    position: absolute;
    z-index: 6;
    cursor: pointer;
}

#main-4 .btn-back {
    /* top: 669px;
    left: 1299px;
    width: 282px;
    height: 284px; */
    top: 744px;
    left: 1369px;
    width: 146px;
    height: 147px;
    background: url('../assets/studios/icon.platform.02.png') no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 7;
    cursor: pointer;
}

#main-4 .reveal {
    position: relative;
}

#main-4 .img-1 {
    top: 1003px;
    left: 379px;
    width: 439px;
    height: 443px;
    background: url('../assets/studios/img.platform.01.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-2 {
    top: 446px;
    left: 660px;
    width: 360px;
    height: 364px;
    background: url('../assets/studios/img.platform.02.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-3 {
    top: 845px;
    left: 1061px;
    width: 265px;
    height: 266px;
    background: url('../assets/studios/img.platform.03.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-4 {
    top: 84px;
    left: 1098px;
    width: 535px;
    height: 540px;
    background: url('../assets/studios/img.platform.04.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-5 {
    top: 916px;
    left: 1476px;
    width: 488px;
    height: 492px;
    background: url('../assets/studios/img.platform.05.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-6 {
    top: 475px;
    left: 1776px;
    width: 297px;
    height: 299px;
    background: url('../assets/studios/img.platform.06.png');
    position: absolute;
    z-index: 7;
}

#main-4 .img-7 {
    top: 452px;
    left: 2193px;
    width: 517px;
    height: 526px;
    background: url('../assets/studios/img.platform.07.png');
    position: absolute;
    z-index: 7;
}

/* MAIN 5 - GLOBAL ECOSYSTEM/CLIENT IMPACT */
#main-5 .bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/client/img.client_bg.01.png') no-repeat;
    background-size: cover; 
    position: absolute;
    z-index: 3;
}

#main-5 .header {
    top: 148px;
    left: 157px;
    width: 211px; 
    height: 47px; 
    background: url('../assets/client/text.client_header.01.png'); 
    position: absolute;
    z-index: 4;
}

#main-5 .pre {
    position: relative; 
    z-index: 9;
}

#main-5 .icon {
    cursor: pointer;
}

#main-5 .icon-1 {
    top: 788px; 
    left: 393px; 
    width: 278px; 
    height: 263px; 
    background: url('../assets/client/icon.client.01.png');
    position: absolute;
    z-index: 9;
}

#main-5 .icon-2 {
    top: 789px; 
    left: 837px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/icon.client.02.png');
    position: absolute;
    z-index: 9;
}

#main-5 .icon-3 {
    top: 789px; 
    left: 1300px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/icon.client.03.png');
    position: absolute;
    z-index: 9;
}

#main-5 .icon-4 {
    top: 789px; 
    left: 1764px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/icon.client.04.png');
    position: absolute;
    z-index: 9;
}

#main-5 .icon-5 {
    top: 789px; 
    left: 2227px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/icon.client.05.png');
    position: absolute;
    z-index: 9;
}

#main-5 .glass-container {
    top: 307px;
    left: 332px;
    width: 2236px;
    height: 407px;
    background: url('../assets/client/shape.client_info.01.png') no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-5 .glass-1 {
    top: 788px; 
    left: 393px; 
    width: 278px; 
    height: 263px; 
    background: url('../assets/client/shape.client_square.01.png');
    position: absolute;
    z-index: 4;
}

#main-5 .glass-2 {
    top: 789px; 
    left: 837px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/shape.client_square.02.png');
    position: absolute;
    z-index: 4;
}

#main-5 .glass-3 {
    top: 789px; 
    left: 1300px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/shape.client_square.03.png');
    position: absolute;
    z-index: 4;
}

#main-5 .glass-4 {
    top: 789px; 
    left: 1764px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/shape.client_square.04.png');
    position: absolute;
    z-index: 4;
}

#main-5 .glass-5 {
    top: 789px; 
    left: 2227px; 
    width: 279px; 
    height: 262px; 
    background: url('../assets/client/shape.client_square.05.png');
    position: absolute;
    z-index: 4;
}

#main-5 .text-1 {
    top: 955px;
    left: 460px;
    width: 144px;
    height: 73px;
    background: url('../assets/client/text.client.01.png'); 
    position: absolute;
    z-index: 5;
}

#main-5 .text-2 {
    top: 973px;
    left: 871px;
    width: 212px;
    height: 38px;
    background: url('../assets/client/text.client.02.png'); 
    position: absolute;
    z-index: 5;
}

#main-5 .text-3 {
    top: 955px;
    left: 1383px;
    width: 114px;
    height: 73px;
    background: url('../assets/client/text.client.03.png'); 
    position: absolute;
    z-index: 5;
}

#main-5 .text-4 {
    top: 973px;
    left: 1836px;
    width: 134px;
    height: 38px;
    background: url('../assets/client/text.client.04.png'); 
    position: absolute;
    z-index: 5;
}

#main-5 .text-5 {
    top: 973px;
    left: 2339px;
    width: 56px;
    height: 38px;
    background: url('../assets/client/text.client.05.png'); 
    position: absolute;
    z-index: 5;
}

#main-5 .reveal {
    position: relative;
    z-index: 6;
}

#main-5 .img-1 {
    top: 307px;
    left: 332px;
    width: 1432px;
    height: 407px;
    background: url('../assets/client/img.client.01.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-5 .content-1 {
    top: 414px;
    left: 2031px;
    width: 256px;
    height: 188px;
    background: url('../assets/client/text.client_info.01.png');
    position: absolute;
    z-index: 6;
}

#main-5 .img-2 {
    top: 307px;
    left: 332px;
    width: 1432px;
    height: 407px;
    background: url('../assets/client/img.client.02.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-5 .content-2 {
    top: 454px;
    left: 1963px;
    width: 385px;
    height: 109px;
    background: url('../assets/client/text.client_info.02.png');
    position: absolute;
    z-index: 6;
}

#main-5 .img-3 {
    top: 307px;
    left: 332px;
    width: 1432px;
    height: 407px;
    background: url('../assets/client/img.client.03.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-5 .content-3 {
    top: 414px;
    left: 2031px;
    width: 307px;
    height: 188px;
    background: url('../assets/client/text.client_info.03.png');
    position: absolute;
    z-index: 6;
}

#main-5 .img-4 {
    top: 307px;
    left: 332px;
    width: 1432px;
    height: 407px;
    background: url('../assets/client/img.client.04.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-5 .content-4 {
    top: 454px;
    left: 1882px;
    width: 576px;
    height: 109px;
    background: url('../assets/client/text.client_info.04.png');
    position: absolute;
    z-index: 6;
}

#main-5 .img-5 {
    top: 307px;
    left: 332px;
    width: 1432px;
    height: 407px;
    background: url('../assets/client/img.client.05.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-5 .content-5 {
    top: 414px;
    left: 2064px;
    width: 200px;
    height: 188px;
    background: url('../assets/client/text.client_info.05.png');
    position: absolute;
    z-index: 6;
}

#main-5 .btn-dropdown {
    top: 1216px; 
    left: 906px;
    width: 1069px;
    height: 123px; 
    background: url('../assets/client/button.client_network.01.png');
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

#main-5 .shapes-bottom {
    top: 1200px; 
    left: 848px;
    width: 1183px; 
    height: 420px; 
    background: url('../assets/client/shape.client_bgnetwork.01.png'); 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 9;
}

#main-5 .dropdown {
    position: relative;
    z-index: 10;
}

#main-5 .glass-overlay {
    top: 173px;
    left: 238px;
    width: 2404px;
    height: 1274px;
    background: #FFFFFF09 0% 0% no-repeat padding-box;
    box-shadow: inset 0px 3px 10px #FFFFFF4D;
    border-radius: 45px;
    opacity: 1;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: absolute;
    z-index: 10;
}

#main-5 .content-dropdown {
    top: 327px; 
    left: 369px;
    width: 2138px; 
    height: 1076px;
    background: url('../assets/client/img.client_popup.01.png');
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 11;
}

/* MAIN 6 - INNOVATION PROCESS */
#main-6 .header {
    top: 202px; 
    left: 121px; 
    width: 534px; 
    height: 123px; 
    background: url('../assets/process/button.process_na.01.png'); 
    position: absolute;
    z-index: 4;
}

#main-6 .shapes-top {
    top: 0;
    left: 41px;
    width: 694px; 
    height: 332px; 
    background: url('../assets/process/shape.process_bg.01.png'); 
    position: absolute;
    z-index: 4;
}

#main-6 .arrow-top {
    top: 349px; 
    left: 374px; 
    /* width: 64px;  */
    /* height: 27px; */
    width: 31px;
    height: 67px;
    background: url('../assets/process/shape.process_arrow.01.png') no-repeat; 
    /* background-size: cover;  */
    background-size: contain;
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-6 .btn-dropdown {
    top: 1215px; 
    left: 906px; 
    width: 1069px; 
    height: 123px; 
    background: url('../assets/process/button.process_global.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 7;
    cursor: pointer;
}

#main-6 .shapes-bottom {
    top: 1205px;
    left: 854px;
    width: 1171px;
    height: 415px;
    background: url('../assets/process/shape.process_bg.02.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-6 .process-top {
    top: 431px; 
    left: 157px;
    /* width: 2546px; */
    width: 2547px; 
    height: 355px; 
    background: url('../assets/process/img.process.01.png'); 
    position: absolute;
    z-index: 5;
    cursor: pointer;
}

#main-6 .process-bottom {
    top: 897px; 
    left: 157px;
    width: 2546px; 
    height: 245px;
    background: url('../assets/process/img.process.02.png'); 
    position: absolute;
    z-index: 5;
    cursor: pointer;
}

#main-6 .process-mid {
    top: 534px;
    left: 279px;
    width: 2287px;
    height: 590px;
    background: url('../assets/process/img.process.03.png'); 
    position: absolute;
    z-index: 6;
    cursor: pointer;
}

#main-6 .arrow-left {
    top: 802px;
    left: 150px;
    width: 19px; 
    height: 19px; 
    width: 30px;
    height: 30px;
    background: url('../assets/process/shape.process_linearrow.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 5;
}

#main-6 .line-left {
    top: 802px; 
    /* left: 159px;  */
    left: 164px;
    width: 2px; 
    height: 79px;
    background: url('../assets/process/shape.process_line.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-6 .arrow-right {
    top: 853px;
    left: 2689px;
    /* width: 19px; 
    height: 19px; */
    width: 30px; 
    height: 30px;
    background: url('../assets/process/shape.process_linearrow.02.png');
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 5;
}

#main-6 .line-right {
    top: 802px; 
    left: 2703px;
    width: 2px;
    height: 79px;

    background: url('../assets/process/shape.process_line.02.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-6 .dropdown {
    /* position: relative;  */
    z-index: 7;
}

#main-6 .glass-overlay {
    top: 107px;
    left: 150px;
    width: 2600px;
    height: 1406px;
    background: #FFFFFF09 0% 0% no-repeat padding-box;
    box-shadow: inset 0px 3px 10px #FFFFFF4D;
    border-radius: 45px;
    opacity: 1;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: absolute;
    z-index: 7;
}

#main-6 .bg {
    top: 124px; 
    left: 162px; 
    width: 2577px; 
    height: 1372px; 
    background: url('../assets/process/img.process_bgglobal.01.png') no-repeat; 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 8;
}

/* #main-6 .content-dropdown {
    top: 205px; 
    left: 241px; 
    width: 2456px; 
    width: 2465px;
    height: 1245px; 
    background: url('../assets/process/img.process_global.01.png') no-repeat; 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 9;
} */

#main-6 .content-dropdown {
    top: 205px;
    left: 241px; 
    width: 2465px;
    height: 1245px; 
    background: url('../assets/process/content-dropdown.png');
    background-size: cover;
    background-position: center center;
    position: absolute; 
    z-index: 9; 
}

/* MAIN 7 - R&D SOLUTIONS */
#main-7 .bubble-1 {
    top: 864px; 
    left: 237px; 
    width: 375px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.02.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bubble-2 {
    top: 564px; 
    left: 570px; 
    width: 375px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.04.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bubble-3 {
    top: 264px; 
    left: 912px; 
    width: 375px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.06.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bars-1 {
    top: 316px;
    left: 361px;
    width: 798px; 
    height: 1304px; 
    background: url('../assets/rD/shape.rd_bars.02.png'); 
    position: absolute;
    z-index: 3;
}

#main-7 .bubble-4 {
    top: 432px; 
    left: 67px; 
    width: 375px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bubble-5 {
    top: 124px; 
    left: 402px; 
    width: 375px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.03.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bubble-6 {
    top: 987px; 
    left: 739px; 
    width: 378px; 
    height: 378px; 
    background: url('../assets/rD/img.rd_circle.03.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-7 .bars-2 {
    top: 175px;
    left: 195px;
    width: 795px; 
    height: 1445px; 
    background: url('../assets/rD/shape.rd_bars.01.png'); 
    position: absolute;
    z-index: 3;
}

#main-7 .block-1 {
    top: 197px;
    left: 1453px; 
    width: 1353px; 
    height: 701px;
    background: url('../assets/rD/text.rd_block.01.png');
    position: absolute;
    z-index: 5;
}

#main-7 .lines-1 {
    top: 296px; 
    left: 1255px; 
    width: 197px; 
    height: 1324px; 
    background: url('../assets/rD/shape.rd_lines.01.png'); 
    position: absolute;
    z-index: 4;
}

#main-7 .block-2 {
    top: 928px;
    left: 1453px; 
    width: 1364px; 
    height: 187px; 
    background: url('../assets/rD/text.rd_block.02.png'); 
    position: absolute;
    z-index: 5;
}

#main-7 .lines-2 {
    top: 1021px; 
    left: 1363px; 
    width: 89px; 
    height: 599px; 
    background: url('../assets/rD/shape.rd_lines.02.png'); 
    position: absolute;
    z-index: 4;
}

#main-7 .dot-1 {
    top: 987px; 
    left: 1233px; 
    width: 75px; 
    height: 75px; 
    background: url('../assets/rD/shape.rd_circle.01.png'); 
    position: absolute;
    z-index: 6;
    cursor: pointer;
}

#main-7 .dot-2 {
    top: 1106px; 
    left: 1326px; 
    width: 75px; 
    height: 75px; 
    background: url('../assets/rD/shape.rd_circle.02.png'); 
    position: absolute;
    z-index: 6;
    cursor: pointer;
}

#main-7 .legend {
    top: 1269px; 
    left: 1567px; 
    width: 1065px; 
    height: 133px; 
    background: url('../assets/rD/text.rd_legend.01.png'); 
    position: absolute;
    z-index: 4;
}

/* MAIN 8 - SUCCESS STORIES */
#main-8 .bg {
    top: 0;
    left: 0;
    width: 717px; 
    height: 853px; 
    background: url('../assets/successStories/shape.success_circle.01.png');
    position: absolute;
    z-index: 3;
}

#main-8 .strokes {
    top: 232px; 
    left: 0;
    /* width: 223px; 
    height: 483px;  */
    width: 483px; 
    height: 224px; 
    background: url('../assets/successStories/shape.success_bgheader.01.png'); 
    position: absolute;
    z-index: 4;
}

#main-8 .header-1 {
    top: 298px; 
    left: 149px; 
    width: 313px; 
    height: 92px; 
    background: url('../assets/successStories/text.success_header.01.png') no-repeat; 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 5;
}

#main-8 .header-2 {
    top: 278px;
    left: 149px; 
    width: 347px; 
    height: 137px; 
    background: url('../assets/successStories/text.success_header.02.png') no-repeat; 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 5;
}

#main-8 .gradient-1 {
    top: 1195px;
    left: 222px;
    width: 141px; 
    height: 425px; 
    background: url('../assets/successStories/shape.success_gradient.01.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 3;
}

#main-8 .glass-1 {
    top: 1022px;
    left: 189px; 
    width: 207px; 
    height: 598px;
    background: url('../assets/successStories/shape.success_tab.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-8 .blur-1 {
    /* top: 1111px; 
    left: 188px; 
    width: 208px; 
    height: 208px; */
    top: 1075px;
    left: 144px;
    width: 300px; 
    height: 300px;
    background: url('../assets/successStories/shape.success_inactiveblur.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 5;
}

#main-8 .icon-1 {
    top: 1053px; 
    left: 221px; 
    width: 142px; 
    height: 142px;
    background: url('../assets/successStories/icon.success.01.svg'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-8 .gradient-2 {
    top: 1195px;
    left: 447px;
    width: 141px; 
    height: 425px; 
    background: url('../assets/successStories/shape.success_gradient.02.png');
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 3;
}

#main-8 .glass-2 {
    top: 1022px;
    left: 414px; 
    width: 207px; 
    height: 598px;
    background: url('../assets/successStories/shape.success_tab.02.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 4;
}

#main-8 .blur-2 {
    /* top: 1111px; 
    left: 413px; 
    width: 208px;
    height: 208px; */
    top: 1075px;
    left: 369px;
    width: 300px; 
    height: 300px;
    background: url('../assets/successStories/shape.success_inactiveblur.02.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 5;
}

#main-8 .icon-2 {
    /* top: 1053px; 
    left: 446px; 
    width: 142px; 
    height: 142px; */
    top: 1144px;
    left: 446px;
    width: 142px;
    height: 142px;
    background: url('../assets/successStories/icon.success.02.svg'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-8 .bg-1 {
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px; 
    background: url('../assets/successStories/img.success_bg.01.png'); 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 4;
}

#main-8 .color-1 {
    top: 46px; 
    left: 1039px; 
    width: 1528px; 
    height: 1528px; 
    background: url('../assets/successStories/shape.success_bigblur.01.png');
    background-size: cover; 
    background-position: center center;  
    position: absolute;
    z-index: 5;
}

#main-8 .img-top {
    top: 146px; 
    left: 1287px; 
    width: 1032px;
    height: 628px; 
    background: url('../assets/successStories/img.success_bank.01.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6; 
}

#main-8 .img-bottom {
    top: 846px; 
    left: 1192px; 
    width: 1223px;
    height: 628px; 
    background: url('../assets/successStories/img.success_bank.02.png'); 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 6; 
}

#main-8 .color-2 {
    top: 200px; 
    left: 1691px; 
    width: 1146px; 
    height: 1146px; 
    background: url('../assets/successStories/shape.success_bigblur.02.png');
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 4;
}

#main-8 .img-left {
    top: 331px; 
    left: 841px; 
    width: 373px;
    height: 799px; 
    background: url('../assets/successStories/img.success_employee.01.png'); 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 5;
}

#main-8 .img-mid {
    top: 357px; 
    left: 1138px; 
    width: 553px; 
    height: 739px; 
    background: url('../assets/successStories/img.success_employee.02.png'); 
    background-size: cover; 
    background-position: center center;
    position: absolute;
    z-index: 6;
}

#main-8 .img-right {
    top: 140px;
    left: 1825px; 
    width: 882px; 
    height: 1319px;
    background: url('../assets/successStories/img.success_employee.03.png'); 
    background-size: cover; 
    background-position: center center; 
    position: absolute;
    z-index: 6;
}



















































/* 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: 99;
    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: 99;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

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

/* EXTENDED MENU LIST */
.nav-box-left {
    top: 655px;
    left: 189px;
    width: 321px;
    height: 479px;
    background: transparent url('../assets/menuPopup/menu-box.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 999;
}

.nav-box-right {
    top: 655px;
    left: 2371px;
    width: 321px;
    height: 479px;
    background: transparent url('../assets/menuPopup/menu-box.png') 0% 0% no-repeat padding-box;
    position: absolute; 
    z-index: 999;
}

ul {
    list-style-type: none;
}

.nav-list ul {
    padding: 0;
    padding-left: 1.25em;
}

.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/34px 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 */
.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 2.5s ease-in-out;
    animation-fill-mode: forwards;
}

.zoom-in-out {
    animation: zoomInOut 3.5s ease-in-out; 
    animation-fill-mode: forwards;
}

.zoom-header {
    animation: zoomHeader 1.5s ease-in-out;
}

.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; */
}

.rotate-object {
    animation: rotateObject 1.5s ease-in-out;
}

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

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

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

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

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

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

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

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

.expand {
    animation: expand 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.zoom-spin {
    animation: zoomSpin 2s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes zoomSpin {
    0% {
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-120deg) scale(1.1);
        transform: rotate(-120deg) scale(1.1);
        opacity: 0;
    }
}


@keyframes expand {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.5, 1.5);
    }
}

@keyframes extendX {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%; 
        opacity: 1;
    }
}

@keyframes extendY {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 100%; 
        opacity: 1;
    }
}


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


@keyframes slideDown {
    0% { 
        transform: translateY(-100vh); 
        /* opacity: 0; */
    }
    50% {
        /* opacity: 0.7; */
    }
    100% { 
        transform: translateY(0); 
        /* opacity: 1; */
    }
}

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


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

@keyframes zoomIn {
    0% {
        transform: scale3d(0.85, 0.85);
        tranform-origin: center;
        /* opacity: 0; */
    }
    100% {
        transform: scale3d(1, 1);
        transform-origin: center;
        /* opacity: 1; */
    }
}

@keyframes zoomOut {
    0% {
        /* transform: scale3d(1.25, 1.25); */
        transform: scale3d(1, 1);
        transform-origin: center;
        /* opacity: 0; */
        opacity: 1;
    }
    100% {
        /* transform: scale3d(1, 1); */
        transform: scale3d(0.85, 0.85);
        transform-origin: center;
        /* opacity: 1; */
        opacity: 0;
    }

}

@keyframes zoomInOut {
    0% {
        transform: scale(0.4, 0.4);
        top: 0vh;
    }
    45% {
        transform: scale(1, 1);
        top: 0vh;
    }
    75% {
        transform: scale(1, 1);
        top: 0vh;
    }
    100% {
        transform: scale(0.6, 0.6);
        top: 750px;
    }
}

@keyframes zoomHeader {
    from {
        transform: scale(2, 2);
    }
    to {
        transform: scale(1, 1);
    }
}

@keyframes rotateCircle {
    0% {
        /* transform: scale(0.7) rotate(-120deg); */
        transform: rotate(-45deg);
        opacity: 0;
    }
    100% {
        /* transform: scale(1) rotate(0deg); */
        transform: rotate(0deg);
        opacity: 1;
    }
}

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

@keyframes rotateObject {
    from {
        transform: scale(2) rotate(-90deg);
        /* opacity: 0; */
    }
    to {
        transform: scale(1) rotate(0deg);
        /* opacity: 1; */
    }
}

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

@keyframes rollinReverse {
    from {
        transform: translate3d(100%, 0, 0) rotate(90deg);
        /* opacity: 0; */
    }
    to {
        transform: translateZ(0);
        /* opacity: 1; */
    }
}

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

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

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

@keyframes slideOutLeft {
    0% {
        /* transform: translateX(100%); */
        opacity: 1;
    }
    30% {
        transform: translate3d(-30%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}

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

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

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

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

@keyframes fadeUp {
    0% {
        /* -webkit-transform: translate3d(0, 150%, 0);
        transform: translate3d(0, 150%, 0); */
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

.fade-down {
    animation: fadeDown 1.5s ease-in-out;
}

@keyframes fadeDown {
    0% {
        /* -webkit-transform: translate3d(0, -150%, 0);
        transform: translate3d(0, -150%, 0); */
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

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

@keyframes fadeLeft {
    0% {
        /* -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0); */
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

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

@keyframes fadeRight {
    0% {
        /* -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0); */
        -webkit-transform: translate3d(-15%, 0, 0);
        transform: translate3d(-15%, 0, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

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

@keyframes fadein {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

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

@keyframes moveUp {
    from {
        transform: translateY(0);
    }
    
    to {
        transform: translateY(-198px);
    }
}

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

@keyframes moveDown { 
    from {
        transform: translateY(-198px);
    }

    to {
        transform: translateY(0);
    }
}


.anim-circle-1 {
    animation: circle1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-1 {
    animation: deCircle1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle1 {
    from {
        top: 1214px;
        left: 435px;
        width: 89px;
        height: 88px;
    }
    to {
        top: 1370px;
        left: 137px;
        width: 89px;
        height: 88px;
    }
}

@keyframes deCircle1 {
    from {
        top: 1370px;
        left: 137px;
        width: 89px;
        height: 88px;
    }
    to {
        top: 1214px;
        left: 435px;
        width: 89px;
        height: 88px;
    }
}

.anim-circle-2 {
    animation: circle2 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-2 {
    animation: deCircle2 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle2 {
    from {
        top: 1167px;
        left: 897px;
        width: 180px;
        height: 182px;
    }
    to {
        top: 1259px;
        left: 1046px;
        width: 180px;
        height: 182px;
    }
}

@keyframes deCircle2 {
    from {
        top: 1259px;
        left: 1046px;
        width: 180px;
        height: 182px;
    }
    to {
        top: 1167px;
        left: 897px;
        width: 180px;
        height: 182px;
    }
}

.anim-circle-3 {
    animation: circle3 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-3 {
    animation: deCircle3 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle3 {
    from {
        top: 173px;
        left: 1260px;
        width: 180px;
        height: 181px;
    }
    to {
        top: 72px;
        left: 788px;
        width: 180px;
        height: 181px;
    }
}

@keyframes deCircle3 {
    from {
        top: 72px;
        left: 788px;
        width: 180px;
        height: 181px;
    }
    to {
        top: 173px;
        left: 1260px;
        width: 180px;
        height: 181px;
    }
}

.anim-circle-4 {
    animation: circle4 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-4 {
    animation: deCircle4 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle4 {
    from {
        top: 354px;
        left: 1493px;
        width: 88px;
        height: 89px;
    }
    to {
        top: 253px;
        left: 1985px;
        width: 88px;
        height: 89px;
    }
}

@keyframes deCircle4 {
    from {
        top: 253px;
        left: 1985px;
        width: 88px;
        height: 89px;
    }
    to {
        top: 354px;
        left: 1493px;
        width: 88px;
        height: 89px;
    }
}

.anim-circle-5 {
    animation: circle5 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-5 {
    animation: deCircle5 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle5 {
    from {
        top: 1001px;
        left: 2138px;
        width: 88px;
        height: 88px;
    }
    to {
        top: 1111px;
        left: 2242px;
        width: 88px;
        height: 88px;
    }
}

@keyframes deCircle5 {
    from {
        top: 1111px;
        left: 2242px;
        width: 88px;
        height: 88px;
    }
    to {
        top: 1001px;
        left: 2138px;
        width: 88px;
        height: 88px;
    }
}

.anim-circle-6 {
    animation: circle6 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.deanim-circle-6 {
    animation: deCircle6 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle6 {
    from {
        top: 386px;
        left: 2183px;
        width: 180px;
        height: 181px;
    }
    to {
        top: 117px;
        left: 2150px;
        width: 180px;
        height: 181px;
    }
}

@keyframes deCircle6 {
    from {
        top: 117px;
        left: 2150px;
        width: 180px;
        height: 181px;
    }
    to {
        top: 386px;
        left: 2183px;
        width: 180px;
        height: 181px;
    }
}

.move-up-down {
    animation: moveUpDown 3s ease-in-out;
}

@keyframes moveUpDown {
    0% {
        opacity: 0;
        /* top: 788px; */
        top: 888px;
    }
    30% {
        opacity: 1;
        top: 667px;
    }
    60% {
        top: 667px;
    }
    100% {
        top: 788px; 
    }
}

.icon-up {
    animation: iconUp 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes iconUp {
    from {
        top: 788px;
    }
    to {
        top: 670px;
    }
}

.icon-down {
    animation: iconDown 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes iconDown {
    from {
        top: 670px;
    }
    to {
        top: 788px;
    }
}




.extend-up {
    animation: extendUp 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes extendUp {
    from {
        top: 431px;
    }
    to {
        top: 94px;
    }
}

.extend-down {
    animation: extendDown 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes extendDown {
    from {
        top: 897px;
    }
    to {
        top: 1234px;
    }
}

.shrink-up {
    animation: shrinkUp 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes shrinkUp {
    from {
        top: 94px;
    }
    to {
        top: 431px;
    }
}

.shrink-down {
    animation: shrinkDown 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes shrinkDown {
    from {
        top: 1234px;
    }
    to {
        top: 897px;
    }
}


.move-dot-up-1 {
    animation: moveDotUp1 1s ease-in-out; 
    animation-fill-mode: forwards;
}

.move-dot-up-2 {
    animation: moveDotUp2 1s ease-in-out;
    animation-fill-mode: forwards;
}

.move-dot-down-1 {
    animation: moveDotDown1 1s ease-in-out; 
    animation-fill-mode: forwards;
}

.move-dot-down-2 {
    animation: moveDotDown2 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes moveDotUp1 {
    from {
        top: 987px; 
        left: 1233px; 
        width: 75px; 
        height: 75px;
    }
    to {
        top: 840px;
        left: 1233px;
        width: 75px;
        height: 75px;
    }
}

@keyframes moveDotDown1 {
    from {
        top: 840px;
        left: 1233px;
        width: 75px;
        height: 75px;
    }
    to {
        top: 987px; 
        left: 1233px; 
        width: 75px; 
        height: 75px;
    }
}

@keyframes moveDotUp2 {
    from {
        top: 1106px; 
        left: 1326px; 
        width: 75px; 
        height: 75px; 
    }
    to {
        top: 987px;
        left: 1326px;
        width: 75px;
        height: 75px;
    }
}

@keyframes moveDotDown2 {
    from {
        top: 987px;
        left: 1326px;
        width: 75px;
        height: 75px;
    }
    to {
        top: 1106px; 
        left: 1326px; 
        width: 75px; 
        height: 75px; 
    }
}


.move-icon-up-1 {
    animation: moveIconUp1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.move-icon-down-1 {
    animation: moveIconDown1 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.move-icon-up-2 {
    animation: moveIconUp2 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.move-icon-down-2 {
    animation: moveIconDown2 1.5s ease-in-out; 
    animation-fill-mode: forwards;
}

@keyframes moveIconUp1 {
    from {
        top: 1144px;
        left: 221px;
        width: 142px;
        height: 142px;
    }
    to {
        top: 1053px; 
        left: 221px; 
        width: 142px; 
        height: 142px;
    }
}

@keyframes moveIconDown1 {
    from {
        top: 1053px; 
        left: 221px; 
        width: 142px; 
        height: 142px;
    }
    to {
        top: 1144px;
        left: 221px;
        width: 142px;
        height: 142px;
    }
}

@keyframes moveIconUp2 {
    from {
        top: 1144px;
        left: 446px;
        width: 142px;
        height: 142px;
    }
    to {
        top: 1053px;
        left: 446px;
        width: 142px;
        height: 142px;
    }
}

@keyframes moveIconDown2 {
    from {
        top: 1053px; 
        left: 446px; 
        width: 142px; 
        height: 142px;
    }
    to {
        top: 1144px;
        left: 446px;
        width: 142px;
        height: 142px;
    }
}


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

@keyframes moveArrowUp {
    from {
        top: 802px; 
    }
    to {
        top: 462px; 
    }
}

.reverse-move-arrow-up {
    animation: reverseMoveArrowUp 1.5s ease-in-out;
    animation-fill-mode: forwards;

}

@keyframes reverseMoveArrowUp {
    from {
        top: 462px; 
    }
    to {
        top: 802px;
    }
}

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

@keyframes moveArrowDown {
    from {
        top: 853px;
    }
    to {
        top: 1193px;
    }
}

.reverse-move-arrow-down {
    animation: reverseMoveArrowDown 1.5s ease-in-out; 
    animation-fill-mode: forwards;
}

@keyframes reverseMoveArrowDown {
    from {
        top: 1193px; 
    }
    to {
        top: 853px;
    }
}

.extend-line {
    animation: extendLine 1.5s ease-in-out; 
    animation-fill-mode: forwards;
}

@keyframes extendLine {
    from {
        top: 802px;
        height: 79px;
    }
    to {
        top: 462px;
        height: 758px;
    }
}

.reverse-extend-line {
    animation: reverseExtendLine 1.5s ease-in-out; 
    animation-fill-mode: forwards;
}

@keyframes reverseExtendLine {
    from {
        top: 462px;
        height: 758px;
    }
    to {
        top: 802px;
        height: 79px;
    }
}







.clickable {
    cursor: pointer;
}


/* SLIDEOUT MENUS TOGGLING */
.right-retract {
    left: 2857px !important;
}

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