@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
html{min-width:380px; margin: 0; padding:0;}
body {min-width:380px; background-color: #fff; color:#000; margin: 0px; padding: 0px;
    font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 400}
.clear {clear: both}
a {text-decoration: none; color: #4300b3}
a:hover {color: #a800ae}
b, strong {font-weight: 500}

.header-bg {background-image: url(/web/img/background-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: right top;}
.header-box {max-width: 1024px; margin: 0 auto; padding: 0 20px}
.header-logo a img {width: 120px}
.header-logo {float: left; width: 50%; padding: 20px 0}
.header-menu {float: left; width: 50%; padding: 20px 0; text-align: right}
.header-menu a {display: inline-block; padding: 10 10px;}
.header-menu .login {margin-left: 30px; background: #4300b3; padding: 10 40px; color: #fff;
    -webkit-border-radius: 40px; -moz-border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px}
.header-menu .login:hover {background: #a800ae; color: #fff}
.header-text {font-size: 90px; font-weight: 700; padding: 40px 0 50px 0; margin-left: -5px;
    color: #ef891f; background: #ef891f;
    background: -webkit-linear-gradient(right, #ef891f 0%, #dc52ee 100%);
    background: linear-gradient(to right, #ef891f 0%, #dc52ee 100%);
    -webkit-background-clip: text;
    color: transparent;}


.body-box {max-width: 1024px; margin: 0 auto; padding: 20px; overflow: hidden}

.title {font-size: 40px; font-weight: 700; padding: 30px 0; display: inline-block; position: relative;
    background: #4300b3;
    background: -webkit-linear-gradient(right, #4300b3 0%, #a800ae 100%);
    background: linear-gradient(to right, #4300b3 0%, #a800ae 100%);
    -webkit-background-clip: text;
    color: transparent;}

#reg-name,
#reg-sxx,
#reg-city,
#reg-bdate,
#reg-btime,
#reg-email {}
















.list-fix {padding-top: 30px}
.about-fix {padding: 50px 0 50px 0}
.desctop-item-fix {display: none}

.vertical-list {margin-right: -40px}
.vertical-item {float:left; width: 25%;}
.vertical-item-box {padding: 0 40px 40px 0;}
.vertical-img-box,
.feature-box,
.leads-title-box {background-color: #fff; padding: 20px; text-align: center;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}
.vertical-img {position: relative; max-height: 100px; margin: auto;}
.vertical-img-box span {display: block; padding-top: 20px}
.double-item {width: 50%}

.features-list {padding-top: 100px}
.feature-title {font-size: 30px; font-weight: 700; color: #ff9000; padding: 0 0 20px}
.feature-box {font-size: 30px; font-weight: 700; color: #333; text-align: center}
.feature-box i {font-style: normal; color: #ccc; }

.leads-title-box {background-color: #ff9000; color: #fff; font-size: 60px; font-weight: 700;}
.leads-title {color: #fff; font-size: 30px;}

.geo-section {background-color: #efefef; padding: 20px 0 10px 0}
.geo-desc {padding-bottom: 30px}
.column-item {float:left; width: 25%;}
.ul-items {padding: 0 40px 40px 0; margin: 0;}
.ul-items li {display: block; margin: 0; padding: 0; height: 50px}
.ul-items strong {color: #ff9000; font-weight: 700;}
.geo-items {width: 33%;}
.ul-items .li-small {height: 25px}
.flag {float:left; width: 24px; height: 24px; line-height: 24px; padding-right: 20px}


.partner-list {margin-right: -40px;}
.partner-item {float:left; width: 25%;}
.partner-item-box {padding: 0 40px 40px 0;}
.partner-img-box {background-color: #fff; padding: 20px; height: 50px; display: flex;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
.partner-img {position: relative; max-width: 90%; max-height: 100%; margin: auto;}



.conf-list {padding-bottom: 90px}
.covid {padding-bottom: 50px; color: #999}
.conf-item {float:left; width: 50%}
.conf-item-box {padding-right: 20px; padding-bottom: 40px}
.conf-item-box2 {padding-left: 20px; padding-bottom: 40px}
.conf-1 {background-color: #221a53; overflow: hidden;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
.conf-2 {background-color: #0b2b6b;}
.conf-3 {background-color: #221a53;}
.conf-4 {background-color: #fefd2e;}
.conf-5 {background-color: #323232;}
.conf-6 {background-color: #000000;}
.conf-img {position: relative; width: 100%}
.conf-title {font-size: 30px; font-weight: 700; color: #ff9000; padding: 20px 20px 0 20px}
.conf-title2 {color: #dc5d00;}
.conf-title3 {color: #48d9b6;}
.conf-desc {color: #fff; padding: 20px}
.conf-desc2 {color: #296eb3;}

.conf-old {filter: grayscale(100%); opacity: 0.5;}







.reg-form {background-color: #efefef; padding-bottom: 100px}
.reg-box {margin-right: -40px;}
.reg-item {float: left; width: 33.33%}
.reg-item-box,
.reg-textarea {padding: 0 40px 0 0;}
.reg-textarea {padding: 0 40px 40px 0;}
.sent-txt {border: 1px solid #009104; color: #009104; background-color: #fff; padding: 20px;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}



/*              REGISTER            ----------------------------- */


.register-box {line-height: 50px}
.register-box input,
.register-box select {color: #000; background-color: #fff; padding: 5px 10px 2px 10px;
    border: 1px solid #ccc; border-bottom: 2px solid #4300b3; outline: none;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
    font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 400;}
.register-button {width: 200px; padding-top: 20px}
.login-input-error {border-bottom: 2px solid #ec1c52!important}
.register-error {color: #ec1c52}





.reg-item-box input,
.reg-textarea textarea {display: block; width: 100%; border: 1px solid #ccc; padding: 10px 20px; outline: none;
    font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 400;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
/*.reg-textarea textarea {display: block; width: 100%; border: 1px solid #ccc; padding: 10px 20px; outline: none;
    font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 400;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
*/
#input-name-msg, #input-login-msg, #input-password-msg, #input-email-msg,
#input-mobile-msg, #input-textarea-msg, #input-geo-msg, #input-url-msg, #input-vertical-msg,

#reg-name-msg,
#reg-city-msg,
#reg-date-msg,
#reg-hour-msg,
#reg-minute-msg,
#reg-email-msg {font-size: 16px; height: 20px; padding: 5px 0 15px 20px; color: #b7b7b7}

.dialog-error {font-size: 16px;}

.input-error {color: #ec1c52!important}
.error {border-color: #ec1c52!important}
button {padding: 10px 20px; outline: none; background-color: #4300b3; cursor: pointer; width: 100%;
    border: none; color: #fff; text-align: center; text-decoration: none; display: inline-block;
    font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 400;
    -webkit-border-radius: 40px; -moz-border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px}
button:hover {background-color: #a800ae}


.footer-bg {background-color: #a800ae; font-size: 16px; color: #fff; text-align: center; padding: 50px 0;
    /* background-image: url(/img/background-3.jpg); background-repeat: no-repeat; background-size: cover; background-position: right top;*/}




.dialog {display: none; width: 100%; z-index: 100; position: absolute; top: 0; left: 0; padding: 20px 0}
.dialog.visible {display: block;}
.dialog-box {max-width: 1024px; margin: 0 auto;}
.dialog-box2 {float: right; width: 50%; min-width: 500px; background-color: #fff; padding: 40px 0 40px 40px;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
.dialog-title {padding-bottom: 20px}
.close-btn {float: right; display: block; font-size: 30px; color: #000; text-decoration: none; cursor: pointer; margin-top: -25px; padding-right: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)}
.dialog-item {width: 50%}
.dialog-error {min-width: 10px; min-height: 10px; padding-bottom: 20px; color: #ec1c52;}




@media (max-width: 990px) {
    .column-item {width: 33%;}
}
@media (max-width: 900px) {
    body {font-size: 16px;}
    .header-text {font-size: 70px;}
    .title {font-size: 30px;}
    .section-txt {font-size: 16px;}
    .feature-title {font-size: 20px;}
    .feature-box {font-size: 20px;}
    .leads-title-box {font-size: 30px;}
    .leads-title {font-size: 20px;}
    .conf-title {font-size: 20px;}
    .vertical-item {width: 50%}
    .column-item-t1 {width: 33%;}
    .column-item-t2 {width: 29%;}
    .column-item-t3 {width: 38%;}
    .column-item-t1 ul,
    .column-item-t2 ul,
    .column-item-t3 ul {padding-right: 20px}
    .reg-item-box input,
    .reg-textarea textarea,
    textarea,
    button {font-size: 16px;}
    .dialog-error,
    #input-name-msg,
    #input-login-msg,
    #input-password-msg,
    #input-email-msg,
    #input-mobile-msg,
    #input-textarea-msg,
    #input-geo-msg,
    #input-url-msg,
    #input-vertical-msg {font-size: 14px;}
    .vertical-img {max-height: 50px;}
    .features-list .vertical-item {width: 50%}
    .features-list .double-item {width: 100%}
    .partner-item {float:left; width: 33.33%;}
    .reg-item {float: left; width: 50%}
    .mobile-item-fix {display: none}
    .desctop-item-fix {display: block}
    .mobile-button-fix {width: 100%}
}






.mobile {display: none;}
.chart-container {height: 300px;}
.chart-text {font-family: 'Ubuntu', sans-serif; color: #999; display: flex; justify-content: space-between; margin-bottom: 0;}
.before-text {margin-left: 13.5vw;}
.after-text {margin-right: 27.5vw;}
.legend {position: relative; display: flex; justify-content: space-evenly; flex-wrap: wrap;}
.chart-legend {display: flex; font-size: 14px; font-family: 'Ubuntu', sans-serif; margin-top: 0; margin-left: 5vw; align-items: center;}
.chart-legend span {display: block; width: 30px; margin-right: .75rem;  }
.chart-legend .line {position: relative; border-radius: 5px; height: 3px;}
.chart-legend .square {height: 1rem;}
.chart-legend .line::after {content: ''; display: block; position: absolute; width: 8px; height: 8px; left: 50%; border-radius: 100%; transform: translate(-45%); top: -2px; background-color: inherit;}
.green .line {background-color: #009104;}
.red .line {background-color: #ec1c52;}
.aqua .square {background-color: #e7ffe3; border: 1px solid #c0f3b7;}

@media (max-width: 900px) {
    .mobile {display: block;}
    span.mobile {position: absolute; font-size: 14px; top: -10px;}
    .chart-text {position: relative; font-weight: 500;}
    .leads {color: #009104; left: 15px;}
    .cost {color: #ec1c52; right: 16.5px; width: 75px; text-align: right;}
    .chart-container {height: 42.5vh; width: 95vw; padding-top: 10px;}
    .before-text {margin-left: 18.5vw;}
    .after-text {margin-right: 33.5vw;}
    .chart-container {height: 300px;}
}


@media (max-width: 540px) {
    .header-text {font-size: 90px;}
    .dialog-box {padding-right: 20px}
    .dialog-box2 {min-width: 400px;}
}



html,body {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}


.vertical-img-box,
.partner-img-box,
.feature-box,
.dialog-box2 {-webkit-box-shadow: 0 0 20px 5px rgba(115,115,115,0.15);
    -moz-box-shadow: 0 0 20px 5px rgba(115,115,115,0.15);
    box-shadow: 0 0 20px 5px rgba(115,115,115,0.15);}

::placeholder {color: #b7b7b7; opacity: 1; transition: 0.2s ease;}
:focus::placeholder {opacity: 0;}

.login,
button {-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-ms-transition:background 0.2s ease;-o-transition:background 0.2s ease;transition:background 0.2s ease}
a {-webkit-transition:color 0.2s ease;-moz-transition:color 0.2s ease;-ms-transition:color 0.2s ease;-o-transition:color 0.2s ease;transition:color 0.2s ease}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="password"],
input[type="submit"] {-webkit-appearance: none;}