@charset "utf-8";


/* =CSS Reset
--------------------------------------------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End CSS Reset
--------------------------------------------------------------------------------------------------*/

/* =Toolkit
--------------------------------------------------------------------------------------------------*/

/* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
/* For modern browsers */ 
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

/* general purpose classes */
.nodisplay { display:none; }
.nodisplay_strict { display:none !important; }
.alignleft { float:left; }
.alignright { float:right; }

/* End Toolkit
--------------------------------------------------------------------------------------------------*/

/* =Normalization - mostly derived from normalize.css (https://github.com/necolas/normalize.css/) but without comments and compressed to keep the file small
--------------------------------------------------------------------------------------------------*/

hr { display:block; height:1px; border:0; margin:1em 0; padding:0;
	border-top:1px solid #cccccc; /* change border colour to suit your needs */
}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: sans-serif; }
a:focus { outline: none; }
a:hover, a:active { outline: 0; }
h1 { font-size: 2em; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul { margin: 0; }
del { text-decoration: line-through; }
abbr[title] { border-bottom: 1px dotted; cursor:help; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
small { font-size: 75%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle}
svg:not(:root) { overflow: hidden; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; *margin-left: -7px; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
input, select { vertical-align:middle; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; cursor: pointer;}
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
.cleaner {clear: both; height: 1px; font-size: 1px;}
:-moz-placeholder {opacity:  1;}
::-moz-placeholder {opacity:  1;}
:focus {outline: none;}

/* End Normalization
--------------------------------------------------------------------------------------------------*/
@charset "utf-8";

/*--------------------------------------------------------------------------------------------------
CSS Styles for <Project Name>.

version:   1.0
--------------------------------------------------------------------------------------------------*/


/* =Typography
--------------------------------------------------------------------------------------------------*/

/* Setting up the fonts */
html {height: 100%; scroll-behavior: smooth;}
body {min-height:100%; height: 100%; color: #212121; font-weight: normal; font-family: 'Roboto', sans-serif; font-size: 16px;}
input, button, select, textarea {font-family: 'Roboto', sans-serif;}

#header:after,
#header .row-top:after,
.holder-content:after,
.popup .popup-content form .row:after {content:''; display: block; clear: both;}
#main {
	position: relative;
	min-height: 100%;
}

h1 {
	font-size: 40px;
	line-height: 52px;
	color: #8ECA24;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	margin: 0 0 24px;
}
h2 {
	color: #212121;
	font-family: 'Ubuntu', sans-serif;
	font-size: 36px;
	font-weight: 500;
	line-height: 55px;
	margin: 0 0 47px;
}
h3 {
	font-family: 'Ubuntu', sans-serif;
	color: #212121;
	font-size: 24px;
	line-height: 24px;
	margin: 0 0 15px;
	font-weight: 400;
}
h4 {
	font-family: 'Ubuntu', sans-serif;
	color: #212121;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
}
a {
	text-decoration: none;
	color: #fff;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:hover {
	color: #77A91E;
}
.btn > input {
	background: none;
	color: #fff;
	border: none;
}
.btn span {
	position: relative;
	z-index: 2;
}
.btn {
	display: inline-block;
	vertical-align: top;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	border-radius: 2px;
	background-color: #8ECA24;
	text-transform: uppercase;
	padding: 9px 25px;
	text-align: center;
	border: none;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.btn:hover {
	color: #fff;
}
.btn:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #3023AE 0%, #53A0FD 47.52%, #B4EC51 100%);
	opacity: 0;
	z-index: 1;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.btn:hover:after {
	opacity: 1;
}
#main.about {
	background: url(../img/about-us-2560x1440-bg.png) no-repeat 0 0; background-attachment: fixed;
}
#main.text-page {
	background: url(../img/contacts-2560x1440-bg.png) no-repeat 0 0; background-attachment: fixed;
}
#main.home #header {
	background: #000;
	margin: 0 0 64px;
	position: relative;
	overflow: hidden;
}
#main.home #header:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	background: #000 url(../img/Bitmap-2.png) no-repeat;
	width: 1038px;
	height: 100%;
}
#header {
	margin: 0 0 64px;
	position: relative;
	overflow: hidden;
}
#header .row-top {
	padding: 24px 47px 0;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}
#header .row-top .logo {
	background: url(../img/carnet-logo.svg) no-repeat;
	width: 124px;
	height: 32px;
	float: left;
	position: relative;
	z-index: 9;
}
#header .row-top .ch_logo {
	background: url(../img/ch-logo.svg) no-repeat;
        background-size: 130px;
	width: 135px;
	height: 40px;
	float: left;
	position: relative;
	z-index: 9;
}
#header .row-top .nav {
	float: right;
	overflow: hidden;
	padding: 7px 0 0;
}
#header .row-top .nav li {
	float: left;
	margin-left: 35px;
}
#header .row-top .nav li a {
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
}
#header .row-top .nav li.active a, .slicknav_nav li.active a {
	color: #77A91E;
}
#header .row-top .btn {
	float: right;
	margin-left: 33px;
	position: relative;
	z-index: 9;
}
#header .row-top .btn.active {background: #ababab; color: #1e1e1e;}
#header .row-top .menu-btn {display: none;} /* phones only, see media.css */
#header .row {
	overflow: hidden;
	margin: 0 auto;
	padding: 23px 155px 0;
	min-height: 352px;
	position: relative;
	z-index: 1;
	max-width: 1180px;
}
#header .row .col {
	float: right;
	max-width: 520px;
	line-height: 24px;
	color: #fff;
	width: 100%;
}
#header .row .col p {margin-bottom: 32px;}

.holder-content {
	max-width: 1168px;
	margin: 0 auto;
	padding: 0 25px;
}
.box-img {
	overflow: hidden;
	margin: 0 0 51px;
}
.box-img .col {
	float: left;
	width: 62.4%;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 21px;
}
.box-img .col p {
	margin: 0 0 15px;
}
.box-img .form-row .btn {
	padding: 13px 25px;
	margin: 0;
}
.box-img .col input[type="text"] {
	border: 1px solid #BBBBBB;
	display: block;
	box-sizing: border-box;
	width: 100%;
	font-size: 14px;
	line-height: 21px;
	color: #212121;
	text-align: center;
	padding: 8px 16px 9px;
}
.box-img .col .form-row .btn {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 0;
}
.box-img .col .form-row .btn input {
	padding: 13px 25px;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
}
.box-img .col input {
	width: 100%;
}
.box-img .col input[type="text"]:focus {
	border-color: #ccc;
}
.box-img .col input[type="text"]::-webkit-input-placeholder { color: #ABABAB; }
.box-img .col input[type="text"]::-moz-placeholder          { color: #ABABAB; }
.box-img .col input[type="text"]:-moz-placeholder           { color: #ABABAB; }
.box-img .col input[type="text"]:-ms-input-placeholder      { color: #ABABAB; }

.box-img .col:first-child {
	padding: 0 48px 0 0;
	width: 37.6%;
}
.box-img .form-row {margin: 0 0 16px;}
.file-list span {display: block; color: #212121; font-size: 14px; line-height: 21px; margin: 6px 0 0; overflow: hidden;}
.file-list span a {display: inline-block; vertical-align: middle; text-indent: -9999px; width: 20px; height: 20px; background: url(../img/very-small-exit-icon.svg) 50% no-repeat;}

.demo-images-wrapper {
	padding: 16px 0 0;
}
.box-img .col .demo-images {
	margin: 0 -18px 0 0;
	overflow: hidden;
}
.box-img .col .demo-images span em {
	float: left;
	margin: 0 12px 12px 0;
	border: 2px solid transparent;
	position: relative;
	cursor: pointer;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.box-img .col .demo-images span img {
	width: 120px;
	height: 78px;
}
.box-img .col .demo-images span em:hover:after {
	opacity: 0.5;
}
.box-img .col .demo-images span em:after {
	opacity: 0;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #3023AE 0%, #53A0FD 47.52%, #B4EC51 100%);
}
.box-img .col .demo-images span.active em {
	border: 2px solid #8ECA24;
}

.box-img .col .drop-image {
	border: 1px dashed #BBBBBB;
	height: 337px;
	width: 100%;
	box-sizing: border-box;
}
.car-result {
	display: none;
    float: left;
    width: 29.5%;
	box-sizing: border-box;
	padding: 0 0 0 48px;
	color: #ABABAB;
	font-size: 14px;
	line-height: 16px;
}
.car-result strong {
	color: #212121;
	font-weight: 400;
	display: block;
	margin: 8px 0 16px;
}
.car-result .err-message {color: #D95353; line-height: 21px;}
.main-image {
    position: relative;
		overflow: hidden;
}
.main-image {position: relative;}
.main-image input {display: none;}
.main-image .btn {position: absolute; top: 16px; right: 16px; padding: 5px 15px; display: none;}
.info-text {position: absolute; left: 0; right: 0; top: 50%; display: none; text-align: center; color: #ABABAB; font-size: 14px; line-height: 21px;}
#infoDrag {display: block; margin: -6px 0 0; z-index: -1;}
#infoScan span {display: block; margin: 12px 0 0;}
#infoScan {margin: -33px 0 0;}

#infoServerError em {
	display: block; color: #D95353; font-style: normal; margin: 8px;
}

.main-image.error #infoServerError {
	margin: -26px 0 0; color: #212121;
	display: block;
	background: rgba(255, 255, 255, 0.9);
}

#infoServerError {
	display: none;
}

.main-image.filled {width: 70.5%; float: left;}
.main-image.filled #infoDrag, .main-image.error #infoDrag, .main-image.scan #infoDrag {display: none;}
.main-image.scan #infoScan {display: block;}
.main-image.scan .drop-image {border-color: #8ECA24;}
.main-image.filled .btn {display: block;}
.main-image.filled .drop-image {border: none; height: auto;}
.main-image .drop-image > img {display: none;}
.main-image.filled .drop-image > img {width: 100%; height: auto; display: block;}

.downloads {
	margin: 0 0 48px;
}
.downloads .row {
	overflow: hidden;
	padding: 16px;
	margin: 0 -16px;
}
.downloads .row .col {
	float: left;
	width: 33.3%;
	box-sizing: border-box;
}
.downloads .row .col a {
	display: block;
	box-sizing: border-box;
	padding: 16px;
	color: #212121;
	font-size: 14px;
	line-height: 21px;
	font-weight: 300;
}
.downloads .row .col a .title {
	margin: 0 0 16px;
}
.downloads .row .col a .title strong {
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	text-transform: uppercase;
	padding-left: 12px;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.downloads .row .col a:hover .title strong {
	color: #77A91E;
	text-decoration: underline;
}
.downloads .row .col a:hover {
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.09);
	border-radius: 2px;
}

.faq {
	background: #000 url(../img/FAQ-1366x768-bg.png) no-repeat 0 0/cover;
	color: #fff;
	padding: 80px 0 145px;
	overflow: hidden;
}
.faq h2 {
	color: #fff;
	margin: 0 0 48px;
}
.faq h3 {
	color: #8ECA24;
	margin: 0 0 25px;
}
.faq .row {
	overflow: hidden;
	font-size: 0;
	margin: 0 -25px;
}
.faq .row .col {
	font-size: 16px;
	width: 50%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	font-weight: 300;
	line-height: 24px;
	padding: 0 25px;
	margin: 0 0 42px;
}
#footer {
	left: 0;
	bottom: 0;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	height: 80px;
	color: #fff;
	font-size: 12px;
	line-height: 24px;
}
#footer .holder-content {max-width: 100%; padding: 0 48px;}
#footer p {
}
#footer p a {
	float: none;
}
#footer a {
	float: right;
}

#footer .mastercard-img {
	float: left;
}

#footer .mastercard-img img {
	height: 60px;
}

#footer .visa-img {
	float: left;
	padding-top: 7px;
}

#footer .visa-img img {
	height: 40px;
}

.popup {
	width: 1168px;
	display: none;
}
.popup .popup-content {
	position: relative;
}
.popup .b-close {
	position: absolute;
	right: 0;
	top: 12px;
	width: 30px;
	height: 30px;
	background: url(../img/big-exit-icon.svg) no-repeat;
	cursor: pointer;
}
.popup .popup-content form {
	background: #fff;
	padding: 50px 47px 64px;
}
.form-block .col form input:focus ~ label,
.form-block .col form input:valid ~ label,
.form-block .col form textarea:focus ~ label,
.form-block .col form textarea:valid ~ label,
.popup .popup-content form .row .col input:focus ~ label,
.popup .popup-content form .row .col input:valid ~ label,
.popup .popup-content form .row .col textarea:focus ~ label,
.popup .popup-content form .row .col textarea:valid ~ label {
	transform: translateY(-25px) scale(0.75);
	font-size: 18px;
	color: #A4A4A4;

}
.popup .popup-content form label, .form-block .col form label {
	display: block;
	cursor: pointer;
	margin: 0 0 15px;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    -moz-transition: transform .3s ease-out;
	transition: transform .3s ease-out;

	-webkit-transform-origin: transform .3s ease-out;
    -o-transform-origin: transform .3s ease-out;
    -moz-transform-origin: transform .3s ease-out;
    transform-origin: left top;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}
.popup .popup-content form .btn {
	width: 36.4%;
	padding: 0;
}
.popup .popup-content form .btn button {
	padding: 14px 25px 12px;
	background: none;
	border: none;
	color: #fff;
	display: block;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
}
.popup .popup-content form .form-row, .form-block .col form .form-row {
	margin: 0 0 48px;
	position: relative;
}
.form-block .col form input,
.form-block .col form textarea,
.popup .popup-content form .row .col input,
.popup .popup-content form .row .col textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-bottom: #ccc solid 1px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	padding: 0 0 5px;
}
.popup .popup-content form span, .form-block .col form span {
	font-size: 12px;
	line-height: 14px;
	color: #D95353;
	margin: 4px 0 0;
	display: none;
}
.popup .popup-content form .row .col input.error + span, .form-block .col form input.error + span {
	display: block;
}
.popup .popup-content form .row .col input.error, .form-block .col form input.error {
	border-color: #D95353;
}
.popup .popup-content form .row .col input.ok, .form-block .col form input.ok {
	border-color: #8ECA24;
}
.popup .popup-content form .row .col input::-webkit-input-placeholder, .form-block .col form input::-webkit-input-placeholder { color: #212121; }
.popup .popup-content form .row .col input::-moz-placeholder, .form-block .col form input::-moz-placeholder { color: #212121; }
.popup .popup-content form .row .col input:-moz-placeholder, .form-block .col form input::-moz-placeholder { color: #212121; }
.popup .popup-content form .row .col input:-ms-input-placeholder, .form-block .col form input::-ms-input-placeholder { color: #212121; }
.popup .popup-content h2 {
	color: #fff;
	margin-right: 50px;
}
.popup .popup-content form .row {
	margin: 0 0 0;
}
.popup .popup-content form .g-recaptcha {
	margin: 6px 0 25px;
}
.popup .popup-content form .row .col {
	float: left;
	width: 59%;
	box-sizing: border-box;
	position: relative;
}
.popup .popup-content form .row .col:first-child {
	padding-right: 48px;
	width: 41%;
}
.popup .popup-content form .row .col textarea {
	height: 31px;
    resize: none;
	width: 100% !important;
	white-space: nowrap;
  	overflow: hidden;
	margin: 0;
}
.popup .popup-content form .row .col .btn {
	width: 36.5%;
	padding: 14px 25px 12px;
}
.popup .box-text {
	max-width: 385px;
	margin: 0 auto;
	background: #fff;
	text-align: center;
	color: #212121;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	box-sizing: border-box;
	padding: 33px 40px 32px;
}
.popup .box-text h3 {
	margin: 0 0 23px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 400;
}
.popup .box-text p {
	margin: 0 0 24px;
}
.popup .box-text .btn {
	padding: 14px 55px 12px;
	position: relative;
	background: #8ECA24;
	width: auto;
	height: auto;
	left: auto;
	top: auto;
}
.popup .box-text .btn:hover {
	background: linear-gradient(90deg, #3023AE 0%, #53A0FD 47.52%, #B4EC51 100%);
	color: #fff;
}
.popup .box-text h3.ok {
	color: #8ECA24;

}
.slicknav_menu {
	display: none;
}
.about-bolock {
	padding: 0 0 184px;
	margin-top: -24px;
}
.about-bolock h1 {
	color: #fff;
	margin: 0 0 39px;
}
.about-bolock .row {
	overflow: hidden;
}
.about-bolock .row .holder-img {
	float: left;
}
.about-bolock .row .desc {
	overflow: hidden;
	box-sizing: border-box;
	padding: 12px 0 0 28px;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}
.about-bolock .holder-text {
	background: #fff;
	margin: 48px 0 0;
	padding: 81px 64px 48px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}
.about-bolock .holder-text h3 {
	margin: 0 0 22px;
}
.about-bolock .holder-text h4 {
	margin: 24px 0 22px;
}
.about-bolock .holder-text p {
	margin: 0 0 42px;
}
.about-bolock .holder-text p span {
	display: block;
	margin: 0 0 16px;
}
.about-bolock .holder-text .box-text {
	margin: 0 0 32px;
}
.about-bolock .holder-text .box-text p {
	margin: 0;
}

/* styles 11-03-2020 */

.text-block {padding: 0 0 64px;}
.text-block .table {display: table; width: 100%;}
.text-block .table .row {display: table-row;}
.text-block .table .col {width: 33%; display: table-cell; vertical-align: top;}
.text-block .table .col figure {height: 72px; margin: 0 0 20px;}
.text-block .table .col figure img {display: block; height: auto;}
.text-block .table .col h3 {color: #212121; font-family: Ubuntu; font-size: 24px; font-weight: 500; letter-spacing: -0.5px; line-height: 32px;}
.text-block .table .col p {color: #212121; font-family: Roboto; font-size: 14px; font-weight: 300; line-height: 21px; max-width: 352px;}
.text-block .btn-block {padding: 24px 0 0;}
.text-block .btn-block:after {display: block; clear: both; content: '';}
.text-block .btn-block a {float: left;   color: #212121; font-family: Roboto; font-size: 12px; font-weight: 700; line-height: 14px; text-align: center; text-transform: uppercase; box-sizing: border-box; height: 40px; line-height: 40px; width: 135px; border: 1px solid #BBB; border-radius: 2px; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; position: relative; padding: 0; background-color: #fff; text-align: left;}
.text-block .btn-block a span {position: relative; z-index: 2; display: block; background-repeat: no-repeat;}
.text-block .btn-block a:hover {color: #fff; border-color: transparent;}
.text-block .btn-block a:after {border-radius: 2px;}
.text-block .btn-block .btn-01 {margin: 0 16px 0 0;}
.text-block .btn-block .btn-01 span {background-image: url(../img/apple-icon-1.svg); background-size: 19px 23px; background-position: 15px 7px; padding: 0 0 0 45px;}
.text-block .btn-block .btn-02 span {background-image: url(../img/google-play-icon.svg); background-size: 19px 20px; background-position: 10px 9px; padding: 0 0 0 40px;}
.text-block .btn-block .btn-01 span:hover {background-image: url(../img/apple-icon-white.svg);}
.text-block .btn-block .btn-02 span:hover {background-image: url(../img/google-play-icon-white.svg);}

/* form */
#contact-block {}
.form-block {padding: 0 0 72px;}
.form-block:before {height: 1px; max-width: 1168px; display: block; content: ''; margin: 0 auto; background: #DCDCDC;}
.form-block .holder-content {padding-top: 50px;}
.form-block .holder-content h2 {margin-bottom: 32px;}
.form-block .holder-content figure {margin: 0 0 24px;}
.form-block .block {display: table; width: 100%;}
.form-block .block .col {display: table-cell; vertical-align: top; width: 50%;}
.form-block .block .col p {color: #212121; font-family: Roboto; font-size: 14px; font-weight: 300; line-height: 21px; max-width: 459px; padding: 0 0 24px;}
.form-block .block .line-address, .form-block .block .line-email {color: #212121; font-family: Roboto; font-size: 14px; font-weight: 300; line-height: 21px; margin: 0 0 11px; line-height: 16px; padding: 0 0 0 32px; background-size: 50% auto;}
.form-block .block .line-email a {color: #212121;}
.form-block .block .line-email a:hover {color: #77A91E;}
.form-block .block .line-address p {padding: 0;}
.form-block .block .line-address {background: url(../img/ico-address.png) no-repeat 0 50%; background-size: 14px 16px;}
.form-block .block .line-email {background: url(../img/ico-email.png) no-repeat 0 50%; background-size: 16px 16px;}

.form-block .col form {}
.form-block .col form .form-row {margin: 0 0 24px;}
.form-block .col form textarea {height: 87px; width: 388px; resize: none; border: 1px solid #DCDCDC; padding: 8px 12px;}
.form-block .col form input {box-sizing: border-box; height: 48px; width: 388px; border: 1px solid #DCDCDC; border-radius: 2px; font-size: 16px; padding: 0 12px;}
.form-block .col form label {top: 12px; left: 6px; background: #fff; padding: 0 8px;}
.form-block .col form .btn {padding: 0;}
.form-block .col form .btn button {background: none; position: relative; z-index: 2; border: none; display: block; width: 100%; color: #FFF; font-family: Roboto; font-size: 12px; font-weight: 700; text-transform: uppercase; width: 122px; line-height: 40px;}

/* text page */
.holder-content.width920 {max-width: 920px; padding-bottom: 145px; margin-top: -43px;}
.width920 .about-block {padding: 0 64px; margin: 0;}
.width920 .about-block h1 {font-size: 40px; line-height: 52px; margin-bottom: 28px; color: #fff;}
.width920 .about-block p {color: #FFF; font-family: Roboto; font-size: 16px; line-height: 24px; padding: 0 0 18px;}
.width920 .about-block a, .text-page .holder-text a {color: #77A91E;}
.width920 .about-block a:hover, .text-page .holder-text a:hover {text-decoration: underline;}
.content-block {border-radius: 2px; background-color: #FFF; margin: 46px 0 0 0; padding: 56px 64px 49px 64px;}
.content-block p {color: #212121; font-family: Roboto; font-size: 16px; font-weight: 300; line-height: 24px; padding: 0 0 18px;}
.content-block h2 {color: #212121; font-family: Ubuntu; font-size: 36px; font-weight: 500; letter-spacing: -1px; line-height: 42px; margin-bottom: 21px;}
.content-block h3 {color: #212121; font-family: Ubuntu; font-size: 24px; font-weight: 500; letter-spacing: -0.5px; line-height: 32px; padding: 0 0 16px;}
.content-block h3 span {color: #77A91E;}
.content-block section {padding: 22px 0 18px 0; border-bottom: 1px solid #DCDCDC; margin-bottom: 18px;}
.content-block .img-block {padding-bottom: 22px; display: table; width: 100%;}
.content-block .img-block:after {display: block; clear: both; content: '';}
.content-block .img-block .col {display: table-cell; vertical-align: top;}
.content-block .img-block .col.sep {width: 31px;}
.content-block .img-block .col figure {width: 100%;}
.content-block .img-block .col figure img {display: block; width: 100%;}
.content-block .img-block .col figure figcaption {margin: 16px 0 0 0; font-size: 16px; font-weight: 300; line-height: 24px; font-family: Roboto; max-width: 380px;}
.content-block ul {}
.content-block ul li {position: relative; font-family: Roboto; font-size: 16px; font-weight: 300; line-height: 24px; padding: 0 0 18px 24px;}
.content-block ul li:after {display: block; content: ''; position: absolute; top: 12px; left: 0; width: 6px; height: 6px; background: #8eca24;}
.content-block ul li a {color: #77A91E; text-decoration: underline;}
.content-block ul li a:hover {text-decoration: none;}
.content-block .res-block {background: url(../img/resources.svg) no-repeat 100% 20px; background-size: 90px 80px; padding-bottom: 0; border: none; margin-bottom: 0;}
.content-block .res-block ul {padding-top: 13px;}
.content-block .res-block ul li {padding-bottom: 4px;}

.content-block .table {display: table; width: 100%; font-family: Roboto; font-size: 14px; padding: 26px 0 0 0;}
.content-block .row {display: table-row;}
.content-block .row .col {display: table-cell; vertical-align: top; font-size: 16px; border-bottom: 1px solid #DCDCDC; padding: 16px 0;}
.content-block .row .title {display: none;}
.content-block .row .col p {padding: 0 16px 0 0;}
.content-block .row .col-01 {max-width: 144px; width: 18.18%;}
.content-block .row .col-02 {max-width: 356px; width: 44.95%;}
.content-block .row .col-03 {max-width: 292px; width: 36.87%;}
.content-block .row .col-01, .content-block .row .col-02, .content-block .row .col-03 {font-size: 14px; padding-bottom: 14px;}
.content-block .row:last-child .col {padding-bottom: 0; border-bottom: none;}
.content-block .row .col figure {float: left; margin: 0 16px 0 0;}
.content-block .row .col figure:last-child {margin-right: 0;}

.width920 .about-block a.back-link {color: #fff; display: inline-block; padding: 0 0 0 25px; background: url(../img/ico-arrow.png) no-repeat; min-height: 14px; margin: 0 0 14px;}
.width920 .about-block a.back-link:hover {color: #77A91E; text-decoration: none;}

#footer .left-block {float: left;}
#footer .right-block {float: right;}



/* What's new (/changelog) */
.changelog .cl-head {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; font-family: Roboto; font-size: 14px; line-height: 20px; color: #555;}
.changelog .cl-tags {display: flex; flex-wrap: wrap; gap: 6px;}
.changelog .cl-tag {border: 1px solid #8ECA24; border-radius: 2px; padding: 0 8px; font-size: 12px; line-height: 20px; color: #212121; white-space: nowrap;}
.changelog h2 a {color: inherit;}
.changelog h2 a:hover, .changelog a.cl-more {color: #77A91E;}
.content-block.changelog h3 {padding-bottom: 4px;}
.content-block.changelog p.cl-meta {font-size: 14px; color: #757575; padding-bottom: 12px;}
.changelog details {margin: 0 0 6px;}
.changelog summary {cursor: pointer; font-family: Roboto; font-size: 16px; line-height: 24px; padding: 4px 0;}
.changelog summary:hover {color: #77A91E;}
.changelog .cl-hint {color: #757575; font-size: 14px; margin-left: 6px;}
.changelog details > :not(summary) {margin-left: 18px;}
.content-block.changelog p.cl-note {font-size: 14px; color: #555; padding: 0 0 6px;}
.changelog h4 {font-family: Roboto; font-size: 14px; font-weight: 500; line-height: 20px; margin-top: 8px;}
.changelog .cl-rows {padding-bottom: 6px;}
.content-block.changelog .cl-rows li {font-size: 14px; line-height: 20px; padding: 0 0 4px;}
.content-block.changelog .cl-rows li:after {display: none;}
.changelog .cl-id {color: #9E9E9E; font-size: 12px;}
.changelog .cl-years, .changelog .cl-text {color: #757575;}
.changelog a.cl-name:focus-visible {outline: 2px solid #8ECA24; outline-offset: 2px;} /* reset.css removes every focus outline */

/* Products, CarNET Server and FAQ pages; contact form topic */
.hero-buttons .btn {margin: 0 12px 12px 0;}
.width920 .about-block .hero-buttons a.btn, .width920 .about-block .hero-buttons a.btn:hover {color: #fff; text-decoration: none;}
.width920 .about-block p.offline-note {border-left: 3px solid #8ECA24; padding: 4px 0 4px 16px; margin-top: 6px;}
.text-block.products-intro .table .col {width: 50%; padding-right: 48px; box-sizing: border-box;}
.text-block.products-intro .table .col p {padding-bottom: 20px;}
.text-block.products-intro {padding-bottom: 0;}
.text-block.products-intro .holder-content {padding-bottom: 56px;}
.text-block.products-intro:after {content: ''; display: block; height: 1px; max-width: 1168px; margin: 0 auto; background: #DCDCDC;} /* the line before the clients */
.text-block.products-intro + .text-block {padding-top: 56px;}
.product-cards {display: flex; gap: 48px;}
.product-cards .product-card {flex: 1;}
.product-cards .product-card a.btn, .content-block a.btn {color: #fff; text-decoration: none;}
.content-block a {color: #77A91E;}
.content-block a:hover {text-decoration: underline;}
.info-table {width: 100%; border-collapse: collapse; font-family: Roboto; font-size: 15px; line-height: 21px; color: #212121; margin: 0 0 18px;}
.info-table th, .info-table td {text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid #DCDCDC; font-weight: 300;}
.info-table thead th {font-weight: 500; border-bottom: 2px solid #8ECA24;}
.info-table tbody th {font-weight: 500; width: 22%;}
.content-block p.table-note {font-size: 14px; line-height: 21px; color: #555;}
.content-block p.free-check {background: #F3F9E8; border-left: 3px solid #8ECA24; padding: 14px 18px; margin-top: 6px;}
.content-block h3 + ul {margin-bottom: 12px;}
.content-block.faq-page h2 {margin-bottom: 28px;}
.content-block.faq-page h3 {font-size: 20px; line-height: 28px; padding: 6px 0 8px;}
.faq .faq-more {text-align: center; padding-top: 8px;}
.faq .faq-more a.btn {color: #fff;}
#main.about .form-block {background: #fff; background-clip: padding-box; padding-top: 0; border-bottom: 80px solid transparent;} /* the footer (80 px, white text) shows on the dark background below */
#main.about .form-block:before {display: none;}
.form-block .col form select {box-sizing: border-box; height: 48px; width: 388px; border: 1px solid #DCDCDC; border-radius: 2px; font-size: 16px; padding: 0 12px; background: #fff; color: #212121; font-family: Roboto; font-weight: 300;}
.form-block .col form select:invalid {color: #757575;}
.form-block .col form input.optional:placeholder-shown:not(:focus) ~ label {transform: none; font-size: 16px; color: inherit;}

/* Footer: two centred lines */
#footer .footer-centre {text-align: center; padding-top: 16px; color: rgba(255,255,255,0.75);}
#footer .footer-centre a {float: none; color: #fff;}
#footer .footer-centre a:hover {color: #8ECA24;}

/* Inner pages: below the background picture the page stays dark (phones scroll the picture away) */
#main.about {background-color: #0d1521;}

/* Home headline: two lines with the 97% (owner, 2026-11-07) */
@media only screen and (min-width : 1024px) {
	#main.home #header .row .col h1 {font-size: 34px; line-height: 44px; letter-spacing: -0.5px;}
}
@media only screen and (min-width : 768px) and (max-width : 1023px) {
	#main.home #header .row .col h1 {font-size: 32px; line-height: 40px; letter-spacing: -0.5px;}
	#main.home #header .row .col h1 br {display: none;}
}
@media only screen and (min-width : 768px) and (max-width : 849px) {
	#main.home #header .row .col h1 {font-size: 28px; line-height: 36px;}
}

/* The top row (logo, menu, Products) lines up with the content instead of the window edges (owner, 2026-11-07) */
#header .row-top {max-width: 1218px; margin: 0 auto; padding-left: 25px; padding-right: 25px;}
#main.about #header .row-top, #main.text-page #header .row-top {max-width: 970px;} /* inner and legal pages: the width of their cards */

/* Privacy Policy and Terms */
.content-block.legal h3 {padding: 18px 0 10px;}
.content-block.legal h3:first-child {padding-top: 0;}
.width920 .about-block p + p {padding-bottom: 0;}
/* Home: the product cards, the clients and the contact block's text match the FAQ's size (owner, 2026-11-07) */
.text-block .table .col p {font-size: 16px; line-height: 24px; max-width: 420px; padding-right: 32px; box-sizing: border-box;}
.form-block .block .col p {font-size: 16px; line-height: 24px;}
.form-block .block .line-address, .form-block .block .line-email {font-size: 16px; line-height: 24px;}

/* Inner pages: the contact block is a white card like the content above it (owner, 2026-11-07) */
#main.about.with-contact .holder-content.width920 {padding-bottom: 46px;}
#main.about .form-block {background: transparent; border-bottom: 0; padding: 0 25px 145px;}
#main.about .form-block .holder-content {max-width: 920px; box-sizing: border-box; background: #fff; border-radius: 2px; padding: 56px 64px 49px;}
#main.about .form-block .block .col:first-child {padding-right: 32px; box-sizing: border-box;}

/* =Supported cars (/cars): the makes, and a make's models with their generations
--------------------------------------------------------------------------------------------------*/
.width920 .about-block p.cat-small {font-size: 14px; line-height: 20px; color: #C9CCD3; padding-bottom: 12px;}
.cat-search {margin: 6px 0 0;}
.cat-search input {box-sizing: border-box; width: 100%; height: 48px; border: 1px solid #DCDCDC; border-radius: 2px; font-size: 16px; font-weight: 300; padding: 0 14px; background: #fff; color: #212121;}
.cat-search input:focus {outline: 2px solid #8ECA24; outline-offset: 0;}
.content-block.catalogue {padding-top: 44px;}
.catalogue [hidden] {display: none;}
.catalogue p.cat-muted {color: #757575; padding: 12px 0 0;}
.cat-bar {display: flex; justify-content: flex-end; margin: -20px 0 18px;} /* the card's top right corner */
.cat-download {position: relative;}
.cat-download summary {list-style: none; padding-right: 39px; -webkit-user-select: none; user-select: none;}
.cat-download summary::-webkit-details-marker {display: none;}
.cat-download summary span:after {content: ''; position: absolute; left: 100%; top: 50%; margin: -2px 0 0 8px; border: 4px solid transparent; border-top-color: #fff; border-bottom-width: 0;}
.cat-download-menu {position: absolute; right: 0; top: 100%; z-index: 20; box-sizing: border-box; min-width: 100%; margin-top: 4px; padding: 4px 0; background: #fff; border: 1px solid #DCDCDC; border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);}
.catalogue .cat-download-menu a {display: block; padding: 9px 16px; font-size: 14px; line-height: 20px; color: #212121;}
.catalogue .cat-download-menu a:hover {background: #F6FBEA; text-decoration: none;}
.cat-download summary:focus-visible {outline: 2px solid #212121; outline-offset: 2px;} /* reset.css removes every focus outline */
.catalogue .cat-download-menu a:focus-visible {background: #F6FBEA; outline: 2px solid #8ECA24; outline-offset: -2px;}
.cat-makes {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.catalogue a.cat-make {display: block; border: 1px solid #DCDCDC; border-radius: 2px; padding: 12px 14px 11px; color: #212121;}
.catalogue a.cat-make:hover {border-color: #8ECA24;}
.cat-make strong {display: block; font-family: Ubuntu; font-size: 18px; line-height: 24px; font-weight: 500;}
.cat-make span {display: block; font-size: 13px; line-height: 18px; color: #757575;}
#cat-results .cat-makes {margin-bottom: 28px;}
.catalogue a.cat-result {display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #EDEDED; color: #212121;}
.catalogue a.cat-result:hover strong {color: #77A91E;}
.cat-result strong {font-weight: 500;}
.cat-result span {font-size: 14px; color: #757575;}
.cat-legend {display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; line-height: 20px; color: #555; padding-bottom: 18px; border-bottom: 1px solid #DCDCDC;}
.cat-legend b {font-weight: 500; color: #212121;}
.cat-tick {color: #77A91E; font-weight: 700; margin-right: 2px;}
.cat-model {display: flex; gap: 24px; padding: 18px 0; border-bottom: 1px solid #EDEDED;}
.cat-model:last-child {border-bottom: 0; padding-bottom: 0;}
.cat-model:target {background: #F6FBEA; box-shadow: -64px 0 0 #F6FBEA, 64px 0 0 #F6FBEA;} /* the model a search result led to */
.cat-m-head {flex: 0 0 170px;}
.content-block.catalogue h2 {font-size: 20px; line-height: 26px; letter-spacing: -0.3px; margin: 0; overflow-wrap: anywhere;}
.cat-m-head span {display: block; font-size: 13px; line-height: 18px; color: #757575; padding-top: 2px;}
.cat-gens {flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; align-content: start;}
.cat-gen {border: 1px solid #DCDCDC; border-left: 3px solid #8ECA24; border-radius: 2px; padding: 7px 10px 7px 9px; font-size: 14px; line-height: 19px; min-width: 0;}
.cat-gen strong {font-weight: 500; overflow-wrap: anywhere;}
.cat-y {display: block; font-size: 13px; color: #757575;}
.cat-mk {display: block; font-size: 12px; line-height: 17px; color: #4C6F10;}
.cat-gen.cat-model-only {border-left-color: #C7DF9A;}
.cat-model-only .cat-mk {color: #555;}
.cat-gen.cat-not-yet {border: 1px dashed #C4C4C4; padding-left: 11px; color: #8A8A8A;}
.cat-not-yet .cat-y, .cat-not-yet .cat-mk {color: #9E9E9E;}
/* A link from What's new to one generation: the page stops with the generation 40% of the way down,
   so its model's name shows above it; the model gets the band and the generation a green frame.
   A link to a model (search) stops below the way back (a.cat-back), which stays at the top. */
.cat-gen {scroll-margin-top: 40vh;}
.cat-model {scroll-margin-top: 56px;}
.cat-model:has(.cat-gen:target) {background: #F6FBEA; box-shadow: -64px 0 0 #F6FBEA, 64px 0 0 #F6FBEA;} /* own rule: browsers without :has() drop only this one */
.cat-gen:target {background: #fff; box-shadow: 0 0 0 2px #77A91E;}
/* A make's page: the way back to all makes stays at the top of the window while the page scrolls.
   On the dark top of the page it reads as the usual back link; over the white list it is a dark tab. */
.width920 a.cat-back {position: sticky; top: 8px; z-index: 10; display: block; width: fit-content; margin: 0 0 4px 52px; padding: 5px 14px 5px 37px; border-radius: 16px; background: rgba(13, 21, 33, 0.9) url(../img/ico-arrow.png) no-repeat 12px 50%; color: #fff; font-size: 16px; line-height: 22px;}
.width920 a.cat-back:hover {color: #77A91E; text-decoration: none;}
.width920 a.cat-back:focus-visible {outline: 2px solid #8ECA24; outline-offset: 2px;}

@media only screen and (max-width : 1200px) {
	.popup {
		width: 700px;
	}
	.popup .popup-content form .btn {
		width: 33%;
	}
	#main.home #header:after {
		left: -298px;
	}
	.text-block .table .col p {padding-right: 30px;}
}
@media only screen and (max-width : 1024px) {
	.text-block .table .col p {padding-right: 25px;}
	#footer .holder-content {padding: 0 24px;}
	.box-img .col .demo-images span img {display: block; width: 95px; height: auto;}
}
@media only screen and (max-width : 1023px) {
	#main.home #header {margin-bottom: 56px;}
	h1 {font-size: 36px; line-height: 42px; margin-bottom: 16px;}
	.content-block h3 {font-size: 22px; line-height: 32px; padding-bottom: 9px;}
	h2 {font-size: 32px; line-height: 37px; margin-bottom: 40px;}
	.width920 .about-block {padding: 0 24px;}
	.width920 .content-block {padding: 48px 24px 49px;}
	.content-block section {padding: 14px 0 18px 0;}
	.content-block .res-block h2 {margin-bottom: 24px;}
	.content-block .res-block ul {padding-top: 0;}
	#header p {line-height: 24px;}
	#header .row {padding-top: 13px; padding-bottom: 0;}
	#header .row .col p {margin-bottom: 21px;}
	.text-block .btn-block .btn span {text-indent: -9999px; margin: auto; width: 13px;}
	.text-block .btn-block a.btn-02 span {width: 10px;}
	.text-block .btn-block a {width: 101px;}
	.form-block .block .col p {max-width: 290px;}
	.content-block .img-block .col.sep {width: 24px;}
	.content-block, .about-bolock {padding: 56px 24px 49px 24px;}
	.content-block .row .col-01 {width: 18.14%;}
	.content-block .row .col-02 {width: 37.84%;}
	.content-block .row .col-03 {width: 44.02%;}
}
@media only screen and (max-width : 990px) {
	.downloads .row .col {
		width: 50%;
	}
	#header {
		background-position: -296px 0;
	}
	#header .row-top {
		padding: 24px 25px 0;
	}
	#header .row {
		padding: 66px 0 0;
	}
	#header .row .col {
		float: right;
		width: 58.3%;
		box-sizing: border-box;
		padding: 0 25px 0 0;
	}
	.box-img {
		margin: 0 0 35px;
	}
	.box-img .col:first-child {
		padding: 0 32px 0 0;
		width: 40%;
	}
	.box-img .col {
		width: 60%;
	}
	.box-img .col .drop-image {
		min-height: 284px;
	}
	.box-img .col .col-border .desc {
		padding: 13px 0 0;
	}
	.downloads .row .col {
		margin: 0 0 8px;
	}
	.downloads {
		margin: 0 0 40px;
	}
	.car-result {
		padding-left: 32px;
	}
	.about-bolock .holder-text {
		padding: 81px 24px 48px;
	}
	.popup .popup-content form {
		padding: 80px 24px 64px;
	}
	.content-block .row .col-01 {width: 18.14%;}
	.content-block .row .col-02 {width: 35.84%;}
	.content-block .row .col-03 {width: 46.02%;}
	.width920 .content-block {padding: 48px 24px 49px;}
}
@media only screen and (max-width : 768px) {
	.box-img .col .demo-images span img {width: 120px; height: 78px; display: inline;}
	h1 br {display: none;}
	.content-block, .about-bolock {padding: 56px 24px 49px 24px;}
	.content-block .row .col-01 {width: 18.14%;}
	.content-block .row .col-02 {width: 37.84%;}
	.content-block .row .col-03 {width: 44.02%;}
}
@media only screen and (max-width : 767px) {
	.res-block ul li a {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; width: 500px;}
	.popup .popup-content form {
		padding: 80px 16px 64px;
	}
	.popup .popup-content form .g-recaptcha {
		margin: 25px -11px 25px;
	}
	.main-image.filled {
		width: auto;
		float: none;
		margin: 0 0 32px;
	}
	.about-bolock {
		margin-top: -7px;
	}
	.about-bolock .row .holder-img {
		float: none;
		margin: 0 0 23px;
	}
	.about-bolock .row .desc {
		padding: 0;
	}
	#main.home #header:after {
    	background-position: 0 100%;
		left: -699px;
		background-size: auto;
	}
	#header .row-top .logo {
		width: 55px;
	}
	#header .row-top .nav {
		/*display: none;*/
	}
	#header .row .col {
		width: auto;
		padding: 0 17px;
	}
	#header .row-top {
		padding: 16px 16px 0;
		position: relative;
		text-align: center;
		z-index: 99;
	}
	.slicknav_menu {
		display: block;
	}	
	.slicknav_btn {
		float: right;
		width: 16px;
		margin: 10px 0 0 10px;
		height: 15px;
		position: relative;
		z-index: 9;
	}
	.slicknav_btn .slicknav_icon-bar {
		background: #fff;
		display: block;
		height: 2px;
		margin: 0 0 3px;
	}
	.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 4px;
		left: 0px;
		width: 18px;
	}
	.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		position: absolute;
		top: 4px;
		left: 0px;
		width: 18px;
	}
	.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(2) {
		opacity: 0;
	}
	.slicknav_nav {
		box-sizing: border-box;
		text-align: center;
		font-size: 15px;
		line-height: 18px;
		text-transform: uppercase;
		padding: 119px 0 170px;
		overflow: hidden;
		clear: both;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000  url(../img/gamburger-bg@1x.png) no-repeat 0 0/ cover;


	}
	.slicknav_nav .holder-content {
		position: absolute;
		left: 0;
		box-sizing: border-box;
		bottom: 48px;
		font-size: 12px;
		line-height: 24px;
		color: #fff;
		margin: 0 0 31px;
		text-transform: none;
		width: 100%;
	}
	.slicknav_nav .holder-content p {
		margin: 0 0 16px;
	}
	#header .row-top.fixed {
		position:  fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
	.slicknav_nav ul li {
		margin: 0 0 30px;
	}
	#header .row-top .btn {		
		/*float: left;*/
		margin-left: 28px;
	}
	h1 {
		font-size: 40px;
		font-weight: 500;
		line-height: 54px;
	}
	#header .row {
		padding: 53px 0 101px;
	}
	#header {
		background-position: -613px 0;
		background-size: auto;
	}
	.box-img {
		margin: 0 0 33px;
	}
	.box-img .col:first-child {
		width: auto;
		float: none;
		padding: 0;
	}
	.box-img .col {
		width: auto;
		float: none;
	}
	.box-img .col .demo-images {
		margin: 0 -17px 12px;
		overflow-x:auto;
		
	}
	.box-img .col .demo-images .scroll {display: table; padding-left: 17px;}
	.box-img .col .demo-images .scroll span {display: table-cell; float: none; padding-right: 12px;}
	.box-img .col .demo-images .scroll:after {display: block; content: ''; clear: both;}
	.box-img .col .demo-images span em {
		box-sizing: border-box;
		margin: 0;
		display: inline-block;
	}
	.box-img .col .drop-image {
		min-height: 189px;
	}
	.info-text {
		top: 45%;
	}
	.downloads {
		margin: 0 0 56px;
	}
	.downloads .row .col {
		width: auto;
		float: none;
	}
	.downloads .row {
		margin: 0 -15px;
		padding: 0;
	}
	.faq h2 {
		margin: 0 0 49px;
	}
	.faq .row .col {
		float: none;
		width: auto;
	}
	.faq h3 {
		margin: 0 0 28px;
	}
	#footer a {
		float: none;
	}
	.holder-content {
		padding: 0 15px;
	}
	h2 {
		font-size: 40px;
		font-weight: 500;
		line-height: 46px;
	}
	#header {
		margin: 0 0 55px;
	}
	.faq {
		padding: 80px 0 142px;
	}
	.popup {
		width: 310px;
	}
	.popup .popup-content form .btn {
		width: 100%;
	}
	.popup .popup-content form .row .col:first-child,
	.popup .popup-content form .row .col{
		padding: 0;
		width: auto;
		float: none;
	}	
	.car-result {
		padding-left: 0;
		width: auto;
		float: none;
	}
	.about-bolock .holder-text {
		padding: 77px 16px 48px;
	}
	.about-bolock .holder-text h3 {
		line-height: 32px;
	}
	.text-block .holder-content .scroll {overflow-x: auto;}
	.text-block .holder-content .col {min-width: 235px;}
	.text-block .holder-content h2 {font-size: 26px; font-weight: 500; letter-spacing: -0.72px; line-height: 30px; margin-bottom: 24px;}
	.text-block .table .col h3 {font-size: 20px; font-weight: 500; letter-spacing: -0.56px; line-height: 24px;}
	h1 {font-size: 28px; font-weight: bold; letter-spacing: -0.5px; line-height: 36px; margin-bottom: 16px;}
	#header .row {padding: 53px 0 40px; min-height: 20px;}
	h2 {font-size: 26px; font-weight: 500; letter-spacing: -0.72px; line-height: 30px; margin: 0 0 32px;}
	#main.home #header {margin-bottom: 32px;}
	.text-block {padding: 0 0 40px;}
	.form-block .holder-content {padding-top: 32px;}
	.form-block .block {display: block;}
	.form-block .block .col {display: block; width: 100%;}
	.form-block .col form {margin: 39px 0 0 0;}
	.form-block .col form input, .form-block .col form textarea {width: 100%;}
	.form-block .col form textarea {height: 87px;}
	.form-block .col form .btn button {width: 100%; display: block;}
	.form-block .btn {width: 100%;}
	.form-block {padding-bottom: 40px;}
	.faq {padding: 40px 0 174px 0;}
	.faq h2 {font-size: 26px; font-weight: 500; letter-spacing: -0.72px; line-height: 30px; margin-bottom: 24px;}
	.faq h3 {margin-bottom: 16px; font-size: 20px; font-weight: 500; letter-spacing: -0.42px; line-height: 32px;}
	.faq .row .col {margin-bottom: 32px;}
	#footer .left-block, #footer .right-block {float: none;}
	#footer .left-block {padding-bottom: 28px;}
	#footer {height: 140px;}

	.width920 .about-block h1 {font-size: 28px; font-weight: bold; line-height: 36px; margin-bottom: 16px;}
	.width920 .about-block {padding: 0;}
	.content-block {margin-top: 20px;}
	.width920 .content-block {padding: 42px 17px 22px;}
	.content-block h2 {font-size: 26px; line-height: 30px; margin-bottom: 16px;}
	.content-block h3 {font-size: 20px; line-height: 24px; padding-bottom: 0;}
	.content-block .img-block {display: block; width: 100%;}
	.content-block .img-block .col {display: block; width: 100%; padding-bottom: 32px;}
	.content-block .img-block .col.sep {display: none;}
	.content-block .img-block .col:last-child {padding-bottom: 0;}
	
	.content-block .table, .content-block .table .row, .content-block .table .row .col {display: block; width: 100%; max-width: 100%;}
	.content-block .table {padding-top: 16px;}
	.content-block .table .row .col {border: none; display: table; padding: 4px 0 16px;}
	.content-block .table .row .col figure {margin: 0; display: table-cell; float: none; padding: 16px 16px 24px 0; border-bottom: 1px solid #DCDCDC;}
	.content-block .table .row:last-child .col figure {border: none; padding-bottom: 0;}
	.content-block .table .row .col figure:last-child {padding-right: 0;}
	.content-block .table .row .col figure img {display: block; width: 100%;}
	.content-block .table .row .col:after {clear: both; display: block; content: '';}
	.content-block .row .title {display: block; margin-top: 4px;}
	.content-block .table .row .col-01, .content-block .table .row .col-02, .content-block .table .row .col-03 {display: none;}
	
	.content-block h2 {margin-top: -20px;}
	.content-block .res-block h2 {margin-top: 0;}
	.content-block.changelog h2 {margin-top: 0;} /* below the date and tags */
	.content-block .res-block {background-size: 45px 40px; background-position: 100% 5px;}
	.holder-content.width920 {padding-bottom: 185px;}
	
	#header .row .col {max-width: 100%;}
	#header .row {padding: 24px 0 20px;}
	
}
@media only screen and (max-width : 500px) {
	.res-block ul li a {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; width: 300px;}
	#header .row-top .btn {margin-left: 12px; padding-left: 10px; padding-right: 10px;}
}

/* Products, CarNET Server and FAQ pages */
@media only screen and (max-width : 767px) {
	.product-cards {flex-direction: column; gap: 22px;} /* with the button line below, 40 px from the button to the next heading */
	.product-cards .product-card + .product-card h2 {margin-top: 0;} /* not pulled up into the button above */
	.text-block.products-intro .table .col {display: block; width: 100%; padding-right: 0;}
	/* home, Two Ways: 40 px each side of the line, not 109 under the last button */
	.text-block.products-intro .table .col:last-child {margin-bottom: 0;}
	.text-block.products-intro .table .col:last-child .card-btn {padding-bottom: 0;}
	.text-block.products-intro .holder-content {padding-bottom: 40px;}
	.text-block.products-intro + .text-block {padding-top: 40px;}
	.info-table {font-size: 13px; line-height: 18px;}
	.info-table th, .info-table td {padding-right: 8px;}
	.form-block .col form select {width: 100%;}
	#main.about .form-block {padding: 0 15px 170px;} /* side margins like the cards; the footer is 140 px here */
	#main.about .form-block .holder-content {padding: 42px 17px 22px;}
	#main.about {background-attachment: scroll;}
	/* the clients' cards stack instead of a strip that cuts the last one off */
	.text-block .holder-content .scroll {overflow-x: visible;}
	.text-block .table, .text-block .table .row {display: block;}
	.text-block .table .col {display: block; width: 100%; min-width: 0; margin-bottom: 32px;}
	.text-block .table .col p {max-width: none; padding-right: 0;}
}
@media only screen and (max-width : 767px) {
	/* phones: the menu hides behind a button next to Products and opens over the page under the header bar */
	#header .row-top .menu-btn {display: block; float: right; width: 32px; height: 32px; margin-left: 12px; padding: 9px 5px; box-sizing: border-box; background: none; border: none; cursor: pointer; position: relative; z-index: 9;}
	#header .row-top .menu-btn span {display: block; height: 2px; margin-bottom: 4px; background: #fff; transition: 0.2s ease-in-out;}
	#header.menu-open .menu-btn span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
	#header.menu-open .menu-btn span:nth-child(2) {opacity: 0;}
	#header.menu-open .menu-btn span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}
	#header.menu-open {overflow: visible;} /* inner pages' header is just the bar; its picture only sticks out to the left */
	#header .row-top .nav {display: none; position: absolute; top: 100%; left: 0; right: 0; float: none; padding: 8px 0 16px; background: #000; text-align: center; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);}
	#header.menu-open .row-top {background: #000;} /* bar and menu read as one panel */
	#header.menu-open .row-top .nav {display: block;}
	#header .row-top .nav li {float: none; margin: 0;}
	#header .row-top .nav li a {display: block; padding: 12px 0; font-size: 15px; line-height: 18px;}
}
@media only screen and (max-width : 767px) {
	/* phones: the recognition result in two columns (Make/Model and Generation, then Color and Angle) */
	.car-result:after {display: block; content: ''; clear: both;}
	.car-result p {float: left; width: 50%; box-sizing: border-box;}
	.car-result #carMake, .car-result #carColor {padding-right: 12px;}
	.car-result #carProb, .car-result hr {clear: both;}
}
@media only screen and (max-width : 767px) {
	#main.about .form-block .block .col:first-child {padding-right: 0;}
}
@media only screen and (max-width : 1023px) {
	.cat-model:target {box-shadow: -24px 0 0 #F6FBEA, 24px 0 0 #F6FBEA;}
	.cat-model:has(.cat-gen:target) {box-shadow: -24px 0 0 #F6FBEA, 24px 0 0 #F6FBEA;}
	.width920 a.cat-back {margin-left: 12px;} /* in line with the page's title */
}
@media only screen and (max-width : 767px) {
	/* phones: makes and generations in two columns, a model's name above its generations */
	.cat-makes {grid-template-columns: repeat(2, 1fr); gap: 8px;}
	.catalogue a.cat-make {padding: 10px 12px;}
	.cat-make strong {font-size: 16px; line-height: 22px;}
	.cat-model {display: block; padding: 16px 0;}
	.cat-model:target {box-shadow: -17px 0 0 #F6FBEA, 17px 0 0 #F6FBEA;}
	.cat-model:has(.cat-gen:target) {box-shadow: -17px 0 0 #F6FBEA, 17px 0 0 #F6FBEA;}
	.width920 a.cat-back {margin-left: -6px;}
	.cat-m-head {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding-bottom: 8px;}
	.cat-gens {grid-template-columns: repeat(2, minmax(0, 1fr));}
	#cat-results h3 {padding-bottom: 12px;}
}
@media only screen and (min-width : 768px) and (max-width : 850px) {
	/* narrow tablets: the five menu links stay on the logo's line */
	#header .row-top .nav li {margin-left: 20px;}
	#header .row-top .btn {margin-left: 20px;}
}

/* The pricing block on the home page (CAR-188), from the "Pricing block" design: one band on wide screens,
   stacked below 1240 px (narrower, the band's tick labels run into each other). Everything is scoped to the block,
   because the site's own rules (reset.css: inputs with no appearance; styles.css: h2 sizes, link colours on hover)
   would otherwise leak in. assets/js/main.js moves the sliders and swaps the three views. */

#pricing-block {position: relative; z-index: 3; max-width: 1296px; margin: 21px auto 54px; box-sizing: border-box;
	padding: 28px 40px; border-radius: 3px; background: linear-gradient(90deg, #070517 0%, #0B1520 50%, #171F0B 100%);
	color: #FFFFFF; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.45;
	-webkit-font-smoothing: antialiased;}
#pricing-block *, #pricing-block *:before, #pricing-block *:after {box-sizing: border-box;}
#pricing-block [hidden] {display: none !important;}
#pricing-block p {margin: 0; padding: 0;}
#pricing-block .pb-title {margin: 0 0 20px; font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif; font-size: 24px;
	font-weight: 500; line-height: 1.2; letter-spacing: normal; color: #FFFFFF;}
#pricing-block .pb-title:focus {outline: none;} /* focused by script when its view opens, for screen readers */

/* Pricing: the sliders, a divider pointing at the price, and the price column */
#pricing-block .pb-row {display: flex; align-items: center;}
#pricing-block .pb-sliders {flex: 1 1 auto; min-width: 0; display: flex; gap: 20px 48px;}
#pricing-block .pb-slider {flex: 1 1 0; min-width: 0;}
#pricing-block .pb-label-row {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px;}
#pricing-block .pb-label {font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 500;
	line-height: 1.25; color: #FFFFFF;}
#pricing-block .pb-value {display: none; font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif; font-size: 16px;
	font-weight: 700; line-height: 1.25; color: #8ECA24;}

/* A native range input lies on top of the drawn rail, fill and thumb, invisible: it takes the clicks, drags and keys.
   Its own thumb is as wide as the drawn one and it reaches half a thumb past each end, so both thumbs stay aligned. */
#pricing-block .pb-track {position: relative; height: 44px; margin: 0 20px;}
#pricing-block .pb-range {position: absolute; z-index: 2; top: 0; left: -15px; width: calc(100% + 30px); height: 44px;
	margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; background: transparent;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;}
#pricing-block .pb-range::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 30px; height: 44px; border: 0;}
#pricing-block .pb-range::-moz-range-thumb {width: 30px; height: 44px; border: 0; border-radius: 0;}
#pricing-block .pb-rail {position: absolute; left: 0; right: 0; top: 20px; height: 5px; border-radius: 3px;
	background: rgba(170, 250, 185, 0.11);}
#pricing-block .pb-dot {display: none; position: absolute; top: 21px; width: 3px; height: 3px; margin-left: -1.5px;
	border-radius: 50%; background: rgba(255, 255, 255, 0.35);}
#pricing-block .pb-fill {position: absolute; left: 0; top: 20px; height: 5px; border-radius: 3px;
	background: linear-gradient(90deg, #322DB4 0%, #55A2F9 48%, #92D18D 80%, #8ECA24 100%);}
#pricing-block .pb-thumb {position: absolute; top: 7px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
	background: #8ECA24; transition: box-shadow 0.15s;}
#pricing-block .pb-range:focus ~ .pb-thumb {box-shadow: 0 0 0 4px rgba(142, 202, 36, 0.45);}
#pricing-block .pb-ticks {position: relative; height: 18px; margin: 2px 20px 0;}
#pricing-block .pb-ticks span {position: absolute; top: 0; transform: translateX(-50%); font-size: 14px; line-height: 18px;
	white-space: nowrap; color: #FFFFFF;}
#pricing-block .pb-ticks span.is-selected {color: #8ECA24;}
#pricing-block .pb-ends {display: none; justify-content: space-between; font-size: 12px; line-height: 16px; color: #AEB8C4;}

#pricing-block .pb-divider {flex: 0 0 14px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
	width: 14px; margin: 0 32px;}
#pricing-block .pb-line {flex: 1 1 auto; width: 1px; background: rgba(255, 255, 255, 0.13);}
#pricing-block .pb-notch-right {display: block; flex: 0 0 auto;}
#pricing-block .pb-notch-down {display: none; flex: 0 0 auto;}

#pricing-block .pb-buy {flex: 0 0 300px; min-width: 0;}
#pricing-block .pb-price {font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif; font-size: 30px; font-weight: 700;
	line-height: 1.1; color: #8ECA24;}
#pricing-block .pb-buttons {margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
#pricing-block .pb-caption {margin-top: 10px; font-size: 13px; line-height: 1.4; color: #AEB8C4;}

/* Buttons: dark text on lime (white on lime fails contrast); the outlined one is lime on the dark panel */
#pricing-block .pb-btn {display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0;
	padding: 0 12px; border: 1px solid #8ECA24; border-radius: 3px; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, border-color 0.2s;}
#pricing-block .pb-btn-fill, #pricing-block .pb-btn-fill:hover {background: #8ECA24; color: #0A111F;}
#pricing-block .pb-btn-fill:hover {background: #9BD63A; border-color: #9BD63A;}
#pricing-block .pb-btn-line, #pricing-block .pb-btn-line:hover {background: transparent; color: #8ECA24;}
#pricing-block .pb-btn-line:hover {background: rgba(142, 202, 36, 0.12);}
#pricing-block .pb-btn:disabled {opacity: 0.6; cursor: default;}
#pricing-block .pb-btn:focus-visible, #pricing-block .pb-back:focus-visible, #pricing-block .pb-note a:focus-visible
	{outline: 2px solid #FFFFFF; outline-offset: 2px;}

/* The free trial form */
#pricing-block .pb-form-head {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 8px 32px; margin-bottom: 18px;}
#pricing-block .pb-form-intro {min-width: 0; flex: 1 1 400px;}
#pricing-block .pb-form-head .pb-title, #pricing-block .pb-success .pb-title {margin: 0;}
#pricing-block .pb-subtitle {margin-top: 6px; font-size: 14px; line-height: 1.45; color: #C9D1DB;}
#pricing-block .pb-back {display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 2px;
	background: transparent; border: 0; color: #8ECA24; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px; font-weight: 500; cursor: pointer;}
#pricing-block .pb-fields {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; column-gap: 16px;
	align-items: start;}
#pricing-block .pb-field {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
#pricing-block .pb-field label {font-size: 14px; font-weight: 500; line-height: 18px; color: #FFFFFF;}
#pricing-block .pb-field input {width: 100%; height: 44px; margin: 0; padding: 0 12px; background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 3px; color: #FFFFFF; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px; line-height: normal; outline: none; box-shadow: none;}
#pricing-block .pb-field input:focus {border-color: #8ECA24;}
#pricing-block .pb-field input[aria-invalid="true"] {border-color: #FF7A7A;}
/* Browser autofill would paint the fields light: keep them dark with white text */
#pricing-block .pb-field input:-webkit-autofill {-webkit-box-shadow: 0 0 0 100px #0E1720 inset; -webkit-text-fill-color: #FFFFFF;
	caret-color: #FFFFFF;}
#pricing-block .pb-error {min-height: 18px; font-size: 13px; line-height: 18px; color: #FF7A7A;}
#pricing-block .pb-submit-cell {padding-top: 24px;}
#pricing-block .pb-submit {padding: 0 22px;}
#pricing-block .pb-form-error {margin-top: 6px; font-size: 13px; line-height: 1.45; color: #FF7A7A;}
#pricing-block .pb-form-error:empty {display: none;}
#pricing-block .pb-note {margin-top: 6px; font-size: 13px; line-height: 1.45; color: #AEB8C4;}
#pricing-block .pb-note a {color: #FFFFFF; text-decoration: underline;}
#pricing-block .pb-note a:hover {color: #8ECA24;}

/* Request received */
#pricing-block .pb-success {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;}
#pricing-block .pb-success-text {flex: 1 1 560px; min-width: 0; display: flex; align-items: flex-start; gap: 16px;}
#pricing-block .pb-success-text svg {flex: 0 0 auto;}
#pricing-block .pb-thanks {line-height: 1.25;}
#pricing-block .pb-sent {margin-top: 6px; font-size: 15px; line-height: 1.45; color: #C9D1DB;}
#pricing-block .pb-sent strong {font-weight: 500; color: #FFFFFF; overflow-wrap: anywhere;}
#pricing-block .pb-reset {padding: 0 22px;}

/* Below 1240 px: stacked, as the phone design; on tablets the content stays a phone-wide column in the middle */
@media only screen and (max-width : 1239px) {
	#pricing-block {padding: 24px 20px 28px; border-radius: 0;}
	#pricing-block .pb-view {max-width: 560px; margin: 0 auto;}
	#pricing-block .pb-title {margin-bottom: 18px; font-size: 22px;}
	#pricing-block .pb-row {display: block;}
	#pricing-block .pb-sliders {flex-direction: column; gap: 14px;}
	#pricing-block .pb-slider {flex: none;}
	#pricing-block .pb-label-row {margin-bottom: 0;}
	#pricing-block .pb-label {font-size: 16px;}
	#pricing-block .pb-value {display: block;}
	#pricing-block .pb-track {margin: 0 14px;}
	#pricing-block .pb-range {left: -14px; width: calc(100% + 28px);}
	#pricing-block .pb-range::-webkit-slider-thumb {width: 28px;}
	#pricing-block .pb-range::-moz-range-thumb {width: 28px;}
	#pricing-block .pb-dot {display: block;}
	#pricing-block .pb-thumb {top: 8px; width: 28px; height: 28px; margin-left: -14px;}
	#pricing-block .pb-ticks {display: none;}
	#pricing-block .pb-ends {display: flex;}
	#pricing-block .pb-divider {flex-direction: row; width: auto; height: 14px; margin: 18px 0 16px;}
	#pricing-block .pb-line {width: auto; height: 1px;}
	#pricing-block .pb-notch-right {display: none;}
	#pricing-block .pb-notch-down {display: block;}
	#pricing-block .pb-price {text-align: center; font-size: 26px; line-height: 1.15;}
	#pricing-block .pb-btn {min-height: 48px;}
	#pricing-block .pb-caption {text-align: center;}

	#pricing-block .pb-form-head {flex-direction: column-reverse; gap: 4px; margin-bottom: 18px;}
	#pricing-block .pb-form-intro {flex: none;}
	#pricing-block .pb-back {margin: -10px 0 0; padding: 0;}
	#pricing-block .pb-fields {display: flex; flex-direction: column; align-items: stretch; gap: 8px;}
	#pricing-block .pb-field input {height: 48px; font-size: 16px;} /* 16 px: iOS doesn't zoom into the field */
	#pricing-block .pb-submit-cell {padding-top: 0;}
	#pricing-block .pb-submit {width: 100%; margin-top: 8px;}
	#pricing-block .pb-form-error {text-align: center;}
	#pricing-block .pb-note {margin-top: 12px; text-align: center;}

	#pricing-block .pb-success {flex-direction: column; align-items: flex-start; gap: 14px;}
	#pricing-block .pb-success-text {flex: none; flex-direction: column; gap: 14px;}
	#pricing-block .pb-success .pb-thanks {font-size: 21px; line-height: 1.3;}
	#pricing-block .pb-sent {margin-top: 14px;}
	#pricing-block .pb-reset {width: 100%; margin-top: 6px;}
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }