/* Button */

.btn {
	display: inline-flex;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
}
.btn-large {
	padding: var(--spacing-2x-small) var(--spacing-medium);
	border-radius: var(--radius-small);
	font-size: var(--font-size-medium);
	line-height: var(--line-height-medium);
	font-weight: 500;
	letter-spacing: 0.16px;
}
.btn-medium {
	padding: var(--spacing-3x-small) var(--spacing-small);
	border-radius: var(--radius-x-small);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 500;
	letter-spacing: 0.14px;
}
.btn-primary-default:focus,
.btn-primary-outline:focus {
	outline: 1px solid var(--primary-light);
}
.btn-secondary-default:focus,
.btn-secondary-outline:focus {
	outline: 1px solid var(--secondary-light);
}
.btn-round:focus {
	outline: 1px solid var(--neutral-light);
}
.btn-primary-default,
.btn-primary-default:link,
.btn-primary-default:visited {
	background: linear-gradient(180deg, #338ADE 0%, #0063C3 100%);
	color: var(--white);
}
.btn-primary-default:hover {
	background: var(--primary-normal);
}
.btn-primary-default:active {
	background: var(--primary-dark);
}
.btn-primary-outline,
.btn-primary-outline:link,
.btn-primary-outline:visited {
	background: linear-gradient(180deg, #E6F0FB 0%, #B0D2F2 100%);
	color: var(--primary-normal);
}
.btn-primary-outline:hover {
	background: var(--primary-stroke);
}
.btn-primary-outline:active {
	background: var(--primary-light);
}

.btn-secondary-default,
.btn-secondary-default:link,
.btn-secondary-default:visited {
	background: linear-gradient(180deg, #5D6D8D 0%, #2F4267 100%);
	color: var(--white);
}
.btn-secondary-default:hover {
	background: var(--secondary-normal);
}
.btn-secondary-default:active {
	background: var(--secondary-dark);
}
.btn-secondary-outline,
.btn-secondary-outline:link,
.btn-secondary-outline:visited {
	background: linear-gradient(180deg, #EBEDF1 0%, #C0C6D3 100%);
	color: var(--secondary-normal);
}
.btn-secondary-outline:hover {
	background: var(--secondary-stroke);
}
.btn-secondary-outline:active {
	background: var(--secondary-light);
}
.btn-round,
.btn-round:link,
.btn-round:visited {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-x-large);
	font-size: var(--font-size-small);
	line-height: 36px;
	font-weight: 500;
	letter-spacing: 0.14px;
	color: var(--neutral-normal);
}
.btn-round:hover {
	background: var(--neutral-stroke);
	transition: 200ms;
}
.btn-round:active {
	background: var(--neutral-light);
}
.btn-round img {
	width: var(--size-x-small);
}


/* Cell */

.cell {
	display: flex;
	position: relative;
	width: 100%;
}
.cell label {
	position: absolute;
 	top: var(--spacing-x-small);
	left: var(--spacing-x-small);
	color: var(--neutral-normal);
 	transition: 300ms;
	pointer-events: none;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}
.cell input[type="text"],
.cell textarea {
	width: 100%;
	box-shadow: none;
	outline: none;
	border: none;
	padding: var(--spacing-small) var(--spacing-2x-small) var(--spacing-3x-small) var(--spacing-2x-small);
	border-radius: var(--radius-small);
	border: 1px solid var(--neutral-stroke);
	background-color: var(--white);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-family: 'Manrope';
}
.cell textarea {
	padding: var(--spacing-x-small)!important;
	resize: none;
}
.cell textarea::placeholder {
	color: var(--neutral-normal);
	font-weight: 300;
}
.cell input[type="text"]:focus~label,
.cell input[type="text"]:valid~label {
	top: var(--spacing-4x-small);
	left: var(--spacing-x-small);
	color: var(--neutral-dark);
	font-size: var(--font-size-x-small);
}
.cell input[type="text"]:focus,
.cell input[type="text"]:valid {
	border: 1px solid var(--neutral-light);
	padding: var(--spacing-small) var(--spacing-x-small) var(--spacing-3x-small) var(--spacing-x-small);
}
.cell textarea:focus {
	border: 1px solid var(--neutral-light);
}


/* Switch */

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-light);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--white);
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--primary-normal);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-normal);
}
input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}


/* Dropdown */

.jq-dropdown {
	position: absolute;
	display: none;
	padding: var(--spacing-3x-small);
	border-radius: var(--radius-medium);
	background: var(--white);
	box-shadow: 0px 0px 12px 0px rgba(30, 30, 32, 0.24);
	z-index: 998;
	margin-top: var(--spacing-4x-small);
}
.jq-dropdown .jq-dropdown-menu,
.jq-dropdown .jq-dropdown-panel {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4x-small);
}

.jq-dropdown .jq-dropdown-menu li {
	list-style: none;
	padding: 0 0;
	text-indent: 0;
	margin: 0;
}
.jq-dropdown .jq-dropdown-menu li a,
.jq-dropdown .jq-dropdown-menu li a:link,
.jq-dropdown .jq-dropdown-menu li a:visited {
	display: flex;
	padding: var(--spacing-4x-small) var(--spacing-2x-small);
	align-items: flex-start;
	border-radius: var(--radius-small);
	color: var(--neutral-dark);
	font-size: var(--font-size-small);
	font-weight: 500;
}
.jq-dropdown .jq-dropdown-menu li a:hover {
	background: var(--neutral-stroke);
}
.jq-dropdown .jq-dropdown-menu li a:focus {
	outline: 1px solid var(--neutral-stroke);
}
.jq-dropdown .jq-dropdown-menu li a:active {
	background: var(--neutral-light);
}


/* Header, Section */

header, section, footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--section-top);
	padding: 0 var(--sides);
}
header {
	margin-top: calc( var(--section-top) + 76px);
}
header > div, section > div, footer > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--max-width-large);
	gap: var(--section-gap);
	width: 100%;
}
header > div {
	gap: var(--hero-gap);
}
header > div > .heading, header > div .cta, section > div > .heading {
	display: flex;
	flex-direction: column;
	max-width: var(--max-width-medium);
	text-align: center;
	gap: var(--gap-small);
	align-items: center;
}
header > div > .heading p, header > div .cta p, section > div > .heading p {
	color: var(--neutral-normal);
}
header > div .content, section > div .content {
	display: flex;
	flex-direction: column;
	gap: var(--section-content-gap);
	width: 100%;
}
header > div .row, section > div .row {
	display: flex;
	gap: var(--section-content-gap);
	width: 100%;
}
header .buttons {
	display: flex;
	gap: var(--gap-medium);
}
header .heading h1 {
	color: var(--secondary-normal);
}
header .heading h1 span {
	display: block;
	color: var(--primary-normal);
}
header .xpert {
	width: 100%;
	max-width: 480px;
}
header .bps-image {
	height: var(--size-2x-large);
}
header .video {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-gap);
	width: 100%;
}
header .video > div {
	position: relative;
	width: 100%;
}
header .video > div > img {
	width: 100%;
	border-radius: var(--radius-medium);
	outline: 1px solid var(--neutral-stroke);
}
header .video .tube {
	display: block;
	position: absolute;
	top: calc(50% - var(--spacing-x-large));
	left: calc(50% - var(--spacing-x-large));
	width: var(--size-4x-large);
	height: var(--size-4x-large);
	text-indent: 999px;
	overflow: hidden;
	background-color: var(--primary-normal);
	background-image: url("../img/bps/play.svg");
	background-repeat: no-repeat;
	background-position: 52% 50%;
	border-radius: var(--radius-3x-large);
}
header .video .tube:hover, header .video .tube:active{
	background-color: var(--primary-dark);
}
header .advantages {
	display: flex;
	padding: 0 var(--block-padding);
	gap: var(--gap-large);
	width: 100%;
}
header .advantages > div{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2x-small);
	color: var(--neutral-normal);
	flex: 1 0 0;
}
header .advantages h4{
	color: var(--secondary-normal);
}

/* Controls */

.controls {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: var(--max-width-large);
	margin-bottom: var(--spacing-2x-small);
}
.controls a{
	font-weight: 500;
}

/* Article */

article {
	display: flex;
	padding: var(--block-padding);
	gap: var(--block-padding);
	border-radius: var(--radius);
	overflow: hidden;
	width: 100%;
}
article > div, article > form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 48%;
	gap: var(--block-gap);
}
article .heading {
	display: flex;
	flex-direction: column;
	gap: var(--gap-small);
}
article strong {
	color: var(--neutral-normal);
	font-weight: 500;
}
.article-default {
	background-color: var(--white);
	outline: 1px solid var(--neutral-stroke);
}
.article-primary {
	background-color: var(--primary-surface);
	outline: 1px solid var(--primary-surface);
}
.article-neutral {
	background-color: var(--neutral-surface);
}
.article-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--radius-large);
}
.article-image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}


/* Block */

.block {
	display: flex;
	flex-direction: column;
	padding: var(--block-padding);
	gap: var(--block-gap);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--white);
	outline: 1px solid var(--neutral-stroke);
	flex: 1 0 0;
	text-align: left;
}
.block .header {
	display: flex;
	gap: var(--gap-small);
}
.block figure {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 64px;
}
.block strong {
	color: var(--neutral-normal);
	font-weight: 500;
}
.block .heading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-4x-small);
	padding: var(--spacing-4x-small) 0;
	flex: 1 0 0;
	word-break: break-word;
}
.block .heading p {
	color: var(--neutral-normal);
	font-weight: 500;
}
.block .text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3x-small);
}
.block ul , .paragraph ul{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3x-small);
	text-align: left;
	padding-left: var(--spacing-x-small);
}
.block ul p, .paragraph ul p, .paragraph ul strong{
	margin-left: -1rem;
}
.block ul li::marker, .paragraph ul li::marker {
  color: var(--neutral-light);
}
.block-primary ul li::marker {
  color: var(--primary-light);
}
.block-secondary ul li::marker {
  color: var(--secondary-light);
}
.block-primary figure {
	background-image: url("../img/xpert/block-primary-bg.svg");
	background-repeat: no-repeat;
}
.block-secondary figure {
	background-image: url("../img/xpert/block-secondary-bg.svg");
	background-repeat: no-repeat;
}
.block-default {
	background-color: var(--neutral-surface);
	outline: none;
}
.block-default .heading p, .block-default .text {
	color: var(--neutral-dark);
}
.grow{
	flex-grow: 2;
}
.block .right {
	text-align: right;
}

/* Pointer */

.pointer {
	cursor: pointer;
}
.pointer:hover {
	background-color: var(--primary-superlight);
	outline: 1px solid var(--primary-stroke);
	transition: 200ms;
}
.pointer:active {
	background-color: var(--primary-surface);
	outline: 1px solid var(--primary-stroke);
	transition: 200ms;
}


/* Info */

.info {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--block-padding);
	gap: var(--block-gap);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--white);
	outline: 1px solid var(--neutral-stroke);
	flex: 1 0 0;
}
.info img {
	max-width: 100%;
}