/* */ :root { --blueish: #00a2ff ; --blueish2: #0b9ed0; --blackish: #3E4348; --reddish: #f74f78; --greenish: #64ccc3; --ink: #303c79; --cpgreen: #f5fcff; --cpblue: #f5fdff; --cp2: #ffffff; --giftgreen: #16b125; --crystalblue: #60c5ff; --verylightblue: #f9feffd8; --crystallightblue: #a4deff; --radio-before: #91d3ff; --radio-border: #55adff; --radio-background: #d6f0ff; --radio-border-before: #b4ddff; --gblue: #3367d6; --gblue-darker: #1c4296; --yellow-highlight: rgb(255, 255, 194); --tweet-blue: #4495df; --cta-green: #3EA381; --tooltip-standard: #4495df; --sblue: #0074D4; } * { margin:0; padding:0; } .col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto {position: relative; width: 100%; padding-right: 15px; padding-left: 15px;} @media (min-width: 1670px){ /* expanding BS4 max-width */ .container {max-width: 1540px;} /* grid columns xxl */ .col-xxl {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;} .col-xxl-auto {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;} .col-xxl-1 {-webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%;} .col-xxl-2 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;} .col-xxl-3 {-webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;} .col-xxl-4 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;} .col-xxl-5 {-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%;} .col-xxl-6 {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .col-xxl-7 {-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;} .col-xxl-8 {-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;} .col-xxl-9 {-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;} .col-xxl-10 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;} .col-xxl-11 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;} .col-xxl-12 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;} /* order xxl */ .order-xxl-0 {-webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0;} .order-xxl-1 {-webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;} .order-xxl-2 {-webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;} .order-xxl-3 {-webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;} .order-xxl-4 {-webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4;} .order-xxl-5 {-webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5;} .order-xxl-6 {-webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6;} .order-xxl-7 {-webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7;} .order-xxl-8 {-webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8;} .order-xxl-9 {-webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9;} .order-xxl-10 {-webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10;} .order-xxl-11 {-webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11;} .order-xxl-12 {-webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12;} /* text-align xxl */ .text-xxl-center {text-align: center!important;} .text-xxl-left {text-align: left!important;} .text-xxl-right {text-align: right!important;} /* float xxl */ .float-xxl-left {float: left!important;} .float-xxl-right {float: right!important;} .float-xxl-none {float: none!important;} /* display xxl */ .d-xxl-none {display: none!important;} .d-xxl-inline {display: inline!important;} .d-xxl-inline-block {display: inline-block!important;} .d-xxl-block {display: block!important;} .d-xxl-table {display: table!important;} .d-xxl-table-cell {display: table-cell!important;} .d-xxl-table-row {display: table-row!important;} .d-xxl-flex {display: flex!important;} .d-xxl-inline-flex {display: inline-flex!important;} /* offsets xxl */ .offset-xxl-1 {margin-left: 8.333333%;} .offset-xxl-2 {margin-left: 16.666667%;} .offset-xxl-3 {margin-left: 25%;} .offset-xxl-4 {margin-left: 33.333333%;} .offset-xxl-5 {margin-left: 41.666667%;} .offset-xxl-6 {margin-left: 50%;} .offset-xxl-7 {margin-left: 58.333333%;} .offset-xxl-8 {margin-left: 66.666667%;} .offset-xxl-9 {margin-left: 75%;} .offset-xxl-10 {margin-left: 83.333333%;} .offset-xxl-11 {margin-left: 91.666667%;} /* spacing xxl */ .m-xxl-0{margin:0!important}.mt-xxl-0,.my-xxl-0{margin-top:0!important}.mr-xxl-0,.mx-xxl-0{margin-right:0!important}.mb-xxl-0,.my-xxl-0{margin-bottom:0!important}.ml-xxl-0,.mx-xxl-0{margin-left:0!important}.m-xxl-1{margin:.25rem!important}.mt-xxl-1,.my-xxl-1{margin-top:.25rem!important}.mr-xxl-1,.mx-xxl-1{margin-right:.25rem!important}.mb-xxl-1,.my-xxl-1{margin-bottom:.25rem!important}.ml-xxl-1,.mx-xxl-1{margin-left:.25rem!important}.m-xxl-2{margin:.5rem!important}.mt-xxl-2,.my-xxl-2{margin-top:.5rem!important}.mr-xxl-2,.mx-xxl-2{margin-right:.5rem!important}.mb-xxl-2,.my-xxl-2{margin-bottom:.5rem!important}.ml-xxl-2,.mx-xxl-2{margin-left:.5rem!important}.m-xxl-3{margin:1rem!important}.mt-xxl-3,.my-xxl-3{margin-top:1rem!important}.mr-xxl-3,.mx-xxl-3{margin-right:1rem!important}.mb-xxl-3,.my-xxl-3{margin-bottom:1rem!important}.ml-xxl-3,.mx-xxl-3{margin-left:1rem!important}.m-xxl-4{margin:1.5rem!important}.mt-xxl-4,.my-xxl-4{margin-top:1.5rem!important}.mr-xxl-4,.mx-xxl-4{margin-right:1.5rem!important}.mb-xxl-4,.my-xxl-4{margin-bottom:1.5rem!important}.ml-xxl-4,.mx-xxl-4{margin-left:1.5rem!important}.m-xxl-5{margin:3rem!important}.mt-xxl-5,.my-xxl-5{margin-top:3rem!important}.mr-xxl-5,.mx-xxl-5{margin-right:3rem!important}.mb-xxl-5,.my-xxl-5{margin-bottom:3rem!important}.ml-xxl-5,.mx-xxl-5{margin-left:3rem!important} .p-xxl-0{padding:0!important}.pt-xxl-0,.py-xxl-0{padding-top:0!important}.pr-xxl-0,.px-xxl-0{padding-right:0!important}.pb-xxl-0,.py-xxl-0{padding-bottom:0!important}.pl-xxl-0,.px-xxl-0{padding-left:0!important}.p-xxl-1{padding:.25rem!important}.pt-xxl-1,.py-xxl-1{padding-top:.25rem!important}.pr-xxl-1,.px-xxl-1{padding-right:.25rem!important}.pb-xxl-1,.py-xxl-1{padding-bottom:.25rem!important}.pl-xxl-1,.px-xxl-1{padding-left:.25rem!important}.p-xxl-2{padding:.5rem!important}.pt-xxl-2,.py-xxl-2{padding-top:.5rem!important}.pr-xxl-2,.px-xxl-2{padding-right:.5rem!important}.pb-xxl-2,.py-xxl-2{padding-bottom:.5rem!important}.pl-xxl-2,.px-xxl-2{padding-left:.5rem!important}.p-xxl-3{padding:1rem!important}.pt-xxl-3,.py-xxl-3{padding-top:1rem!important}.pr-xxl-3,.px-xxl-3{padding-right:1rem!important}.pb-xxl-3,.py-xxl-3{padding-bottom:1rem!important}.pl-xxl-3,.px-xxl-3{padding-left:1rem!important}.p-xxl-4{padding:1.5rem!important}.pt-xxl-4,.py-xxl-4{padding-top:1.5rem!important}.pr-xxl-4,.px-xxl-4{padding-right:1.5rem!important}.pb-xxl-4,.py-xxl-4{padding-bottom:1.5rem!important}.pl-xxl-4,.px-xxl-4{padding-left:1.5rem!important}.p-xxl-5{padding:3rem!important}.pt-xxl-5,.py-xxl-5{padding-top:3rem!important}.pr-xxl-5,.px-xxl-5{padding-right:3rem!important}.pb-xxl-5,.py-xxl-5{padding-bottom:3rem!important}.pl-xxl-5,.px-xxl-5{padding-left:3rem!important} .m-xxl-auto{margin:auto!important}.mt-xxl-auto,.my-xxl-auto{margin-top:auto!important}.mr-xxl-auto,.mx-xxl-auto{margin-right:auto!important}.mb-xxl-auto,.my-xxl-auto{margin-bottom:auto!important}.ml-xxl-auto,.mx-xxl-auto{margin-left:auto!important} } h1 { all: unset; /* Resets all styles */ font-size: 4.5vw !important; font-weight: 700 !important; font-family: "Open Sans", Arial, sans-serif !important; word-wrap: break-word !important; margin-left: 0 !important; padding: 0 !important; } h2 { all: unset; /* Resets all styles */ font-size: 1.5vw !important; font-weight: 500 !important; font-family: "Open Sans", Arial, sans-serif !important; word-wrap: break-word !important; margin-left: 0 !important; padding: 0 !important; } .stroke { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: .2px; -webkit-text-stroke-color: rgba(42,82,190,.6);; text-shadow: #727272 1px 0 3px; } .stroke-small { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: .1px; -webkit-text-stroke-color: rgba(42,82,190,.6); text-shadow: #000000 1px 1px 3px; } .stroke-smallb { /* Prefix required. Even Firefox only supports the -webkit- prefix */ /* -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: rgba(0, 0, 0, 0.6); text-shadow: #7dbafb 1px 1px 2px; */ } .btn-shadow{ transition: all 0.2s !important; box-shadow: rgba(6, 24, 44, 0.2) 0px 0px 0px 2px, rgba(6, 24, 44, 0.25) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; } .btn-shadow:hover{ box-shadow: rgba(50, 50, 93, 0.45) 0px 6px 12px -2px, rgba(0, 0, 0, 0.5) 0px 3px 7px -3px; } .pointer-events-off{ pointer-events: none !important; } .pointer-events-on{ pointer-events: visible; } .center-cell{ display: flex; justify-content: center; align-items: center; vertical-align: middle; } .modal-content { width: 400px; padding-top: 30px; padding-bottom: 30px; padding-left: 50px; padding-right: 50px; border-radius: 20px; -webkit-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); -moz-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); } /* @font-face { font-family: Formular; src: url(../fonts/Formular.ttf); } */ /* @font-face { font-family: Graphik; src: url("../fonts/GraphikRegular.otf") format("opentype"); } */ @font-face { font-family: Colfax, sans-serif; src: url('../fonts/Colfax-Regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: GraphikBlack; src: url("../fonts/GraphikBlack.woff2") format("woff2"); font-display: swap; } /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900;1000&display=swap'); */ /* @font-face { font-family: Roboto; font-display: block; src: url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600") format("truetype"); } */ /* @font-face { font-family: Poppins; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; } */ /* @font-face { font-family: PoppinsBlack; src: url("../fonts/Poppins-Black.ttf") format("truetype"); } */ /* @font-face { font-family: Montserrat; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); } */ /* @font-face { font-family: MontserratBold; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); } */ /* @font-face { font-family: MontserratExtraBold; src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); } */ /* @font-face { font-family: MontserratBlack; src: url("../fonts/Montserrat-Black.ttf") format("truetype"); } */ html { /* scroll-behavior: smooth !important; */ /* max-width: 100%; */ overflow-x: hidden; overflow-y: auto !important; /* font-family: "Montserrat", sans-serif; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch !important; /* adds momentum scrolling for iOS*/ } body { max-width: 100vw; /* overflow-x: hidden; */ font-family: "Poppins", sans-serif; font-weight: 500;; /* overflow-x: hidden; */ /* transition: transform 1.0s ease-in-out; */ backface-visibility: hidden; -webkit-backface-visibility: hidden; /* transform: translate3d(0,0,0.1px); */ /* transform: translate3d(0,0,0.1px); */ -webkit-overflow-scrolling: touch !important; /* adds momentum scrolling for iOS*/ /* overflow-x: hidden; */ } .beta{ font-size: 0.7rem; background: rgb(126, 126, 126); padding: 3px !important; line-height: 0.7rem;; opacity: 0.8; font-weight: 500; font-family: "Roboto", sans-serif; } .ranking-img{ max-height: 120px; height: 120px; cursor:pointer; margin-left: 40px; margin-right: 40px; transition: transform .2s ease-out; /* Animation */ } .ranking-img-top{ max-height: 140px; height: 140px; cursor:pointer; margin-left: 40px; margin-right: 40px; transition: transform .2s ease-out; /* Animation */ margin-top: -12px; } .ranking-img:hover{ max-height: 120px; height: 120px; transform: scale(1.2); cursor:pointer; margin-left: 40px; margin-right: 40px; } .ranking-img-top:hover{ transform: scale(1.2); } .additional-benefits>li { list-style-type:square !important; } .mirror{ transform: scale3d(-1,1,-1); } .landing-banner{ width: 100vw; height: 30px; background-color: rgba(255, 85, 0, 0.9); color: white; display: table-cell; vertical-align: middle; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } .white-link{ text-decoration: none; color: white !important; } .white-link:hover{ text-decoration: underline; color: white; } .bg-blue-full{ background: linear-gradient(-35deg, #60b7ff, #0079db); } .bg-blueish{ background: var(--blueish) !important; } .landing-video-parent{ transition: all 2.0s 0.4s; background: transparent; } .landing-video{ background: white;; width: 480px; height: 360px; } #slider-control{ left: calc( 65vw - 120px); top: calc( 23vh + 480px); } #blue-section-text{ color: white !important; } .blue-section{ /* box-shadow: rgba(17, 17, 26, 0.7) 0px 0px 16px; */ background: radial-gradient(circle at 50% 50%, #b6d5f6, #0C458F) !important;; transform: translateX(-20px) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .cerulean-blue-section{ /* box-shadow: rgba(17, 17, 26, 0.7) 0px 0px 16px; */ background: radial-gradient(circle at 20% 50%, #4C92E5, #91bbef) !important;; transform: translateX(-20px) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .benefits-headline-contrast { color: var(--yellow-highlight) !important; /* text-shadow: 1px 1px #494949; */ } .drop-settings li { list-style-type: none; } @-webkit-keyframes spinner { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .vertical-align { display: flex; align-items: center; } .mainscreen { /* max-width: 100%; */ /* overflow-x: hidden; */ /* overflow-x: hidden; */ will-change: transform, auto; transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); -webkit-transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-overflow-scrolling: touch !important; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .content { display: flex; align-items: center; flex-wrap: wrap; } .person { position: absolute; z-index: 1020; /* background: url('../images/persons.png') no-repeat; */ animation: person-anim 1.75s normal forwards ease-in-out; } .billboard-anim { animation: headline-anim 2.75s 0.25s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .billboard-mobile-anim { animation: headline-mobile-anim 2.75s 0.50s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .billboard-mobile-anim-subline { animation: headline-mobile-anim 2.75s 0.25s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .fadein-cta-mobile{ animation: fadein 1.5s 0.85s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .fadein-cta{ animation: fadein 1.5s 0.5s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .billboard-subline-anim { animation: headline-anim 3.5s 0.5s normal forwards cubic-bezier(0.19, 1, 0.4, 1); } .billboard-cta-anim { animation: opacity-clear 2.0s 0.50s normal forwards ease-in-out; } .mobile-brand-anim { animation: fadein 0.5s 0.0s normal forwards ease-in-out; } .floater { animation: chart-float-10 6.0s 0.6s infinite ease-in-out; ; } @keyframes chart-pre { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes chart-anim-l1 { to { opacity: 1.0; } } @keyframes bulb-anim { to { opacity: 0.8; } } @keyframes chart-float { 0.00% { -webkit-transform: translate(0px, 0px) scale(1.1, 1.1); }; 25% { -webkit-transform: translate(0px, -5px) scale(1.1, 1.1); }; 50% { -webkit-transform: translate(0px 0px) scale(1.1, 1.1); }; 75% { -webkit-transform: translate(0px, +5px) scale(1.1, 1.1); }; 100% { -webkit-transform: translate(0px, 0px) scale(1.1, 1.1); }; } @keyframes product-float { 0.00% { -webkit-transform: translate(0px, 0px) scale(1.1, 1.1); } 25% { -webkit-transform: translate(12px, -9px) scale(1.1, 1.1); } 50% { -webkit-transform: translate(0px, 0px) scale(1.1, 1.1); } 75% { -webkit-transform: translate(8px, -6px) scale(1.1, 1.1); } 100% { -webkit-transform: translate(0px, 0px) scale(1.1, 1.1); } } @keyframes chart-float-10 { 0.00% { -webkit-transform: translate(0px, 0px); } 25% { -webkit-transform: translate(0px, -10px); } 50% { -webkit-transform: translate(0px 0px); } 75% { -webkit-transform: translate(0px, +5px); } 100% { -webkit-transform: translate(0px, 0px); } } @keyframes fade-out-in { 0.00% { opacity: 0.3; } 50% { opacity: 0; } 100% { opacity: 0.3 } } @keyframes fade-out-in-full { 0.00% { opacity: 1.0; } 50% { opacity: 0; } 100% { opacity: 1.0 } } @keyframes fade-out-in-full2 { 0.00% { opacity: 1.0; width: 100%; height: 100%; } 30%{ opacity: 0; width: 100%; height: 100%; } 70% { opacity: 0; width: 100%; height: 100%; } 100% { opacity: 1.0; width: 100%; height: 100%; } } .fade-out-in-effect{ animation: fade-out-in-full 0.7s 0.0s ease-in-out forwards; } @keyframes fade-out-vid { 0.00% { opacity: 0.3; } 100% { opacity: .0 } } .absolute-center { margin: auto; position: relative; top: 0; left: 0; bottom: 0; right: 0; } .absolute-top-left { left: 0px !important; top: 0%; } .absolute-center-left { margin-bottom: auto; margin-right: auto; top: 50%; /* left: 0%; */ transform: translateY(-50%); } .bcn-parallax { transition: margin 2.5s cubic-bezier(0.22, 1, 0.36, 1); } .icon-text { /* color: #2c2c2c; */ color: #3E4348; ; /* color: #212E44; */ /* color: #ffffff;; */ /* color: white; */ /* color: #222222; */ /* color: white; */ /* font-weight: 400; */ font-size: 1.2rem !important; /* opacity: 0.0; */ font-family: 'Open Sans', sans-serif; font-weight: 400;; /* letter-spacing: -0.5px;; */ /* word-spacing: 5px; */ line-height: 150%; /* transform: translate3d(0,0,1px); */ /* color: white; */ /* color: #000000; */ /* -webkit-text-stroke: 1px rgb(255, 255, 255); */ /* text-shadow: 0.4px 0.4px #222; */ color: #262627; color: #3E4348; /* -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.1); */ animation: clear 1.0s 0.0s ease-in-out forwards; } .feat-text { /* color: #2c2c2c; */ color: #3E4348; ; /* color: #212E44; */ /* color: #ffffff;; */ /* color: white; */ /* color: #222222; */ /* color: white; */ /* font-weight: 400; */ font-size: 1.1rem; /* opacity: 0.0; */ font-family: 'Roboto', sans-serif; font-family: 'Open Sans', sans-serif; font-weight: 400;; /* letter-spacing: -0.5px;; */ /* word-spacing: 5px; */ line-height: 100%; /* transform: translate3d(0,0,1px); */ /* color: white; */ /* color: #000000; */ /* -webkit-text-stroke: 1px rgb(255, 255, 255); */ /* text-shadow: 0.4px 0.4px #222; */ color: #262627; color: #3E4348; /* -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.1); */ } .final-cta-headline { color: #3E4348; color: #212E44; color: #3E4348; font-size: 2.5rem; /* font-family: 'Khula', sans-serif; */ font-family: 'GraphikBlack', sans-serif; /* opacity: 0.0; */ font-weight: 800; line-height: 112%; top: -20px; /* letter-spacing: -1px; */ } .headline { color: var(--blackish); font-size: 3.8rem; font-family: 'GraphikBlack', sans-serif; opacity: 0.0; font-weight: 700; line-height: 110%; margin-left: -10px; /* line-height: 100% !important; */ } .about-text { color: #3E4348; /* color: #212E44; */ font-size: 1.1rem; line-height: 140%; /* font-family: 'Poppins', sans-serif; */ font-family: 'Open Sans', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 140%; /* letter-spacing: -0.2px; */ /* color: #262627; */ /* -webkit-text-stroke: 1.0px rgba(0, 0, 0, 0.1); */ } .why-dimensions { /* background-image: url('../images/wave_5.png'); -webkit-background-size: cover; -moz-background-size: cover;รง -o-background-size: cover; background-size: cover; */ background: linear-gradient(270deg, rgb(0, 78, 168), rgba(0, 150, 188, 0.85)); background: linear-gradient(-35deg, #60b7ff, #0079db); background: radial-gradient(circle at 80% 50%, #a3b5e8, #4C92E5) !important;; /* background: radial-gradient(circle at 20%, rgba(0, 81, 148, 1.0),rgba(0, 101, 168, 0.85)); */ /* box-shadow: 0 -5px 5px rgba(0, 101, 168, 0.9), 0 5px 5px rgba(0, 101, 168, 0.9); */ width: 100%; height: 700px; /* margin-top: 400px !important; */ } .why-chartpixel-section{ box-shadow: rgba(17, 17, 26, 0.5) 0px 0px 16px !important; } .why-chartpixel-subline { /* color: #212E44; */ font-size: 1.2rem; font-family: 'Poppins', sans-serif; font-family: 'GraphikBlack', sans-serif; font-family: 'Open Sans', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 700; line-height: 50%; /* letter-spacing: -0.5px; */ color: #ffdf9a; color: rgb(255, 190, 147); /* -webkit-text-stroke: 1.0px rgba(0, 0, 0, 0.5); */ transform: translateX(-40px); opacity: 0; } .features-img-subline { /* color: #212E44; */ font-size: 1.2rem; font-family: 'Poppins', sans-serif; font-family: 'GraphikBlack', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Open Sans', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 140%; /* letter-spacing: -0.5px; */ color: #ffdf9a; color: rgb(255, 190, 147); /* color: rgb(126, 126, 126); */ color: var(--blueish); color: #003887; color: #3E4348; opacity: 0; transform: translateX(-20px); /* -webkit-text-stroke: .5px rgba(255, 255, 255, 0.3); */ } .features-img-headline { /* color: #212E44; */ font-size: 3.2rem; font-family: 'Montserrat', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 800; line-height: 120%; /* letter-spacing: -0.5px; */ color: #ffffff; color: var(--blackish); -webkit-text-stroke: 1.0px rgba(255, 255, 255, 0.1); opacity: 0; transform: translateX(-20px); color: #003887; color: #3E4348; } .pagebreaker-one-headline{ font-size: 3.2rem; font-family: 'Montserrat', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 800; line-height: 112%; /* letter-spacing: -0.5px; */ color: #ffffff; /* color: #3E4348; */ -webkit-text-stroke: 1.0px rgba(0, 0, 0, 0.1); } .why-chartpixel-headline { /* color: #212E44; */ font-size: 3.2rem; font-family: 'Poppins', sans-serif; /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 800; line-height: 112%; /* letter-spacing: -0.5px; */ color: #ffffff; -webkit-text-stroke: 1.0px rgba(0, 0, 0, 0.1); transform: translateX(0px); } .fade-in-cta2 { /* animation: clear 0.5s 0.6s ease-in-out forwards; */ animation: bloat_min 0.3s 0.2s ease-in-out forwards, bounce_min 1.5s 0.5s ease-in-out forwards; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* -webkit-transform: translateZ(0) scale(1.0, 1.0); */ transform: translateZ(-1px); } .icon-subline { color: #3E4348; color: #212E44; color: var(--blackish); /* color: var(--gblue-darker); */ font-size: 2.5rem; /* font-family: 'Khula', sans-serif; */ font-family: 'GraphikBlack', sans-serif; /* font-family: 'MontserratBlack', sans-serif; */ opacity: 1.0; /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 800; line-height: 112%; /* letter-spacing: -.5px; */ } .features-headline { color: #3E4348; /* color: #212E44; */ font-size: 2.0rem; /* font-family: 'Khula', sans-serif; */ font-family: 'GraphikBlack', sans-serif; opacity: 0.0; animation: clear 1.0s 0.0s ease-in-out forwards; font-weight: 800; line-height: 112%; /* letter-spacing: -0.5px; */ } .about-headline { color: #3E4348; color: var(--gblue-darker); /* color: #303c79; */ /* color: #212E44; */ font-size: 2.1rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Montserrat', sans-serif; opacity: 0.0; animation: clear 1.0s 0.0s ease-in-out forwards; font-weight: 800; line-height: 112%; letter-spacing: -0.5px; } .team-headline { color: #3E4348; color: #303c79; /* color: #212E44; */ font-size: 2.1rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Montserrat', sans-serif; opacity: 0.0; animation: clear 1.0s 0.0s ease-in-out forwards; font-weight: 800; line-height: 112%; letter-spacing: -0.5px; } .learn-more { color: #3E4348; color: tomato; font-size: 1.0rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Poppins', sans-serif; opacity: 1.0; font-weight: 400; ; padding-right: 20px; /* padding-left: 25px; */ /* margin-left: 30px; */ border-radius: 40px; -webkit-box-shadow: 0px 5px 10px rgba(204, 204, 204, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.08) !important; box-shadow: 0px 5px 10px rgba(197, 197, 197, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.08) !important; background-color: rgb(255, 255, 255,0.7); transition: 0.2s all; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .start-demo { color: #3E4348; color: rgb(255, 255, 255); font-size: 1.0rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Poppins', sans-serif; opacity: 1.0; font-weight: 600; ; /* padding-left: 25px; */ /* margin-left: 30px; */ border-radius: 100px; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); /* background-color: rgb(255, 115, 91); */ background: linear-gradient(90deg, rgb(255, 115, 91),rgb(255, 151, 132)); background: #f12e45; transition: 0.2s all; -webkit-backface-visibility: hidden; backface-visibility: hidden; top:625px; right: 0px; display: inline-block; width: 170px; height: 50px; } .start-test { color: #3E4348; color: rgb(255, 255, 255); font-size: 1.0rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Poppins', sans-serif; opacity: 1.0; font-weight: 600; ; padding-right: 25px; /* padding-left: 25px; */ /* margin-left: 30px; */ border-radius: 100px; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); /* background-color: rgb(255, 115, 91); */ background: linear-gradient(90deg, rgb(255, 89, 59),rgb(255, 134, 112)); background: var(--reddish); transition: 0.2s all; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .start-demo:hover { color: #3E4348; color: rgb(255, 255, 255); transform: translateY(1px); -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); } .learn-more:hover { -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); color: tomato; transform: translateY(1px); } .btn-demo-start { color: #3E4348; color: tomato; color: white; border: 2px solid tomato; opacity: 1.0; font-weight: 600;; border-radius: 100px; -webkit-box-shadow: 0px 2px 2px rgba(207, 207, 207, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 2px 2px rgba(204, 204, 204, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); background-color: white; opacity: 1.0; font-weight: 400;; border: .5px solid rgb(228, 228, 228) !important; height: 20px; margin-top: -20px !important; padding-right: 1px; transition: all 0.2s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: "Roboto", sans-serif !important; height: 30px !important; line-height: 30px !important; width: 80px; font-size: 1.0rem; outline: none !important; /* background: tomato; */ /* background: var(--cta-green); */ background: #4C92E5; font-weight: 500; } .btn-demo-start:hover { -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); /* color: tomato; */ /* margin-left: 1px; */ transform: translateY(1px); /* transform: translateY(1px); */ } .button-cta2 { opacity: 0; padding-right: 10px; padding-left: 10px; border-radius: 30px; background-color: #f12d44; background:var(--blueish); background: var(--tweet-blue); color: #FFFFFF; font-family: 'Sailec', sans-serif; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.2rem; cursor: pointer; height: 60px; transition: all 0.3s ; -webkit-box-shadow: 0px 5px 7px rgba(136, 136, 136, 0.20), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 8px 12px rgba(0, 119, 255, 0.1), 1px 1px 5px rgba(49, 155, 255, 0.07) !important; /* margin-top: 0px; */ backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 1; min-width: 200px; border: 0.2px solid rgba(63, 63, 63, 0.2) !important; } .button-cta2:hover { /* margin-top: -5px; */ color: white; /* background-color: #ff1c37; */ -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.27); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.27); /* box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.27), 1px 1px 10px rgba(0,0,0,0.27); */ /* transform: translateY(2px); */ /* transform: translateY(1px); */ } .button-cta3 { border: 0px; padding-right: 10px; padding-left: 10px; border-radius: 30px; /* background-image: linear-gradient(135deg, #d51c32, #d51c32); */ /* background-image: linear-gradient(135deg, #d51c32, #ff3f05); */ background-color: rgb(255, 251, 248); color: blueis; color: tomato; /* color: #e92239; */ font-family: 'Sailec', sans-serif; font-family: 'Roboto', sans-serif; /* font-family: 'Graphik', sans-serif; */ font-weight: 500; font-size: 1.2rem; cursor: pointer; height: 60px; min-width: 200px; border: 0.2px solid rgba(172, 172, 172, 0.2) !important; /* -webkit-box-shadow: 10px 10px 10px #d51c32; -moz-box-shadow: 0px 5px 40px 10px rgba(0,0,0,0.57); */ /* box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); -moz-box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); */ /* -webkit-box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); */ /* border: 1.0px solid #e94457; */ border-radius: 100px; /* -webkit-box-shadow: 5px 5px 30px rgba(206, 116, 32, 0.17), 1px 1px 10px rgba(0,0,0,0.07); */ -webkit-box-shadow: 0px 5px 10px rgba(204, 204, 204, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.08) !important; box-shadow: 0px 5px 10px rgba(197, 197, 197, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.08) !important; background-color: white; /* #d51c32; */ /* letter-spacing: -0.5px; */ transition: all 0.3s ease-in-out; margin-top: 0px; ; opacity: 1.0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; /* -moz-osx-font-smoothing: grayscale; */ /* -webkit-text-stroke: 1.0px rgba(255, 28, 28, 0.1); */ /* transition: 0.3s all; */ outline: none !important; } .button-signup-story { border: 0px; padding-top: 17px; padding-right: 25px; padding-left: 28px; margin-left: 30px; border-radius: 30px; /* background-image: linear-gradient(135deg, #d51c32, #d51c32); */ /* background-image: linear-gradient(135deg, #d51c32, #ff3f05); */ background-color: rgb(255, 251, 248); color: tomato; color: white; /* color: #e92239; */ font-family: 'Poppins', sans-serif; /* font-family: 'Graphik', sans-serif; */ font-weight: 500; font-size: 1.1rem; cursor: pointer; height: 60px; width: 190px; /* -webkit-box-shadow: 10px 10px 10px #d51c32; -moz-box-shadow: 0px 5px 40px 10px rgba(0,0,0,0.57); */ /* box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); -moz-box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); */ /* -webkit-box-shadow: 10px 10px 40px rgba(206, 32, 32, 0.07), 1px 1px 10px rgba(0,0,0,0.27); */ /* border: 1.0px solid #e94457; */ border-radius: 100px; /* -webkit-box-shadow: 5px 5px 30px rgba(206, 116, 32, 0.17), 1px 1px 10px rgba(0,0,0,0.07); */ -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); background-color: #16a085 !important; /* #d51c32; */ /* letter-spacing: -0.5px; */ transition: all 0.3s ease-in-out; margin-top: 0px; ; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; /* -moz-osx-font-smoothing: grayscale; */ /* -webkit-text-stroke: 1.0px rgba(255, 28, 28, 0.1); */ /* transition: 0.3s all; */ } .button-signup-story:hover { /* margin-top: -5px; */ -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); transform: translateY(1px); } .button-cta3:hover { /* margin-top: -5px; */ color: tomato; color: tomato; -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); /* box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.27), 1px 1px 10px rgba(0,0,0,0.27); -moz-box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.27), 1px 1px 10px rgba(0,0,0,0.27); -webkit-box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.27), 1px 1px 10px rgba(0,0,0,0.27); */ /* transform: translateY(10px); -webkit-transform: translateY(10px); */ /* margin-top: 4px;; */ transform: translateY(1px); } /* border-radius: 10px; background-color: #d51c32; border: none; color: #FFFFFF; text-align: center; font-weight: 600 !important; font-family: 'Poppins', sans-serif; font-size: 1.0rem; transition: all 0.4s; cursor: pointer; height: 50px; /* margin: 5px; */ /* -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 5px 10px rgba(0,0,0,0.27); letter-spacing: -0.5px; */ .vertical-center { min-height: 100%; min-height: 100vh; display: flex; align-items: center; } .button { display: inline-block; padding: 10px; background: #ccc; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; } .button:hover { background: #ddd; } .appear { animation: clear 1s 0.0s forwards; opacity: 0; transform: translateZ(0) scale(0.9); backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(0.9); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .matrix-bounce { animation: bloat110 0.5s 0.0s ease-in-out forwards, bounce110 1.8s 0.5s ease-in-out forwards; } .matrix-x-bounce { animation: fade-in 1.0s 0.0s forwards, bloatX 0.5s 0.0s ease-in-out forwards, bounceX 1.8s 0.5s ease-in-out forwards; } /* visited link */ .collapse > a:visited { background: transparent !important; } .nav-link { color: white; /* width: 90vw; */ margin-left: .5vw; margin-right: .5vw; width: 120px; } .navbar-nav{ width: 100vw; } .billboard-headline-mobile, h1{ color: white; font-size: 2.3rem; font-weight: 800; } .billboard-subline-mobile{ color: white; font-size: 1.2rem; font-weight: 400; } @media only screen and (max-width : 992px) { .mobile-correction{ padding-left: 30px;; } .bg-sm-none { background: none !important; } .landing-video{ width: 90vw !important; transform: translateX(20px) !important; } #counter-parent{ width: 90vw !important; } .modal-content { width: 95% !important; border-radius: 10px; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; -webkit-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); -moz-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); /* border: none !important; */ } .beta{ /* font-size: 0.7rem; */ color: rgb(105, 105, 105); font-weight: 500; opacity: 0.5; font-family: "Roboto", sans-serif; transform: translate3d(20px,-20px,0) !important; } #video-static{ /* opacity: 0.3 !important; */ } .demo-subline{ font-size: 1.1rem !important; } .waiting-list-modal{ background-color: white !important; } #product-description-mobile{ /* margin-left: -30px; */ margin-top: 0px !important; margin-left: 0px !important; transform: translateX(-10px) !important; } .underlined-orange-thin{ border: none !important; } #waitlist-background{ top:-50px; } .waitlist-modal-parent{ top:-30px; } .waitlist-modal-headline{ font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 2.5rem !important; line-height: 30%; transform: translateX(-30px); opacity: 0; will-change: transform; } .waitlist-modal-headline-b{ font-family: "Open Sans", sans-serif; font-weight: 800; line-height: 30%; font-size: 3.4rem !important; transform: translateX(30px); opacity: 0; will-change: transform; } .dropsection-mobile-headline{ font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.8rem !important; line-height: 100%; transform: translateX(-30px); opacity: 0; will-change: transform; } .dropsection-mobile-headline-b{ font-family: "Open Sans", sans-serif; font-weight: 800; line-height: 100%; font-size: 3.4rem !important; transform: translateX(30px); opacity: 0; will-change: transform; } .waitlist-modal-subline{ font-family: "Open Sans", sans-serif; font-weight: 800; line-height: 100%; font-size: 1.1rem !important; width: 80%; margin-left: auto; margin-right: auto; } .waitlist-modal-row{ transform: translate3d(0, 0, 0) !important; } #waitlist-modal-text{ } .waitlist-modal-parent{ /* left: inherit !important; top: inherit !important; */ } #waitlist-background{ /* width: 100vw; height: auto; */ } .btn-next-video{ font-size: 1.3rem !important; } .click-away-btn{ border-radius: 20px !important; } .btn-group { display: block; } .btn-group .btn { display: block; float: none; width: 100%; } body{ overflow-y: scroll; -webkit-overflow-scrolling: touch; /* height:100%; */ /* scroll-behavior: smooth; */ } #drop-instructions-section{ max-width: 500px !important; } #drop-mobile-field{ max-width: 90%; } #waitlist-thanks{ right: 0px !important; left: 0px !important; width: 90%; bottom: 30px ; } #cookie-policy{ right: 0px !important; left: 0px !important; /* width: 90%; */ height: auto; padding-bottom: 20px; padding-top: 20px; z-index: 200000 !important; } .click-away-text{ font-size: 0.9rem !important; padding-right: 5px !important; padding-left: 5px !important; } #modal-parent{ width: 100vw !important; height: 100vh !important; } #waiting-list-screen-dimensions{ width: 100vw !important; height: 100vh !important; } .collapsed-btn{ /* width: 90% !important; */ } #our-story-div{ top: 5vh !important; } #back-to-main-btn{ display: none !important; } #barcelona_p3{ height: 125%; } #barcelona_p1{ /* margin-bottom: -100px; */ } .about-text{ font-size: 0.9rem !important; } .about-headline{ font-size: 1.7rem !important; margin-top: -30px; } .mainscreen{ /* overflow-y: scroll ; */ transition: transform 1.0s cubic-bezier(0.22, 1, 0.36, 1); -webkit-overflow-scrolling: touch; } .feat-text{ font-size: 1.0rem !important; } .acc-content{ font-size: 1.0rem !important; } .acc-container{ width: 90% !important; margin-left: auto; margin-right: auto; height: auto !important; } .acc-btn-top{ border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } .acc-btn-bottom{ border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } .acc-btn{ border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; /* border: 0.4px solid #65b7ff; */ } #mobile-product-description{ transform: translateX(-50px); /* opacity: 0; */ } #header-cta2-parent{ /* margin-top: 10px !important; */ } .footer-notes{ font-size: 1.0rem !important; } #footer-location{ margin-bottom: 10px !important; margin-top: 10px !important; } #footer-company{ margin-bottom: 10px !important; margin-top: 10px !important; } .final-cta { font-size: 1.1rem !important; } #features-img-headline{ transform: translateX(0px); opacity: 0; text-shadow: 1px 1px #494949 !important; } .features-img-subline{ opacity: 0; transform: translateX(0px) translateY(0px);; font-size: 1.1rem; } #features-img-text{ transform: translateY(50px);; /* opacity: 0; */ } .footer-link{ font-size: 1.0rem !important; } #moving-boxes{ background: radial-gradient(circle at 80%, #77c2ff, #0069be); padding-top: 30px; padding-bottom: 30px; box-shadow: rgba(17, 17, 26, 0.5) 0px 0px 16px; } .billboard-anim { animation: clear 0.5s normal forwards ease-in-out; } .billboard-subline-anim { animation: clear 0.5s normal forwards ease-in-out; } .billboard-cta-anim { animation: opacity-clear 2.0s 0.00s normal forwards ease-in-out; } .fade-in-cta2 { /* animation: clear 0.5s 0.6s ease-in-out forwards; */ animation: bloat_min 0.5s 0.0s ease-in-out forwards, bounce_min 1.5s 0.5s ease-in-out forwards; } #landing-main-image{ left:0px !important; } .person { animation: clear 0.5s 0.70s normal forwards ease-in-out; } #features-img-text{ width: 80%; } #features-total-text{ /* width: 80%; */ margin-top: 80px; } .icon-parent{ width: 80px !important; } #features-section{ padding-top: 0px !important; } #demo-headline{ width: 80vw !important; opacity: 0; transform: translateY(50px); padding-left: 0px !important; max-width: 400px; } #demo-section{ padding: 0; } .acc-initial{ /* height: 480px !important; */ /* height: 0px; padding: 0px !important; */ } #next-video-icon{ margin-left: auto !important; margin-right: auto !important; } #qm-up{ left: 30px !important; margin-top: 90px !important; } #qm-down{ width: 50px !important; bottom: 22vh !important; left: 75vw !important; } .headline-anim-parent{ margin-left: -175px !important; } #export-text-span{ white-space: normal !important; } #feature-icons{ margin-top: 50px !important; /* width: 100vw; */ } .persona-card-small{ border: 3px solid #c2daf4 !important; -webkit-box-shadow: 0px 2px 3px rgba(116, 116, 116, 0.07), 1px 1px 3px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px 3px rgba(116, 116, 116, 0.07), 1px 1px 3px rgba(0, 0, 0, 0.07) !important; width: 100% !important; aspect-ratio: 1/1 !important; } #drop-section-background{ border-radius: 0px !important; } .btn-demo-start { width: 90px !important; height: 40px !important; margin-left: -30px !important; transform: translateY(40px) !important; letter-spacing: 0px; font-size: 1.0rem; font-family: "Roboto", sans-serif; padding-top: 3px !important; /* color: white; */ /* background-color: tomato; */ box-shadow: none; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.14), 1px 1px 5px rgba(0, 0, 0, 0.07); } .btn-demo-start:hover { color: white; } .demo-play-btn-txt{ transform: scalex(1.0) !important; margin-top: -2px !important; } .demo-play-btn{ transform: translate3d(25px, -25px,0) !important; } #footer-company{ text-align: left !important; } #final-cta-cloud{ transform: scale3d(1.2, 1.5,1) translateY(-20px) !important; } .final-cta-headline{ font-size: 2.1rem !important; line-height: 130% !important; } #features-text-bullets{ width: 100%; margin-left: -20px !important; margin-right: 0px !important; margin-top: -25px !important; } #loaded-with-features-img{ transform: scale(1.0) !important; left: 20px !important; } #clean-data-image{ margin-left: -110px; transform: scale(0.4) translateY(-100px) !important; } #clean-data-image-fg{ /* transform: scale(0.7) !important; */ transform-origin: left; opacity: 0; } #clean-data-video-fg{ /* transform: scale(0.6) !important; */ transform-origin: center !important; left: 115px !important; } #clean-data-image-dragon{ /* transform: scale(0.6) !important; */ transform-origin: left !important; } #navi-new{ max-width: 80px !important; width: 80px !important; display: none !important; text-align: center !important; } #counter-text{ font-size: 1.8rem !important; } .next-video-button{ right: unset !important; } .why-chartpixel-headline{ font-size: 2.0rem !important; } .why-chartpixel-credentials{ font-size: 0.9rem !important; } .why-chartpixel-quote{ font-size: 1.1rem !important; font-family: "Open Sans", sans-serif !important; margin-top: 60px; font-weight: 600; } .why-text-alignment{ top: 0px !important; width: 100% !important; left: 0px !important; } #why-chartpixel-text-alignment{ width: 75%; padding-left: 55px !important; height: 100px !important; } #demo-tabs{ /* min-width: 0px !important; max-width: 95% !important; */ width: 100vw; } .drop-subline{ font-size: 1.5rem !important; } #drop-instructions{ margin-left: 0px !important; max-width: 100% !important; } #drop-instructions-parent{ margin-left: 0px !important; text-align: center; } #drop-section-background{ left: 0px !important; } #landing-subline-parent{ /* padding-left: 00px; padding-right: 30px; */ max-width: 600px; } .landing-subline{ font-size: 1.1rem; margin-top: -1.0rem !important; } .learn-more{ width: 180px; height: 55px !important; padding-top: 1.0rem; font-size: 1.0rem; max-width: 300px; border: 0.2px solid rgba(63, 63, 63, 0.04) !important; /* font-weight: 400 !important; */ } .icon-subline{ font-size: 1.9rem !important; font-weight: 800 !important; font-family: 'GraphikBlack', sans-serif !important; } .benefits-headline{ font-size: 1.7rem; font-weight: 700 !important; font-family: 'Roboto', sans-serif; } .icon-text{ font-size: 1.0rem !important; } #section-breaker-3{ height: 0px; } #section-breaker-2{ height: 0px; } #jumpstart-your-analysis-image{ transform: scale(0.6) translateX(-30px);; transform-origin: top; margin-bottom: 60px; opacity: 0; /* transform: translateX(30px); */ } #actionable-insights-image{ transform: scale(0.8) translatex(75px); transform-origin: top; } #actionable-insights-target{ opacity: 0; margin-top: -50px !important; width: 300px !important; /* height: 300px !important; */ } .mobile-tag-none{ display: none !important; } .mobile-tag-visible{ display: block !important; } #make-sense-background{ display: none; } #make-sense-text{ /* transform: translateX(0px) !important; */ padding-left: 50px !important; padding-right: 50px !important; opacity: 0.0; margin-top: 80px; } #actionable-insights-text{ transform: translateX(0px) translateY(30px); padding-left: 50px !important; padding-right: 50px !important; opacity: 0; } #clean-data-text{ /* transform: translateX(0px) !important; */ padding-left: 50px !important; padding-right: 50px !important; margin-top: 100px !important; opacity: 0; } #make-sense-image-laptop{ background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0.00%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%); border-radius: 0%; /* transform: scale(0.85) translateX(65px); */ transform-origin: top;; margin-bottom: -30px !important; margin-left: 40px !important; } #jumpstart-your-analysis-text{ /* transform: translateX(0px) !important; */ padding-left: 50px !important; padding-right: 50px !important; /* transform: translateY(-40px); */ opacity: 0; margin-top: -40px !important; } .jumpstart-your-analysis{ left: 0px !important; } #cta-row{ margin-top: 0px !important; } #above-fold-row{ height: auto !important; margin-top: 0px !important; } #above-fold-placeholder{ display:block !important ; } #above-fold-background{ /* display: none; */ width: 90vw; height: 61vh; left: -8vw; /* transform: rotate(10deg); */ } .navbar-collapse { height: 100vh; text-align: left; } .navbar { box-shadow: none !important; margin-right: auto; margin-left: auto; } .navbar-nav { text-align: left; margin-right: left; margin-left: left; } .nav-link { font-size: 1.5rem; color: white !important; margin-top: 1rem; font-weight: 400; width: 90vw; margin-left: auto; margin-right: auto; padding: auto; } .bg-signup-mobile{ background: rgb(85, 164, 255) !important; } .navbar-brand{ display: none; } #landing-main-image{ /* left: 10px !important; */ margin-top: 0px !important; } #landing-main-image-fg{ transform: scale(0.95); margin-top: 0px !important; } #login-navi-collapsed{ font-size: 1.5rem; font-weight: 500; color: --blackish; } #login-navi-collapsed:hover{ color: --blackish; } #expanded-nav-menu{ display: none; } #main-cta-btn{ margin-right: 0 !important; /* margin-top: 0px !important; */ } #landing-smallprint{ text-align: center !important; } #make-sense-image{ margin-right: 0px !important; /* transform: translateX(50px); */ opacity: 1.0 !important; } #drop-section-headline{ transform: translateY(20px); opacity: 0; } #b1{ opacity: 0; transform: translateX(-20px); } #b2{ opacity: 0; transform: translateX(-20px); } #b3{ opacity: 0; transform: translateX(-20px); } #t1{ opacity: 0; transform: translateX(20px); } #t2{ opacity: 0; transform: translateX(20px); } #t3{ opacity: 0; transform: translateX(20px); } } @media only screen and (min-width: 768px) and (max-width: 992px) { text-sm-nowrap{ white-space: nowrap; } text-sm-wrap{ white-space: normal; } .position-landing-video{ /* margin-top: 50px; */ transform: translate3d(-20px,0px,0px) !important; } #video-source{ left: 300px !important; top: -20px !important; } #billboard-headline, h1{ font-size: 3.5rem !important; } .headline-anim-parent{ margin-left: -275px !important; } #clean-data-image{ margin-left: 0px; transform: scale(0.4) translateY(-100px) !important; } #features-total-text{ /* width: 80%; */ margin-top: 100px; } } @media only screen and (max-width : 320px) { #billboard-headline, h1{ font-size: 2.0rem !important; } #header-subline{ font-size: 1.0rem !important; } .why-chartpixel-headline{ font-size: 1.7rem !important; } .about-text { font-size: 0.9rem !important; } } @keyframes clear-nav { 0.00% { opacity: 0.9; height: 120px; box-shadow: 0px 0px 0px white; } 100% { opacity: 1.0; height: 85px; box-shadow: 4px 4px 24px white; } } @keyframes restore-nav { 0.00% { opacity: 1.0; height: 85px; box-shadow: 4px 4px 24px white; } 100% { opacity: 0.9; height: 120px; box-shadow: 0px 0px 0px white; } } /* @keyframes highlightarrow{ 0.00% { opacity: 0.9; color: rgb(198, 239, 252); } 50% { opacity: 0.9; color: rgb(252, 162, 255); } 100% { opacity: 0.9; color: rgb(198, 239, 252); } } */ @keyframes highlightarrow { 0.00% { opacity: 0.7; transform: translateY(0px) scale(1.2, 1); } 50% { opacity: 0.7; transform: translateY(10px) scale(1.2, 1); } 100% { opacity: 0.7; transform: translateY(0px) scale(1.2, 1); } } @keyframes fadeout { to { opacity: 0.0; } } @keyframes slide-fadeout { to { transform: translateX(100px); } } @keyframes fadein { to { opacity: 1.0; } } @keyframes fadein-03 { to { opacity: 0.3; } } @keyframes clear { to { opacity: 1.0; transform: none; } } @keyframes clear-drop-area { to { opacity: 0.8; transform: none; } } @keyframes bloat { 0.00% { transform: scale(1.0, 1.0); } 100% { transform: scale(1.1, 1.1); } } @keyframes bloatX { 0.00% { transform: scaleX(1.0); } 100% { transform: scaleX(1.1); } } @keyframes bloat110 { 0.00% { transform: scale(1.0, 1.0); } 100% { transform: scale(1.07, 1.07); } } @keyframes bloat_min { 0.00% { transform: scale(1.0, 1.0); } 100% { transform: scale(1.05, 1.05); } } @keyframes bounce { 0.00% { transform: scale(1.1, 1.1); } 5% { transform: scale(1.1, 1.1); } 25% { transform: scale(0.90, 0.90); } 45% { transform: scale(1.02, 1.02); } 60% { transform: scale(0.97, 0.97); } 75% { transform: scale(1.01, 1.01); } 90.00% { transform: scale(0.99, 0.99); } 100.00% { transform: scale(1.00, 1.00); } } @keyframes bounceX { 0.00% { transform: scaleX(1.1); } 5% { transform: scaleX(1.1); } 25% { transform: scaleX(0.90); } 45% { transform: scaleX(1.02); } 60% { transform: scaleX(0.97); } 75% { transform: scaleX(1.01); } 90.00% { transform: scaleX(0.99); } 100.00% { transform: scaleX(1.00); } } @keyframes bounce110 { 0.00% { transform: scale(1.07, 1.07); } 5% { transform: scale(1.07, 1.07); } 25% { transform: scale(0.97, 0.97); } 45% { transform: scale(1.02, 1.02); } 60% { transform: scale(1.0, 1.0); } 75% { transform: scale(1.00, 1.00); } 90.00% { transform: scale(1.00, 1.00); } 100.00% { transform: scale(1.00, 1.00); } } @keyframes bounce_min2 { 0.00% { transform: scale(1.00, 1.00); } 25% { transform: scale(1.08, 1.08); } 50% { transform: scale(0.98, 0.98); } 80% { transform: scale(1.01, 1.01); } } @keyframes bounce_min { 0.00% { transform: scale(1.05, 1.05); } 5% { transform: scale(1.05, 1.05); } 50% { transform: scale(0.98, 0.98); } 100% { transform: scale(1.01, 1.01); } } @keyframes bounce_once { 50% { transform: scale(1.1, 1.1); } 100.00% { transform: scale(1.00, 1.00); } } @keyframes bounce_back { 100.00% { transform: scale(1.00, 1.00); } } @keyframes slidein { to { transform: translateX(20px); } } @keyframes text-ruck { 0.00% { transform: translateX(0px); opacity: 1; } 50% { transform: translateX(-15px); opacity: 0.1; } 100.00% { transform: translateX(0px); opacity: 1; } } @keyframes text-opacity-inout { 0.00% { opacity: 1; } 50% { opacity: 0.1; } 100.00% { opacity: 1; } } @keyframes vid-opacity-inout { 0.00% { opacity: 0.5; } 50% { opacity: 0.0; } 100.00% { opacity: 0.5; } } @keyframes text-ruck-rev { 0.00% { transform: translateX(0px); opacity: 1; } 50% { transform: translateX(15px); opacity: 0.1; } 100.00% { transform: translateX(0px); opacity: 1; } } @keyframes scale-demo { 0.00% { transform: scale(0.0, 0.0); } 75% { transform: scale(1.05, 1.05); } 100.00% { transform: scale(1.0, 1.0); } } @keyframes reduce-demo { 0.00% { transform: scale(1.0, 1.0); } 100.00% { transform: scale(0.0, 0.0); } } @keyframes reduce-demo_no_start { 100.00% { transform: scale(0.0, 0.0); } } @keyframes lotus-anim { 0.00% { transform: scale(1.0, 1.0); } 50% { transform: scale(1.1, 1.1); } 100.00% { transform: scale(1.0, 1.0); } } @keyframes lotus-anim2 { to { transform: scale(1.05, 1.05); } } @keyframes person-anim { to { transform: scale(1.00, 1.00) translateX(-10px); opacity: 1; } } @keyframes headline-anim { to { transform: translateX(12px); opacity: 1; } } @keyframes headline-mobile-anim { to { transform: translateY(-12px); opacity: 1; } } @keyframes headline-anim-delayed { 0.00% { opacity: 0.0; } 50% { opacity: 1.0; } 100.00% { transform: translateX(12px); opacity: 1.0 } } @keyframes scale-out-in { 0.00% { transform: scale(1.0, 1.0); } 50% { transform: scale(1.1, 1.1); } 100.00% { transform: scale(1.0, 1.0); } } @keyframes scale-out-in-appear { 0.00% { transform: scale(1.0, 1.0); opacity: 0.0; } 50% { transform: scale(1.05, 1.05); opacity: 1.0; } 100.00% { transform: scale(1.0, 1.0); opacity: 1.0 } } @keyframes scale-clear { to { transform: scale(1.0, 1.0); } } @keyframes opacity-clear { to { opacity: 1.0; } } /* @media (max-height: 1000px){ .img-caption{ font-size: 1.0em !important; } } */ #navbarToggleExternalContent ul { display: flex; width: 100%; margin: auto; max-width: 1000px; justify-content: space-between; text-align: center; vertical-align: middle !important; /* Add this */ } li.butt { cursor: pointer; color: #a1a1a1; /* color: #212E44; */ /* color: white; */ min-width: 80px; margin: 5px; font-size: 1.2rem; font-weight: 500 !important; height: 5rem; transition: all 0.4s; background-color: transparent; opacity: 1.0; display: table-cell !important; /* Add this */ vertical-align: middle !important; /* Add this */ /* padding-bottom: 5px !important; */ text-align: center !important; border-radius: 10px; ; height: 50px; font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; padding-top: 0.8rem; padding-left: 2.0rem; padding-right: 2.0rem; color: #303c79; color: #3E4348; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* padding-bottom: 0.5rem; */ /* letter-spacing: 0.3px; */ margin-top: 20px; color: white; color: #3E4348; font-weight: 800 !important; } li.butt:hover { /* background-image: url('../images/navbutton-stripe.png'); */ /* color: #ffffff !important; */ /* border-bottom: solid #83d6cf !important; */ /* animation: spring 500ms ease-out forwards, navline 100ms forwards; */ z-index: 1400; /* background-color: #e5f5ff; */ /* background-color: #00a2ff; */ /* color: black */ opacity: 1.0; font-weight: 500; ; /* color: black; */ /* border-radius: 10px;; */ /* border-width: 3px !important; */ /* box-shadow: 2px 2px 5px #dadada; */ /* font-weight: 600 !important; */ height: 50px; border-radius: 100px; /* color:rgb(28, 141, 206); color: rgb(255, 150, 131); color: white; */ /* color: #16a085; */ /* color: tomato; */ ; } .nav-highlighted { /* padding: 0.75rem 2.2rem 0.75rem; */ font-size: 1.1rem; min-width: 80px; margin: 5px; cursor: pointer; color: #ffffff !important; z-index: 1400; /* background-color: #f74f78; */ /* background-color: #d51c32; */ background-color: #16b125; background-color: #16a085; opacity: 1.0; /* box-shadow: 2px 2px 5px #dadada; */ -webkit-box-shadow: 0px 2px 3px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 2px 3px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); height: 50px; font-weight: 500 !important; font-family: 'Poppins', sans-serif; transition: all 0.3s; border-radius: 25px; cursor: pointer; display: table-cell !important; /* Add this */ vertical-align: middle !important; /* Add this */ text-align: center !important; letter-spacing: -0.5px; padding-top: 0.8rem; padding-left: 1.9rem; padding-right: 2.0rem; /* padding-bottom: 0.5rem; */ height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin-top: 20px; } #counter-parent{ width: 700px; } .final-cta { /* padding: 0.75rem 2.2rem 0.75rem; */ font-size: 1.2rem; min-width: 80px; margin: 5px; cursor: pointer; color: #ffffff !important; z-index: 1400; /* background-color: #f74f78; */ /* background-color: #d51c32; */ background-color: #16b125; background-color: #0b9ed0; opacity: 1.0; /* box-shadow: 2px 2px 5px #dadada; */ -webkit-box-shadow: 0px 5px 7px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 18px rgba(186, 216, 255, 0.57), 1px 1px 5px rgba(0, 108, 197, 0.07); height: 80px; font-weight: 500 !important; font-family: 'Poppins', sans-serif; transition: all 0.3s; letter-spacing: -0.5px; border-radius: 100px; cursor: pointer; display: table-cell !important; /* Add this */ vertical-align: middle !important; /* Add this */ text-align: center !important; letter-spacing: -0.5px; /* padding-top: 0.3rem; */ padding-left: 2.0rem; padding-right: 2.0rem; border: solid 0px; /* padding-bottom: 0.5rem; */ -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 220px; outline: none !important; /* background: #00a2ff; */ font-weight: 400 !important; background: var(--tweet-blue); } .cta-mobile-sm{ width: 220px; -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; display: table-cell !important; vertical-align: middle !important; text-align: center !important; padding-left: 1.0rem; padding-right: 1.0rem; border: solid 0px; letter-spacing: -0.5px; height: 70px; font-weight: 500 !important; font-family: 'Poppins', sans-serif; -webkit-box-shadow: 0px 5px 7px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 7px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); font-size: 1.0rem; cursor: pointer; border-radius: 100px; font-family: 'Poppins', sans-serif; font-weight: 400; box-shadow: rgba(0, 0, 0, 0.18) 0px 3px 5px; } .cta-mobile{ width: 250px; -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; display: table-cell !important; vertical-align: middle !important; text-align: center !important; padding-left: 2.0rem; padding-right: 2.0rem; border: solid 0px; letter-spacing: -0.5px; height: 80px; font-weight: 500 !important; font-family: 'Poppins', sans-serif; -webkit-box-shadow: 0px 5px 7px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 7px rgba(116, 116, 116, 0.37), 1px 1px 5px rgba(0, 0, 0, 0.07); font-size: 1.1rem; margin: 5px; cursor: pointer; border-radius: 100px; } .final-cta:hover { /* background-color: #0b9ed0; -webkit-box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.37), 0px 1px 5px rgba(0, 0, 0, 0.27); box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.37), 0px 1px 5px rgba(0, 0, 0, 0.27); transform: translateY(1px); */ /* padding-bottom: 0.5rem; */ } .nav-highlighted:hover { cursor: pointer; /* color: #ffffff !important; */ /* background-color: #16b125 !important; background-color: #16a085 !important; */ /* background-color: rgb(71, 197, 255) !important; */ ; z-index: 1400; opacity: 1.0; /* box-shadow: 2px 2px 5px #dadada; */ height: 50px; /* -webkit-box-shadow: 2px 2px 5px #dadada, 5px 5px 40px -10px rgba(0,0,0,0.27); -webkit-box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.37), 0px 1px 5px rgba(0, 0, 0, 0.27); box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.37), 0px 1px 5px rgba(0, 0, 0, 0.27); */ transform: translateY(1px); -webkit-box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.0), 0px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 0px 0px rgba(77, 77, 77, 0.0), 0px 1px 5px rgba(0, 0, 0, 0.07); } @keyframes spring { 100% { backface-visibility: hidden; -webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -webkit-transform-origin: center center; background-color: #f6fbff; border-bottom: 3px solid #83d6cf; -webkit-transform: translateY(-10px); } } @keyframes navline { 100% { backface-visibility: hidden; border-bottom: 3px solid #83d6cf; } } .title { width: 6rem; position: relative; display: flex; align-items: left; font-family: 'Montserrat', sans-serif; font-size: 3rem; } @keyframes mainBlock { 0.00% { width: 0px; left: 0px; opacity: 1.0; } 50% { width: 115px; left: 0px; opacity: 1.0; } 70% { opacity: 1.0; } 100% { width: 0px; left: 115px; opacity: 0.0; } } @keyframes secBlock { 0.00% { width: 0.00%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @keyframes mainFadeIn { 0.00% { opacity: 0; } 100% { opacity: 1; } } @keyframes popIn { 0.00% { width: 0px; height: 0px; background: #e9d856; border: 0px solid #ddd; opacity: 0; } 50% { width: 10px; height: 10px; background: #e9d856; opacity: 1; bottom: 45px; } 65% { width: 7px; height: 7px; bottom: 0px; width: 15px } 80% { width: 10px; height: 10px; bottom: 20px } 100% { width: 7px; height: 7px; background: #e9d856; border: 0px solid #222; bottom: 13px; } } @keyframes secFadeIn { 0.00% { opacity: 0; } 100% { opacity: 0.5; } } @keyframes top { 0.00% { opacity: 0; bottom: -80px } 100% { opacity: 1; bottom: 0px } } /* Underscore_animation_classes */ .hidden { opacity: 0; } .visibility-hidden { visibility:hidden; } /* .button-cta:hover{ background-color: #d51c32 !important; font-size: 1.0rem; color: white; font-weight: 500 !important; font-family: 'Poppins', sans-serif; max-height: 50px; border-radius: 2.0rem; */ /* letter-spacing: 1px; */ /* -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; } */ @keyframes opacity { 0.00%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes spin { 100% { transform: rotate(+720deg); } } @keyframes unspin { 100.00% { transform: rotate(-360deg); } } .smallprint { color: var(--blackish); /* color: #212E44; */ font-size: 0.8rem; font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Colfax', sans-serif; /* font-family: 'Poppins', sans-serif; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 120%; } .smallprint-l { color: var(--blackish); /* color: #212E44; */ font-size: 0.85rem; font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Colfax', sans-serif; /* font-family: 'Poppins', sans-serif; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 115%; } /* @-webkit-keyframes change { 0.00%, 12.66%, 100% {transform:translate3d(0,0,0);} 16.66%, 29.32% {transform:translate3d(0,-25%,0);} 33.32%,45.98% {transform:translate3d(0,-50%,0);} 49.98%,62.64% {transform:translate3d(0,-75%,0);} 66.64%,79.3% {transform:translate3d(0,-50%,0);} 83.3%,95.96% {transform:translate3d(0,-25%,0);} } */ /* @keyframes change { 0.00% {transform:translate3d(0,0,0);} 10% {transform:translate3d(0,0,0);} 20% {transform:translate3d(0,-33.3%,0);} 45% {transform:translate3d(0,-33.3%,0);} 55% {transform:translate3d(0,-66.6%,0);} 75% {transform:translate3d(0,-66.6%,0);} 85% {transform:translate3d(0,0,0);} } */ @keyframes change { 0.00% { transform: translate3d(0, -66.666%, 0); } 5% { transform: translate3d(0, -66.666%, 0); } 20% { transform: translate3d(0, -33.333%, 0); } 40% { transform: translate3d(0, -33.333%, 0); } 55% { transform: translate3d(0, 0, 0); } 65% { transform: translate3d(0, 0, 0); } 80% { transform: translate3d(0, -66.6%, 0); } } /* @keyframes change { 0.00% {transform:translate3d(0,0,0);} 10% {transform:translate3d(0,0,0);} 20% {transform:translate3d(0,-25%,0);} 35% {transform:translate3d(0,-25%,0);} 45% {transform:translate3d(0,-50%,0);} 60% {transform:translate3d(0,-50%,0);} 70% {transform:translate3d(0,-75%,0);} 85% {transform:translate3d(0,-75%,0);} 90% {transform:translate3d(0,0,0);} } */ .upload { width: calc(50vh * 1.5); min-width: 350px; height: 80%; min-height: 400px; border: solid 1px rgba(226, 226, 226, 0.5); border-radius: 50px; box-shadow: 0px 0px 50px rgba(226, 226, 226, 0.5); background-color: white; /* background-color: rgba(0, 217, 255, 0.04); */ /* background: linear-gradient(-135deg, rgba(151, 239, 255, 0.1), rgba(137, 212, 255, 0.05)); */ /* background-color: rgba(255, 251, 248,0.2);; */ /* background-color: rgba(171, 242, 255, 0.1) */ } .url-upload-nobg { display: flex; justify-content: center; align-items: center; width: 100%; opacity: 0; transition: all 0.2s; top: 25%; /* background: linear-gradient(-135deg, rgba(151, 239, 255, 0.1), rgba(137, 212, 255, 0.05)); */ /* background-color: rgba(255, 251, 248,0.2);; */ /* background-color: rgba(151, 239, 255, 0.1) */ } .demo-headline { color: #3E4348; /* color: #212E44; */ font-size: 2.0rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Montserrat', sans-serif; /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 800; line-height: 112%; letter-spacing: -0.5px; } #above-fold-row{ margin-top: 100px } .position-landing-video{ transform: translate3d(0px,50px,0px); } .product{ -webkit-backface-visibility: hidden; backface-visibility: hidden; top:-12vh;left: -2vw; --delay: 2.5s; transform: scale(0.90); width: 100%; max-width: 1050px; z-index: 100 !important; } .product-landing{ -webkit-backface-visibility: hidden; backface-visibility: hidden; /* max-width: 35vw; */ z-index: 0 !important; transform: scale3d(1.0, 1.0,1.0 ); transform-origin: center; } .acc-btn { /* width: 100%; */ /* margin: 0 auto; */ text-align: left; /* padding: 1.7rem; */ height: 4rem; cursor: pointer; /* -webkit-box-shadow: -5px 0px 10px rgba(206, 116, 32, 0.17), 5px 0px 10px rgba(206, 116, 32, 0.17); */ -webkit-backface-visibility: hidden; backface-visibility: hidden; padding-top: 20px; /* padding-left: 10px; */ /* transition: all 0.5s; */ border: 0.0px solid rgba(47, 144, 255, 0.1); background: linear-gradient(-90deg, #a0d4ff, #4C92E5); } .carusel-btn { width: 100%; /* margin: 0 auto; */ text-align: left; padding: 1.1rem; height: auto; cursor: pointer; /* background:#34495E; */ /* border: 1px solid #2C3E50; */ background: transparent; /* border-top-left-radius: 20px; border-top-right-radius: 20px; */ color: #212E44; /* background: white; */ /* background-color: #e2f8ff; */ /* border: 1px solid #dcfff4;; */ /* background: linear-gradient(-90deg, rgba(11,158,208,0.9), rgba(16,97,164,1.0)); */ background: white; /* -webkit-box-shadow: -5px 0px 10px rgba(206, 116, 32, 0.17), 5px 0px 10px rgba(206, 116, 32, 0.17); */ -webkit-backface-visibility: hidden; backface-visibility: hidden; /* margin: 0px; */ padding-top: 1rem; padding-bottom: 1rem; } .acc-btn-top { border-top-left-radius: 20px; border-top-right-radius: 20px; /* background: #fff5eb; */ } .carusel-btn-top { border-top-left-radius: 20px; border-top-right-radius: 20px; } .acc-btn-bottom { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .acc-content { height: 480px; /* width: 600px; */ margin: 0 auto; overflow: hidden; /* background:#f0fffd; */ text-align: left; color: #212E44; ; font-family: 'Colfax', sans-serif; font-size: 1.1rem; font-weight: 400; line-height: 130%; /* background-color: rgb(255, 237, 234);; */ /* background-color: rgba(226, 247, 255, 0.05); */ /* background: linear-gradient(-90deg, #ffffff, rgb(235, 250, 255)); */ background: transparent; /* -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(72, 173, 255, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(72, 173, 255, 0.07); */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* /* -webkit-transition: all 0.5s; transition: all 0.5s; */ -webkit-backface-visibility: hidden; backface-visibility: hidden; /* letter-spacing: -0.5px; */ /* border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; */ /* background: white; */ } .carusel-content { height: 0px; width: 100%; margin: 0 auto; overflow: hidden; /* background:#f0fffd; */ text-align: left; color: #3E4348; font-family: 'Roboto', sans-serif; font-size: 1.1rem; font-weight: 400; line-height: 130%; /* background-color: rgb(255, 237, 234);; */ /* background-color: rgba(226, 247, 255, 0.05); */ /* background: linear-gradient(-90deg, #ffffff, rgb(235, 250, 255)); */ background: transparent; /* -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(72, 173, 255, 0.07); */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* -webkit-transition: all 0.3s ease-out; */ /* transition: all 0.3s ease-out; */ /* letter-spacing: -0.5px; */ /* border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; */ /* background: white; */ } .carusel-container { margin-left: -17px !important; margin-top: -4px; } .acc-content-inner { padding-top: 15px; padding-left: 4px; padding-right: 4px; /* padding-right: 50px;; */ margin-left: auto; margin-right: auto; padding-bottom: 60px; background: transparent; /* background: rgb(249, 253, 255); */ } .carusel-content-inner { padding: 17px; padding-bottom: 10px; } .open { height: auto; } .selected { /* background: white; */ background-color: #ffffff; } .carusel-selected { /* background: white; */ background-color: #ffffff; } .accordion-headline { color: #3E4348; /* color: #212E44; */ font-size: 1.3rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Colfax', sans-serif; /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 0.00%; margin: 0px; padding: 0px; /* letter-spacing: -0.5px; */ /* color: white; */ line-height: 1.5rem; height: 1.5rem; padding-left: 35px !important; width: auto !important; background: transparent !important; /* width: 290px; */ } .carusel-headline { color: #3E4348; /* color: #212E44; */ font-size: 1.1rem; /* font-family: 'Khula', sans-serif; */ font-family: 'Colfax', sans-serif; /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 400; line-height: 0.00%; margin: 0px; padding: 0px; /* letter-spacing: -0.5px; */ color: #3E4348; background: transparent; line-height: 1.5rem; height: 1.5rem; width: 20vw; line-height: 1.5rem; height: 1.5rem; } .token { color: black; } .demo-fg-anim { -webkit-transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* @media only screen and (max-width: 1440px) { .col-xxl-2 { width: 500px; } } @media only screen and (min-width: 1440px) { .col-xxl-2 { width: 400px; } } @media only screen and (min-width: 1600px) { .landing-img-responsive { left: -150px !important; } .product-text-responsive { width: 500px !important; } } @media only screen and (min-width: 1440px) and (max-width: 1600px) { .demo-text-adjust { margin-left: 40px; } .landing-img-responsive { left: -100px !important; } .product-text-responsive { width: 500px !important; } .about-headline{ font-size: 2.2rem !important; } .about-text{ font-size: 1.0rem !important; } .carusel-headline{ font-size: 1.0rem !important; } .carusel-content{ font-size: 1.0rem !important; } .carusel-btn{ padding-top: 1rem; padding-bottom: 1rem; } } @media only screen and (min-width: 1366px) and (max-width: 1440px) { .img-responsive { max-width: 120%; } .headline-anim-format{ font-size: 3.8rem !important; } .landing-img-responsive { left: 0px !important; } .product-text-responsive { width: 500px !important; } .about-headline{ font-size: 2.2rem !important; } .about-text{ font-size: 1.0em !important; } .carusel-headline{ font-size: 1.0rem !important; } .carusel-content{ font-size: 1.0rem !important; } .carusel-btn{ padding-top: 1rem; padding-bottom: 1rem; } } @media only screen and (max-width: 1366px) and (min-width: 1024px) { #signup-story-btn{ height: 50px !important; font-size: 1.0rem !important; padding-top: 0.85rem; width: 180px; } .img-responsive { max-width: 90%; } .headline-anim-format{ font-size: 3.0rem !important; } .landing-img-responsive { left: 0px !important; } .product-text-responsive { width: 400px !important; height: 50px; } .button-responsive { font-size: 0.9rem !important; height: 50px; } .drop-icons-responsive{ transform: translateX(20px); } .about-headline{ font-size: 2.2rem !important; } .about-text{ font-size: 0.9rem !important; } .carusel-headline{ font-size: 0.9rem !important; } .carusel-content{ font-size: 0.9rem !important; } .carusel-btn{ padding-top: 1rem; padding-bottom: 1rem; } #page-breaker-one-text{ margin-left: 200px; } .demo-fg-anim{ margin-left: -150px; } .why-chartpixel-quote{ font-size: 1.4rem !important; } .upload-headline{ font-size: 1.5rem; } .upload-subline{ font-size: 1.0rem; } #features-img-headline{ font-size: 2.5rem; } } @media only screen and (max-width: 1200px) { .rot-arrow{ visibility: hidden; } .btn-demo-start{ margin-left: -50px; } .persona-subline{ font-size: 1.4rem !important; -webkit-text-stroke: 0.0px rgba(0, 0, 0, 0.1); } .persona-headline{ font-size: 2.5rem !important; } .about-headline{ font-size: 2.0rem !important; } .about-text{ font-size: 0.9em !important; } .carusel-headline{ font-size: 0.9rem !important; } .carusel-content{ font-size: 0.9rem !important; } .carusel-btn{ padding-top: 1.0rem; padding-bottom: 1.0rem; } #features-img-headline{ font-size: 2.3rem; } } @media only screen and (max-width: 1024px) and (min-width: 800px) { #logo{ left: -82vw !important; } .img-responsive { max-width: 72%; margin-top: 150px; } .landing-img-responsive { left: 50px !important; top: 80px !important; } .product-text-responsive { width: 400px !important; height: 50px; } .landing-bg-responsive { margin-top: -6vh; transform: rotate(-22deg) scaleX(1.6) scaleY(1.8) translate3d(14vw,12vh, 0) !important; } .button-responsive { font-size: 0.9rem !important; height: 50px; } .btn-demo-start{ margin-left: -80px; } .persona-subline{ font-size: 1.2rem !important; -webkit-text-stroke: 0.0px rgba(0, 0, 0, 0.1); } .persona-headline{ font-size: 2.2rem !important; } .persona-card { width: 160px !important; height: 160px !important; background: linear-gradient(-60deg, rgba(41, 187, 255, 0.4), rgb(94, 204, 255)); cursor: pointer; } .persona-title { margin-top: 0px !important; } .overlay-content{ left: -4vw !important; } .persona-img{ margin-top:-10px !important; } .demo-fg-anim{ margin-left: -150px; } } @media only screen and (max-width: 800px) and (min-width: 320px) { } */ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 992px) { .landing-text-responsive{ font-size: 1.7rem; } .button-cta2{ /* width: 75%; */ /* font-size: 1.1rem !important; */ } .button-cta3{ /* width: 75%; */ /* font-size: 1.1rem !important; */ color: rgb(64, 83, 102); -webkit-box-shadow: 0px 5px 8px rgba(204, 204, 204, 0.14), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 8px rgba(197, 197, 197, 0.14), 1px 1px 5px rgba(0, 0, 0, 0.07); } .headline{ text-align: center !important; line-height: 130%; } .landing-subline{ text-align: center; font-size: 1.0rem; } .headline-anim-parent{ margin-left: -175px; } .headline-anim-format{ line-height: 121% !important; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 992px) { .landing-text-responsive{ font-size: calc(1.2rem + 2.0vw); } .landing-subline-responsive{ font-size: calc(0.7rem + 0.9vw); } .button-cta2{ width: 100%; } .button-cta3{ width: 100%; } .above-fold-left { padding-left: 5vw; } .headline{ text-align: left; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .product-landing{ left: 2vw; transform: scale3d(0.850.85,1.0); } .above-fold-left { padding-left: 5vw; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .product-landing{ left: -3vw; top: 0vh; transform: scale3d(0.75,0.75,1.0); } .above-fold-left { padding-left: 13vw; } } /* Extra-extra large devices (large laptops and desktops, 1440px and up) */ @media only screen and (min-width: 1440px) { .landing-text-responsive{ font-size: 3.0rem; } .landing-subline-responsive{ font-size: 1.1rem; } } #mobile-warning{ visibility:hidden; display: none;; } #mainscreen{ visibility: visible; } #header-navbar{ visibility: visible; } /* @media only screen and (min-width: 801px) { #mobile-warning{ visibility:hidden; display: none;; } #mainscreen{ visibility: visible; } #header-navbar{ visibility: visible; } } @media only screen and (max-width: 800px) and (min-width: 50px) { #mobile-warning{ visibility: hidden; display: none; } */ /* #mobile-warning{ visibility: visible; } #mainscreen{ visibility: hidden; display: none; } #header-navbar{ visibility: hidden; } } */ .checkbox-feat-1 { margin-top: 1.5rem; transition: all 1.0s 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s 0.1s; background: transparent !important; /* border-radius: 15px; */ min-height: 80px; /* -webkit-box-shadow: 0px 5px 5px rgba(207, 207, 207, 0.07), 1px 1px 5px rgba(0, 0, 0, 0.17); box-shadow: 0px 3px 5px rgba(196, 196, 196, 0.07), 1px 1px 5px rgba(110, 110, 110, 0.17); */ background-color: rgb(255, 255, 255,0.7); max-width: 90% !important; margin-left: -16px; } .border-left-blue{ border-left: 10px solid var(--blueish); border-left: 10px solid #92d7ff; } .border-left-tomato{ border-left: 10px solid tomato; border-left: 10px solid rgb(255, 203, 194) } .border-left-red{ border-left: 10px solid var(--reddish); border-left: 10px solid #f5b0c1; } .border-left-green{ border-left: 10px solid var(--greenish); border-left: 10px solid #bbe0dd ; } .br-10{ border-radius: 10px; border: 0.5px solid lightgrey; } .checkbox-feat-4 { transition: all 1.0s 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s 0.25s; } .checkbox-feat-2 { transition: all 1.0s 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s 0.25s; } .checkbox-feat-3 { transition: all 1.0s 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s 0.25s; } .zoom { transition: transform .2s ease-out; /* Animation */ margin: 0 auto; } .tr-left{ transform-origin: left; } .tr-right{ transform-origin: right; } .tr-center{ transform-origin: center; } .zoom:hover { transform: scale(1.1); z-index: 9999 !important; } /* .feat-window { width: 1200px; } */ .tooltip { transition: opacity 0.2s !important; width: 150px !important; z-index: 5000 !important; /* background:rgba(0, 0, 0,0.3); */ border-radius: 10px; margin-bottom: 15px; } .large .tooltip { width: 250px !important; z-index: 5000 !important; } .tooltip-inner { background-color: var(--blackish); color: white; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 17px -5px, rgba(0, 0, 0, 0.3) 0px 4px 8px -4px !important; } .tooltip .arrow:before { border-top-color: var(--blackish); } /* .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #555555 !important; } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #555555 !important; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #555555!important; } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #c1b3c9 !important; } */ .element { position: relative; top: 50%; transform: translateY(-50%); } .v-bottom { margin-bottom: auto; } .element-20 { position: relative; top: 20%; transform: translateY(-20%); } .rot-arrow { transition: all 0.5s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; width:45px; height: 45px; z-index: 1000; filter: hue-rotate(10deg); } .rot-arrow-sm { transition: all 0.5s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; width:45px; height: 45px; z-index: 1000; width: 10px; height: 10px; } .rot-90 { transform: rotate(180deg); } .persona-title { /* color: #212E44; */ font-size: 1.0rem; font-family: 'Poppins', sans-serif; /* font-family: 'Graphik', sans-serif; */ /* font-family: 'Montserrat', sans-serif; */ /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 600; line-height: 100%; /* letter-spacing: -0.5px; */ color: #ffffff; /* -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.9); */ /* margin-left: 1rem; margin-right: 1rem;; */ z-index: 10000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-shadow: 1px 2px 1px rgba(61, 61, 61, 0.27) */ } .sign-up-animation { animation: bounce_min2 1.5s 1.8s ease-in-out; animation-iteration-count: 1; } .icon-img { max-width: 70%; max-height: 70%; opacity: 1.0 !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform: translateZ(0); /* IE 9 */ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); } .anim-noblur { -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform: translateZ(0); /* IE 9 */ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* .video-ctr { pointer-events: none; } */ .video-parent { width: 100%; max-width: 100%; overflow: hidden; display: block; height: 100% !important; left: 0px; opacity: 0.6; /* border-radius: 20px; */ /* margin-left: 400px; * } .video-cont2 { width: 100%; max-width: 100%; overflow: hidden; display: block; height: 100% !important; left: 0px; border-radius: 50px; opacity: 0.4; /* margin-left: 400px; */ } .footer { background: linear-gradient(180deg, #0b9ed0, #1061a4); background: linear-gradient(0deg, #60b7ff, #0079db); /* background: linear-gradient(-30deg, #7BC4FF, #4886D5) !important;; */ /* box-shadow: rgba(17, 17, 26, 0.7) 0px 0px 16px; */ background: #e9f5ff !important; } .blue-gradient{ /* background: linear-gradient(-35deg, #52b1ff, #0069be); */ background: radial-gradient(circle at 80%, #77c2ff, #0069be); } .why-chartpixel-quote { /* color: #212E44; */ font-size: 1.3rem; /* font-family: 'Poppins', sans-serif; */ font-family: Colfax, sans-serif; /* font-family: 'Montserrat', sans-serif; */ /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 300; line-height: 140%; /* letter-spacing: -0.5px; */ color: #ffffff; /* -webkit-text-stroke: 1.0px rgba(255, 255, 255, 0.1); */ margin-left: 1rem; margin-right: 1rem; ; list-style-type: none; transition: all 0.8s; } .why-chartpixel-credentials { /* color: #212E44; */ font-size: 1.0rem; font-family: 'Poppins'; /* font-family: 'Roboto', sans-serif; */ /* font-family: 'Montserrat', sans-serif; */ /* font-family: 'Poppins'; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 300; line-height: 135%; /* letter-spacing: -0.5px; */ color: #ffffff; /* -webkit-text-stroke: 1.0px rgba(255, 255, 255, 0.1); */ margin-left: 1rem; margin-right: 1rem; ; list-style-type: none; transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); margin-top: 25px; } .video-dimensions { transition: all 0.5s; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* border-radius: 50px !important; */ width: 155% !important; height: 100% !important; min-height: 1080px !important; margin-top: -170px; margin-left: -520px; opacity: 0.5 !important; /* transform-origin: center; */ } .video-why-anim-text { transition: all 0.5s ease-out; transition-delay: 0.15s; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .headline-anim-format { color: #3E4348; /* font-size: pare */ font-family: 'GraphikBlack', sans-serif; font-weight: 700; line-height: 100%; text-align: left; } .p-anim { display: inline-block; vertical-align: top; margin: 0; } .word { position: absolute; /* width: 220px; */ opacity: 0; } .letter { display: inline-block; position: relative; transform: translateZ(25px); transform-origin: 50% 50% 25px; } .letter.out { transform: rotateX(90deg); transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .letter.behind { transform: rotateX(-90deg); } .letter.in { transform: rotateX(0deg); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wisteria { color: #8e44ad; color: #f74f78; } .belize { color: #2980b9; color: #00a2ff; color: var(--tweet-blue); } .tweet-blue{ color: var(--tweet-blue); } .pomegranate { color: #f12e45; /* color: #ff6446; */ } .green { color: var(--greenish) } .lightblue { color: #d4fff9; } .footer-headline { color: rgb(255, 238, 208); color: var(--blueish); color: var(--blackish); font-weight: 600; font-size: 1.0rem; font-family: 'Khula', sans-serif; line-height: 150%; letter-spacing: 0px; ; } .footer-link { color: var(--blackish); font-weight: 400; font-size: 1.0rem; font-family: 'Khula', sans-serif; line-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: all 0.3s; } .footer-link:hover { margin-left: 10px; cursor: pointer; } .footer-notes { color: white; color: var(--blackish); font-weight: 400; font-size: 1.0rem; font-family: 'Khula', sans-serif; line-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: all 0.3s; } .opacity-zero { opacity: 0; } .drop-field { /* background-image: url('../images/random-shape-r.png'); */ /* border: 2px dashed rgb(115, 124, 126); */ height: 370px; width: 370px; border-radius: 20px; background-color: #ffffff; box-shadow: 0px 0px 10px rgba(226, 226, 226, 0.9); /* width: calc(40vh * 1.5); height: 60vh; */ border: solid 1px rgba(226, 226, 226, 0.5); border-radius: 50px; box-shadow: 0px 0px 50px rgba(65, 65, 65, 0.9); opacity: 0.5; /* opacity: 0.7; */ /* display: flex; */ /* justify-content: center; align-items: center; */ border-radius: 4000px; padding-top: 20px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; /* border: 1px solid rgb(71, 71, 71); */ transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(-60deg, rgba(255, 245, 233, 0.4), rgba(255, 245, 233, 0.4)); opacity: 0.2; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .drop-field-new{ transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 18% 28%; } .icon-card { /* background-color: rgba(0, 238, 255, 0.6); */ /* background-color: rgba(15, 91, 255, 0.5);; */ /* background-color: rgba(15, 179, 255, 0.5);; */ border-radius: 20px; height: 70px; width: 70px; border: 1px solid rgb(105, 105, 105); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-shadow: 0px 2px 4px rgba(94, 94, 94, 0.37); box-shadow: 0px 2px 4px rgba(94, 94, 94, 0.37); /* background: linear-gradient(20deg, #ffead6, #fff5ea); */ background-color:#fff5ea; background-color: #ffdbcd; /* #fff8ed; */ opacity: 0.8; background: linear-gradient(180deg, #7adeff, #5db1f7); /* linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)); */ -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 3px; text-align: center; } .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { margin-top: 10px; display: none; position: absolute; background-color: #ffffff; min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; color: var(--blackish); border-radius: 30px; cursor: pointer; transition: all 0.3s; line-height: 1.8rem; font-size: 1.2rem;; text-align: center; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: rgb(228, 251, 255); border-radius: 30px; transition: all 0.2s ease-out; } .d-none{ display:none; } .scrollToTopBtn { background-color: rgba(247, 79, 120, 0.8); border: none; color: white; cursor: pointer; font-size: 18px; line-height: 48px; width: 208px; height: 60px; border-radius: 40px; font-size: 1.0rem; font-family: 'Poppins', sans-serif; font-weight: 500; /* font-family: 'Graphik', sans-serif; */ text-align: center; /* place it at the bottom right corner */ position: fixed; bottom: 20px; right: 20px; /* keep it at the top of everything else */ z-index: 100; /* hide with opacity */ opacity: 0; /* also add a translate effect */ transform: translateY(100px); /* and a transition */ transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Modals */ .modal { position: fixed; top: 0; margin: auto; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; transition: opacity 0.3s !important; } .modal-dialog{ top: 10% !important; /* background: red; */ } modal-exit{ background: transparent !important; background-color: transparent !important; } .modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; transition: opacity 0.3s !important; } .text-muted { color: #9e9fb4 !important; } .visible { visibility: visible !important; } .stop-scrolling { height: 100vh; overflow: hidden; } /* ===== CORE STYLES ===== */ /* effect 1 */ /* effect 2 */ /* effect 3 */ /* ===== LEVEL 4. SETTINGS ===== */ .instructions-large{ font-family:'Open Sans', sans-serif; font-size: 1.4rem !important; font-weight: 400; color: #5481bb; } .c-checkbox { display: none; } .c-checkbox:checked + .c-formContainer .c-form { width: 100%; height: 100%; } .c-checkbox:checked + .c-formContainer .c-form__toggle { visibility: hidden; opacity: 0; transform: scale(0.7); } .c-checkbox:checked + .c-formContainer .c-form__input, .c-checkbox:checked + .c-formContainer .c-form__buttonLabel { transition: 0.2s 0.1s; visibility: visible; opacity: 1; transform: scale(1); } .c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before, .c-checkbox:checked + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before { content: 'Thank You! \1F60A'; } .c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle { pointer-events: none; cursor: default; } .c-formContainer, .c-form, .c-form__toggle { width: 100%; height: 4.0rem; } .c-formContainer { position: relative; font-weight: 700; } .c-form, .c-form__toggle { position: absolute; border-radius: 6.25em; background-color: #fff; background-color: transparent !important; transition: 0.2s; } .sign-up-format .c-form, .c-form__toggle { border: 1px solid #cccccc; /* background: rgb(255, 254, 250); */ } .sign-up-format{ height: 3rem !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px white inset !important; } .c-form { width: 100%; left: 50%; transform: translateX(-50%); padding: 0.625em; box-sizing: border-box; /* -webkit-box-shadow: 0px 2px 2px rgba(206, 116, 32, 0.07), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px px rgba(206, 116, 32, 0.07), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; */ /* border: 0.5px solid rgb(223, 223, 223); */ display: flex; justify-content: center; background-color: transparent !important; } .c-form__toggle { color: var(--blackish); top: 0; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; } .c-form__toggle::before { font-size: 1.3em; content: attr(data-title); } .c-form__input, .c-form__button { font: inherit; border: 0; outline: 0; border-radius: 5em; box-sizing: border-box; font-family:'Open Sans', sans-serif; font-size: 1.2rem !important; font-weight: 400; } .c-form__input, .c-form__buttonLabel { font-size: 1.3em; opacity: 1; /* visibility: hidden; */ /* transform: scale(0.7); */ transition: 0s; } .c-form__input { color: #444; height: 100%; width: 100%; padding: 0 0.714em; padding-left: 20px; font-size: 1.0rem !important; background-color: transparent !important; } .c-form__input::placeholder { color: currentColor; color: rgb(211, 211, 211); color: #5481bb !important; font-family: "Open-Sans", sans-serif; font-size: 1.0rem; font-weight: 400; line-height: 1.0rem !important; } .c-form__input:required:valid { color: var(--blackish); } .c-form__input:required:valid + .c-form__buttonLabel { color: #fff; } .c-form__input:required:valid + .c-form__buttonLabel::before { pointer-events: initial; } .c-form__buttonLabel { color: #c8e6d7; height: 100%; width: auto; } .c-form__buttonLabel::before { content: ''; position: absolute; width: 100%; height: 100%; pointer-events: none; cursor: pointer; } .c-form__button { color: inherit; padding: 0; height: 100%; width: 5em; background-color: #2bc1f3; background-color: var(--blueish); } .form__group { position: relative; padding: 15px 0 0; margin-top: 10px; font-family: "Open Sans", sans-serif; /* width: 50%; */ } .server-dropdown{ font: inherit; border: 0; outline: 0; border-radius: 5em; box-sizing: border-box; width: 100%; height: 4.0rem !important; color: rgb(255, 255, 255); background: var(--greenish); width: 100% !important; padding: 0 0.714em; box-shadow: 0 0.125em 0.6125em rgba(0, 0, 0, 0.13); display: flex; align-items: center; justify-content: center; font-size: 1.3em; } .feat-div{ margin-top: 120px !important; } .product-background { opacity: 1.0; transform: rotate(-18deg) scaleX(1.5) scaleY(1.2) translate3d(12vw,5vh, 0); z-index: -10; } #landing-main-image{ margin-top: 100px; opacity: 0; left: -3vw; } .img-sharp{ will-change: transform; image-rendering: -webkit-optimize-contrast; } .landing-subline { color: var(--blackish); font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 130%; opacity: 0; margin-left: -10px; margin-top: -1.5rem; } .font-smooth-lg { -webkit-text-stroke: 1.0px rgba(75, 75, 75, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .headline-anim { display:inline-block; vertical-align : middle; position: absolute; margin-top: -1.0rem; } #above-fold-row { width: 100vw; } #logo { left: -74vw; top: 0vh; opacity:1; z-index: 20000 !important; width: 150px; } .bg-blue-full{ background: linear-gradient(-35deg, #60b7ff, #0079db); } /* idea */ #navi-new { /* box-shadow: 0 2px 4px rgba(25, 95, 177, 0.25); */ transition: all 0.7s !important; /* background: rgba(255, 255, 255, 0.0); */ /* background: red; */ /* background: linear-gradient(to right, rgba(25, 95, 177, 0) 30%, rgba(25, 95, 177, 1.0) 100%); */ /* backdrop-filter: blur(20px) !important; */ /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */ } .navi-scroll{ background: linear-gradient(to right, rgba(25, 95, 177, 0.5) 30%, rgba(25, 95, 177, 1.0) 100%) !important; } #header-navbar { z-index: 110200 !important; opacity: 0; } .landing-decoration{ z-index: 0 !important; transform-origin: top; opacity: 1.0; height: 110vh; } .headline-anim-parent { display: inline-block; vertical-align: top; margin-top: -18px; /* background: red; */ margin-left: 0px; } .headline-anim-dynamic{ text-align: center !important; margin: auto; /* width: 360px !important; */ margin: auto; position: relative; left: 50%; right: 0%; transform: translateX(-50%); } .team-window { opacity: 0; left: 1920px; z-index: 5000; width: 100vw; transition: opacity 1.0s; transition-delay: 1.0s; } .above-fold-left { text-align: left; /* padding-left: 14vw; */ } #product-headline { opacity: 0; } #product-subline { opacity: 0; } #product-description-row { top:1vh; left: -6vw; width: 400px; z-index: 100 !important; } #description-section { max-width: 100%; } #jumpstart-your-analysis-fg { /* opacity: 0.0; transform: scale(0.95); */ } #jumpstart-your-analysis-text { z-index: 1000 !important; } #clean-data-image { transform: scale(0.95); left: 0px; } #clean-data-image-dragon { opacity: 1.0; transform: translate3d(0px,0px,1px); max-width: 700px; } #clean-data-video-fg { opacity: 0; width: 63px; height: 63px; top: -30px; left: 116px; transform: scale(1.0); } #actionable-insights-target { transform: scale(0.9); opacity: 0; width: 400px; /* height: 400px; */ } #actionable-insights-text { opacity: 0.0; } #pb { height: 20vh; } #page-breaker-one { max-width: 100%; z-index: -300; height: 550px; /* background: linear-gradient(0deg, rgb(15, 131, 209), rgb(17, 154, 228)); */ background: #f5f9ff; background: rgb(28, 154, 212); width: 100%; /* border-radius: 30px; border: 10px solid rgb(255, 255, 255); */ } #page-breaker-one-parent { max-width: 100%; z-index: -300; height: 550px; } #video-drop-source { opacity: 0.0; overflow-y: hidden; overflow-x: hidden; width: 100%; transition: all 1.5s; opacity: 0; } #page-breaker-one-text-alignment { margin-top: 150px; } #page-breaker-subline { transform: translateX(-25px); opacity: 0; color: rgb(255, 254, 233) !important; } #page-breaker-headline { opacity: 0; transform: translateX(+25px); } #drop-section { } #drop-icons { left: -55px; z-index: 500 !important;; width: fit-content; } .changeupload { cursor: pointer; transition: all 0.75s cubic-bezier(0.22, 1, 0.36, 1); } #drop-certificates { bottom: 0px; right: 0px; z-index: 2000 !important; } #url-row { width: 100%; z-index: 1100; } .data-url-form { min-width: 90%; } #drop-text { z-index: 12; opacity: 1.0; width: 100%; height: auto; transition: all 0.75s cubic-bezier(0.22, 1, 0.36, 1); } #dropfield { z-index: 11; opacity: 1.0; width: 100%; height: auto; cursor: pointer; transition: all 1.0s cubic-bezier(0.22, 1, 0.36, 1); } #drop-image { z-index: 10; opacity: 1.0; width: 100%; height: auto; transition: all 1.0s cubic-bezier(0.22, 1, 0.36, 1); } #server-connection-form { width: 100%; opacity: 0; transition: all 0.2s; margin-top: 8%; } .display-none { display: none; } .pointer-event-none { pointer-events: none !important; } #server-connection-dropdown-text { font-size: 1.0rem; cursor: pointer; } #server-row { width: 30%; z-index: 1100; } #demo-section { z-index: 600; } #demo-tabs { max-width: 800px; min-width: 300px; z-index: 1000; } .demo-play-btn { margin-left: 72%; } #customer-insights-tab { /* -webkit-box-shadow: 0px 3px 10px rgba(206, 116, 32, 0.17), 1px 1px 3px rgba(0,0,0,0.07); box-shadow: 0px 3px 10px rgba(206, 116, 32, 0.17), 1px 1px 3px rgba(0,0,0,0.07); */ } .demo-fg-img { transform: translateY(0px) translateX(0px) scale(0.6); z-index: 1000; bottom: 0px; left: 350px; } .demo-fg-img-screen{ opacity: 1.0; left: 30px; transition: all 0.2s; } .demo-img-chart-desktop{ left: 30px; transition: all 0.5s !important; } .demo-img-chart-mobile{ opacity: 0.0; left: 30px; top: -60px; transition: all 0.5s !important; } #features-section { border: 0px solid red; max-width: 1440px; padding-top: 80px; } #features-images { z-index: 100 !important; transform: scale(0.95); left: 40%; top: 20%; } #features-rs { opacity: 0.3; z-index: 1000; ; transform: rotate(-30deg) scale(0.73); margin-top: 180px; left: 230px; } #loaded-with-features-img { opacity: 1.0; z-index: 1000; left: -20px; top: 0px; } #features-img-text { left: 0px; z-index: 1001 !important; } .features-transparent { opacity: 1.0; z-index: 1000;; width: 100%; height: 100%; } .features-icon-bg { opacity: 0.3; border-radius: 1rem; } .feature-icon { z-index: 5100 !important; } .features-headline-color { color: var(--blackish) } #features-text { opacity: 0; margin-top: 0vh; } .w-50vw { width: 50vw; } .features-bullet{ opacity: 1.0; z-index: 1000; width: 0px; height: 0px; display: none; } #video-arrow-left { opacity: 1.0; z-index: 1000; width: 30px; height: 30px; cursor: pointer; } #video-arrow-right { opacity: 1.0; z-index: 1000; width: 30px; height: 30px; cursor: pointer; } #video-source { opacity: 0.0; overflow-y: hidden; overflow-x: hidden; width: 200px; } .why-text-alignment { opacity: 0; width: 600px; left: 115px; top: 0vh; margin-left: 35px; /* margin-left: 6vw;; */ } .opacity-one { opacity: 1; } .final-cta-section { max-width: 100%; } #final-cta-cloud { left: 0px; right: 0px; opacity: 1.0; z-index: 0 !important; transform: scale(0.8, 0.7); } #final-cta-image { width: 300px; left: 0px; right: 0px; opacity: 0; z-index: 1000 !; top: 0px; } #why-chartpixel-text-alignment { top: 70px; padding-left: 165px; height: 150px; } #why-text { top: 100px; } .color-bluish { color: #0b9ed0; } .color-tomato { color: tomato; } .color-sblue { color: var(--sblue); } .color-ink { color: var(--ink); } .color-greenish { color: var(--greenish); } .cta-green{ color: var(--cta-green); } .color-reddish { color: #f74f78 } .color-yellow { color: yellow; } .color-lightbue { color: rgb(205, 249, 255); } .color-grey { color: grey; } .color-white { color: white; } .input-box{ max-width: 400px; background: #1989e4; border-radius: 20px; /* border: 1px solid white; */ /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;} */ } .btn-input-box { background: rgba(0, 0, 0, 0.1); /* background: grey; */ border: 2px solid rgb(255, 203, 144); /* opacity: 0.5; */ /* border: none !important; */ min-height: 50px !important; font-weight: 400 !important; font-size: 1.2rem; min-height: 3rem !important; border-radius: 200px; padding-left: 55px; padding-right: 55px; outline: none !important; width: auto; font-family: "Segoe UI", sans-serif; color: white; } #sign-up-navi-cta { left:0px; right: 0px; margin-top: 0px; z-index: 200 !important; } #final-cta-parent { margin-top: 0px; } #footer-section{ max-width: 100%; background-color: #ffffff; } #footer-section hr{ margin-top: 6vh; border-top: 1px solid lightblue !important; } #footer-last { margin-top: 3vh; display: flex; } .db-pwd{ font-family:'Roboto'; font-weight: 400; color: rgb(107, 107, 107); } .db-username { font-family:'Roboto'; font-weight: 400; } #product-cta { margin-left: 5px; cursor: pointer; background-color: #ffffff !important; z-index: 1000 !important; opacity: 1.0 !important; } .team-parent { left: 0; right: 0; top: 35%; max-width: 100%; max-height: 100%; display: table-cell; vertical-align: middle } .team-window{ top: 0vh; height: 100vh; width: 100vw; left: 2vw; } #team { opacity: 0; left: 1920px; z-index: 5000; width: 100vw; transition: opacity 1.0s; transition-delay: 1.0s; } #ourstory { left: 1920px; z-index: 5000; width: 100vw; } #barcelona_p3 { opacity: 0.4; min-width: 100%; bottom: 0px; left: 100px; } #barcelona_p2 { opacity: 0.3; min-width: 100vw; bottom: 0px; left: 50px; } #barcelona_p1 { opacity: 1.0; min-width: 100vw; bottom: 0px; } #slide-city { top: 0vh; opacity: 1.0; height: 100vh; width: 100vw; left: 2vw; } #back-to-main-btn { opacity: 1.0; z-index: 1000; top: 35vh; left: 20px; width: 180px; height: 180px; cursor: pointer; } #our-story-div { top: 15vh; left: 0vw; } #our-tool-div { top: 15vh; left: 14vw; } #gototeam-cta { margin-left: 5px; cursor: pointer; background-color: #ffffff !important; z-index: 1000 !important; margin-top: -5px !important; height: 40px; } #team-values { top: 6vh; left: 45vw; width: 25vw; } #team-mission { top: 6vh; left: 74vw; width: 20vw; } #signup-story-btn { margin-top:20px; margin-right:0px; opacity: 0.0; margin-left: 0px; z-index: 3000; } .w-20vw { width: 20vw; } .drop-section-text{ color: #6b6260; /* color: var(--ink); */ /* color: #212E44; */ font-size: 1.4rem; font-family: 'Ubuntu', sans-serif; /* font-family: 'Poppins', sans-serif; */ /* opacity: 0.0; */ /* animation: clear 1.0s 0.0s ease-in-out forwards; */ font-weight: 600 !important; line-height: 100%; } .drop-section-panel{ /* background: linear-gradient(180deg, #0b9ed0, #008cff); */ /* background-image: url(); */ /* width: 20vw; height: 90vh; */ width: 100%; height: 100%; /* left: 40vw; top: 0px; */ /* border-radius: 20px 20px 20px 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.22), 1px 1px 5px rgba(0, 0, 0, 0.07); */ transition: all 1.0s; } .btn-upload { font-size: 1.1rem; font-family: 'Roboto', sans-serif !important; /* font-weight: 600; */ /* color: #535353; */ /* border: 3px solid #a7a7a7; */ /* background-color: rgb(243, 250, 255); */ color: #1c4cad !important; /* -webkit-box-shadow: 0px 3px 7px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 3px 7px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); */ z-index: 22000 !important; border: 3px solid #d2e8ff !important; pointer-events: all !important; background-color: rgba(255, 255, 255, 0.8) !important; opacity: 1.0; width: 130px; /* -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); */ } .btn-upload:hover { /* color: #1c4cad !important; */ /* border: 3px solid #d2e8ff !important; */ } .btn-upload:active { border: 3px solid #d2e8ff !important; outline: 0 !important; } .transition-1{ transition: all 1s; transform-origin: center; will-change: transition; } .transition-05{ transition: all 0.5s; transform-origin: center; will-change: transition; } .transition-02{ transition: all 0.2s; transform-origin: center; will-change: transition; } .transition-03{ transition: all 0.3s; transform-origin: center; will-change: transition; } .transition-01{ transition: all 0.1s; transform-origin: center; will-change: transition; } .transition-04{ transition: all 0.4s; transform-origin: center; will-change: transition; } .transition-05-cb{ transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 2.5s; transform-origin: center; will-change: transition; } .to-top{ transform-origin: top; } /* .scale-1{ width: 105%; } */ .feature-active{ transform: scale(1.1); /* pointer-events: none !important; */ } .persona-card-small { /* background-color: rgba(0, 238, 255, 0.6); */ /* background-color: rgba(15, 91, 255, 0.5);; */ /* background-color: rgba(15, 179, 255, 0.5);; */ border-radius: 22px; /* border: 0.0px solid rgba(160, 160, 160, 0.6); */ transition: all 0.4s 0.0s; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* background: linear-gradient(135deg, rgb(124, 213, 255), rgb(20, 133, 189)); */ background: rgb(255, 255, 255); /* background: #126ab3; */ /* background: rgb(255, 47, 10); */ /* background: rgb(20, 133, 189); */ -webkit-box-shadow: 0px 0px 10px rgba(129, 129, 129, 0.37); box-shadow: 0px 0px 10px rgba(129, 129, 129, 0.37); cursor: pointer; /* -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.47); */ -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 5px solid #c2daf4; border-radius: 100px; width: 92%; } .r-90l{ transform: rotate(-90deg); } .r-90r{ transform: rotate(90deg); } .r-180{ transform: rotate(180deg); } .qm{ opacity: 0.2; } .btn-next-video { background: rgb(255, 225, 93); background: rgba(0, 0, 0, 0.3); border: 2px solid rgb(255, 153, 0) !important; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.4rem; height: 80px !important; border-radius: 200px; padding-left: 20px; padding-right: 20px; outline: none !important; } .btn-next-video:hover { background: rgb(255, 225, 93); background: rgba(152, 214, 255, 0.2); border: 2px solid rgb(255, 153, 0)!important; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.4rem; height: 80px !important; /* border-radius: 20px; */ padding-left: 20px; padding-right: 20px; } .active-vid { width: 18px !important; height: 18px !important; background-color: #f7ffaf !important; border: none !important; border-radius: 500px !important; opacity: 1.0; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; outline:none !important; /* border: 3px solid rgb(255, 255, 255); */ transition: all 0.2s; } .active-vid-af { transform: scale(1.5); background-color: rgb(255, 126, 103) !important; border: none !important; border-radius: 500px !important; opacity: 1.0; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.27), 1px 1px 5px rgba(0, 0, 0, 0.17) !important; box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.27), 1px 1px 5px rgba(0, 0, 0, 0.17) !important; outline:none !important; /* border: 3px solid rgb(255, 255, 255); */ transition: all 0.2s; } .expanded{ width: 100%; height: 100%; transform: scale3d(1.15,1.2,1.0); } .expanded-product-description{ width: 100%; height: 100%; transform: scale3d(0.8,1.5,1.0); } .expanded-drop{ width: 100%; height: 100%; transform: scale3d(1.1,1.1,1.0); transform-origin: center; } .expanded-features-small{ width: 100%; height: 100%; transform: scale3d(1.0,1.1,1.0); } .next-text{ color: rgb(255, 255, 227); font-family: Roboto; font-weight: 400;; font-size: 1.1rem; } .fs-06{ font-size: 0.6rem; } .fs-10{ font-size: 1.0rem; } .fs-12{ font-size: 1.2rem; } .fs-14{ font-size: 1.4rem !important; } .fs-15{ font-size: 1.5rem !important; } .fs-17{ font-size: 1.7rem !important; } .drop-subline{ font-size: 1.8rem; font-weight: 400; font-family: "Open Sans", sans-serif; } .demo-subline{ font-size: 1.2rem; font-weight: 400; font-family: "Open Sans", sans-serif; } .underlined{ border-bottom: 7px solid var(--blueish); padding-bottom: 5px; } .underlined-thin{ border-bottom: 4px solid var(--blueish); } .underlined-green{ border-bottom: 7px solid rgb(0, 190, 181); padding-bottom: 5px; } .underlined-orange{ border-bottom: 7px solid tomato; padding-bottom: 5px; } .underlined-orange-thin{ border-bottom: 4px solid rgba(255, 188, 157,0.8); } .underlined-green-thin{ border-bottom: 4px solid rgb(71, 255, 148); } .underlined-red{ border-bottom: 7px solid var(--reddish); padding-bottom: 5px; } .drop-btn-active{ -webkit-box-shadow: 0px 2px 2px rgba(206, 116, 32, 0.07), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px px rgba(206, 116, 32, 0.07), 1px 1px 5px rgba(0, 0, 0, 0.07) !important; color: white !important; background-color: var(--blueish); background: #f12e45; } .rot-arr-positioning{ margin-top: -10px; } .accordion-headline{ padding-left: 26px; } .h-200px{ height: 200px; } .h-50px{ height: 50px; } .h-75px{ height: 75px; } .h-100px{ height: 100px; } .h-150px{ height: 150px; } .our-story-section { display: none; } .osan{ font-family: "Open Sans", sans-serif; } .shadow-frame{ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 20px; } .shadow-standard{ box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important; } .shadow-icon{ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } .fnt-weight-400{ font-weight: 400; } .simple-input{ border-radius: 20px; font-size: 1.0rem; height: 50px; padding-left: 20px; font-family: "Open Sans", sans-serif; } .simple-input::placeholder{ /* border-radius: 20px; */ /* font-size: 0.9rem; */ color: rgb(190, 190, 190); /* padding-left: 10px; */ font-family: "Open Sans", sans-serif; } #spinner { position: absolute; top: 45%; left: 50%; width: 3.5rem; height: 3.5rem; /* transform: translate(-50%, -50%); */ display: none; z-index: 999999 !important; color: lightblue; } .btn-nav { width: 12px; height: 12px; background-color: #ccffff; border: none; border-radius: 500px; opacity: 1.0; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); transition: all 0.2s; margin-left: 6px; margin-right: 6px; outline:none !important; } .btn-nav-af { width: 12px; height: 12px; background-color: #4495DF; border: none; border-radius: 500px; opacity: 1.0; -webkit-box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 10px rgba(206, 116, 32, 0.17), 1px 1px 5px rgba(0, 0, 0, 0.07); transition: all 0.2s; margin-left: 6px; margin-right: 6px; outline:none !important; } .collapsed-btn { border-radius: 30px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.2rem; cursor: pointer; height: 60px; transition: all 0.3s ; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 1; box-shadow: 0; -webkit-box-shadow: 0; outline: 0; border: 0; width: auto; padding-left: 25px; padding-right: 25px; } .fnt-blackish{ color: var(--blackish); } .fnt-white{ color: white; } .bg-reddish{ background: var(--reddish); } .bg-tomato{ background: tomato; } .fnt-1{ font-size: 1.0rem; } .fnt-12{ font-size: 1.2rem ; } .fnt-15{ font-size: 1.5rem; } .fnt-17{ font-size: 1.7rem !important; } .fnt-20{ font-size: 2.0rem !important; /* font-family: "Open Sans" !important; */ } .fnt-09{ font-size: 0.9rem !important; } .fnt-9{ font-size: 0.9rem !important; } .fnt-8{ font-size: 0.8rem !important; } .cursor-pointer{ cursor: pointer; } .nav-link-highlighted{ /* border: 1px solid rgba(25, 161, 252, 0.2); */ background: #008bfd; border-radius: 30px !important; -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.00), 2px 2px 3px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.00), 2px 2px 3px rgba(0, 0, 0, 0.15); height: 60px; /* width: 85%; */ text-align: center; vertical-align: middle; line-height: 45px; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.5rem !important; outline: none !important; border: 0.15px solid rgba(0, 0, 0, 0.1) !important; /* border: 4px solid rgb(34, 58, 126); */ } .pill-highlighted{ /* background: rgba(104, 255, 235, 0.15) !important; */ /* border-radius: 30px !important; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.00), 1px 1px 5px rgba(0, 0, 0, 0.05); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.00), 1px 1px 5px rgba(0, 0, 0, 0.05); height: 50px; text-align: center; line-height: 35px; width: 70%; */ margin-left: 17%; text-transform: uppercase; color: #c8fdff !important; font-weight: 300; font-family: "Open Sans", sans-serif; /* opacity: 0.9; */ } .pill-highlighted:checked{ background: red !important; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-95 { width: 95%; } /* navi background */ .nav-list { background: linear-gradient(-215deg, #60b7ff, #0079db); /* background: #0058a0; */ /* background: #1061a4 !important; */ } .mobi-collapse{ /* background: #1061a4 !important; z-index: 1000 !important; */ /* background: #1061a4 !important; z-index: 1000 !important; */ /* background: white;; */ z-index: 1000 !important; /* background: #0275d8 !important; */ } .mobi-link-description{ color: #ffffff !important; font-weight: 300; font-family: "Open Sans", sans-serif; font-size: 0.9rem; } #navbarToggleExternalContent{ overflow-y: scroll !important; /* max-height: 100px !important; */ } .mobile-description-text { color: white; font-size: 1.0rem; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 120%; } .sub-dropdown-item{ /* background: #0e5c9b !important; */ padding-bottom: 20px; border-bottom: 0.5px solid #44a5f5 !important; border-top: 0.5px solid #44a5f5 !important; margin-left: -30px; } .fnt-nav-item-no-hover{ font-size: 16px !important; font-weight: 400 !important; font-family: 'Open San', sans-serif; color: white !important; font-weight: 600 !important; } .fnt-nav-item{ font-size: 16px !important; font-weight: 400 !important; font-family: 'Open San', sans-serif; color: white; font-weight: 600 !important; } .fnt-nav-item:hover{ /* font-size: 15px !important; */ font-family: 'Open San', sans-serif; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 5px; text-decoration-color: white; transition: all 0.0s; } #login-navi{ border: 1px solid var(--blackish); color: var(--blackish) !important; } #login-navi:hover{ color: var(--blackish) !important; } #sign-up-navi{ background: #00a2ff; background: var(--tweet-blue); border: 1px solid rgb(51, 104, 165);; color: white !important; font-weight: 600 !important; font-family: "Open Sans", sans-serif !important; font-size: 18px; margin-top: 0px;;; } .jumpstart-your-analysis{ /* left: -50px; */ } .btn-standard-blue { position: relative; overflow: hidden; font-size: 1.1rem; border-radius: 5px; text-decoration: none; border: 1px solid #156aaf; color: white; height: 40px !important; background: var(--sblue); width: 240px; outline: none !important; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; font-weight: 500 !important; transition: all 0.2s; } .btn-standard-green { position: relative; overflow: hidden; font-size: 1.1rem; border-radius: 5px; text-decoration: none; border:1px solid #056961 !important; color: white; height: 40px !important; background:#00b1a2 !important; width: 240px; outline: none !important; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; font-weight: 500 !important; transition: all 0.2s; font-family: 'Open Sans', san-serif; } .btn-standard-green:hover { box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px, rgba(0, 0, 0, 0.14) 0px 5px 6px; } .btn-sign-up-green{ background: #00b1a2 !important; font-weight: 500; border: none; color: white; border-radius: 200px; height: 70px; font-family: 'Open Sans', san-serif; width: 220px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; outline: none !important; } .btn-sign-up-green:hover{ color: white; outline: none !important; } .bg-logo{ left: -200px; top:-410px; z-index: -999; opacity: 0.6; } .btn-standard-blue:hover{ box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.14) 0px 5px 16px; } .mobile-tag-none{ display: auto; } .mobile-tag-visible{ display: none; } #drop-section-background{ /* left: -100px; */ } .button-upload{ height: 75px; /* background: linear-gradient(180deg, #7adeff, #5db1f7); */ /* border-radius: 20px; */ border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: 1px solid rgba(83, 109, 226, 0.5); background: #00a2ff; font-family: "Poppins", sans-serif; font-size: 1.3rem; font-weight: 400; outline: none; -webkit-box-shadow: 0px 5px 7px rgba(136, 136, 136, 0.20), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 7px rgba(110, 110, 110, 0.20), 1px 1px 5px rgba(0, 0, 0, 0.07); } .button-upload-options{ height: 75px; /* background: linear-gradient(180deg, #7adeff, #5db1f7); */ /* border-radius: 20px; */ border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 1px solid rgba(79, 108, 233, 0.5); background: #00a2ff; outline: none; -webkit-box-shadow: 0px 5px 7px rgba(136, 136, 136, 0.20), 1px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 7px rgba(110, 110, 110, 0.20), 1px 1px 5px rgba(0, 0, 0, 0.07); } .bg-blue{ background: #6bbaf7; } .bg-blue-light{ background: #b6ddfb; } .bg-blue-lighter{ background: #fbfdff; } .bg-cerulean-blue-lighter{ background: #fbfcff; } .bg-blue-dark{ background: #1b97f3; } .drop-border-blue{ border-right: 10px solid #6bbaf7; /* border-left: 10px solid #007bff; */ } .drop-border-tomato{ border-right: 10px solid rgba(255, 188, 157,0.8); /* border-left: 10px solid #007bff; */ } .drop-border-blue-left{ border-left: 10px solid #6bbaf7; /* border-left: 10px solid #007bff; */ } .drop-border-blue-light{ border-left: 10px solid #b6ddfb; /* border-left: 10px solid #80bcff; */ } .drop-border-blue-dark{ border-left: 10px solid #1b97f3; /* border-left: 10px solid #007bff; */ } .max-1440{ max-width: 1440px; } .scale-1{ transform: scale(1.1); } .scale-2{ transform: scale(1.2); } .l-3{ left: 30px; } .next-video-button{ bottom: 7vh; width: 100%; } .navbar-toggler{ backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .no-blur{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast !important;/* Webkit (non-standard naming) */ image-rendering: crisp-edges !important; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } .acc-initial{ height: auto; } .image-h-center{ display: block; margin-left: auto; margin-right: auto; } .image-v-center{ display: block; margin-top: auto; margin-bottom: auto; } .mt-100{ margin-top: 100px; } /* acc accordion progressive bar */ .bg-gradient{ background: linear-gradient(90deg, #f5fdff, #d6f8ff); background: linear-gradient(180deg, #60b7ff, #0079db); } .bg-gradient-top{ border-top-left-radius: 20px; border-top-right-radius: 20px; background: linear-gradient(90deg, #f5fdff, #d6f8ff); background: linear-gradient(180deg, #60b7ff, #0079db); } .bg-gradient-bottom{ border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: linear-gradient(90deg, #f5fdff, #d6f8ff); background: linear-gradient(180deg, #60b7ff, #0079db); } /* * { font-family: "Raleway"; box-sizing: border-box; } */ .top-nav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; /* background-color: #00BAF0; */ /* background: linear-gradient(to left, #f46b45, #eea849); background: linear-gradient(to right, #00a2ff , #136eba); background: linear-gradient(to right, #fff , #fff); */ /* background: rgba(0, 0, 0, 0); */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: #FFF; height: 50px; padding: 1em; z-index: 9999 !important; transform-origin: center; } .menu-button-container { display: none; /* height: 100%; */ width: 41px; height: 41px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; background: var(--blueish); border-radius: 52px; margin-top: 20px; opacity: 0.3; border: 3px solid rgb(181, 234, 255); transition: all 0.3s; transform-origin: center; } #menu-toggle { display: none; } #menu-toggle-waitlist { display: none; } .menu-button, .menu-button::before, .menu-button::after { display: block; background-color: #fff; position: absolute; height: 3px; width: 16px; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 0px; background: #2a8ee0; background: white;; } .menu-button::before { content: ''; margin-top: -7px; } .menu-button::after { content: ''; margin-top: 7px; } #menu-toggle:checked + .menu-button-container .menu-button::before { margin-top: 0px; transform: rotate(405deg); background: white; } #menu-toggle:checked + .menu-button-container .menu-button { background: rgba(255, 255, 255, 0); } #menu-toggle:checked + .menu-button-container .menu-button::after { margin-top: 0px; transform: rotate(-405deg); background: white; } #menu-toggle-waitlist:checked + .menu-button-container .menu-button::before { margin-top: 0px; transform: rotate(405deg); background: white; transform-origin: center; } #menu-toggle-waitlist:checked + .menu-button-container .menu-button { background: rgba(255, 255, 255, 0); } #menu-toggle-waitlist:checked + .menu-button-container .menu-button::after { margin-top: 0px; transform: rotate(-405deg); background: white; } @media (max-width: 992px) { .menu-button-container { display: flex; } } .modal-background{ /* background-image: url('../images/orange-background3.png'); */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; background: linear-gradient(-45deg, rgba(11,158,208,1.0), rgba(16,97,164,1.0)); background: #0079db; /* background: rgba(16,97,164,1.0); */ border-radius: 0px; } .waiting-list-modal{ opacity: 0; transition: all 0.5s;; } .to-back{ /* display: none; */ /* visibility: hidden; */ z-index: -9999; opacity: 0; pointer-events: none; } .to-front{ /* display: block; */ /* visibility: inherit; */ z-index: 9999; opacity: 1; pointer-events:inherit; } .modal-text { color: white !important; font-size: 1.2rem !important; font-family: 'Colfax', sans-serif; font-weight: 300 !important;; line-height: 150%; /* -webkit-text-stroke: 0.3px rgba(0, 0, 0, 1.0); */ /* animation: clear 0.0s 0.0s ease-in-out forwards; */ } .close-modal { overflow: hidden; position: relative; border: none; padding: 0; width: 3rem; height: 3rem; border-radius: 50%; background: transparent; /* color: #1da1f2; */ /* font: inherit; */ text-indent: 100%; cursor: pointer; color: white !important; } .close-modal:focus { outline: solid 0 transparent; color: white !important; /* box-shadow: 0 0 0 2px #8ed0f9 */ } .close-modal:hover { } .close-modal:before, .close-modal:after { position: absolute; top: 15%; left: calc(50% - .0625em); width: .125em; height: 70%; border-radius: .125em; transform: rotate(45deg); background: white !important; color: white !important; content: '' } .close-modal:after { transform: rotate(-45deg); } .inactive-link{ color: lightgrey; } .footer-link > a, a:hover, a:focus, a:active { text-decoration: none; color: inherit; } .brand-image{ width: 100%; transform: translate3d(-150px,-15px,0); } .click-away-btn{ width: 105%; height: 100%; background: white; opacity: 1.0; border-radius: 50px; -webkit-box-shadow: 0px 0px 3px rgba(40, 40, 40, 0.17), 0px 5px 5px rgba(40, 40, 40, 0.14); box-shadow: 0px 0px 3px rgba(40, 40, 40, 0.17), 0px 5px 5px rgba(40, 40, 40, 0.14); } .click-away-text{ color: var(--blackish); font-weight: 400; font-size: 1.2rem; padding-left: 1.0rem; padding-right: 0.0rem; /* font-family: 'Poppins', sans-serif; */ } .waitlist-thanks{ width: 350px; height: 80px; transition: all 1.5s 1.0s, opacity 0.5s; cursor: pointer; bottom: 30px; opacity: 1; } #cookie-text{ color: var(--blackish) !important; } .cookie-link{ color:var(--yellow-highlight) !important; } .cookie-policy{ width: 100%; height: 80px; /* transition: opacity 0.5s; */ /* background: transparent !important; */ /* opacity: 0.5; */ border-top: 0.5px solid rgba(170, 170, 170, 0.2); /* box-shadow: rgba(0, 7, 6, 0.12) 0px 0px 16px; */ } .shadow-effect { background: #fff; padding: 20px; border-radius: 4px; text-align: center; border:1px solid #ECECEC; box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02); } #customers-testimonials .shadow-effect p { font-family: inherit; font-size: 17px; line-height: 1.5; margin: 0 0 17px 0; font-weight: 300; } .testimonial-name { margin: -17px auto 0; display: table; width: auto; background: #3190E7; padding: 9px 35px; border-radius: 12px; text-align: center; color: #fff; box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05); } #customers-testimonials .item { text-align: center; padding: 50px; margin-bottom:80px; opacity: .2; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #customers-testimonials .owl-item.active.center .item { opacity: 1; -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); } .owl-carousel .owl-item img { transform-style: preserve-3d; max-width: 90px; margin: 0 auto 17px; } #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span, #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span { background: #3190E7; transform: translate3d(0px, -50%, 0px) scale(0.7); } #customers-testimonials.owl-carousel .owl-dots{ display: inline-block; width: 100%; text-align: center; } #customers-testimonials.owl-carousel .owl-dots .owl-dot{ display: inline-block; } #customers-testimonials.owl-carousel .owl-dots .owl-dot span { background: #3190E7; display: inline-block; height: 20px; margin: 0 2px 5px; transform: translate3d(0px, -50%, 0px) scale(0.3); transform-origin: 50% 50% 0; transition: all 250ms ease-out 0s; width: 20px; } .btn-subtle{ background-color: var(--blueish2); border-radius: 5px; } .btn-subtle:hover{ background-color: var(--blueish2); border-radius: 5px; } .partially-visible{ backdrop-filter: blur(6px) !important; background: rgba(255, 255, 255,0.8);; } .bg-transparent{ background: transparent; } .blue-link{ color: var(--blueish) } .blue-link:hover { color: var(--blueish) } #hamburger{ z-index: 9000 !important; right: 10px; transition: all 0.5s; } #close-waiting-list-modal{ z-index: 9000 !important; right: 10px; top: 0px; } .why-chartpixel-credentials{ display: none; } .clip { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .svg--source { display: none; } .svg--icon { width: 100%; max-width: 5rem; height: 100%; max-height: 5rem; display: block; margin: 0 auto; fill: var(--blackish); } .wrapper { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0rem; } .share { width: 3rem; height: 3rem; float: left; color: #353c4a; border: .125rem solid #f3f3f3; box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15); border-radius: 50%; transition: 250ms; color: white; transform: scale(1.0); transform-origin: center; margin-left: 7px; margin-right: 7px; } .share:hover{ transform: scale(1.1); color: white; box-shadow: 0 0 24px 0 #00ACED } #button-icon-bar{ width: 20px; height: 20px; transform: translateY(-2px); } .tp-button{ all:unset; font-family:Poppins, san-serif; display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-color:var(--greenish); /* background-color:#f74f78; */ color:#FFFFFF; font-size:16px; border-radius:25px; padding:0 33px; font-weight:400; height:50px; cursor:pointer; line-height:50px; text-align:center; margin:0; text-decoration:none; position:fixed !important; width: 140px; z-index: 9999 !important; transform: rotate(-90deg); outline: none !important; transition: all 0.5s !important; } #waitlist-modal-text{ } .waitlist-modal-headline{ font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 4.2rem; line-height: 100%; transform: translateX(-30px); } .waitlist-modal-headline-b{ font-family: "Open Sans", sans-serif; font-weight: 800; line-height: 100%; font-size: 5.85rem; transform: translateX(30px); } .waitlist-modal-subline{ /* top: 50vh; */ font-family: "Colfax", sans-serif; font-weight: 400; font-size: 1.1rem; } #waitlist-background{ } .waitlist-modal-parent{ } .waitlist-container{ } .waitlist-modal-row{ /* transform: translate3d(-100px, -100px, 0); */ } .close-toggle-desktop{ display: flex; /* height: 100%; */ width: 61px; height: 61px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; background: var(--blueish); border-radius: 152px; margin-top: 20px; opacity: 0.3; border: 3px solid rgb(181, 234, 255); transition: all 0.3s; transform-origin: center; } .close-toggle-desktop-position{ left: 78vw; top: 50px; } .close-x-desktop{ color: white; font-size: 1.5rem; font-family: Arial, san-serif; } .right-slide{ /* transform: translateX(+20px); */ /* margin-left: 20px; */ /* will-change: transform, opacity; */ opacity: 0 } .left-slide{ transform: translateX(-20px); /* margin-right: 20px; */ /* will-change: margin; */ opacity: 0 } .opacity-in{ opacity: 0; } #product-description-mobile{ margin-left: 17vw; margin-top: 100px; } .fat{ font-weight: 600; } .waiting-list-background{ max-width: 800px !important; } .colfax{ font-family: "Colfax", sans-serif !important; } .progressive-bar{ transform: translateY(-1px); height: 61px !important; } .acc-container{ height: 500px; width: 80%; } .acc-inner-text{ margin: 0px; /* background-color: rgb(233, 233, 233); */ /* border-radius: 20px; */ /* -webkit-box-shadow: 0px 3px 3px rgba(207, 207, 207, 0.07), 1px 0px 3px rgba(0, 0, 0, 0.17); box-shadow: 0px 3px 3px rgba(184, 184, 184, 0.07), 1px 0px 3px rgba(0, 0, 0, 0.17); */ font-family: "Open Sans", sans-serif; font-size: 1.0rem; border-radius: 2px; border:none; padding: 8px; font-weight: 400; } .acc-image{ width: 90%;; margin-left: auto; margin-right: auto; } .scale-in{ transform: scale(0.95); } #boxBack { position: fixed; z-index: 99999 !important; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 36, 156, 0.3); display: none; } #boxBack.show { display: block; } #boxWrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 320px; max-width: 600px; padding: 10px; background: rgb(255, 249, 245); border-radius: 20px; padding: 20px; -webkit-box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.07), 1px 1px 10px rgba(0, 0, 0, 0.17); box-shadow: 0px 0px 0px rgba(206, 116, 32, 0.07), 1px 1px 10px rgba(0, 0, 0, 0.17); } #boxTxt{ font-size: 1.0rem; font-family: 'Colfax', sans-serif; font-weight: 400; } .btn-cp-small { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb !important; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.2rem; height: 60px !important; border-radius: 200px; padding-left: 15px; padding-right: 15px; outline: none !important; width: 200px; font-family: "Segoe UI", sans-serif; } .btn-cp-xs { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb !important; color: rgb(255, 255, 255); /* border: none !important; */ height: 40px !important; font-weight: 400 !important; font-size: 1.0rem; border-radius: 200px; padding-left: 15px; padding-right: 15px; outline: none !important; /* width: 200px; */ font-family: "Segoe UI", sans-serif; } .show-modal{ opacity: 1; z-index: 99999 !important; pointer-events:all; /* display: block; */ visibility: visible; /* background: transparent !important; */ } .hide-modal{ opacity: 0; z-index: 99999 !important; pointer-events:all; /* display: none; */ visibility: hidden; } #sign-up-with-data{ transition: opacity 0.3s; } .modal-container{ background: rgba(63,185,255,0.9); background-color: white; border-radius: 30px; padding: 50px; border: none !important; } .modal{ /* z-index: 99999 !important; */ background: rgba(63,185,255,0.3); border: none !important; } .modal-body { display: flex; padding: 0; border-radius: 4rem; font-family: 'Open Sans', sans-serif; border: none !important; } /* #modal-headline{ display: none; } #modal-subline{ display: none; } */ .c-formContainer{ width: 100% !important; } .c-form{ width: 100% !important; } .c-form__input{ width: 100% !important; } .modal-content h1, .modal-content h2, .modal-content h3 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-family: "Open Sans", sans-serif; } .modal-content h1 { font-size: 1.3em; /* text-transform: uppercase; */ } .modal-content h2 { font-size: 1.1em; } .modal-content h3 { font-size: .8em; letter-spacing: 2px; } .modal form { font-size: .8em; } .column { flex: 50%; padding: 10px; } .column#main { flex: 95%; padding: 50px; margin-top: 30px; margin-left: 15px; } #secondary { /* background-color: #F9BC35; */ /* background-color: var(--crystalblue); */ background: linear-gradient(90deg, var(--crystallightblue), #6abcff); ; border-radius: 0 4rem 4rem 0; text-align: center; margin-left: -1px; } #main .form-control { border-radius: 0; font-size: .9em; } #main .btn-primary { width: 100%; } #secondary .btn-primary { background: #faf8f84f; color: #000; } .modal-body label { margin-bottom: 0; } .btn-cp-xs { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb !important; color: rgb(255, 255, 255); /* border: none !important; */ height: 40px !important; font-weight: 400 !important; font-size: 1.0rem; border-radius: 200px; padding-left: 35px; padding-right: 35px; outline: none !important; /* width: 200px; */ font-family: "Segoe UI", sans-serif; } .full-modal{ position: absolute; width: 100vw; height: 100vh; /* background: rgba(0, 36, 156, 0.3); */ /* background: transparent; */ background: rgba(161, 225, 255, 0.3); /* background: linear-gradient(270deg, rgba(0, 78, 168,0.2), rgba(0, 150, 188, 0.35)); */ box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important; opacity: 1; pointer-events: none; } .btn-start-creating { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb !important; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.4rem; height: 80px !important; border-radius: 200px; padding-left: 20px; padding-right: 20px; outline: none !important; width: 220px; } .btn-cp-small { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.2rem; height: 60px !important; border-radius: 200px; padding-left: 15px; padding-right: 15px; outline: none !important; width: 200px; font-family: "Segoe UI", sans-serif; } .btn-cp-smallish { background: rgb(255, 225, 93); background: #217cd1; border: 1px solid #b0caeb; color: rgb(255, 255, 255); /* border: none !important; */ height: 50px !important; font-weight: 400 !important; font-size: 1.2rem; height: 3rem !important; border-radius: 200px; padding-left: 55px; padding-right: 55px; outline: none !important; width: auto; font-family: "Segoe UI", sans-serif; } .regular-headline{ font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 2.0rem; line-height: 120%; /* transform: translateX(-30px); */ } .regular-highlight{ font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 120%; /* transform: translateX(-30px); */ } .regular-subline{ font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.1rem; line-height: 120%; /* transform: translateX(-30px); */ } .regular-text{ font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.0rem; line-height: 120%; /* transform: translateX(-30px); */ } .regular-smallprint{ font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 0.8rem; line-height: 120%; /* transform: translateX(-30px); */ } .modal-body label { margin-bottom: 0; } .sec-content { margin-top: 85%; } .radio-label { position: relative; top: 0; padding-top: 0px; display: block; transition: 0.2s; font-size: 1rem; color: var(--input-color) ; color: #688bb9; font-size: 1.0rem !important; font-family: "Open Sans", sans-serif; font-weight: 400; } .form-check-input{ font-family: "Open Sans", sans-serif; font-weight: 400; color: var(--input-color); } .radiobtn label { display: block; background: var(--radio-background); color: #5481bb; border-radius: 5px; padding: 10px 20px; border: 1px solid var(--radio-border-before); margin-bottom: 5px; cursor: pointer; font-family: "Open Sans", sans-serif; } .radiobtn label:after, .radiobtn label:before { content: ' ' ; position: absolute; right: 11px; top: 11px; width: 20px; height: 20px; border-radius: 3px; background: var(--radio-before); } .radiobtn label:before { background: transparent; transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s; z-index: 2; overflow: hidden; background-repeat: no-repeat; background-size: 13px; background-position: center; width: 0; height: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+); } .radiobtn input[type='radio'] { display: none; position: absolute; width: 100%; appearance: none; } .radiobtn input[type='radio']:checked + label { background: var(--radio-before); animation-name: blink; animation-duration: 1s; border-color: var(--radio-border); } .radiobtn input[type='radio']:checked + label:after { background: var(--radio-border); } .radiobtn input[type='radio']:checked + label:before { width: 20px; height: 20px; } .drop-settings-parent{ background: rgba(115, 199, 255, 0.6); background: rgba(206, 206, 206, 0.8); } .drop-settings{ border-radius: 50px; height: 580px; width: 680px; background: white; box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); -webkit-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); -moz-box-shadow: -1px -2px 42px -19px rgba(0,0,0,0.74); } @keyframes blink { 0% { background-color: var(--radio-before); } 10% { background-color: var(--radio-before); } 11% { background-color: var(--radio-border-before); } 29% { background-color: var(--radio-border-before); } 30% { background-color: var(--radio-before); } 50% { background-color: var(--radio-border-before); } 45% { background-color: var(--radio-before); } 50% { background-color: var(--radio-border-before); } 100% { background-color: var(--radio-before); } } .choice-instructions{ font-size: 0.9rem !important; font-family: 'Open Sans', sans-serif; font-weight: 400;; line-height: 150%; /* color: #3E4348; */ } @media only screen and (max-width: 460px) { .landing-bg{ width: 100vw !important; height: 100vh !important; } .testimonial-logo{ height: 20px !important; } .partially-visible{ backdrop-filter: blur(6px) !important; background: rgba(255,255,255,0.9) !important; } .bg-logo{ left: 0px !important; top:-0px !important; width: 100vw; height: auto;; } #landing-main-image-col{ position:relative !important; width: 90vw !important; top: 100vh !important; left: 0px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 50px; padding-bottom: 50px; } #form_pw_reset{ /* position: relative !important; width: auto !important; */ /* position: relative !; */ /* all: unset; */ width: auto !important; padding: 0px !important; } .input-box{ max-width: 100%; background: transparent !important; border-radius: 0px; box-shadow: none !important; /* border: 1px solid white; */ /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;} */ } .full-modal{ /* max-width: 70vw !important; */ /* transform: scale(0.75); */ margin-left: 10px; margin-right: 10px; } #landing-main-image-bg{ display: none; } .position-landing-video{ transform: translate3d(0,-30px,0); } #modal-headline{ font-size: 1.8rem !important; } .modal-exit{ background: transparent !important; min-width: 100vw !important; min-height: 100vw !important; } .modal-dialog{ /* padding: 20px */ width: 100%; top: 20px !important; } #blue-section{ border-radius: 0px !important; width: 100vw !important; padding-bottom: 0px !important; padding-top: 30px !important; margin-bottom: 100px; margin-top: 20px; /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */ } #blue-section-text{ font-weight: 600; } .color-mobile-white { color: white; } .color-mobile-yellow{ color: var(--yellow-highlight) } } .text-shadow{ text-shadow: 1px 1px #494949 !important; } .text-outline-shadow{ text-shadow: -.5px -.5px 0 rgba(0, 0, 0, 0.18), /* Top-left offset white shadow */ .5px -.5px 0 rgba(0, 0, 0, 0.18), /* Top-right offset white shadow */ -.5px .5px 0 rgba(0, 0, 0, 0.18), /* Bottom-left offset white shadow */ .5px .5px 0 rgba(0, 0, 0, 0.18); /* Bottom-right offset white shadow */ } @media only screen and (max-height: 740px){ .about-text { font-size: 0.85rem !important; } } .cd__main{ display: block !important; background: #ddfcf5 !important; min-height: 450px; height: 100vh; } .container { width: 100%; height: 100%; } .card { background-color: white; /* width: 550px; */ height: 100%; border-radius: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 30px 0 0 0; transition: transform 400ms; opacity: 0.9 !important; box-shadow: none !important; margin-bottom: 50px; margin-top: 50px; transform: scale(1.0); border: none !important; } .quote-icon { position: absolute; z-index: 0; opacity: 0.55; left: 3%; top: -14%; transform: scale(0.5); } .avatar { width: 80px; height: 80px; border-radius: 150px; border: 5px solid #f9fafe; box-shadow: 0 0 6px #ccc; position: absolute; top: 5%; /* left: 5%; */ /* transform: translate(-60px, -60px); */ z-index: 1; } .testimonial-header { margin: 0px 0 0 0; text-align: center; z-index: 1; } .name { font-family: "Hammersmith One", sans-serif; text-transform: uppercase; font-size: 22px; margin: 0; } .title { font-family: "Hammersmith One", sans-serif; text-transform: uppercase; font-size: 14px; font-weight: 400; margin: 5px 0 0 0; padding: 0 5px; color: #7ccdc5; } .quote-container { margin-top: 10px; height: 100%; z-index: 1; padding: 15px 30px 30px 30px; overflow: hidden; transform: translateY(20%); pointer-events: none; } .quote { width: 110% !important; transform: translateX(-5%); font-family: "Open Sans", sans-serif; font-size: 15px !important; text-align: left; color: #73808c; margin: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { display: flex !important; justify-content: center; align-items: center; } .swiper-slide-active { z-index: 1; } .swiper-slide-active .card { box-shadow: 0 8px 30px -7px #c9dff0; opacity: 1; transform: scale(1.0); } .swiper { margin-left: auto; margin-right: auto; } .swiper-button-next:focus, .swiper-button-prev:focus { outline: none; } .quote-icon { width: 75px; height: 75px; margin-top: 35%; } .slider-name{ font-weight: 300; font-family: "Open Sans", sans-serif; /* color: var(--blackish) !important; */ color: var(--blackish); /* color: darkblue; */ font-size: 15px !important; line-height: 140%; } .slider-quote{ font-weight: 400; font-family: "Lato", sans-serif; /* color: var(--blackish) !important; */ color: var(--blackish); font-size: 18px !important; line-height: 140%; } @media (max-height: 400px) { .header { margin: 40px 0 0 0; } .name { font-size: 12px; } .title { font-size: 10px; } .quote-container { padding: 5px 20px 20px 20px; } .quote-icon { width: 75px; height: 75px; margin-top: 20%; } .avatar { width: 100px; height: 100px; transform: translate(-50px, -50px); } } .cursor-default{ cursor: default !important; } .testimonial-logo{ height: 35px; } .alternative-landing-img{ max-width: 50vw; } .color-black-i{ color: var(--blackish) !important; } .nav-children{ /* background: rgba(42, 82, 190, 0.5) 30% !important; */ background: rgba(79, 125, 196,0.95) !important; margin-top: 20px; border-radius: 20px; } .nav-child{ transition: padding 0.1s; padding-right: 20px; color: white; } .nav-child:hover{ /* border-left: 3px solid white;; */ padding-left: 6px; } .carousel-indicators li { background-color: #ccc !important; /* Light gray color */ z-index: 99999 !important; height:10px; width: 10px; border-radius: 50%; margin-left: 5px; margin-right: 5px; } /* Change the color of the active indicator */ .carousel-indicators .active { background-color: #69A9EC!important; /* Bootstrap's primary blue */ z-index: 99999 !important; } .carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(180deg); }