.rubik-bubbles-regular {
  font-family: "Rubik Bubbles", system-ui;
  font-weight: 400;
  font-style: normal;
}

.kablammo-<uniquifier> {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 0;
}
@font-face {
	font-family: Roboto;
	src: url(../fonts/RobotoRegular.woff2) format("woff2"), url(../fonts/RobotoRegular.woff) format("woff");
	font-weight: 400;
	font-display: swap;
	font-style: normal
}

@font-face {
	font-family: Roboto;
	src: url(../fonts/RobotoBold.woff2) format("woff2"), url(../fonts/RobotoBold.woff) format("woff");
	font-weight: 700;
	font-display: swap;
	font-style: normal
}

html {
	box-sizing: border-box
}

*,
::after,
::before {
	box-sizing: inherit
}

body {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-weight: 400;
	color: #333;
	background-color: #fff
}

img {
	max-width: 100%
}

a {
	text-decoration: none
}

.list-reset {
	list-style: none;
	margin: 0;
	padding: 0
}

.is-outer {
	position: relative !important;
	left: -9999px !important
}

.site-container {
	overflow: hidden
}

.is-hidden {
	display: none !important
}

.for-mobile {
	display: none
}

@media (max-width:768px) {
	.for-mobile {
		display: block
	}
}

.error {
	border: 2px solid #ff4019 !important
}

.btn-reset {
	border: none;
	background: 0 0;
	cursor: pointer
}

.container {
	margin: 0 auto;
	padding: 0 15px;
	max-width: 1318px
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0)
}

.js-focus-visible :focus:not(.focus-visible) {
	outline: 0
}

.btn {
	position: relative;
	border: none;
	border-radius: 40px;
	padding: 21px 50px;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 140%;
	color: #fff;
	background: #426ee2;
	transition: background-color .3s ease-in;
	cursor: pointer
}

.btn::after {
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	border: 2px solid #426ee2;
	border-radius: 100px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	opacity: 0;
	transition: opacity .3s ease-in
}

.btn:hover {
	background-color: #234499
}

.btn:active {
	background-color: #183685
}

.btn.focus-visible:focus::after {
	opacity: 1
}

.site-title {
	margin: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 120%
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

input[type=number] {
	-moz-appearance: textfield
}

.slider-btn {
	position: relative;
	flex-shrink: 0;
	border: none;
	border-radius: 100%;
	padding: 0;
	width: 30px;
	height: 30px;
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #426ee2;
	transition: background-color .3s ease-in;
	cursor: pointer
}

.slider-btn::after {
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	border: 2px solid #426ee2;
	border-radius: 100px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	opacity: 0;
	transition: opacity .3s ease-in
}

.slider-btn:hover {
	background-color: #234499
}

.slider-btn:active {
	background-color: #1d3980
}

.slider-btn--prev {
	background-image: url(../img/prev-arrow.svg)
}

.slider-btn--next {
	background-image: url(../img/next-arrow.svg)
}

.slider-btn.focus-visible:focus::after {
	opacity: 1
}

.slider-pagination {
	position: static;
	margin: 0 15px;
	width: auto !important;
	font-weight: 400;
	font-size: 14px;
	line-height: 200%;
	color: #333
}

:focus {
	outline: 0
}

button:disabled {
	opacity: .4;
	pointer-events: none
}