@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: #ec1c52}
a:hover {color: #000}
b, strong {font-weight: 500}


.header-bg {background-image: url(/img/background-1.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: #fff; padding: 10 20px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
.header-menu .login:hover {background: #fff9ea; color: #000}
.header-text {font-size: 120px; font-weight: 700; color: #fff; padding: 50px 0; margin-left: -5px}


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

.title {font-size: 60px; font-weight: 700; padding: 50px 0; display: inline-block; position: relative;
    background: #ec1c52;
    background: -webkit-linear-gradient(right, #ec1c52 0%, #ff9000 100%);
    background: linear-gradient(to right, #ec1c52 0%, #ff9000 100%);
    -webkit-background-clip: text;
    color: transparent;}
.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;}


.contact-form {background-color: #efefef; padding-bottom: 100px}
.contact-box {margin-right: -40px;}
.contact-item {float: left; width: 33.33%}
.contact-item-box,
.contact-textarea {padding: 0 40px 0 0;}
.contact-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}

.contact-item-box input,
.contact-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}
.contact-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 {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: #ec1c52; 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: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px}
button:hover {background-color: #ff9000}


.footer-bg {background-color: #666; 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; overflow: hidden}
.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}
	.contact-item-box input,
	.contact-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%;}
	.contact-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 8px 3px rgba(115,115,115,0.15);
	-moz-box-shadow: 0 0 8px 3px rgba(115,115,115,0.15);
	box-shadow: 0 0 8px 3px rgba(115,115,115,0.15);}

::placeholder {color: #b7b7b7; opacity: 1; transition: .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;}






/*
.dialog {display: none; max-width: 1024px; margin: 0 auto; padding: 20px; overflow: hidden; z-index: 100; top: 0; left: 0;}
.dialog.visible {display: block;}
.dialog-box {background-color: #fff; width: 50%; padding: 40px}


/*.dialog-box {float: left; background-color: #fff; z-index: 101; width: 50%; padding: 40px}*/

/*.dialog {
    display: none;
    position: fixed;
    background-color: #f0f0f0;
    top: 50%;
    z-index: 999;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
}*/
/*
.dialog .body-box {
    position: relative;
}
.dialog.visible {
    display: block;
}
.close-btn {
    display: block;
    position: absolute;
    background: none !important;
    right: 20px;
    padding: 1rem;
    top: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
}
.close-btn::before,
.close-btn::after {
    content: '';
    width: 5px;
    height: 30px;
    background-color: #000;
    display: inline-block;
    position: absolute;
    margin-top: -0.5rem;
}
.close-btn::before {
    transform: rotate(45deg);
}
.close-btn::after {
    transform: rotate(-45deg);
}
.dialog-item {
	width: 45%;
	margin-right: 1rem;
}
.dialog-error {
    margin: 10px 20px   ;
    color: red;
}
@media (max-width: 900px) {
    .dialog-item {
        width: 95%;
        margin-bottom: 1rem;
    }
}
*/