@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body {font-family: 'Roboto', sans-serif; font-size: 18px; color: #323232;}

* {margin: 0; padding: 0; box-sizing: border-box;}

.container {width: 90%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}

header {padding: 12px 0;}
header .logo {display: inline-block; width: 400px; vertical-align: middle;}
header .logo img {width: 120px; vertical-align: middle; display: inline-block;}
header .logo span {width: calc(100% - 120px - 8px - 24px); margin-left: 24px; vertical-align: middle; display: inline-block; color: #585858; font-weight: 700; padding: 12px 0 12px 24px; border-left: 1px solid #585858; font-size: 16px;}
header nav {display: inline-block; vertical-align: middle; margin-left: 50px; font-size: 16px;}
header nav ul {display: block;}
header nav ul li {display: inline-block; margin: 0 16px;}
header nav ul li a {color: #585858; text-decoration: none;}
header .startSignIn {float: right; font-size: 16px; margin-top: 4px;}
header .startSignIn span {display: inline-block; vertical-align: middle;}
header .startSignIn .start {margin-right: 20px;}
header .startSignIn .start a {display: inline-block; padding: 8px 20px; background: #ef5350; color: #fff; text-decoration: none; border-radius: 20px;}
header .startSignIn .signIn img {display: inline-block; vertical-align: middle; height: 30px;}
header .startSignIn .signIn span {margin-right: 8px;}
header .startSignIn .signIn a {color: #585858; text-decoration: none;}

.banner {display: block; background: url(../images/Banner-Bg.jpg) center no-repeat; background-size: cover;}
.banner .txt {display: inline-block; width: calc(50% - 4px); vertical-align: middle; padding-right: 40px;}
.banner .txt h1 {font-size: 60px; color: #4e4e4e; font-weight: 900; margin-bottom: 20px;}
.banner .txt h1 .org {color: #ff6d26;}
.banner .txt h1 .yel {color: #ffb800;}
.banner .txt h1 .blu {color: #1e4694;}
.banner .txt p {font-size: 18px; color: #00af00; font-weight: 400;}
.banner .pic {display: inline-block; vertical-align: middle; width: calc(50% - 4px); border-radius: 12px; overflow: hidden; transform: translateY(20px); box-shadow: 0 0 12px rgba(0,0,0,.2); padding: 20px 8px; background: #fff;}
.banner .pic img {width: 100%;}

.whether {display: block; padding: 80px 0;}
.whetherbg {background: url(../images/whether-bg.png) center no-repeat; background-size: auto 100%;}
.whether h1 {font-size: 45px; color: #323232; font-weight: 700; margin-bottom: 60px; text-align: center;}
.whether ul li {display: block; margin: 0 auto 120px; width: 80px; position: relative;}
.whether ul li:nth-child(2) {text-align: right;}
.whether ul li .img {padding: 12px; border-radius: 50%; border: 8px solid #fc4132; display: inline-block; width: 90px; height: 90px;}
.whether ul li .img img { width: 100%;}
.whether ul li:nth-child(2) .img {border-color: #ffb800;}
.whether ul li:nth-child(3) .img {border-color: #1e4694;}
.whether ul li span {position: absolute; top: 50%; transform: translateY(-50%); width: calc(40vw - 80px - 60px); font-size: 24px; color: #323232;}
.whether ul li:nth-child(2n+1) span {left: calc(100% + 60px);}
.whether ul li:nth-child(2n) span {right: calc(100% + 60px);}
/*.whether .txt {display: inline-block; width: calc(50% - 4px); vertical-align: middle; padding-left: 40px;}
.whether .txt ul {font-size: 18px; color: #4e4e4e; font-weight: 400; display: block;}
.whether .txt ul li {display: block; margin-bottom: 20px;}
.whether .txt ul li:last-child {margin-bottom: 0;}
.whether .txt ul li img {width: 60px; display: inline-block; margin-right: 12px; vertical-align: middle;}
.whether .txt ul li span {width: calc(100% - 60px - 8px - 12px); display: inline-block; vertical-align: middle;}
.whether .pic {display: inline-block; vertical-align: middle; width: calc(50% - 4px); border-radius: 12px; overflow: hidden; transform: translateY(20px); box-shadow: 0 0 12px rgba(0,0,0,.1);}
.whether .pic img {width: 100%;}*/

.advAgeMar .col3 .col {box-shadow: 0 0 4px rgba(0,0,0,.1);}

.col3 {display: block;}
.col3 .col {display: inline-block; width: calc(33.33% - 4px - 20px); margin: 0 10px; vertical-align: top; padding: 12px;}
.advAgeMar .col3 .col .img {display: block; margin-bottom: 20px;}
.advAgeMar .col3 .col .img img {width: 100%;}
.advAgeMar .col3 .col h2 {font-size: 24px; margin-bottom: 20px;}
.advAgeMar .col3 .col p {font-size: 14px; min-height: 72px;}
.advAgeMar .col3 .col p a {display: inline-block; padding: 8px 12px; text-decoration: none; background: #454545; border-radius: 12px; color: inherit; color: #fff;}

.measure {padding: 80px 0;}
.measure h2 {font-size: 32px; color: #323232; text-align: center; margin-bottom: 64px;}
.measure .tabs {display: inline-block; width: calc(40% - 4px); vertical-align: top; padding: 0 5%;}
.measure .tabC {display: inline-block; width: calc(100% - 40% - 4px); vertical-align: top; padding: 0 5%;}
.measure .tabC .content {display: none;}
.measure .tabC .content.active {display: block;}
.measure .tabC img {max-width: 100%;}
.measure .tabs ul {display: block;}
.measure .tabs ul li {display: block; padding: 16px; background: #f9f9f9; border-bottom: 1px solid #cdcdcd; cursor: pointer;}
.measure .tabs ul li:last-child {border-bottom: 0;}
.measure .tabs ul li.active {background: #f2f2f2; position: relative;}
.measure .tabs ul li.active::before {content: ''; width: 0; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  
  border-left: 16px solid #f2f2f2;
}
.measure .tabs ul li h3 {font-size: 24px; color: #323232; margin-bottom: 12px;}
.measure .tabs ul li p {font-size: 13px;}

.dataIntegration {padding: 80px 0; background: #f7f7f7;}
.dataIntegration .imgs {display: inline-block; width: calc(60% - 4px); vertical-align: top;}
.dataIntegration .imgs ul {display: block;}
.dataIntegration .imgs ul li {display: inline-block; width: calc(150px - 4px - 20px); vertical-align: top; margin-right: 20px; margin-bottom: 24px; position: relative;}
.dataIntegration .imgs ul li .name {display: block; opacity: 0; background: #000; color: #fff; padding: 8px; border-radius: 4px; font-size: 12px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(12px); width: 100%; text-align: center; transition: all ease-in-out .2s;}
.dataIntegration .imgs ul li:hover .name {opacity: 1; transform: translateX(-50%) translateY(0); z-index: 1;}
.dataIntegration .imgs ul li .more {transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; color: blue;}
.dataIntegration .imgs ul li img {width: 100%; box-shadow: 0 0 12px rgba(0,0,0,.1); border-radius: 12px;}
.dataIntegration .txt {display: inline-block; width: calc(40% - 4px - 5%); margin-left: 5%; vertical-align: top;}
.dataIntegration .txt h2 {font-size: 42px; color: #3c3c3c; margin-bottom: 20px;}
.dataIntegration .txt p {font-size: 14px; color: #3c3c3c; margin-bottom: 20px;}

.howItWorks {padding: 80px 0; text-align: center;}
.howItWorks h3 { font-size: 32px; color: #323232; text-align: center; margin-bottom: 32px;}
.howItWorks .col {}
/*.howItWorks .col:nth-child(2) {border-left: 1px solid #ccc; border-right: 1px solid #ccc;}*/
.howItWorks .col .img {display: inline-block; margin-bottom: 20px; position: relative;}
.howItWorks .col .img::before {content: ''; display: block; width: 24px; line-height: 24px; text-align: center; background: #f5f5f5; border-radius: 50%; position: absolute; top: -24px; left: -24px;}
.howItWorks .col:nth-child(1) .img::before {content: '1';}
.howItWorks .col:nth-child(2) .img::before {content: '2';}
.howItWorks .col:nth-child(3) .img::before {content: '3';}
.howItWorks .col h3 {font-size: 24px; margin-bottom: 20px;}
.howItWorks .col p {font-size: 14px; }

.forBusiness {padding: 80px 0; background: #f7f7f7; text-align: center;}
.forBusiness .buy {display: inline-block; width: calc(35% - 4px); vertical-align: middle; text-align: center; padding: 0 20px;}
.forBusiness .buy h2 {font-size: 32px; color: #323232; margin-bottom: 12px;}
.forBusiness .buy h4 {font-size: 18px; color: #323232; margin-bottom: 12px;}
.forBusiness .buy p {font-size: 14px; color: #323232; margin-bottom: 12px;}
.forBusiness .buy a {font-size: 16px; color: #fff; display: inline-block; padding: 12px 32px; border-radius: 20px; background: #ef5350; text-decoration: none;}
.forBusiness .highlights {display: inline-block; vertical-align: middle; width: calc(100% - 35% - 4px); vertical-align: middle; padding: 0 20px 0 80px; border-left: 1px solid #ccc; max-width: 500px; text-align: left;}
.forBusiness .highlights h2 {font-size: 24px; color: #323232; margin-bottom: 20px;}
.forBusiness .highlights ul {display: block; font-size: 14px;}
.forBusiness .highlights ul li {display: block; margin-bottom: 12px; padding-left: 28px; background: url(../images/Arrow.png) 0 2px no-repeat; background-size: 16px auto;}

.faqs {padding: 80px 0;}
.faqs h2 { font-size: 32px; color: #323232; margin-bottom: 32px; }

.accordion {display: block;}
.accordion .box {display: block; border-bottom: 1px solid #ccc;}
.accordion .box.active {border-bottom: 0;}
.faqs .box {color: #454545;}
.faqs .box .ace {display: block; padding: 8px 0; padding-left: 28px; position: relative; font-weight: 400; font-size: 16px; cursor: pointer;}
.faqs .box .ace::before {content: ''; display: block; width: 18px; height: 18px; background: url(../images/acc-Arrow.png) center no-repeat; position: absolute; top: 8px; left: 4px; background-size: 100% auto; transition: all ease-in-out .2s;}
.faqs .box.active .ace::before {transform: rotate(90deg);}
.faqs .box .content {display: none; background: #f8f8f8; font-size: 16px; padding: 12px; border-radius: 4px;}

/*footer { background: #f7f7f7;}
.col5 {display: block;}
.col5 .col {display: inline-block; width: calc(20% - 4px); vertical-align: top;}
footer nav {display: block; padding: 80px 0;}
footer h5 {font-size: 22px; color: #7d7d7d; font-weight: 600; margin-bottom: 20px;}
footer ul {display: block;}
footer ul li {display: block; margin-bottom: 8px;}
footer ul li a {color: #9d9c9c; font-size: 14px; text-decoration: none;}
footer .privacy {padding: 20px 0; text-align: right; border-top: 1px solid #ccc;}
footer .privacy::after {content: ''; display: block; clear: both;}
footer .privacy .copy {font-size: 14px; color: #9d9c9c; float: left;}
footer .privacy a {color: #9d9c9c; font-size: 14px; text-decoration: none; display: inline-block; margin-left: 20px;}*/

footer {background: #f8f8f8; color: #76767a; font-size: 14px;}
footer a {color: #76767a;}
footer .left {display: inline-block; width: calc(100% - 336px - 4px); vertical-align: top; position: relative;}
footer .right {display: inline-block; width: calc(336px - 4px); vertical-align: top; text-align: right;}
footer .container {padding: 12px 0; padding-left: 75px;}
footer nav .container {padding: 20px 0; padding-left: 75px;}
footer .left span {font-size: 16px;}
footer .left span, footer .left a { display: inline-block; margin-right: 12px;}
footer .right a {margin-left: 12px;}
footer .copy {border-top: 1px solid #efedf1; font-size: 14px; text-align: right;}
footer .left .in {position: absolute; left: -75px; width: 70px; top: -9px;}


/* For Register Form */
body.oh {overflow: hidden;}
.registerForm {display: none; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.7); width: 100%; height: 100%; overflow: auto; text-align: center;}
.registerForm .registerInner {display: block; margin: 100px auto; width: 90%; max-width: 600px; background: #fff; padding: 32px; border-radius: 8px; position: relative; overflow: hidden; text-align: left;}
.registerForm .registerInner .close {display: block; width: 42px; background: #000; color: #fff; line-height: 42px; text-align: center; position: absolute; top: 0; right: 0; cursor: pointer;}
.registerForm .registerInner h2 {font-size: 24px; margin-bottom: 24px; font-weight: normal;}
.registerForm .registerInner p {font-size: 16px; margin-bottom: 16px; font-weight: normal;}

.twoCol .field {display: inline-block; width: calc(50% - 4px - 10px);}
.twoCol .field:nth-child(2n) {margin-left: 20px;}
.col2 .col {display: inline-block; width: calc(50% - 4px - 10px);}
.col2 .col:nth-child(2n) {margin-left: 20px;}

.formInner .field {margin-bottom: 20px;}
.formInner .field select, .formInner .field input[type=text], .formInner .field input[type=email], .formInner .field input[type=number] {display: block; width: 100%; height: 42px; border: 0; border-bottom: 1px solid #000;}
.registerForm .registerInner .fieldHead {display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700;}
.registerForm .registerInner .checkBox {display: inline-block; margin-right: 20px; font-size: 14px; margin-bottom: 8px;}
.registerForm .registerInner .cta {display: block; padding-top: 20px; text-align: right;}
.registerForm .registerInner .cta input[type=submit] {display: inline-block; padding: 0 20px; background: #4448fb; color: #fff; height: 42px; border-radius: 4px; border: 0; font-weight: 700; text-transform: uppercase;}

.formMess.error, .logmess.error, .regmess.error {margin-bottom: 8px; font-size: 14px; color: red; font-weight: bold;}
.formMess.success, .logmess.success, .regmess.success {margin-bottom: 8px; font-size: 14px; color: green; font-weight: bold;}

.form.step2 {display: none;}

.slider .bx-pager {display: block; text-align: center; padding: 20px 0;}
.slider .bx-pager .bx-pager-item {display: inline-block; margin: 0 4px;}
.slider .bx-pager .bx-pager-item a {display: block; width: 8px; height: 8px; background: #9d9d9d; border-radius: 4px; text-indent: 100px; overflow: hidden; transition: all ease-in-out .2s;}
.slider .bx-pager .bx-pager-item a.active {width: 16px;}

.shareDataTxt .formMess span {font-size: 24px;}


.ncontent h1 {font-size: 45px; color: #323232; font-weight: 700; margin-bottom: 60px; text-align: center;}
.ncontent h2 {font-size: 32px; color: #323232; font-weight: 700; margin-bottom: 30px; text-align: center;}
.ncontent h3 {margin-bottom: 12px;}
.ncontent p, .ncontent ul {margin-bottom: 20px;}
.ncontent ul {margin-left: 20px;}
.ncontent p.aboutImg {text-align: center; margin: 40px 0;}
.aboutImg img {height: 200px;}

.txtC {text-align: center;}

.login .container {padding: 100px 0;}
.login .col2 .col {vertical-align: top;}
.login .col2 .col:nth-child(1) {padding-right: 5%;}
.login .col2 .col:nth-child(2) {padding-left: 5%;}
.login h2 {font-size: 24px; font-weight: 500; margin-bottom: 24px;}
.login form .field {display: block; margin-bottom: 20px;}
.login form .field label {display: block; margin-bottom: 8px; font-size: 15px;}
.login form .field input[type=text], .login form .field input[type=email], .login form .field input[type=password] {display: block; width: 100%; height: 42px; padding: 0 12px;}
.login form .submit input[type=submit] {display: inline-block; height: 42px; width: 200px; background: #ef5350; color: #fff; border: 0; text-transform: uppercase;}

.singleColForm {max-width: 480px; margin: 0 auto; padding: 32px; box-shadow: 0 0 12px rgba(0,0,0,.2); border-radius: 12px;}

.logreg .col {display: none;}
.logreg .col.active {display: block;}
.logreg .tabcta {padding-top: 20px; font-size: 15px;}
.logreg .tabcta a {color: blue; text-decoration: underline;}
.logreg .tabcta a:hover {color: #ef5350;}