h1 {  color: #fff;}
 @font-face {
       font-family:"Open Sans";
       font-weight:300;
       font-style:normal;
       src:url("https://webfonts.zohostatic.com/opensanslight/font.eot");
       src:url("https://webfonts.zohostatic.com/opensanslight/font.eot?#iefix") format("eot"),
       url("https://webfonts.zohostatic.com/opensanslight/font.woff2") format("woff2"),
       url("https://webfonts.zohostatic.com/opensanslight/font.woff") format("woff"),
       url("https://webfonts.zohostatic.com/opensanslight/font.ttf") format("truetype"),
       url("https://webfonts.zohostatic.com/opensanslight/font.svg#OpenSans-Light") format("svg");}
    @font-face {
       font-family:"Open Sans";
       font-weight:400;
       font-style:normal;
       src:url("https://webfonts.zohostatic.com/opensans/font.eot");
       src:url("https://webfonts.zohostatic.com/opensans/font.eot?#iefix") format("eot"),
       url("https://webfonts.zohostatic.com/opensans/font.woff2") format("woff2"),
       url("https://webfonts.zohostatic.com/opensans/font.woff") format("woff"),
       url("https://webfonts.zohostatic.com/opensans/font.ttf") format("truetype"),
       url("https://webfonts.zohostatic.com/opensans/font.svg#OpenSans") format("svg");}
    @font-face {
       font-family:"Open Sans";
       font-weight:600;
       font-style:normal;
       src:url("https://webfonts.zohostatic.com/opensanssemibold/font.eot");
       src:url("https://webfonts.zohostatic.com/opensanssemibold/font.eot?#iefix") format("eot"),
       url("https://webfonts.zohostatic.com/opensanssemibold/font.woff2") format("woff2"),
       url("https://webfonts.zohostatic.com/opensanssemibold/font.woff") format("woff"),
       url("https://webfonts.zohostatic.com/opensanssemibold/font.ttf") format("truetype"),
       url("https://webfonts.zohostatic.com/opensanssemibold/font.svg#OpenSans-Semibold") format("svg");}
    @font-face {
       font-family:"Open Sans";
       font-weight:700;
       font-style:normal;
       src:url("https://webfonts.zohostatic.com/opensansbold/font.eot");
       src:url("https://webfonts.zohostatic.com/opensansbold/font.eot?#iefix") format("eot"),
       url("https://webfonts.zohostatic.com/opensansbold/font.woff2") format("woff2"),
       url("https://webfonts.zohostatic.com/opensansbold/font.woff") format("woff"),
       url("https://webfonts.zohostatic.com/opensansbold/font.ttf") format("truetype"),
       url("https://webfonts.zohostatic.com/opensansbold/font.svg#OpenSans-Bold") format("svg");}
    @font-face {
       font-family:"Open Sans";
       font-weight:800;
       font-style:normal;
       src:url("https://webfonts.zohostatic.com/opensansextrabold/font.eot");
       src:url("https://webfonts.zohostatic.com/opensansextrabold/font.eot?#iefix") format("eot"),
       url("https://webfonts.zohostatic.com/opensansextrabold/font.woff2") format("woff2"),
       url("https://webfonts.zohostatic.com/opensansextrabold/font.woff") format("woff"),
       url("https://webfonts.zohostatic.com/opensansextrabold/font.ttf") format("truetype"),
       url("https://webfonts.zohostatic.com/opensansextrabold/font.svg#OpenSans-Extrabold") format("svg");}
    
    
    
    @font-face
    {
        font-family: 'Zoho_Puvi_Regular';
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot');
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot') format('embedded-opentype'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.woff2') format('woff2'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.otf') format('opentype');
        font-weight: normal; font-style: normal
    }
    
    @font-face
    {
        font-family: 'Zoho_Puvi_SemiBold';
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot');
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot') format('embedded-opentype'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.woff2') format('woff2'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.otf') format('opentype');
        font-weight: normal; font-style: normal
    }
    
    @font-face
    {
        font-family: 'Zoho_Puvi_Bold';
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.eot');
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.eot') format('embedded-opentype'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.woff2') format('woff2'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.otf') format('opentype');
        font-weight: normal; font-style: normal
    }
    
    @font-face
    {
        font-family: 'Zoho_Puvi_ExtraBold';
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_extrabold.eot');
        src: url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_extrabold.eot') format('embedded-opentype'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_extrabold.woff2') format('woff2'), url('https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_extrabold.otf') format('opentype');
        font-weight: normal; font-style: normal
    }
    
    
    
    html,  body{margin: 0; padding: 0; font-family: "Open Sans"; font-size: 14px;}
        .container{max-width: 1200px; margin: 0 auto;}    
        .flex{display: flex;}
        .sections{display: none;}
        .sections.active{display: block;}
        header{background: #060b3f;}
        header.active{background: #fff;}
        header .flex{justify-content: space-between; padding: 10px 0;}
        .logo{background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat; width: 120px; height: 55px; display: inline-block; background-size: 800px; margin-top: 0; z-index: 999; background-position: 0 5px;}
        header.active .logo{background-position: -172px 5px}
        header nav{align-self: center;}
        header nav a{color: #fff; text-decoration: none; margin-left: 25px; font-family: "Zoho_Puvi_Regular"; font-size: 16px;}
        .menuBtn{font-family: "Zoho_Puvi_SemiBold"; background: #0a954c; padding: 8px 35px;}
        header.active nav a{color: #252525;}
        header.active nav a.menuBtn{color: #fff;}
        .heroContainer{background: #060b3f; color: #fff;  position: relative;}
        .heroContainer::before{content: ""; position: absolute; right: 0; height: 100%; width: 40%; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-home-bg.png) no-repeat; background-size: cover; background-position: 0;}
        .heroContainer .container{justify-content: space-between; }
        .heroLeft{align-self: center; width: 50%;}
        .heroLeft p:first-of-type{color: #2aa2d4; font-size: 24px; font-weight: 600; margin: 0;}
        .heroLeft h1{font-size: 50px; line-height: 58px; font-weight: 700; margin: 6px 0 15px;}
        .heroLeft p:last-of-type{font-size: 18px; opacity: .8; line-height: 30px; margin: 0 0 50px;}
        .startBtn{font-family: "Zoho_Puvi_SemiBold"; background: #ca2033; padding: 10px 0; width: 160px; text-align: center; font-size: 20px; cursor: pointer;}
        .heroRight{width: 450px; height: 80vh;  margin: 0 0 50px; align-self: center; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat; background-size: 200%; background-position: 100% 63%;position: relative; z-index: 11;}
        .homeCtaContainer{ text-align: center; margin: 50px 0 80px;}
        .homeCtaContainer h2{font-size: 30px; ;line-height: 30px; font-family: "Zoho_Puvi_SemiBold";}
        .homeCtaContainer p{font-size: 24px; ;line-height: 40px; font-weight: 300; width: 65%; margin: 20px auto 40px;}
        .homeCtaContainer a{font-size: 16px; ; font-family: "Zoho_Puvi_Regular"; padding: 12px 35px;  color: #fff; text-decoration: none; border-radius: 3px;}
        .homeCtaContainer a:first-of-type{background: #09944b; margin-right: 25px;}
        .homeCtaContainer a:last-of-type{background: #da3d3d;}
        .footer{background: #f0f0f0; text-align: center; padding: 3px 0;}
        span#backToTop{display: none !important;}
        .scenariosContainer{position: relative; background: url(https://www.manageengine.com/log-management/images/screnario-home-bg.png) no-repeat; background-size: cover; background-position: bottom left; padding-bottom: 50px;}
        .scenariosContainer h2{text-align: center; font-size: 36px; color: #231f20; margin-bottom: 0;font-weight: 800;}
        .scenariosContainer p{text-align: center; font-size: 16px; line-height: 24px;  color: #231f20; width: 66%; margin: 10px auto;}
        .scenariosContainer p span{font-weight: 600;}
        .scenarioList{margin: 100px 5% 80px; justify-content: space-between;position: relative; z-index: 11;}
        .scenarioBox{width: 32%; position: relative;cursor: pointer;}
        #scenario1{background: #480ebd;}
        #scenario2{background: #009fdb;}
        #scenario3{background: #dc504f;}
        .sceneNo{position: relative; font-size: 20px; font-family: "Zoho_Puvi_Bold"; padding: 5px 35px 5px 15px; left: 0; top: 0; overflow: hidden; z-index: 1; line-height: 1.7}
        .sceneNoBg{position: absolute; top: -35px; left: 0; height: 60px; width: 150px; z-index: -1; overflow: hidden;}
        .sceneNoBg::before{content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 88%;}
        .sceneNoBg::after{content: ""; position: absolute; top: 0; right: 5px; height: 60px; width: 30%; transform: rotate(-29deg);}
        #scenario1 .sceneNoBg::before, #scenario1 .sceneNoBg::after{background: #dac7ff;}
        #scenario2 .sceneNoBg::before, #scenario2 .sceneNoBg::after{background: #b3e7fa;}
        #scenario3 .sceneNoBg::before, #scenario3 .sceneNoBg::after{background: #ff9f9f;}
        .scenarioBox h2{color: #ececec; font-family: "Zoho_Puvi_ExtraBold"; font-size: 30px; text-transform: uppercase;}
        .scenarioBox p{color: #ececec; font-family: "Zoho_Puvi_Regular"; font-size: 18px; margin-top: 0; line-height: 24px;}
        .heroImg{position: relative; height: 180px; width: 100%; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat; background-size: 1100px;}
        #scenario1 .heroImg{background-position: 16px -107px; top: 25px;}
        #scenario2 .heroImg{background-position: -2px -354px;}
        #scenario3 .heroImg{background-position: 10px -606px;}
        .heroName{position: absolute; font-size: 45px; font-weight: 800; transform: rotate(-90deg); right: -18%; bottom: 35%; height: 62px; width: 185px; opacity: .35;}
        .scenariosSlideContainer{height: calc(100vh - 75px); position: relative; overflow: hidden;}
        .scenarioNav{position: absolute; height: 46px; width: 480px; overflow: hidden; border-bottom-left-radius: 5px; z-index: 11;}
        .scenarioNav nav{position: absolute; height: 100%; width: 100%; left: 0; top: 0;justify-content: flex-start;}
        .scenario1 .scenarioNav div{background: #3f0ca4;}
        .scenario2 .scenarioNav div{background: #0b97cc;}
        .scenario3 .scenarioNav div{background: #cb4040;}
        .scenarioNav div{color: rgba(255,255,255,.35); line-height: 2.5; width: 29%; text-align: center; font-size: 18px; font-weight: 600; position: relative;}
        .scenario1 .scenarioNav div.shome{line-height: 3; width: 10%; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat #3f0ca4; background-size: 940px; background-position: -132px 10px; text-align: center; position: relative;}
        .scenario2 .scenarioNav div.shome{line-height: 3; width: 10%; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat #0b97cc; background-size: 940px; background-position: -132px 10px; text-align: center; position: relative; border-bottom-right-radius: 5px;}
        .scenario3 .scenarioNav div.shome{line-height: 3; width: 10%; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat #cb4040; background-size: 940px; background-position: -132px 10px; text-align: center; position: relative; border-bottom-right-radius: 5px;}
        .scenarioNav div.active{color: #000; opacity: 1; background: #fff; font-weight: 700;width: 30%; border-bottom-left-radius: 5px;}
        .scenarioNav div.active::before{content: ""; position: absolute; right: 5px; bottom: 0px;  width: 16px; height: 113%; background: #fff; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px; z-index: 1;}
        .scenarioNav div.active::after{content: ""; position: absolute; right: -10px; bottom: -7px;  width: 20px; height: 113%; background: #3f0ca4; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px; z-index: 0;}
        .scenario2 .scenarioNav div.active::after{background: #0b97cc; }
        .scenario3 .scenarioNav div.active::after{background: #db4e4f; }
        .scenario2 .s3::before, .scenario1 .s3::before{content: ""; position: absolute; right: 5px; bottom: 0px;  width: 16px; height: 113%; background: #0a97cc; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px; z-index: 1;}
        .scenario2 .s3::after, .scenario1 .s3::after{content: ""; position: absolute; right: -10px; bottom: -7px;  width: 20px; height: 113%; background: #009fdb; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px; z-index: 0;}
        .scenario1 .s3::before{background: #3e0da3}
        .scenario1 .s3::after{background: #470ebc}
        .scenario2 .s1{ border-bottom-left-radius: 5px; border-left: 2px solid #009fdb;}
        .scenario3 .s1{ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-left: 2px solid #dc4f4f;}
        .scenario1 .s2::after{content: ""; position: absolute; right: -2px; bottom: -1px;  width: 2px; height: 113%; background: #470ebc; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px; z-index: 11;}
        .scenario3 .s2::before{content: ""; position: absolute; left: 6px; bottom: -1px;  width: 2px; height: 113%; background: #dc4f4f; opacity: 1; transform: rotate(16deg); border-bottom-right-radius: 5px;}
        .s1, .s2, .s3, .shome{cursor: pointer;}
        .scenario1{background: #480ebd;}
        .scenario2{background: #009fdb;}
        .scenario3{background: #dc4f4f;}
        .scenarioSlider{position: relative; height: calc(100vh - 75px); z-index: 1;}
        .slide{justify-content: space-between; flex-direction: column; position: absolute; height: 100%; width: 100%; display: none;}
        .slide .container{position: relative; height: calc(100vh - 75px);}
        .slide.active{display: block; }
        .sceneContent{width: 60%; height: auto; position: relative; z-index: 11;}
        .alc{position: absolute; top: 0; left: 5%; bottom: 0; margin: auto; height: 250px; width: 40%;}
        .scenario3 .alc{height: 275px;}
        .sceneContent h2{color: #fbe104; font-size: 31px; margin: 0 0 35px}
        .sceneContent p{position: relative; top: 70px; left: 7%; font-size: 19px; color: #fff;}
        .sceneContent p span{font-weight: 700;}
        .sceneContent.alc p{color: #fff; top: 0; left: 0; font-size: 20px; margin-bottom: 20px;}
        .sliderNav{position: absolute; bottom: 60px; left: 5%; width: 100px; height: 40px; display: flex; justify-content: flex-start; z-index: 111}
        .sliderBack{left: 91%;}
        .sliderNav div{position: relative; height: 40px; width: 50px; background-color: #fff;cursor: pointer;}
        .sr.active{opacity: .5;}
        .sr.active::before{content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 99;}
        .sliderNav div.prev{display: none; text-align: center; font-size: 16px; width: 100px; height: 40px; background: #330887; color: #fff; line-height: 2.3;}
        .scenario2 .sliderNav div.prev{background: #097ba6;}
        .scenario3 .sliderNav div.prev{background: #ae3030;}
        .sl{background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat; background-size: 1050px; background-position: 10px -820px;border-right: 1px solid rgba(0,0,0,.2);}
        .sl:hover{background-position: -66px -820px; background-color: #eb0303;}
        .sr{background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-main-sprite.png) no-repeat; background-size: 1050px; background-position: -27px -820px;}
        .sr:hover{background-position: -111px -820px; background-color: #eb0303;}
        .sr.active:hover{background-position: -27px -820px; background-color: #fff;}
        .scenario1 .slide::before{content: "";position: absolute; height: 480px; width: 1200px; right: 0; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-scenario-1-sprite.png) no-repeat; background-size: 110%;}
        .scenario1 .slide.s12::before{background-position: -20px 40px; left: 0;}
        .scenario1 .slide.s13::before{background-position: -20px -490px; left: 0;}
        .scenario1 .slide.s14::before{background-position: -38px -1018px; left: 0;}
        .scenario1 .slide.s15::before{background-size: 100%; background-position: -47px -1312px; left: 0;}
        .scenario2 .slide::before{content: "";position: absolute; height: 480px; width: 1200px; right: 0; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-scenario-2-sprite.png) no-repeat; background-size: 110%;}
        .scenario2 .slide.s22::before{background-position: 64% 38px; left: 0;}
        .scenario2 .slide.s23::before{background-position: 60% -470px; left: 0;}
        .scenario2 .slide.s24::before{background-position: 67% -979px; left: 0;}
        .scenario2 .slide.s25::before{background-size: 105%; background-position: 88% -1461px; left: 0;}
        .scenario2 .slide.s26::before{background-size: 100%; background-position: 40px -1814px; left: 0;}
        .scenario3 .slide::before{content: "";position: absolute; height: 480px; width: 1200px; right: 0; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-scenario-3-sprite.png) no-repeat; background-size: 110%;}
        .scenario3 .slide.s32::before{background-position: 0 38px; left: 0;}
        .scenario3 .slide.s33::before{background-position: 0 -487px; left: 0;}
        .scenario3 .slide.s34::before{background-position: 0 -1007px; left: 0;}
        .scenario3 .slide.s35::before{background-position: 0 -1535px; left: 0;}
        .scenario3 .slide.s36::before{background-size: 100%; background-position: -6px -1814px; left: 0;}
        .scenario1 .slide.s11::before{content: ""; position: absolute; height: 100%; width: 60%; right: -10%; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-hero-sprite.png) no-repeat; background-size: 100%; background-position:  27px -30px; z-index: -1;}
        .scenario2 .slide.s21::before{content: ""; position: absolute; height: 100%; width: 60%; right: -10%; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-hero-sprite.png) no-repeat; background-size: 105%; background-position:  30px -693px; z-index: -1;}
        .scenario3 .slide.s31::before{content: ""; position: absolute; height: 100%; width: 60%; right: -10%; top: 0; bottom: 0; margin: auto; background: url(https://www.manageengine.com/log-management/images/ueba-interactive-chart-hero-sprite.png) no-repeat; background-size: 100%; background-position:  -24px -1350px; z-index: -1;}
        .helpDiv{position: absolute;
        height: 480px;
        width: 692px;
        border: 1px solid #000;
        z-index: 111;
        left: 162px;
        /* right: 0; */
        top: 0;
        bottom: 56px;
        margin: auto;display: none;}
        .scenario1 .slide.s11.altHeight::before, .scenario2 .slide.s21.altHeight::before, .scenario3 .slide.s31.altHeight::before{height: 570px !important;}
        @media screen and (min-width: 1450px){
            .scenario1 .slide.s11::before, .scenario2 .slide.s21::before, .scenario3 .slide.s31::before{height: 570px;}
        }
        @media screen and (max-width: 1300px){
            .heroLeft h1{font-size: 40px; line-height: 45px;}
            .heroLeft p:first-of-type, .homeCtaContainer p{font-size: 20px;}
            .homeCtaContainer p{line-height: 30px}
            .homeCtaContainer a{font-size: 15px;}
            .heroLeft p:last-of-type{font-size: 16px;}
            .startBtn{font-size: 18px;}
            .homeCtaContainer h2{font-size: 26px;}
            .container{max-width: 1000px;}
            header .flex{padding: 0;}
            header .logo{background-size: 700px; width: 100px;}
            header.active .logo{background-position: -152px 5px;}
            header nav a{font-size: 14px;}
            .scenariosSlideContainer{height: calc(100vh - 55px)}
            .scenarioNav div{font-size: 16px;}
            .scenarioNav{height: 40px;}
            .scenario1 .scenarioNav div.shome, .scenario2 .scenarioNav div.shome, .scenario3 .scenarioNav div.shome{background-position: -131px 6px;}
            .sceneContent h2{font-size: 28px;}
            .sceneContent.alc p{font-size: 18px;}
            .sceneContent p{font-size: 16px;}
            .sliderNav{bottom: 10px;}
            .sceneContent p:first-of-type{margin-top: 0;}
            .scenario1 .slide::before{width: 1000px;}
            .scenario1 .slide.s11::before{background-position: 27px 0;}
            .scenario1 .slide.s12::before{background-position: -20px 90px;}
            .scenario1 .slide.s13::before{background-position: -20px -352px;}
            .scenario1 .slide.s14::before{background-position: -38px -785px;}
            .scenario1 .slide.s15::before{background-position: -51px -1170px; background-size: 110%;}
            .scenario1 .slide.s15::after{content: ""; position: absolute; height: 24%; width: 100%; z-index: 1; top: 0; left: 0;  background: #480ebd;}
            .scenario2 .slide::before{content: "";position: absolute; height: 480px; width: 1200px; right: 0; top: 0; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-scenario-2-sprite.png) no-repeat; background-size: 110%;}
            .scenario2 .slide.s22::before{background-position: 64% -5%; left: 0;}
            .scenario2 .slide.s23::before{background-position: 64% 21.3%; left: 0;}
            .scenario2 .slide.s24::before{background-position: 64% 49%; left: 0;}
            .scenario2 .slide.s25::before{background-position: 64% 76%; left: 0;}
            .scenario2 .slide.s26::before{background-position: 0 102%; left: 0; background-size: 110%;}
            .scenario2 .slide.s26::after{content: ""; position: absolute; height: 24%; width: 100%; z-index: 1; top: 0; left: 0;  background: #009fdb;}
            .scenario2 .slide.s21::before{content: ""; position: absolute; height: 100%; width: 60%; right: -10%; top: 0; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-hero-sprite.png) no-repeat; background-size: 100%; background-position:  30px 48%; z-index: -1;}
            .scenario2 .slide::before{content: "";position: absolute; height: 480px; width: 1000px; right: 0; top: 0; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-scenario-2-sprite.png) no-repeat; background-size: 110%;}
            .scenario3 .slide.s31::before{background-position: -5px -1064px;}
            .scenario3 .slide::before{width: 1000px;}
            .scenario3 .slide.s32::before{background-position: 0 90px;}
            .scenario3 .slide.s33::before{background-position: 0 -350px;}
            .scenario3 .slide.s34::before{background-position: 0 -783px;}
            .scenario3 .slide.s35::before{background-position: 0px -1220px;}
            .scenario3 .slide.s36::before{background-position: 0px -1521px; background-size: 106%;}
            .scenario3 .slide.s36::after{content: ""; position: absolute; height: 24%; width: 100%; z-index: 1; top: 0; left: 0;  background: #dc4f4f;}
            .heroImg{background-size: 940px; height: 160px;}
            #scenario1 .heroImg{background-position: 16px -85px}
            #scenario2 .heroImg{background-position: -2px -296px}
            #scenario3 .heroImg{background-position: 10px -511px}
            .heroName{right: -26%; font-size: 38px;}
            .sliderNav{bottom: 0;}
            .sliderNav div{height: 30px; width: 40px;}
            .sl{background-size: 800px; background-position: 8px -625px;}
            .sr{background-size: 800px; background-position: -18px -625px;}
            .sl:hover{background-position: -52px -625px;}
            .sr:hover{background-position: -83px -625px;}
            .sliderNav div.prev{font-size: 13px; height: 30px; width: 80px;}
        }
        @media screen and (max-width: 1020px){
            .container{max-width: 90%;}
            .scenario1 .slide::before{width: 90%;}
        }
        @media screen and (max-width: 991px){
            .heroRight, .heroContainer::before{display: none;}
            .heroLeft{width: 100%; text-align: center; padding: 40px 0;}
            .startBtn{margin: 0 auto;}
            .scenariosContainer p{width: 80%;}
            .scenarioList{margin: 100px 0 0; flex-wrap: wrap; flex-direction: column; justify-content: center;}
            .scenarioBox{width: 300px; margin-bottom: 90px; align-self: center; height: 360px;}
            .heroImg{position: absolute; bottom: 0; left: 0; width: 100%;}
            #scenario1 .heroImg{top: 56%;}
            #scenario3 .heroImg{background-position: 10px -512px;}
            .scenariosContainer{padding-bottom: 0; background: none;}
            .scenariosSlideContainer, .scenarioSlider, .slide .container{height: auto;}
            .slide{position: relative;  height: 750px;}
            .scenarioNav{position: relative;}
            .sceneContent p{top: 30px;}
            .scenario1 .slide::before, .scenario2 .slide::before, .scenario3 .slide::before, .scenario1 .slide.s11::before, .scenario2 .slide.s21::before, .scenario3 .slide.s31::before{display: none;}
            .alc{width: 95%; position: relative; padding: 70px 0; margin: 0; height: auto;}
            .scenario1 .slide.s11::after, .scenario2 .slide.s21::after, .scenario3 .slide.s31::after{content: ""; display: block; position: relative; height: 100%; width: 60%; right: 0; top: -50px; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-hero-sprite.png) no-repeat; background-size: 450px; background-position: -18px 0px; z-index: -1; }
            .scenario2 .slide.s21::after{background-position: -18px 81%}
            .scenario3 .slide.s31::after{top: -100px; background-position: -18px 171%}
            .scenario1 .slide::after, .scenario1 .slide.s15::after{content: ""; position: relative; display: block; height: 580px; width: 415px; right: 0; top: 60px; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-scenario-1-sprite-mobile.png) no-repeat; background-size: 900px;}
            .scenario1 .s13::after{background-position: 100% 0;}
            .scenario1 .s14::after{background-position: 0 100%;}
            .scenario1 .slide.s15::after{background-position: 100% 106%;}
            .scenario2 .slide::after, .scenario2 .slide.s26::after{content: ""; position: relative; display: block; height: 580px; width: 415px; right: 0; top: 60px; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-scenario-2-sprite-mobile.png) no-repeat; background-size: 900px;}
            .scenario2 .s23::after{background-position: 100% 0;}
            .scenario2 .s24::after{background-position: 0 49%;}
            .scenario2 .s25::after{background-position: 107% 52%; background-size: 800px;}
            .scenario2 .slide.s26::after{background-position: 8% 112%; background-size: 728px;}
            .scenario3 .slide::after, .scenario3 .slide.s36::after{content: ""; position: relative; display: block; height: 580px; width: 415px; right: 0; top: 60px; bottom: 0; margin: auto; background: url(images/ueba-interactive-chart-scenario-3-sprite-mobile.png) no-repeat; background-size: 850px;}
            .scenario3 .s32::after{background-position: 0 1%;}
            .scenario3 .s33::after{background-position: 100% 2%;}
            .scenario3 .s34::after{background-position: 0 49%;}
            .scenario3 .s35::after{background-position: 107% 49%;}
            .scenario3 .slide.s36::after{background-position: 0 102%;}
            header nav a{margin-left: 10px;}
        }
        .navTrig, .closeNav{display: none;}
        @media screen and (max-width: 767px){
            header{position: relative; z-index: 99999;}
            .homeCtaContainer{text-align: center;}
            .homeCtaContainer a{display: block; margin-bottom: 10px;}
            .homeCtaContainer a:first-of-type{margin-right: 0;}
            .sceneContent{width: 100%;}
            .navTrig{display: block; position: absolute; height: 20px; width: 30px; right: 5%; top: 0; bottom: 0; margin: auto; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
            .navTrig.active{border-color: #000;}
            .navTrig::before{content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; background: #fff;}
            .navTrig.active::before{background: #000;}
            .navTrig::after{content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; background: #fff; }
            .navTrig.active::after{background: #000; }
            .navTrig.open{border: none;}
            .navTrig.open::before{transition: .3s; transform: rotate(45deg);}
            .navTrig.open::after{transition: .3s; transform: rotate(-45deg);}
            header nav{position: fixed; height: 100%; top: 55px; right: -400px; width: 300px; background: #fff; z-index: 9999; -webkit-box-shadow: 0 0 12px 2px rgba(0,0,0,.1); box-shadow: 0 30px 12px 2px rgba(0,0,0,.1); padding: 30px 15px 0; transition: .3s;}
            header nav a{display: block; margin-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,.5);}
            header.active nav a.menuBtn{text-align: center;}
            header nav a{color: #000;}
        }
        @media screen and (max-width: 575px){
            .scenarioNav{width: 300px;}
            .scenario3 .scenarioNav div.shome{width: 12%;}
            .scenarioNav div{width: 27%;}
            .scenarioNav div.active{width: 28%;}
            .scenarioNav div.active::after{right: -14px;}
            .scenario2 .s3::before, .scenario1 .s3::before{right: 4px; bottom: -2px; width: 5px;}
            .scenario3 .s2::before{left: 0;}
            .scenario1 .scenarioNav div.shome, .scenario2 .scenarioNav div.shome, .scenario3 .scenarioNav div.shome{background-position: -138px 6px;}
            .scenario1 .slide.s11::after, .scenario2 .slide.s21::after, .scenario3 .slide.s31::after{height: 288px; background-position: -10px 28px; background-size: 300px;}
            .scenario2 .slide.s21::after{background-position: -10px 51%;}
            .scenario3 .slide.s31::after{top: -100px; background-position: -10px 100%;}
            .slide{height: 675px;}
            .scenario1 .slide::after, .scenario1 .slide.s15::after, .scenario2 .slide::after, .scenario2 .slide.s26::after, .scenario3 .slide::after, .scenario3 .slide.s36::after{height: 470px; width: 300px;background-size: 700px;}
            .scenario2 .s25::after{background-size: 700px; background-position: 107% 50%;}
            .scenario2 .slide.s26::after{background-size: 540px; background-position: 8% 113%;}
        }
        @media screen and (max-width: 450px){
            .sceneContent h2{font-size: 22px;}
            .scenario1 .slide.s11::after, .scenario2 .slide.s21::after, .scenario3 .slide.s31::after{width: 95%;}
            .sceneContent.alc p{font-size: 15px;}
            .sceneContent p{font-size: 14px;}
            .scenarioNav div{font-size: 13px;}
            .scenarioNav div.active::before{bottom: -2px; right: 3px; width: 7px;}
        }