/* @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,900|Open+Sans:300,400,600,700'); */ /*@font-face { font-display: block; font-family: 'Neue Einstellung'; font-stretch: normal; font-style: normal; font-weight: 400; src: url("fonts/HelveticaNeue.woff") format("woff"), }*/ #jqcheck { background: #fff9d7; text-align: center; color: #333; padding: 10px 0px; font-size: 13px; font-weight: bold; position: fixed; z-index: 9991; width: 100%; font-family: Arial, Helvetica, sans-serif; } * { margin: 0px; padding: 0px; } /* text selection color */ ::-moz-selection { background: var(--primary-color); color: var(--theme-white); text-shadow: none;} ::selection { background: var(--primary-color); color: var(--theme-white); text-shadow: none; } /* browser scroller style */ ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display:none; } ::-webkit-scrollbar-track-piece { background-color:#ecedf1; -webkit-border-radius:0px; border-left:1px solid #888; } ::-webkit-scrollbar-thumb:vertical { -webkit-border-radius:0px; background:var(--primary-color); } @media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: none !important; line-height:28px !important; } } body {font-family: var(--primary-font-family);color: var(--default-color);font-size:var(--base-font-size);position: relative;} /* font family */ .ff-primary { font-family: var(--primary-font-family); } .ff-secondary { font-family: var(--secondary-font-family); } /* font colors */ .fc-primary { color: var(--primary-color); } .fc-secondary { color: var(--secondary-color); } .fc-dark { color: var(--theme-dark); } .fc-lite { color: var(--theme-lite); } img.ap-img { margin: 0 auto; width: 60%; } /* buttons */ .primary-btn,.secondary-btn { font-size: 13px; font-weight: 400; text-transform: capitalize; padding: 8px 15px; position:relative; display:table; border-radius: 3px; } .primary-btn:after, .secondary-btn:after { content: "\e957"; font-family: 'icomoon' !important; font-size: 13px; color: white; padding-left: 10px; display: table-cell; vertical-align: middle; } .primary-btn { background:var(--primary-color); color: white; } .primary-btn:hover {background:var(--primary-color-dark); color: white; } .secondary-btn { background:var(--secondary-color); color: white; } .secondary-btn:hover {background:var(--secondary-color-dark); color: white; } .banner-btn{text-transform: capitalize; display: inline-block; transform: translateY(0rem); -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; color: #fff !important; background-color: transparent;padding: 20px 40px; font-size: 18px; font-weight: 600; border-radius: 5px;border: 1px solid #fff !important;} .secpad-100{padding: 100px 0;} .sm-btn { font-size: 14px; } .md-btn { font-size: 16px; } .lg-btn { font-size: 18px; } .xl-btn { font-size: 20px; } /* headings */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p { margin: 0; padding: 0; } h1, .h1, h2, .h2 {font-family: var(--heading-font-family);} h3, .h3, h4, .h4, h5, .h5, h6, .h6{ font-family: var(--heading-font-family); padding-bottom: 10px; color: var(--theme-dark); } h2, .h2 { font-size: 6.7vmin; } h3, .h3 { font-size: var(--font-size-h3); font-weight: 600; } h4, .h4 { font-size: var(--font-size-h4); } h5, .h5 { font-size: var(--font-size-h5); } h6, .h6 { font-size: var(--font-size-h6); } p { /*font-size: var(--base-font-size);*/ } p {font-weight: 400;line-height: 1.4;padding: 0 0 20px;margin:0px;color: #000;} /*** theme sections padding ***/ .sec-padding-100 { padding:100px 0;} .sec-padding-90 { padding:90px 0;} .sec-padding-80 { padding:80px 0;} .sec-padding-70 { padding:70px 0;} .sec-padding-60 { padding:60px 0;} .sec-padding-xlarge { padding:50px 0; } .sec-padding-large { padding:40px 0; } .sec-padding-medium { padding:30px 0; } .sec-padding-small { padding:25px 0; } .sec-padding-xsmall { padding:10px 0; } /*** theme sections margin ***/ .sec-margin-100 { margin:100px 0;} .sec-margin-90 { margin:90px 0;} .sec-margin-80 { margin:80px 0;} .sec-margin-70 { margin:70px 0;} .sec-margin-60 { margin:60px 0;} .sec-margin-xlarge { margin:50px 0; } .sec-margin-large { margin:40px 0; } .sec-margin-medium { margin:30px 0; } .sec-margin-small { margin:25px 0; } .sec-margin-xsmall { margin:10px 0; } /*** no padding, no marging ***/ .p-0 { padding:0; } .pt-0 { padding-top:0px; } .pb-0 { padding-bottom:0px; } .pl-0 { padding-left:0px; } .pr-0 { padding-right:0px; } .m-0 { margin:0; } .mt-0 { margin-top:0px; } .mb-0 { margin-bottom:0px; } .ml-0 { margin-left:0px; } .mr-0 { margin-right:0px; } .img-wrp { display: inline-block; width: 38%; margin: 0 0 70px 0; } .tt-uppercase{text-transform: uppercase;} .tt-capitalize{text-transform: capitalize;} .improve-infrastructure { background-image: url(../images/improve-infrastructure.png) !important;} .locate-issues { background-image: url(../images/locate-issues.png) !important;} .play-a-warehouse-admin { background-image: url(../images/play-a-warehouse-admin.png) !important;} p strong { color: black; } p span { color: black; } a:hover { text-decoration: none; } a:focus { outline: none; text-decoration: none; } img { border: 0px; outline: none; } /*img { max-width: 100%; }*/ ul,li { list-style-type: none; } .relative { position:relative; } .absolute { position:absolute; } h2,.h2 { color: #171717; line-height: 1.2; font-weight: 700; padding: 0 0 15px 0; position: relative; letter-spacing: -1px; } h2 span,.h2 span { color:var(--primary-color);} a { text-decoration: none; } .list-simple { list-style: none; margin: 0 0 15px 0; width:100%; display:inline-block; } .list-simple li {color: var(--default-color);padding: 0 0 10px 16px;line-height: 20px;font-size: 14px;font-weight: 400;position:relative;} .list-simple li:before {position: absolute; left: 0px;top: 0px; font-size: 13px; color:var(--secondary-color); content: "\e93a"; font-family: 'icomoon' !important; } /*** morefull block link ***/ .moreFull { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; } /*** transition ***/ .transition {-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /*** scale with transition ***/ .scale-with-transition { -webkit-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; transition: all 200ms ease-in; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); } /* header ------------------------------------*/ .header-main { /* position: absolute; */ padding: 0 0 0 0; top: 0; z-index: 99; width: 100%; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .header-main.fixed{box-shadow: 0px 5px 20px #00000012;-ms-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;position: fixed;background: #fff;} .header-main.fixed .main-menu > ul > li > a{text-transform: capitalize;color: #223235;} .header-main.fixed .logo{width: 100%;} .top-bar {position: fixed;background: #f5f8fa;padding: 0;width: 100%;top: 0;left: 0;border-bottom: 1px solid #cbd6e2;z-index: 99;} .top-info-list {float: right;margin: 25px 0;} .top-info-list li {float: left;color: #171717;font-size: 14px;padding: 0 10px;} .top-info-list li:first-child { padding-left: 0px; } .top-info-list li:last-child { padding-right: 0px; } .top-info-list li span { margin-right:8px; color: #171717; font-size: 13px; line-height: 20px; } .top-info-list li span.icon-phone2 {font-size: 15px; top: 1px; position: relative;} .top-info-list li+li {/* border-left: 1px solid #171717; */} .top-info-list li a{ color: #171717; } .top-info-list li a:hover {color: #223235;} .nav-area-full {padding: 17px 0 16px;width: 100%;margin-top: 72px;} .logo { width: 100%; margin: 0; float: left; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .logo a { display: block; } .top-area { display: inline-block; width: 100%; } .main-menu {width: 100%;display: inline-block;float: right;margin: 2px 0 0;} .main-menu > ul { float: right; margin: 0px; } .main-menu > ul > li { padding:0px 15px; float: left; position: relative; } .main-menu > ul > li:last-child {padding-right: 0px;/* margin-top: -14px; */} .main-menu > ul > li:before {position: absolute;width: 1px;height: 12px;background: #71787e;left: 0px;top: 30%;} .main-menu > ul > li:first-child:before { display: none; } .main-menu > ul > li > a {padding: 20px 0;font-size: 16px;color: #171717;font-weight: 400;text-transform: capitalize;} .header-main .has-submenu.progmenu{font-size: 16px;color: #171717;font-weight: 400;margin: 0;padding: 3px 0 4px;font-family: var(--primary-font-family);} .main-menu > ul > li.active > a, .main-menu > ul > li > a:hover, .main-menu > ul > li > a.active, .main-menu > ul > li > a:focus { color: #f38440;} .cstn-column{display: inline-block;width: 100%;font-size: 0;} .dropdown{ width:250px; position: absolute; top: 160%; left: 0%; visibility: hidden; opacity: 0; padding:0px; background-color: #fff; border: 1px solid #cbd6e2; border-radius: .1875rem; box-shadow: 0 1px 24px rgba(45,62,80,0.12); z-index: 95; } .main-menu > ul > li:hover .dropdown{visibility: visible; /* shows sub-menu */opacity: 1;left: 18px;} .main-menu > ul > li:hover .progmenu .dropdown{left: 0;} .dropdown > ul{padding: 10px 0;list-style:none;} .dropdown > ul > li{ } .dropdown > ul > li:before{ display:none; } .dropdown > ul > li+li{} .dropdown > ul > li > a{color: #171717 !important;font-size: 16px;text-decoration:none;padding:8px 10px 8px 15px;display: block;} .dropdown > ul > li > a:hover{ color:black; background:none; } .dropdown > ul > li > a:hover:before { display:none; } .double-drop { width: 400px!important; } .dropdown > ul > li > ul { display: none; } .dropdown > ul > li.level2:hover > ul { display: block; } .stickyheader { position: fixed; z-index: 9999; min-height: auto; } .stickyheader .logo img { width:80px; } .stickyheader .logo { margin: 5px 0; } .stickyheader .navbar-inverse { margin: 10px 0 0 0; } .stickyheader .top-info-list ul { margin: 5px 0; } /* .WorkDetails__mainWrapper { width: 85%; min-height: 100vh; margin: 0 auto; position: relative; } .projectDetails__mainWrapper { width: 100%; display: inline-block; } .projectDetails__copyWrapper { width: 50%; max-width: 540px; padding-top: 200px; padding-bottom: 200px; float: left; } .projectDetails__visualWrapper { width: 50%; height: 100%; position: absolute; left: 50%; } .is--loadedState.CTAgrid__gridGroupWrapper, .is--loadedState.projectDetails__bodyCopy, .is--loadedState.projectDetails__mainHeader, .is--loadedState.projectKeyFeatures__mainWrapper { animation-name: workDetailsOnboardTextSlideYIn; animation-duration: 2s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.2,1,.2,1); } .projectDetails__mainHeader { font-size: 6.4rem; font-weight: 800; margin-top: 30px; margin-bottom: 50px; } .CTAgrid__mainWrapper { display: -ms-grid; display: grid; -ms-grid-columns: (33.33333%)[3]; grid-template-columns: repeat(3,33.33333%); } .CTAgrid__gridGroupWrapper { display: -ms-grid; display: grid; -ms-grid-columns: 25px 30px 15px auto 25px; grid-template-columns: 25px 30px 15px auto 25px; -ms-grid-rows: 20px 15px 15px 20px; grid-template-rows: 20px 15px 15px 20px; border: 1px solid #dad6da; margin-bottom: 50px; } .CTAgrid__iconItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2/span 2; background-size: contain; background-repeat: no-repeat; background-position: 50%; } .CTAgrid__iconItem.iconItem__appStore { background-image: url('../images/apple-icon.png'); } .CTAgrid__labelItem { font-size: .9rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; -ms-grid-row-align: center; align-self: center; -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 2; grid-row: 2; } .CTAgrid__copyItem { font-size: 1.4rem; font-weight: 700; -ms-grid-row-align: center; align-self: center; -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 3; grid-row: 3; } .CTAgrid__gridGroupWrapper:not(:first-child) { border-left: none; } .CTAgrid__iconItem.iconItem__googlePlay { background-image: url('android-icon.png'); } .CTAgrid__iconItem.iconItem__web { background-image: url('web-icon.png'); } .projectDetails__bodyCopy { font-size: 1.6rem; line-height: 2.8rem; color: #272727; margin-bottom: 70px; } .projectKeyFeatures__mainWrapper { width: 100%; display: inline-block; } .projectKeyFeatures__labelWrapper { width: 40%; max-width: 160px; float: left; } .projectKeyFeatures__labelCopy { font-weight: 800; color: #272727; } .projectKeyFeatures__keyFeatureWrapper { width: 60%; float: left; border-left: 1px solid #dad6da; padding-left: 25px; } .projectKeyFeatures__keyFeatureCopyFormatter li { font-size: 1.6rem; line-height: 2rem; margin-bottom: 15px; } */ .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .header__mainWrapper { position: relative; z-index: 100 } .navBar__menuBackground { width: 100%; height: 100px; position: absolute; z-index: 100 } .navBar__mainWrapper { width: calc(100% - 100px); position: fixed; top: 30px; left: 50%; transform: translate3d(-50%, 0, 0); display: table; z-index: 100; color: #fff } .navBar__logoWrapper { display: inline-block; vertical-align: middle; width: 145px; height: 33px } .navBar__logoImg { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1 } .navBar__itemWrapper { display: inline-block; float: right } .navBar__item { font-size: 1.4rem; display: inline-block; margin-right: 60px; vertical-align: sub; padding-top: 2px } .navBar__item.active { font-weight: 700 } .navBar__item:after { display: block; content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden } .navBar__item--mobileOnly { display: none } .navBar__btnQuote { background-color: #3a2837; font-size: 1.4rem; padding: 17px 22px; border-radius: 30px; display: inline-block } .navBar__backToWork_mainWrapper { display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%) } .navBar__backToWork_arrowIco { display: inline-block; float: left; margin-right: 15px } .navBar__backToWork_arrowIco:after { content: ""; width: 12px; height: 7px; background: url(); background-size: cover; display: inline-block; transform: scaleX(-1) } .navBar__backToWork_text { color: #000; font-size: 1.4rem; display: inline-block; margin-top: 3px } .navBar__item { transition: color .5s; position: relative } .navBar__item:before { content: ""; width: 0; height: 1px; background: #fff; display: inline-block; position: absolute; top: calc(100% + 3px); left: -1px; transition: .5s cubic-bezier(.4, .6, .6, 1) } .navBar__item:hover:before { width: 100%; transition: .4s cubic-bezier(.2, .6, .4, 1) } .navBar__item p { transition: top .15s cubic-bezier(.4, .6, .6, 1); position: relative; top: 0 } .navBar__item:active p { top: 1px } .navBar__item, .navBar__logoWrapper { transition: opacity .3s cubic-bezier(.8, 0, .2, 1) } .navBar__item.is--inView, .navBar__logoWrapper.is--inView { transition-delay: .3s } .navBar__item.is--hiddenToShowBackToWorkLayout, .navBar__logoWrapper.is--hiddenToShowBackToWorkLayout { opacity: 0; pointer-events: none } .navBar__btnQuote { transition: transform .3s cubic-bezier(.4, .6, .6, 1) } .navBar__btnQuote:hover { transform: scale3d(1.05, 1.05, 1.05) } .navBar__btnQuote:active { transform: scale3d(.9, .9, .9) } .navBar__backToWork_mainWrapper { transition: opacity .3s cubic-bezier(.8, 0, .2, 1) } .navBar__backToWork_mainWrapper:active { margin-top: 2px } .navBar__backToWork_mainWrapper:hover .navBar__backToWork_text:before { width: 100%; transition: .4s cubic-bezier(.2, .6, .4, 1) } .navBar__backToWork_mainWrapper.is--inView { transition-delay: .3s } .navBar__backToWork_mainWrapper.is--hiddenToShowDefaultMenuLayout { opacity: 0; pointer-events: none } .navBar__backToWork_text { position: relative } .navBar__backToWork_text:before { content: ""; width: 0; height: 1px; background: #000; display: inline-block; position: absolute; top: calc(100% + 3px); left: -1px; transition: .5s cubic-bezier(.4, .6, .6, 1) } .navBarState--blackVar .navBar__item { color: #1f1f1f } .navBarState--blackVar .navBar__item:before { background: #000 } @keyframes HeaderOnboardAnim { 0% { transform: translate3d(0, -10px, 0); opacity: 0 } to { transform: translateZ(0); opacity: 1 } } @keyframes showMenuBar { 0% { margin-top: -100px } to { margin-top: 0 } } @keyframes hideMenuBar { 0% { margin-top: 0 } to { margin-top: -100px } } .HeaderOnboardAnim--onboard { animation-name: HeaderOnboardAnim; animation-duration: 10.75s; animation-delay: 10.3s; animation-fill-mode: both } .AnimNavBar__scrollDirection--showMenu, .AnimNavBar__scrollDirection--showMenuBackground { animation-name: showMenuBar; animation-duration: .5s; animation-fill-mode: forwards; will-change: margin-top } .AnimNavBar__scrollDirection--hideMenu, .AnimNavBar__scrollDirection--hideMenuBackground { animation-name: hideMenuBar; animation-duration: .5s; animation-fill-mode: forwards; will-change: margin-top } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } @media only screen and (min-width:980px) { .navBarMobileSocial__mainWrapper { display: none!important } } @media only screen and (max-width:980px) { .navBar__menuBackground { height: 70px } .navBar__mainWrapper { top: 20px } .navBar__logoImg { width: 110px } .navBar__mainWrapper { width: calc(100% - 40px) } .navBar__logoImg { top: 55% } .navBar__itemWrapper { width: 100%; text-align: center; position: absolute; top: calc(50vh - 55px); left: 0; transform: translateY(-50%); z-index: 1; display: none } .navBar__btnQuote, .navBar__item { font-size: 2.4rem; text-align: center; font-weight: 700; color: #fff!important; display: table; margin: 0 auto } .navBar__item:not(:last-child) { margin-bottom: 4.5vh } .navBar__btnQuote { background-color: initial; padding: 0; overflow: hidden; border-radius: 0; margin-bottom: 4.5vh } .navBarHamburger__mainWrapper { width: 20px; height: 15px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 1 } .navBarHamburger__mainWrapper:before { content: ""; width: 46px; height: 46px; position: absolute; top: 50%; left: 50%; margin-left: -23px; margin-top: -23px; border-radius: 50%; background-color: #3a2837; display: inline-block } .navBarHamburger__strokeElement { width: 100%; height: 2px; background: #fff } .navBarHamburger__strokeElement:first-child { position: absolute; top: 0; left: 0 } .navBarHamburger__strokeElement:nth-child(2) { position: absolute; left: 0; top: 50% } .navBarHamburger__strokeElement:nth-child(3) { position: absolute; left: 0; top: 50% } .navBarHamburger__strokeElement:nth-child(4) { position: absolute; top: 100%; left: 0 } .navBarHamburger--expanded:before { pointer-events: none } .navBarMobileSocial__mainWrapper { position: absolute; top: calc(100vh - 140px); left: 50%; transform: translateX(-50%); width: 100%; text-align: center; z-index: 1; display: none } .navBarMobileSocial__item:not(:last-child) { margin-right: 40px } } @media only screen and (max-width:980px) { .navBarHamburger__mainWrapper:before { transition: transform .6s cubic-bezier(.2, 1, .2, 1) 0s; -webkit-backface-visibility: hidden; transform: scale(1) } .navBarHamburger__mainWrapper:active, .navBarHamburger__mainWrapper:focus { top: calc(50% + 3px) } .navBarHamburger__strokeElement { transition: transform .5s, top .75s, left .75s, width .75s } .navBarHamburger--expanded:before { transition: transform .9s cubic-bezier(.2, 1, .2, 1) 0s; transform: scale(45) } .navBarHamburger--expanded~.navBar__itemWrapper { display: block } .navBarHamburger--expanded~.navBarMobileSocial__mainWrapper { display: block } .navBarHamburger--expanded .navBarHamburger__strokeElement:first-child { width: 0; top: 50%; left: 50% } .navBarHamburger--expanded .navBarHamburger__strokeElement:nth-child(2) { transform: rotate(45deg) } .navBarHamburger--expanded .navBarHamburger__strokeElement:nth-child(3) { transform: rotate(-45deg) } .navBarHamburger--expanded .navBarHamburger__strokeElement:nth-child(4) { width: 0; top: 50%; left: 50% } .navBar__item { overflow: hidden } .navBar__item:hover:before { display: none } } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } @media only screen and (max-width:980px) { @keyframes AnimPTag--onBoard { 0% { transform: skewY(40deg) translateY(50px) } to { transform: skewY(0) translate(0) } } @keyframes AnimPTag--exit { 0% { transform: skewY(0) translate(0) } to { transform: skewY(40deg) translateY(50px) } } @keyframes AnimNavBarSocialItems--onboard { 0%, 40% { opacity: 0 } to { opacity: 1 } } @keyframes AnimNavBarSocialItems--exit { 0% { opacity: 1 } to { opacity: 0 } } .AnimNavBarItems--onboard .navBar__pTag { animation-name: AnimPTag--onBoard; animation-duration: 1.3s; animation-delay: .1s; animation-timing-function: cubic-bezier(.2, 1, .2, 1); transform-origin: 0; animation-fill-mode: both; -webkit-backface-visibility: hidden } .AnimNavBarItems--exit .navBar__pTag { animation-name: AnimPTag--exit; animation-duration: 1s; animation-timing-function: cubic-bezier(.2, 1, .2, 1); transform-origin: 0; animation-fill-mode: both; -webkit-backface-visibility: hidden } .AnimNavBarSocialItems--onboard { animation-name: AnimNavBarSocialItems--onboard; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.2, 1, .2, 1); animation-fill-mode: both } .AnimNavBarSocialItems--exit { animation-name: AnimNavBarSocialItems--exit; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, 1, .2, 1); animation-fill-mode: both } } body.is--safari.is--mobile .navBar__itemWrapper { top: calc(50vh - 65px) } body.is--safari.is--mobile .navBarMobileSocial__mainWrapper { top: calc(100vh - 150px) } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .footer { padding: 100px 0 50px; position: relative; background-color: #fafafa; z-index: 10 } .footer__header { text-align: center; color: #d5333e; margin-bottom: 75px; display: block } .trusts__mainWrapper { width: 90%; max-width: 1400px; margin: 0 auto 85px; display: table } .trusts__itemWrapper { width: 25%; height: 100px; float: left; padding: 20px 25px; cursor: pointer } .trusts__itemWrapper:not(:last-child) { border-right: 1px solid rgba(0, 0, 0, .1); width: calc(33% - 1px) } .trusts__itemWrapper--centraliser { display: table; margin: 0 auto } .trusts__header { display: inline-block; margin-bottom: 10px } .trusts__header.w--arrow:after { content: ""; width: 15px; height: 9px; display: inline-block; position: relative; float: right; margin-top: 7px; margin-left: 20px; background-image: url(); background-repeat: no-repeat } .trusts__arrow { display: inline-block; margin: 25px auto 0 } .social__wrapper { width: 90%; max-width: 220px; text-align: center; margin: 0 auto 30px; display: table } .social__item { display: table-cell; width: 20%; text-align: center } .social__item:not(:last-child) { margin-right: 40px } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .trusts__header { transition: all .8s cubic-bezier(.2, .6, .4, 1) } .trusts__header.w--arrow:after { transition: all 1.25s cubic-bezier(.2, .6, .4, 1); left: 0 } .trusts__itemWrapper:hover .trusts__header { color: #d5333e } .trusts__itemWrapper:hover .trusts__header.w--arrow:after { left: 15px } @media only screen and (max-width:1050px) { .footer { padding: 70px 0 30px } .footer__header { margin-bottom: 60px } .trusts__mainWrapper { width: 98%; margin-bottom: 65px } } @media only screen and (max-width:980px) { .footer { padding-top: 50px } .footer__header { margin-bottom: 40px } .trusts__mainWrapper { width: calc(100% - 40px) } .trusts__itemWrapper { width: 100%; padding: 20px 0; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .1) } .trusts__itemWrapper:not(:last-child) { width: 100%; border-right: none; margin-bottom: 10px } .trusts__itemWrapper--centraliser { width: 100%; margin: initial } .trusts__header { width: 100% } } .PageTransitions__mainWrapper { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: #fff; pointer-events: none; z-index: 100 } @keyframes pageTransAnim-onboard { 0% { transform: translate3d(-100vw, 0, 0) } to { transform: translateZ(0) } } .PageTransitions__mainWrapperAnimation--onboard { animation-name: pageTransAnim-onboard; animation-timing-function: cubic-bezier(.4, .1, .1, 1); animation-duration: .75s; animation-fill-mode: backwards } .PageTransitionsPreloader__mainWrapper { width: 100%; height: 100vh; position: relative; overflow: hidden } @keyframes heroCopy-exit { 0% { opacity: 1 } to { opacity: 0 } } .PageTransitionsPreloader__heroCopy--exit { animation-name: heroCopy-exit; animation-delay: .3s; animation-duration: .4s; animation-fill-mode: forwards } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-SemiBold"), url(/css/type/23pGLov.woff2) format("woff2"), url(/css/type/32pWASy.woff) format("woff"); font-weight: 600; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-Thin"), url(/css/type/2fCplIK.woff2) format("woff2"), url(/css/type/1D8lW7G.woff) format("woff"); font-weight: 100; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-ExtraBold"), url(/css/type/3FA2SJo.woff2) format("woff2"), url(/css/type/1cNoVrG.woff) format("woff"); font-weight: 800; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-Black"), url(/css/type/ixbr3lb.woff2) format("woff2"), url(/css/type/31B9yHt.woff) format("woff"); font-weight: 900; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-Medium"), url(/css/type/13ZL4D5.woff2) format("woff2"), url(/css/type/2vntkyX.woff) format("woff"); font-weight: 500; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-Light"), url(/css/type/2RrPByu.woff2) format("woff2"), url(/css/type/1Q0RZdt.woff) format("woff"); font-weight: 300; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("NeueEinstellung-Regular"), url(/css/type/2ouwpzi.woff2) format("woff2"), url(/css/type/2pyXnS9.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung SemiBold"), local("NeueEinstellung-SemiBold"), url(/css/type/23pGLov.woff2) format("woff2"), url(/css/type/32pWASy.woff) format("woff"); font-weight: 600; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung ExtraBold"), local("NeueEinstellung-ExtraBold"), url(/css/type/3FA2SJo.woff2) format("woff2"), url(/css/type/1cNoVrG.woff) format("woff"); font-weight: 800; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Light"), local("NeueEinstellung-Light"), url(/css/type/2RrPByu.woff2) format("woff2"), url(/css/type/1Q0RZdt.woff) format("woff"); font-weight: 300; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Thin"), local("NeueEinstellung-Thin"), url(/css/type/2fCplIK.woff2) format("woff2"), url(/css/type/1D8lW7G.woff) format("woff"); font-weight: 100; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Bold"), local("NeueEinstellung-Bold"), url(/css/type/2NFO1To.woff2) format("woff2"), url(/css/type/36eLL15.woff) format("woff"); font-weight: 700; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Medium"), local("NeueEinstellung-Medium"), url(/css/type/13ZL4D5.woff2) format("woff2"), url(/css/type/2vntkyX.woff) format("woff"); font-weight: 500; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Regular"), local("NeueEinstellung-Regular"), url(/css/type/2ouwpzi.woff2) format("woff2"), url(/css/type/2pyXnS9.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: Neue Einstellung; src: local("Neue Einstellung Black"), local("NeueEinstellung-Black"), url(/css/type/ixbr3lb.woff2) format("woff2"), url(/css/type/31B9yHt.woff) format("woff"); font-weight: 900; font-style: normal } article, aside, audio, command, datagrid, details, dialog, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, video, wbr { display: block } bdi, figcaption, keygen, mark, meter, progress, rp, rt, ruby, time { display: inline } acronym, applet, big, center, dir, font, frame, frameset, noframes, s, strike, tt, u, xmp { display: none } a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figure, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, map, mark, menu, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video { background: transparent; border: 0; font-size: 100%; font: inherit; margin: 0; outline: none; padding: 0; text-align: left; text-decoration: none; vertical-align: baseline } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } table { border-collapse: collapse; border-spacing: 0 } * { box-sizing: border-box } ::selection { color: #00f } /*body, html { width: 100%; height: 100%; overflow: auto }*/ html { overflow-x: hidden; overflow-y: auto; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } html.disable-scroll { overflow-y: hidden } a, a:active, a:focus, a:hover { color: inherit; text-decoration: none } input[type=button], input[type=email], input[type=number], input[type=submit], input[type=tel], input[type=text], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none } input[type=number] { -moz-appearance: textfield } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none } option { text-shadow: none } option:not(:checked) { color: #000 } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000 } button:focus { outline: 0 } .animated, .animated:after, .animated:before { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all .2s ease-out } .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; webkit-touch-callout: none } .no-drag { user-drag: none } .no-pointerEvents { pointer-events: none } .circle { z-index: 1; border-radius: 100% } .inline-block { display: inline-block; vertical-align: middle } .overlay-backing { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100% } .abs-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .click-efx:active { transform: translateY(1px); transition-duration: .1s } .strikethrough { text-decoration: line-through } .text-thin { font-weight: 100 } .text-extra-light { font-weight: 200 } .text-light { font-weight: 300 } .text-semi-bold { font-weight: 600 } .text-bold { font-weight: 700 } .text-extra-bold { font-weight: 800 } .btn { cursor: pointer } .btn:active .btn-inner { transform: translateY(1px); transition-duration: .1s } .error { color: #bd131f; animation: shake .3s ease-out } .test { border: 1px solid red } .no-flex .v-center-holder.pos-rel { position: relative } .no-flex .v-center-holder.pos-abs { position: absolute } .v-center-holder .no-flex .v-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } @supports (display:flex) { .v-center-holder { flex-direction: column; justify-content: center; display: flex } } .centerX { position: absolute; left: 50%; transform: translateX(-50%) } .centerY { transform: translateY(-50%) } .centerXY, .centerY { position: absolute; top: 50% } .centerXY { left: 50%; transform: translate(-50%, -50%) } .is--dNone { display: none!important } .is--hidden { visibility: hidden } .cursor--pointer { cursor: pointer!important } .clearfix:after { content: ""; clear: both; display: table } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0) } 20%, 80% { transform: translate3d(2px, 0, 0) } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0) } 40%, 60% { transform: translate3d(4px, 0, 0) } } @keyframes fade-in { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fade-in-from-top { 0% { transform: translateY(-5px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes fade-in-from-bottom { 0% { transform: translateY(5px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes fade-in-from-left { 0% { transform: translateX(-10px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } @keyframes fade-in-from-right { 0% { transform: translateX(10px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility } body { letter-spacing: -.025em; /*font-family: Neue Einstellung, Helvetica, Arial, sans-serif;*/ font-family: 'Open Sans', sans-serif; font-size: 1.6rem } .text--center { text-align: center } .extraBold--18 { font-weight: 800; font-size: 1.8rem } .extraBold--26 { font-weight: 800; font-size: 2.6rem } .extraBold--36 { font-weight: 800; font-size: 3.6rem } .extraBold--200 { font-weight: 800; font-size: 20rem } .bold--30 { font-weight: 700; font-size: 3rem } .body--14 { font-size: 1.4rem } .button--inlineArrows--red, .button--inlineArrows--white { display: inline-block; cursor: pointer } .button--inlineArrows--red:after, .button--inlineArrows--white:after { content: ""; width: 15px; height: 9px; display: inline-block; position: relative; float: right; margin-top: 3px; margin-left: 15px; background-image: url(); background-repeat: no-repeat } .button--inlineArrows--white:after { background-image: url() } .button--aLink { color: inherit; border-bottom: 1px solid transparent } .button--inlineArrows--red:after, .button--inlineArrows--white:after { transition: all 1.25s cubic-bezier(.2, .6, .4, 1); left: 0 } .button--inlineArrows--red:hover:after, .button--inlineArrows--white:hover:after { left: 15px } .button--inlineArrows--red:active, .button--inlineArrows--white:active { position: relative; top: 1px } .button--aLink { transition: border .4s } .button--aLink:hover { border-bottom: 1px solid } .button--aLink:active { position: relative; top: 1px } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .form-control:focus { box-shadow: none } .was-validated .form-control:valid { border-color: #ccc } .was-validated .form-control:valid:focus { border-color: initial; box-shadow: none } .fixedDropdownErrorMsg, .invalid-feedback { width: 100%; font-size: 80%; color: #dc3545; margin-top: .5em } .is--error.formElements__date, .is--error.formElements__dropdown { border-color: #dc3545!important } .is--error .formElements__checkbox_customCheckbox, .is--error .formElements__radio_customRadio { border: 1px solid #dc3545!important } :-ms-input-placeholder { opacity: 1 } ::-ms-input-placeholder { opacity: 1 } ::placeholder { color: #cacaca; opacity: 1 } :-ms-input-placeholder { color: #cacaca } ::-ms-input-placeholder { color: #cacaca } select { -webkit-appearance: none; -moz-appearance: none; appearance: none } select::-ms-expand { display: none } .slickCarousel .slick-slide { float: left; position: relative } .slickCarousel .slick-dots { width: 100%; text-align: center; z-index: 1 } .slickCarousel .slick-dots li { display: inline-block } .slickCarousel .slick-dots li:not(:last-child) { margin-right: 13px } .slickCarousel .slick-dots li button { font-size: 0; width: 10px; height: 10px; background: #cacaca; cursor: pointer; border-radius: 50% } .slickCarousel .slick-dots li.slick-active button { background-color: #d5333e } .scrollbar-track.scrollbar-track-y { width: 4px; background: none } .AnimApp { transform-style: preserve-3d } @media (max-width:767px) { html.disable-scroll-mobile { overflow-y: hidden } html { font-size: 58% } } @media (max-width:1200px) { html { font-size: 60% } } .scroll-content { will-change: contents } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .AnimApp { transition: transform 1.85s cubic-bezier(.2, 1, .2, 1); -webkit-backface-visibility: hidden } .AnimApp--exit { transition: transform 2s cubic-bezier(.2, 1, .2, 1); transform: translate(-10%) } /*# sourceMappingURL=4a47fd94882e310ef12a.css.map*/ .WorkDetailsHeroSlider__mainWrapper{width:50vw;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}.WorkDetailsHeroSlider__mainWrapper .slick-dots{position:absolute;bottom:0;left:0}.WorkDetailsHeroSlider__ballBG{width:50vw;height:50vw;max-width:580px;max-height:580px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;}.WorkDetailsHeroSlider__phoneVis{width:100%;max-width:770px;margin:0 auto;display:block!important;transition:opacity .75s}.WorkDetailsHeroSlider__phoneVis.WorkDetailsHeroSlider--hideItem{opacity:0} @keyframes workDetailsBallBGOnboard{0%{transform:scale3d(0,0,1) translate3d(-50%,-50%,0);border-radius:43% 57% 56% 44%/55% 40% 60% 45%}5%{transform:scale3d(0,0,1) translate3d(-50%,-50%,0)}30%{border-radius:43% 57% 47% 53%/46% 46% 54% 54%}70%{border-radius:49% 51% 43% 57%/55% 48% 52% 45%}to{transform:scaleX(1) translate3d(-50%,-50%,0);border-radius:50% 50% 50% 50%/50% 50% 50% 50%}}@keyframes workDetailsCarouselOnboard{0%{opacity:0;transform:translate3d(0,50px,0)}10%{opacity:0}to{opacity:1;transform:translateZ(0)}}.is--loadedState.WorkDetailsHeroSlider__ballBG{animation-name:workDetailsBallBGOnboard;animation-duration:.8s;animation-fill-mode:backwards;animation-timing-function:cubic-bezier(.52,.2,.415,1.32);transform-origin:top left}.is--loadedState.WorkDetailsHeroSlider__mainWrapper .slick-slide{animation-name:workDetailsCarouselOnboard;animation-delay:.7s;animation-duration:1.7s;animation-fill-mode:backwards;animation-timing-function:cubic-bezier(.2,1,.2,1)} @media only screen and (max-width:980px){.WorkDetailsHeroSlider__ballBG{width:100%!important;height:100%!important}.WorkDetailsHeroSlider__mainWrapper{width:100vw}} .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } .WorkDetails__mainWrapper { width: 85%; min-height: 100vh; margin: 0 auto; position: relative } .projectDetails__mainWrapper { width: 100%; display: inline-block } .projectDetails__copyWrapper { width: 50%; max-width: 540px; padding-top: 120px; padding-bottom: 200px; float: left } .projectDetails__visualWrapper { width: 50%; height: 100%; position: absolute; left: 50%; top:80px; } .projectDetails__mainHeader { font-size: 6.4rem; font-weight: 800; margin-top: 30px; margin-bottom: 50px } p.projectDetails__mainHeader{ color:; } .projectDetails__bodyCopy { font-size: 1.6rem; line-height: 2.8rem; color: #272727; margin-bottom: 70px } .projectDetails__bodyCopy p:not(:last-child) { margin-bottom: 40px } .projectDetails__bodyCopy a { font-weight: 700; color: #d5333e; border-bottom: 1px solid; border-color: transparent; transition: border .5s } .projectDetails__bodyCopy a:hover { border-color: #d5333e } .projectDetails__bodyCopy strong { font-weight: 700 } .CTAgrid__mainWrapper { display: -ms-grid; display: grid; -ms-grid-columns: (33.33333%)[3]; grid-template-columns: repeat(3, 33.33333%) } .CTAgrid__gridGroupWrapper { display: -ms-grid; display: grid; -ms-grid-columns: 25px 30px 15px auto 25px; grid-template-columns: 25px 30px 15px auto 25px; -ms-grid-rows: 20px 15px 15px 20px; grid-template-rows: 20px 15px 15px 20px; border: 1px solid #dad6da; margin-bottom: 50px } .CTAgrid__gridGroupWrapper:not(:first-child) { border-left: none } .CTAgrid__iconItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2/span 2; background-size: contain; background-repeat: no-repeat; background-position: 50% } .CTAgrid__iconItem.iconItem__appStore { background-image: url(../images/app-store-og.jpg); } .CTAgrid__iconItem.iconItem__googlePlay { background-image: url(../images/ipapp.png); } .CTAgrid__labelItem { font-size: .9rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; -ms-grid-row-align: center; align-self: center; -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 2; grid-row: 2 } .CTAgrid__copyItem { font-size: 1.4rem; font-weight: 700; -ms-grid-row-align: center; align-self: center; -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 3; grid-row: 3 } .projectKeyFeatures__mainWrapper { width: 100%; display: inline-block } .projectKeyFeatures__labelWrapper { width: 40%; max-width: 160px; float: left } .projectKeyFeatures__keyFeatureWrapper { width: 60%; float: left; border-left: 1px solid #dad6da; padding-left: 25px } .projectKeyFeatures__keyFeatureCopy { font-size: 1.6rem } .projectKeyFeatures__keyFeatureCopy:not(:last-child) { margin-bottom: 20px } .projectKeyFeatures__keyFeatureCopyFormatter p { font-size: 1.6rem; margin-bottom: 20px } .projectKeyFeatures__keyFeatureCopyFormatter li { font-size: 1.6rem; line-height: 2rem; margin-bottom: 15px } .projectKeyFeatures__keyFeatureCopyFormatter ol { margin-left: 20px; list-style-type: disc } .projectKeyFeatures__labelCopy { font-weight: 800; color: #272727 } .projectHeroCarousel__mainWrapper { width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden } .projectHeroCarousel__mainWrapper .slick-dots { position: absolute; bottom: 0; left: 0 } .projectHeroCarousel__ballBG { width: 50vw; height: 50vw; max-width: 580px; max-height: 580px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: red; border-radius: 50%; position: relative } .projectHeroCarousel__phoneVis { width: 100%; max-width: 550px; margin: 0 auto; display: block } .workNavigate__mainWrapper { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none } .workNavigate__btnWrapper--left, .workNavigate__btnWrapper--right { position: absolute; top: 50vh; margin-top: -50px; z-index: 1; pointer-events: all } .workNavigate__btnWrapper--left { left: 0; margin-left: -50px } .workNavigate__btnWrapper--right { right: 0; margin-right: -50px } .workNavigate__btn--left, .workNavigate__btn--right { width: 100px; height: 100px; border-radius: 50%; background-color: #295571; background-repeat: no-repeat; background-size: 13px 8px; cursor: pointer; } .workNavigate__btn--left { background-image: url(); background-position: 70% 50% } .workNavigate__btn--right { background-image: url(); background-position: 30% 50% } @media (-webkit-min-device-pixel-ratio:1.3), (min--moz-device-pixel-ratio:1.3), (min-device-pixel-ratio:1.3), (min-resolution:1.3dppx) { } @keyframes workDetailsOnboardTextSlideYIn { 0% { opacity: 0; transform: translate3d(0, 15px, 0) } to { opacity: 1; transform: translateZ(0) } } .is--loadedState.CTAgrid__gridGroupWrapper, .is--loadedState.projectDetails__bodyCopy, .is--loadedState.projectDetails__mainHeader, .is--loadedState.projectKeyFeatures__mainWrapper { animation-name: workDetailsOnboardTextSlideYIn; animation-duration: 2s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.2, 1, .2, 1) } .is--loadedState.CTAgrid__gridGroupWrapper { animation-delay: .4s } .is--loadedState.projectDetails__bodyCopy { animation-delay: .7s } .is--loadedState.projectKeyFeatures__mainWrapper { animation-delay: 1s } .CTAgrid__gridGroupWrapper:active { -ms-grid-rows: 21px 15px 15px 19px; grid-template-rows: 21px 15px 15px 19px } @keyframes workNavi--onboard { 0% { transform: scale3d(0, 0, 0) } to { transform: scaleX(1) } } @keyframes workNavi--exit { 0% { transform: scaleX(1) } to { transform: scale3d(0, 0, 0) } } .workNavigateAnim--onboard { animation-name: workNavi--onboard; animation-duration: .5s; animation-fill-mode: both } .workNavigateAnim--exit { animation-name: workNavi--exit; animation-duration: .5s; animation-fill-mode: both } @media only screen and (max-width:1300px) { .projectDetails__copyWrapper { width: 40% } .projectDetails__visualWrapper { width: 45%; left: 50% } .WorkDetailsHeroSlider__ballBG { width: 38vw; height: 38vw } .CTAgrid__mainWrapper { order: 3 } .CTAgrid__gridGroupWrapper { -ms-grid-rows: 10px min-content 10px min-content min-content 10px; grid-template-rows: 10px -webkit-min-content 10px -webkit-min-content -webkit-min-content 10px; grid-template-rows: 10px min-content 10px min-content min-content 10px; -ms-grid-columns: 15px calc(100% - 30px) 15px; grid-template-columns: 15px calc(100% - 30px) 15px } .CTAgrid__iconItem { width: 25px; height: 25px; -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; grid-row: 2 } .CTAgrid__labelItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4 } .CTAgrid__copyItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5 } } @media only screen and (max-width:980px) { .projectDetails__copyWrapper { width: 100%; max-width: none; padding-top: 120px; padding-bottom: 50px; display: flex; flex-direction: column } .projectDetails__mainHeader { font-size: 4.6rem; order: 1; margin-bottom: 80px } .projectDetails__bodyCopy { order: 4 } .projectDetails__visualWrapper { width: 60vw; height: 80vw; transform: translateX(-50%); position: absolute; order: 2; margin-bottom: 130px } .CTAgrid__mainWrapper { order: 3 } .CTAgrid__gridGroupWrapper { -ms-grid-rows: 10px min-content 10px min-content min-content 10px; grid-template-rows: 10px -webkit-min-content 10px -webkit-min-content -webkit-min-content 10px; grid-template-rows: 10px min-content 10px min-content min-content 10px; -ms-grid-columns: 15px calc(100% - 30px) 15px; grid-template-columns: 15px calc(100% - 30px) 15px } .CTAgrid__iconItem { width: 25px; height: 25px; -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; grid-row: 2 } .CTAgrid__labelItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 4; grid-row: 4 } .CTAgrid__copyItem { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 5; grid-row: 5 } .projectKeyFeatures__mainWrapper { order: 5 } .projectKeyFeatures__labelWrapper { width: 100%; max-width: none; float: none; margin-bottom: 20px } .projectKeyFeatures__keyFeatureWrapper { width: 100%; padding-left: 0; border-left: initial } .WorkDetails__mainWrapper { margin-bottom: 50px } .workNavigate__mainWrapper { height: auto; position: relative; overflow: initial; top: auto; left: auto; margin-bottom: 30px } .workNavigate__btnWrapper--left, .workNavigate__btnWrapper--right { position: relative; top: 0!important; margin-top: 0; transform: none!important } .workNavigate__btnWrapper--left { left: 7.5%; float: left; margin-left: 0 } .workNavigate__btnWrapper--right { right: 7.5%; float: right; margin-right: 0 } .workNavigate__btn--left, .workNavigate__btn--right { width: 80px; height: 80px; background-position: 50% } } @media only screen and (max-width:600px) { .WorkDetails__mainWrapper { width: 90% } .projectDetails__copyWrapper { padding-bottom: 0 } } .color--white { color: #fff!important } .color--black { color: #000!important } .color--red { color: #d5333e!important } @media only screen and (min-width:980px) { .workNavigate__btn--left, .workNavigate__btn--right { transition: transform .25s cubic-bezier(.7, .21, .54, 1.38), box-shadow .5s } .workNavigate__btn--left:hover, .workNavigate__btn--right:hover { transform: scale3d(1.2, 1.2, 1.2); box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .4), 0 5px 5px 0 rgba(0, 0, 0, .2) } .workNavigate__btn--left:active, .workNavigate__btn--left:focus, .workNavigate__btn--right:active, .workNavigate__btn--right:focus { transform: scale3d(.9, .9, .9); box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .2), 0 5px 5px 0 rgba(0, 0, 0, .05) } .workNavigate--exit { transform: scale3d(0, 0, 0)!important; transform-origin: center; transition-timing-function: cubic-bezier(.7, 0, .4, 1); transition-duration: .2s } .workNavigate--exit.workNavigate__btn--left { transform-origin: 55% } .workNavigate--exit.workNavigate__btn--right { transform-origin: 45% } } @media only screen and (max-width:980px) { .workNavigate__btn--left, .workNavigate__btn--right { transition: box-shadow .5s; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1) } .workNavigate__btn--left:hover, .workNavigate__btn--right:hover { box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .02), 0 5px 5px 0 rgba(0, 0, 0, .01) } .workNavigate__btn--left:active, .workNavigate__btn--left:focus, .workNavigate__btn--right:active, .workNavigate__btn--right:focus { position: relative; top: 2px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .05), 0 5px 5px 0 rgba(0, 0, 0, .03) } } .sliderbox{position: relative;} /*# sourceMappingURL=943bfd78fbc394a0073f.css.map*/ .DesktopHero_hero_3HzY5 .DesktopHero_gfx_2VC3z { display: block; position: absolute; width: 40%; left: 10%; top: 110px; height: calc(100vh - 220px); z-index: 10; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #eff7f9; } .DesktopHero_play_3j2yo { display: none!important; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; position: absolute; top: 33.33333333%; left: 50%; z-index: 20; margin: -42.5px 0 0 -42.5px; width: 85px; height: 85px; cursor: pointer; border-radius: 50%; background: #87c7d7; transition: background .4s; } .DesktopHero_card_uVp7s { position: absolute; top: 4%; left: 30%; margin-left: -210px; z-index: 10; width: 20vw; min-width: 350px; height: 20vw; min-height: 350px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .TheCard_reward__heading_3PHMJ { margin: 0 0 30px; font-size: 28px; font-weight: 500; line-height: 1.25; } .TheCard_reward__heading_3PHMJ:before { content: ""; display: block; margin: 0 0 60px; width: 110px; height: 2px; background: #37383c; } .TheCard_reward__text_1Fivi { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; vertical-align: baseline; line-height: 1.5; } .DesktopHero_card__inner_2AUf9 { width: 100%; height: 100%; background: 0 0 no-repeat; background-size: contain; animation: DesktopHero_hover_36dyM 2.25s .75s infinite alternate cubic-bezier(.43,.05,.6,.99); } .DesktopHero_card__inner_2AUf9>* { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .DesktopHero_video__content_35XDl { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: #fff; box-shadow: 0 0 60px rgba(0,0,0,.35); } .DesktopHero_video__inner_wAqtK { padding-top: 56.25%; } .DesktopHero_hero_3HzY5 .DesktopHero_content_26ZeS { z-index: 100; right: 0; bottom: 0; padding: 0 30px; padding-top: 100px; padding-left: calc(50% + 110px); width: 100%; } .TheCard_theCard_2cRTU { padding: 30px 0 0; } .TheCard_container_2QfmG { margin: 0 auto; padding: 0 30px; max-width: 1310px; } .TheCard_intro__content_2dQtP { display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .TheCard_intro__first_1y6vr { margin: 0 0 15px; } .TheCard_intro__heading_1nr6Q { margin: 0 0 15px; font-size: 24px; font-weight: 500; line-height: 1.25; } .TheCard_intro__text_2Esvq { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; vertical-align: baseline; margin: 0 0 15px; font-size: 16px; line-height: 1.5; } .TheCard_intro__col_hx_ag { position: relative; padding-left: 63.5px; margin-bottom: 30px; } .TheCard_intro__symbol_3rzmP { position: absolute; top: 0; left: 0; width: 47.5px; height: 47.5px; background: 50% no-repeat; background-size: contain; } .TheCard_intro__symbolDebit_uAbOz { background-image: url('../images/dollar-image.png'); } .TheCard_intro__symbolCredit_gOEm6 { background-image: url('../images/percent-image.png'); } .TheCard_intro__subheading_RDyOT { margin: 0 0 15px; font-size: 16px; font-weight: 700; line-height: 47.5px; } .TheCard_intro__col_hx_ag:last-child { /* margin-left: 8.33333333%; */ } .TheCard_content_3X70T { padding: 60px 0 3px; } .TheCard_item_1G7TX { display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; position: relative; margin: 0 0 30px; max-width: 500px; } .TheCard_item_1G7TX:first-child { z-index: 5; } .TheCard_item__imageWrap_3x__u{ position: relative; width: 100%; -ms-flex-order: 5; order: 5; } .TheCard_item__image_3gP65 { display: none; margin: 0 auto 30px; width: calc(100% - 30px); max-width: 300px; } .points-parent{ margin: 0 0 30px 0; } .TheCard_item_1G7TX:first-child { z-index: 5; } .TheCard_item__percentage_2KD35 { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 40%; height: 50px; } .TheCard_item__num_1GFXl { margin-left: 30px; padding-right: 30px; width: 80px; font-size: 22px; font-weight: 200; } .TheCard_item__content_27VdQ { position: relative; margin: 0 0 30px; width: 60%; } .TheCard_item__desktopPercentage_1e5pn { display: none; position: absolute; top: 0; right: 0; font-size: 16px; font-weight: 500; color: #87c7d7; line-height: 50px; } .TheCard_item__desktopPercentage_1e5pn:after { content: ""; display: inline-block; margin-left: 15px; width: 100px; height: 1px; background: #ccc; } .TheCard_item__heading_1ms1K { font-size: 18px; font-weight: 500; line-height: 50px; } .TheCard_item__text_1OUV4 { font-size: 12px; } .TheCard_item__imageMobile_1e0MO { display: block; margin-bottom: -25%; } .TheCard_item_1G7TX:nth-child(2) { z-index: 4; } .TheCard_item_1G7TX:nth-child(3) { z-index: 3; } .card-disclaimer { opacity: .5; font-size: 10px; line-height: 1.3; margin: 20px 0 10px 16.66666667%; max-width: 500px; } .card-disclaimer p { margin: 10px 0; } banner-fold{ border-bottom: 1px solid #fafafa; } .Graph_graph_XS6Qq { padding: 30px 0 15px; background: #f9f9f9; } .Graph_container_2Xf1f { margin: 0 auto; padding: 0 30px; max-width: 1310px; } .Graph_boxes_2AkdJ { padding: 0 0 30px; } .Graph_content_3-wdR { margin: 60px auto 30px; max-width: 600px; } .Graph_content__heading_3T4Qm { display: block; position: relative; margin: 0 0 20px; line-height: 1; font-size: 28px; font-weight: 500; } .Graph_content__text_3G-nc { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; vertical-align: baseline; margin: 0 0 15px; font-size: 14px; line-height: 1.5; } .Graph_boxes_2AkdJ { padding: 0 0 30px; } .Graph_container_2Xf1f { margin: 0 auto; padding: 0 30px; max-width: 1310px; } .Graph_boxes_2AkdJ .Graph_box_g81iz { position: relative; margin: 0 auto; max-width: 600px; } .Graph_boxes_2AkdJ .Graph_box_g81iz.Graph_left_A_Dt8 { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; top: 0; padding: 0; margin: 0 auto 30px; } .Graph_knobWrapper_3Nr2D { position: relative; width: 100%; } .Graph_knobWrapperInner_2o7Ds { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .Graph_knobWrapperLimit_265Ft { max-width: 550px; } .Knob_info_1xDAn { position: absolute; top: 50%; left: 50%; margin: -20% 0 0 -20%; width: 40%; font-size: 14px; } .Knob_info__aspect_3qHOa { padding-top: 100%; } .Knob_info__content_3JBua { display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .Knob_info_1xDAn .Knob_balance__5iTb, .Knob_info_1xDAn .Knob_spending_27aaP { width: 190px; max-width: 100%; } .Knob_info_1xDAn .Knob_heading_1H0ia { margin: 0 0 10px; font-size: 12px; white-space: nowrap; } .Graph_knobs_1bGrL { width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Graph_knobWrapperAspect_3t8Kf { padding-top: 100%; } .Graph_heading_1J4gm { margin: 0 0 40px; width: 298px; font-size: 12px; font-weight: 400; line-height: 1.111; color: rgba(55,56,60,.4); } .Graph_result_1SUHs { margin: 0 0 15px; font-size: 50px; font-weight: 500; line-height: .8; color: #87c7d7; } .Graph_subtitle_2gmuH { /*opacity: .4;*/ margin: 0 0 60px; font-size: 14px; font-weight: 600; color:#000; } .Graph_selector_30_ZT { color: #95a5a9; } .Graph_selector_30_ZT .Graph_card_YUVT6 { display: none; } .Graph_selector_30_ZT .Graph_label_2Rd1K { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; max-width: 380px; font-size: 14px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color .3s; } .Graph_selector_30_ZT .Graph_label_2Rd1K:before { content: "\2022"; opacity: 0; margin-left: -15px; margin-right: 10px; font-size: 20px; transition: opacity .3s,margin .3s; } .Graph_selector_30_ZT .Graph_card_YUVT6:checked+.Graph_label_2Rd1K:before, .Graph_selector_30_ZT .Graph_label_2Rd1K:hover:before { opacity: 1; margin-left: 0; } .Graph_selector_30_ZT .Graph_label_2Rd1K .Graph_line_1DqN0 { -ms-flex: 1; flex: 1; opacity: 0; margin: 0 15px; height: 2px; border-top: 1px solid #87c7d7; } .Graph_selector_30_ZT .Graph_card_YUVT6:checked+.Graph_label_2Rd1K .Graph_line_1DqN0, .Graph_selector_30_ZT .Graph_card_YUVT6:checked+.Graph_label_2Rd1K .Graph_percentage_3XChb { opacity: 1; } .Graph_selector_30_ZT .Graph_label_2Rd1K .Graph_percentage_3XChb { opacity: 0; font-size: 14px; } .Graph_selector_30_ZT .Graph_card_YUVT6:checked+.Graph_label_2Rd1K { font-weight: 500; color: #37383c; } .Graph_interest_2sird { margin-top: 45px; color: #95a5a9; font-size: 13px; } .Graph_interest_2sird a { color: inherit; } .Knob_info_1xDAn .Knob_balance__5iTb input, .Knob_info_1xDAn .Knob_spending_27aaP input { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; vertical-align: baseline; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; font-size: 28px; color: #37383c; border: solid #c4c4c4; border-width: 0 0 1px; background: transparent; } .Knob_info_1xDAn .Knob_balance__5iTb input { border-color: #486784; } .Knob_info_1xDAn .Knob_spending_27aaP input { border-color: #87c7d7; } .Knob_info_1xDAn .Knob_balance__5iTb, .Knob_info_1xDAn .Knob_spending_27aaP { width: 190px; max-width: 100%; } .Knob_info_1xDAn .Knob_balance__5iTb { margin-top: 30px; } .Knob_info_1xDAn .Knob_heading_1H0ia { margin: 0 0 10px; font-size: 12px; white-space: nowrap; } .Graph_selector_30_ZT .Graph_card_YUVT6:checked+.Graph_label_2Rd1K { font-weight: 500; color: #37383c; } .Features_features_2P3lQ { padding: 30px 0; } .Features_container_6Vocm { margin: 0 auto; padding: 0 30px; max-width: 990px; } .Features_features_2P3lQ .Features_wrap_i6QYD { display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .Features_features_2P3lQ .Features_list_1-tLW { display: none; } .Features_features_2P3lQ .Features_list_1-tLW, .Features_features_2P3lQ .Features_list__mobile_1_J2S { -ms-flex-order: 2; order: 2; } .Features_features_2P3lQ .Features_list__mobile_1_J2S { display: block; } .Features_features_2P3lQ .Features_list_1-tLW, .Features_features_2P3lQ .Features_list__mobile_1_J2S { -ms-flex-order: 2; order: 2; } .Features_features_2P3lQ .Features_list_1-tLW:last-child, .Features_features_2P3lQ .Features_list__mobile_1_J2S:last-child { -ms-flex-order: 1; order: 1; } .Features_features_2P3lQ .Features_list_1-tLW .Features_headline_10tdo, .Features_features_2P3lQ .Features_list__item_3HuiS, .Features_features_2P3lQ .Features_list__mobile_1_J2S .Features_headline_10tdo, .Features_features_2P3lQ .Features_list__mobile__item_amGIA { margin-left: auto; margin-right: auto; max-width: 520px; } .Features_item_1pFCb { margin: 0 auto 30px; max-width: 520px; } .Features_item_1pFCb .Features_imageWrap_hqHM4 { position: relative; margin: 0 0 40px; padding: 30px; overflow: hidden; } .Features_item_1pFCb .Features_heading_1j0e3 { margin: 0 0 5px; font-size: 16px; font-weight: 500; } .Features_item_1pFCb .Features_text_2A-r- { font-size: 14px; line-height: 1.57142857; } .Features_item_1pFCb .Features_imageWrap_hqHM4 .Features_background_2YL-m { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; } .Features_item_1pFCb .Features_imageWrap_hqHM4 .Features_background_alt_33qzR { background: #eff7f9; } .Features_item_1pFCb .Features_imageWrap_hqHM4 .Features_image_FNWCB { display: block; position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 200px; box-shadow: 0 30px 40px rgba(0,0,0,.1); } .Features_item_1pFCb { margin: 0 auto 30px; max-width: 520px; } .Features_features_2P3lQ .Features_headline_10tdo { position: relative; margin: 0 0 45px; font-size: 24px; font-weight: 400; line-height: 1.35; } .InThePress_press_1gaPv { position: relative; padding: 90px 0 60px; background: #f5f5f5; } .InThePress_container_3SNe6 { margin: 0 auto; padding: 0 30px; max-width: 1310px; } .InThePress_press_1gaPv .InThePress_col_NMsR7 { margin: 0 0 30px; } .InThePress_content_1ZMkN { margin-top: 10px; } .InThePress_content_1ZMkN span {background: #30cfbf; width: 80px; height: 80px; display: inline-block; text-align: center; padding-top: 27px; border-radius: 50px; font-size: 25px; color: black; font-weight: 600;} .InThePress_content__logo_2H1C4 { margin-bottom: 50px; } img { display: block; max-width: 100%; height: auto; } .InThePress_content__text_1kQJH { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; vertical-align: baseline; position: relative; margin: 0 0 30px; font-size: 22px; color: #37383c; line-height: 1.63636364; letter-spacing: -.02em; } .InThePress_content__text_1kQJH:after, .InThePress_content__text_1kQJH:before { content: "\201C"; } .InThePress_content__link_3qVfc { color: inherit; text-decoration: none; font-weight: 500; font-size: 12px; color: #87c7d7; text-transform: uppercase; transition: color .3s; } .InThePress_title__subheading_3LhF4 { margin: 0 0 30px; font-size: 14px; } .InThePress_title__heading_tKrCz { font-size: 28px; font-weight: 400; } @media (min-width: 1440px){ .InThePress_press_1gaPv { padding: 210px 0 180px; } .Features_container_6Vocm { max-width: 1420px; } .DesktopHero_card_uVp7s { margin-left: -15vw; } .TheCard_reward_281ib { margin-left: 16.66666667%; width: 33.33333333%; } } @media (min-height: 840px){ .TheCard_item_1G7TX { line-height: 1.75; } .TheCard_item__image_3gP65 { bottom: -80%; } .TheCard_item__imageWrap_3x__u { width: 41.66666667%; } .TheCard_item_1G7TX { line-height: 1.75; } .DesktopHero_video_35eYk { width: 1000px; } } @media (min-width: 340px){ .InThePress_container_3SNe6 { padding: 0 30px; max-width: 1340px; } .Graph_boxes_2AkdJ .Graph_box_g81iz { max-width: none; } .Graph_container_2Xf1f { padding: 0 30px; max-width: 1340px; } .TheCard_container_2QfmG { padding: 0 30px; max-width: 1340px; } .Features_container_6Vocm { padding: 0 30px; max-width: 1340px; } .Features_container_6Vocm { padding: 0 30px; max-width: 1020px; } .Features_item_1pFCb .Features_text_2A-r- { max-width: 80%; } } @media (min-width: 480px){ .Features_item_1pFCb .Features_imageWrap_hqHM4 .Features_image_FNWCB { width: auto; max-width: 100%; } .Features_item_1pFCb .Features_imageWrap_hqHM4 { margin-left: 0; margin-right: 0; padding: 60px; } .Graph_selector_30_ZT .Graph_label_2Rd1K .Graph_line_1DqN0 { margin: 0 30px; } .Graph_boxes_2AkdJ .Graph_box_g81iz.Graph_right_3XuWc { padding-left: 16.66666667%; } .Graph_result_1SUHs { font-size: 50px; } .Graph_heading_1J4gm { padding-top: 30px; font-size: 16px; border-top: 1px solid rgba(55,56,60,.2); } .Graph_content_3-wdR { padding-left: 16.66666667%; padding-right: 16.66666667%; } .Graph_graph_XS6Qq { padding: 30px 0; } .TheCard_intro_2sEXb { padding: 0; } .TheCard_intro__heading_1nr6Q { margin-bottom: 30px; font-size: 28px; } } @media (min-width: 768px){ .Features_features_2P3lQ .Features_list__item_3HuiS, .Features_features_2P3lQ .Features_list__mobile__item_amGIA { margin-bottom: 70px; } .Features_features_2P3lQ { padding: 60px 0 20px 0; } .Knob_info_1xDAn .Knob_heading_1H0ia { margin: 0; font-size: 16px; } .Graph_container_2Xf1f { padding: 0 50px; max-width: 1380px; } .Graph_graph_XS6Qq { padding: 50px 0 0; } .TheCard_item__imageMobile_1e0MO { display: none; } .TheCard_item__text_1OUV4 { width: 75%; line-height: 1.6; color: #b7b7b7; } .TheCard_item__desktopPercentage_1e5pn { display: block; } .TheCard_item__content_27VdQ { margin: 0 0 0 0; width: 50%; } .TheCard_item__percentage_2KD35 { display: none; -ms-flex: auto; flex: auto; width: 16.66666667%; } .TheCard_item_1G7TX { -ms-flex-flow: row; flex-flow: row; margin: 0; height: 130px; max-width: none; line-height: 1.2; } .TheCard_item__image_3gP65 { display: block; position: absolute; bottom: -60%; left: 30px; margin: 0; width: calc(175% - 30px); max-width: none; } .TheCard_item__imageWrap_3x__u { top: 0; width: 41.66666667%; -ms-flex-order: 5; order: 5; } .TheCard_item_1G7TX { -ms-flex-flow: row; flex-flow: row; margin: 0; height: 130px; max-width: none; line-height: 1.2; } .TheCard_content_3X70T { padding: 60px 0; } .TheCard_reward_281ib { margin-left: 16.66666667%; width: 50%; } .TheCard_container_2QfmG { padding: 0 50px; max-width: 1380px; } .Graph_selector_30_ZT .Graph_label_2Rd1K { font-size: 16px; } .InThePress_press_1gaPv .InThePress_row_2QIDy { display: -ms-flexbox; display: flex; } .InThePress_press_1gaPv .InThePress_col_NMsR7 { width: 50%; } } @media (min-width: 720px){ .InThePress_container_3SNe6 { padding: 0 50px; max-width: 1380px; } .InThePress_press_1gaPv { padding: 90px 0 60px; } .Features_features_2P3lQ .Features_headline_10tdo:before { content: ""; display: block; margin: 0 0 60px; width: 110px; height: 2px; background: #37383c; } .Features_features_2P3lQ .Features_list_1-tLW:last-child, .Features_features_2P3lQ .Features_list__mobile_1_J2S:last-child { margin: 0 0 0 8.33333333%; } .Features_features_2P3lQ .Features_list_1-tLW, .Features_features_2P3lQ .Features_list__mobile_1_J2S { width: 41.66666667%; -ms-flex-order: 0; order: 0; margin: 0 0 0 8.33333333%; } .Features_features_2P3lQ .Features_list__mobile_1_J2S { display: none; } .Features_features_2P3lQ .Features_list_1-tLW, .Features_features_2P3lQ .Features_list__mobile_1_J2S { width: 41.66666667%; -ms-flex-order: 0; order: 0; margin: 0 0 0 8.33333333%; } .Features_features_2P3lQ .Features_list_1-tLW { display: block; } .Features_features_2P3lQ .Features_wrap_i6QYD { -ms-flex-flow: row; flex-flow: row; } .Features_container_6Vocm { padding: 0 50px; max-width: 1380px; } .Graph_container_2Xf1f { padding: 0 50px; max-width: 1380px; } .TheCard_container_2QfmG { padding: 0 50px; max-width: 1380px; } .TheCard_intro__col_hx_ag { margin-right: 2%; width: 48%; } .TheCard_intro__first_1y6vr { width: 75%; margin: 0 0 30px; } } @media (min-width: 840px){ .Graph_result_1SUHs { font-size: 62px; } .Graph_content__text_3G-nc { padding-left: 16.66666667%; max-width: 380px; box-sizing: content-box; } .Graph_content_3-wdR { margin: 60px auto 10px; padding: 0; max-width: none; } .Graph_content__heading_3T4Qm:before { content: ""; display: block; position: absolute; top: -60px; width: 110px; height: 2px; background: #37383c; } .Graph_graph_XS6Qq .Graph_col_1dSwj { display: block; padding-left: 0; padding-right: 0; width: 50%; -ms-flex-item-align: start; align-self: flex-start; min-height: 1px; box-sizing: border-box; } .Graph_graph_XS6Qq .Graph_row_1QDaE { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: 0; margin-right: 0; } .Graph_content_3-wdR { margin: 60px auto 10px; padding: 0; max-width: none; } } @media (min-width: 960px){ .InThePress_press_1gaPv .InThePress_row_2QIDy { padding-left: 8.33333333%; padding-right: 8.33333333%; } } @media (min-width: 1080px){ .InThePress_container_3SNe6 { padding: 0 70px; max-width: 1420px; } .InThePress_press_1gaPv { padding: 120px 0 90px; } .Features_container_6Vocm { padding: 0 70px; max-width: 1420px; } .Graph_container_2Xf1f { padding: 0 70px; max-width: 1420px; } .Graph_content__heading_3T4Qm { padding-left: 16.66666667%; } .Graph_container_2Xf1f { padding: 0 70px; max-width: 1420px; } .TheCard_item__desktopPercentage_1e5pn:after { width: 200px; } .TheCard_item__image_3gP65 { bottom: -80%; left: 60px; width: 100%; } .TheCard_container_2QfmG { padding: 0 70px; max-width: 1420px; } .TheCard_content_3X70T { padding: 60px 0 240px; } .TheCard_reward_281ib { margin-top: 60px; } .TheCard_container_2QfmG { padding: 0 70px; max-width: 1420px; } .TheCard_intro_2sEXb { padding: 0 0 120px; } .TheCard_intro__col_hx_ag { /* margin-left: 16.66666667%; */ width: 31.333333%; display:; float: left; } .TheCard_intro__first_1y6vr { margin: 0 0 30px 0; width: 50%; } .TheCard_intro_2sEXb { padding: 0 0 120px; } .TheCard_container_2QfmG { padding: 0 70px; max-width: 1420px; } .Graph_knobWrapper_3Nr2D { margin: -30px 0 0; } } @media (min-width: 1280px){ .Features_item_1pFCb .Features_text_2A-r- { font-size: 16px; line-height: 1.375; } .Graph_interest_2sird { margin-top: 120px; } .Graph_selector_30_ZT .Graph_label_2Rd1K { margin-bottom: 10px; font-size: 18px; } .Graph_result_1SUHs { margin: 37px 0 30px; font-size: 96px; } .Graph_knobWrapper_3Nr2D { margin: -60px 0 0 -60px; } .Graph_content__text_3G-nc { font-size: 16px; } .Graph_content__heading_3T4Qm{ padding-left: 0; } .TheCard_item__heading_1ms1K { font-size: 22px; font-weight: 600; color:#000; } .TheCard_item__imageWrap_3x__u { width: 41.66666667%; } } @media (min-width: 1200px){ .InThePress_press_1gaPv { border: 0 solid #fff; border-width: 0 30px; } .Graph_graph_XS6Qq { margin: 0 30px; } .DesktopHero_phone_3Ky5B { margin-right: -28vw; } } .DesktopHero_phone_3Ky5B { position: absolute; top: 33.33333333%; right: 50%; z-index: 9; margin: 0; margin-right: -340px; width: 35vw; min-width: 500px; height: 30vw; min-height: 450px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .DesktopHero_phone__inner_1J5EA { width: 100%; height: 100%; background: 0 0 no-repeat; background-size: contain; animation: DesktopHero_hover_36dyM 3s infinite alternate cubic-bezier(.43,.05,.6,.99); } .DesktopHero_video_35eYk { position: absolute; top: 33.33333333%; left: 50%; z-index: 8; width: 800px; max-width: 90vw; pointer-events: none; transform: translate(-50%,-50%); perspective: 800px; } .TheCard_reward_281ib { padding: 90px 0 60px; }