* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}
body {font-family: 'Circe', sans-serif; color: #000; line-height: 1; font-size: 15px; -webkit-text-size-adjust: none; font-weight: 300}
.max {margin: 0px auto; max-width: 1680px; padding: 0 60px 0 160px}

a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
h1, h2, h3 {font-weight: 400}
h1 {line-height: 1.3; font-weight: 700; font-size: 48px}
h2 {line-height: 1.3; letter-spacing: 1px; font-weight: 300; font-size: 48px; text-transform: uppercase; margin-bottom: 20px; margin-top: 80px}

b, strong, th {font-weight: 700}
i {font-style: normal}
ul {list-style-type: none}
img {object-fit: contain}
img, svg {height: auto; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle}
iframe {width: 100%; border: none}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0px}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {display: block; width: 100%; font-size: 15px; border: 3px solid transparent; padding: 0px 20px; background: #ebebeb; line-height: 46px; height: 50px; border-radius: 5px; font-weight: 500; transition: 250ms}
textarea {display: block; width: 100%; border:2px solid transparent; padding: 25px; resize: none; height: 100px; font-size: 15px; background: #ebebeb; border-radius: 5px; font-weight: 500; transition: 250ms}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus, input[type=search]:focus {border-color: #A1AA27}

input[type=checkbox] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border:none; border: 1px solid #dadada; background: #fff}
input[type=checkbox]:hover {border-color: #E73633}
input[type=checkbox]:checked {background: url("data:image/svg+xml,<svg viewBox='0 0 356.7 297.3' xmlns='http://www.w3.org/2000/svg'><polygon points='42.4,153 0,195.4 101.9,297.3 356.7,42.4 314.3,0 101.9,212.4'/></svg>") 50% 50% no-repeat; background-size: 9px; border-color: #E73633}

input[type=radio] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border-radius: 50%; margin-left: 4px; border:none; border: 1px solid #dadada; background: #fff}
input[type=radio]:hover {border-color: #FF3D00}
input[type=radio]:checked {background: #fff; border: 4px solid #FF3D00}

select, .form-list .SumoSelect>.CaptionCont {display: block; width: 100%; font-size: 15px; font-weight: 500; border: none; border: 2px solid transparent; padding: 0px 25px; background: #ebebeb url("data:image/svg+xml,<svg viewBox='11.4 7.1' width='11.4' height='7.1' xmlns='http://www.w3.org/2000/svg'><path d='M5,6.4l-5-5L1.4,0l4.3,4.3L10,0l1.4,1.4l-5,5L5.7,7.1L5,6.4z'/></svg>") no-repeat; background-position: right 25px center; border-radius: 5px; line-height: 46px; height: 50px !important;  color: #7f7f7f; box-shadow: none !important; cursor: pointer; transition: border-color 250ms}
select:hover, .form-list .SumoSelect>.CaptionCont:hover {border-color: #E73633}

input[readonly], input[readonly]:focus {opacity: 0.5; border-color: #b3b3b3}

input.check:focus:invalid {border-bottom-color: #f10d48}
svg {fill: currentColor}
svg * {transition: fill 250ms}

::placeholder {color:#BEC0C2}
/* GLOBAL */


/* BASIC */
main {}
main.page .content {padding: 160px 0}
.hidden {display: none}
.lazy {visibility: hidden; opacity: 0; transition: 250ms}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}
.flex {display: flex; flex-wrap: wrap}
.flex.nowrap {flex-wrap: nowrap}
.flex.align-center {align-items: center}
.flex.end {justify-content: end}
.flex.center {justify-content: center}
.flex.column {flex-direction: column}
.flex.space-between {justify-content: space-between}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none}
.tablet-show {display: none}
.button {height: 50px; text-transform: uppercase; letter-spacing: 1px; border-radius: 3px; background: #222; position: relative; color: #fff; padding: 0 25px; border: 2px solid #222}
.button:hover {background: #fff; color: #222 !important}


.blend-screen {mix-blend-mode : screen; background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.circle-follow {position :absolute; background-color: #000000; width: 200px; height: 200px; border-radius: 50%; transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1); opacity: 0}
.circle-follow.moving {opacity : 1}


.background .grid {gap: 20px; display: flex}
.background .item {width: 150px; height: 150px; border-radius: 50%; border: 2px solid #000}
.equipment {margin: 100px 0}
.equipment .grid {display: grid; gap: 20px; grid-template-columns: 100%}
.equipment .item {gap: 20px}
.equipment .item span {font-size: 18px; font-weight: 600; display: block; margin-top: 10px}
.equipment .item .img {width: 150px; height: 150px; border: 2px solid #000}

header.fixed {background: #fff}
header {border-bottom: 1px solid #dadada; height: 100px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; font-size: 13px}
header:after {position: absolute; top: 0; left: 99px; height: 100%; content: ''; width: 1px; background: #dadada; z-index: 1}
header .fa-circle-arrow-down {position: absolute; left: 40px; top: 40px; font-size: 20px}
header .max {height: 100%}
header:not(.fixed) a:hover {color: #fff}
header .contacts-block .phone {font-size: 20px}
header .contacts-block {gap: 20px}
header .contacts-block .social {gap: 10px; font-size: 26px}
header .contacts-block .social a {height: 30px; width: 30px}
header .menu-block {gap: 40px; text-transform: uppercase; letter-spacing: 1px}
header .logo-block {font-weight: 700; font-size: 36px}

section {position: relative}
section h2:first-of-type {margin-top: 0}
section .num {position: absolute; top: 0; left: 0; height: 100%; padding-bottom: 80px; text-align: center; width: 100px; border-right: 1px solid #dadada; font-weight: 700; z-index: 10}
.first {position: sticky; position: -webkit-sticky; top: 0; background: url(https://avatars.mds.yandex.net/get-altay/2368846/2a00000170afb27032827e4803c4a7aaafd5/orig) no-repeat 50% 50% /cover}
.first h1 {font-size: 56px; text-transform: uppercase; font-weight: 400}
.first h2 {font-size: 32px; margin-top: 20px}
.first .inner {position: relative; z-index: 10; cursor: none}
.first .text {height: 100vh; padding-bottom: 80px}
.first .advantages {gap: 40px; margin-top: 40px}
.first .advantages .item i {font-size: 8px; display: block}
.first .advantages .item {gap: 10px}

.second {background: #222; color: #fff; padding: 80px 0}
.second .gallery {display: grid; gap: 2px; grid-template-columns: repeat(4,1fr); margin-top: 60px}
.second .gallery a img {aspect-ratio: 16/9; object-fit: cover}
.second .price {gap: 40px; margin-top: 60px}
.second .price b {font-weight: 300; font-size: 26px; display: block; margin-bottom: 10px}

.content {line-height: 1.5}
.content p + p {margin-top: 10px}

.tab-links {margin-bottom: 20px; gap: 20px; text-transform: uppercase; font-size: 18px; font-weight: 300}
.tab-link {opacity: 0.3; cursor: pointer; padding-bottom: 2px; border-bottom: 1px solid transparent}
.tab-link.active {opacity: 1; border-bottom: 1px solid #fff}
.tab:not(.active) {display: none}

.table {position: sticky; position: -sticky; top: 0; height: 100vh; background: #eee; padding: 80px 0}

@media screen and (max-width: 767px) {
	.mobile-hide {display: none !important}
	.mobile-show {display: block !important}
	header {height: 60px; border-top: 1px solid #dadada}
	header:after {display: none}
	header .fa-circle-arrow-down {left: 11px; top: 11px; font-size: 18px}
	header .logo-block {font-size: 26px}
	header .contacts-block {gap: 0}
	header .contacts-block .social {font-size: 20px; gap: 0}
	header .contacts-block .phone {font-size: 20px; width: 40px; height: 40px}
	.max {padding: 0 20px}
	h2 {font-size: 26px}
	.first h1 {font-size: 26px}
	.first h2 {font-size: 18px}
	.first .advantages .item {width: 100%}
	.first .text {height: unset; padding: 160px 0 80px 0}
	.second .gallery {grid-template-columns: repeat(2,1fr)}
	.tab-links {font-size: 16px}
	.second .price .item {width: 100%}
	.go {position: fixed; bottom: 10px; left: 10px; right: 10px; border: 1px solid #dadada}
	.first .advantages {gap: 10px}
}