/*---------Colors---------------*/
:root {
--color-accent: #DEDD05;
--color-black: #22252A;
--color-grey: #3B3E43;
--color-brown:#AFA89F;
--color-grey-light:#53565a;
--color-grey-white:#c5cacf;
--color-white: #FFF;
--color-green: #3AB546;
--color-blue: #00C2FF;
--color-yellow: yellow;
--color-bg-white:#F2F0E5;
--shadow:0px 0px 20px rgb(0 0 0 / 10%);
}
/*---------Main-----------------*/
body {
font-family: 'VictorMono','SF';
color:var(--color-black);background:var(--color-bg-white);
font-weight:400;font-size:16px;line-height:160%;
letter-spacing: -0.2px;
-webkit-font-smoothing: subpixel-antialiased;
}
p{margin:0 0 15px 0}
img{display:block;width:100%;}
/*Скролл*/
body{scrollbar-width:thin;} /*Firefox*/
::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-track {display:none;}
::-webkit-scrollbar-track-piece {background-color:transparent;}
::-webkit-scrollbar-thumb {background-color:var(--color-black);}
::-webkit-scrollbar-corner {display:none;}}
::-webkit-resizer {display:none;}
/*Анимация мерцающего фона*/
/*body:before{top:-10rem;left:-10rem;width:calc(100% + 20rem);height:calc(100% + 20rem);content:'';z-index:-1;position:fixed;pointer-events:none;background-position:50%;background-image:url(/upload/icon/bg.png);pointer-events:none;animation:noise 1s steps(2) infinite}
@keyframes noise{0{transform:translate3d(0,9rem,0)}10%{transform:translate3d(-1rem,-4rem,0)}20%{transform:translate3d(-8rem,2rem,0)}30%{transform:translate3d(9rem,-9rem,0)}40%{transform:translate3d(-2rem,7rem,0)}50%{transform:translate3d(-9rem,-4rem,0)}60%{transform:translate3d(2rem,6rem,0)}70%{transform:translate3d(7rem,-8rem,0)}80%{transform:translate3d(-9rem,1rem,0)}90%{transform:translate3d(6rem,-5rem,0)}to{transform:translate3d(-7rem,0,0)}}*/
/*Анимация перехода black*/
/*html {background: var(--color-black);}
body {animation:body 0.7s;background: var(--color-white);}
@keyframes body {0% {opacity:0;background: #000;} 100% {opacity:1;}}*/
/*Анимация перехода*/
body{animation:body 0.7s;}
@keyframes body {0% {opacity:0;} 100% {opacity:1;}}
/*---------RU/EN----------------*/
.lang {margin-right:5px;border:1px solid var(--color-grey-white);border-radius:28px;display:flex;justify-content:center;align-items:center;}
.lang a {transition:0.3s; padding:0 9px;font-size:10px;line-height:28px;margin:2px;border-radius:28px;}
.lang a.active {background: var(--color-black);color: var(--color-white);}
.lang a:hover {transition:0.3s; background: var(--color-accent);color: var(--color-white);}
@media (max-width:768px){
.lang {border-radius:24px;}
.lang a {padding:0 7px;font-size:9px;line-height:24px;margin:2px;border-radius:24px;}
}
/*---------Colors BG------------*/
.bg-accent {background: var(--color-accent);color: var(--color-white);}
.bg-black {background: var(--color-black);color: var(--color-white);}
.bg-grey {background: var(--color-grey);color: var(--color-white);}
.bg-brown {background: var(--color-brown);}
/*Фоновое изображение*/
.bg {width:100%;background-repeat:no-repeat !important;background-size:cover !important;background-attachment:inherit !important;background-position:50% 50% !important;}
/*Позиция фона*/
.bg-1{background-position:10% 0%;}
.bg-2{background-position:20% 0%;}
.bg-3{background-position:30% 0%;}
.bg-4{background-position:40% 0%;}
.bg-5{background-position:50% 0%;}
.bg-6{background-position:60% 0%;}
.bg-7{background-position:70% 0%;}
.bg-8{background-position:80% 0%;}
.bg-9{background-position:90% 0%;}
.bg-10{background-position:100% 0%;}
@media (max-width: 768px){
.bg-mobile-1{background-position:10% 0%;}
.bg-mobile-2{background-position:20% 0%;}
.bg-mobile-3{background-position:30% 0%;}
.bg-mobile-4{background-position:40% 0%;}
.bg-mobile-5{background-position:50% 0%;}
.bg-mobile-6{background-position:60% 0%;}
.bg-mobile-7{background-position:70% 0%;}
.bg-mobile-8{background-position:80% 0%;}
.bg-mobile-9{background-position:90% 0%;}
.bg-mobile-10{background-position:100% 0%;}
}
/*---------Cursor---------------*/
/*html {cursor:none;}
.cursor {display: none;}
@media (any-pointer: fine) {
.cursor { display:block;height:5px;width:5px;border-radius:50%;background:#000;position:fixed;pointer-events:none;z-index:999999999;}
.cursor::after {backdrop-filter: invert(1);height:19px;width:19px;border-radius:50%;transform: translate(-7px, -7px); transition-duration:150ms;top:inherit;left:inherit;content:"";position:inherit;transition-timing-function:ease-out;pointer-events: none;}
.cursor.active {background:transparent;}
.cursor.active::after{transition-duration:150ms;width:50px;height:50px;transform:translate(-24px, -24px);}
для FireFox @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.cursor::after {border:1px solid rgb(0 0 0 / 60%);}
.cursor.active::after {border:1px solid var(--color-accent);}
}
}*/
.cursor {display: none;}
@media (any-pointer: fine) {
.cursor {transition-duration:150ms; opacity:1;transform:translate(-50%, -50%);display:block;height:8px;width:8px;border-radius:50%;position:fixed;pointer-events:none;z-index:999999 !important;}
.cursor.active {cursor: pointer; border-radius:100%;transform:translate(-50%, -50%);background:none !important;}
.cursor.active:after{animation:cursorActive 2s ease infinite;border:3px solid var(--color-accent);content:"";position:absolute;z-index:0;top:50%;left:50%;width:30px;height:30px;border-radius:100%;transform:translate(-50%,-50%);}
@keyframes cursorActive{0%{width:0px;height:0px;opacity:1}100%{width:60px;height:60px;opacity:0}}
/*тяни*/
.cursor .pull {display: none; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:60px;height:60px;background:var( --color-black);color:var( --color-white);font-weight:300;border-radius:100%;align-items:center;justify-content:center;}
}
/*---------Прилепающее img------*/
.hover-img {cursor: pointer;display:inline-block;}
.hover-img .img {position:fixed;z-index:-1;overflow:hidden;width:0px;transition:all 1.6s cubic-bezier(0.16, 1, 0.3, 1),width .3s;}
.hover-img .img img{width:200px;min-width:200px;}
.hover-img:hover .img{position:fixed; width:200px;}
/*---------Fonts----------------*/
/*Gilroy
@font-face {
font-family: 'Gilroy';
src: url('/upload/fonts/Gilroy/Gilroy-Regular.eot');
src: local('/upload/fonts/Gilroy/Gilroy Regular'), local('Gilroy-Regular'),
url('/upload/fonts/Gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/Gilroy/Gilroy-Regular.woff') format('woff'),
url('/upload/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('/upload/fonts/Gilroy/Gilroy-Medium.eot');
src: local('/upload/fonts/Gilroy/Gilroy Medium'), local('Gilroy-Medium'),
url('/upload/fonts/Gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/Gilroy/Gilroy-Medium.woff') format('woff'),
url('/upload/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('/upload/fonts/Gilroy/Gilroy-SemiBold.eot');
src: local('/upload/fonts/Gilroy/Gilroy SemiBold'), local('Gilroy-SemiBold'),
url('/upload/fonts/Gilroy/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/Gilroy/Gilroy-SemiBold.woff') format('woff'),
url('/upload/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}*/
/*RF
@font-face {
font-family: 'RF';
src: url('/upload/fonts/RF/RFDewiExpanded-Semibold.eot');
src: local('/upload/fonts/RF/RF Semibold'), local('RFDewiExpanded-Semibold'),
url('/upload/fonts/RF/RFDewiExpanded-Semibold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/RF/RFDewiExpanded-Semibold.woff') format('woff'),
url('/upload/fonts/RF/RFDewiExpanded-Semibold.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'RF';
src: url('/upload/fonts/RF/RFDewiExpanded-Bold.eot');
src: local('/upload/fonts/RF/RF Bold'), local('RFDewiExpanded-Bold'),
url('/upload/fonts/RF/RFDewiExpanded-Bold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/RF/RFDewiExpanded-Bold.woff') format('woff'),
url('/upload/fonts/RF/RFDewiExpanded-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}*/
/*SanFrancisco
@font-face {
font-family: 'SF';
src: url('/upload/fonts/SanFrancisco/SFProDisplay-Ultralight.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Ultralight'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Ultralight'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Ultralight.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Ultralight.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Ultralight.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'SF';
src: url('/upload/fonts/SanFrancisco/SFProDisplay-Thin.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Thin'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Thin'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Thin.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Thin.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Thin.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'SF';
src: url('/upload/fonts/SanFrancisco/SFProDisplay-Light.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Light'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Light'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Light.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}*/
@font-face {
font-family: 'SF';
src: url('/upload/fonts/SanFrancisco/SFProDisplay-Regular.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Regular'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Regular.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* @font-face {
font-family: 'SF';
src: url('/upload/fonts/SanFrancisco/SFProDisplay-Medium.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Medium'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Medium'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Medium.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'SF'; src: url('/upload/fonts/SFProDisplay-Semibold.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Semibold'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Semibold'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Semibold.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'SF';
src: url('/upload/fonts/SFProDisplay-Bold.eot');
src: local('/upload/fonts/SanFrancisco/SFProDisplay Bold'),
local('/upload/fonts/SanFrancisco/SFProDisplay-Bold'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Bold.woff') format('woff'),
url('/upload/fonts/SanFrancisco/SFProDisplay-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}*/
/*HelveticaNeueCyr
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Roman.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Roman'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Roman.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Roman.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-LightItalic.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-LightItalic'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-LightItalic.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-LightItalic.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Italic.eot');
src: local('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Italic'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Italic.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Italic.woff') format('woff'),
url('/upload/fonts/HelveticaNeueCyr/HelveticaNeueCyr-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}*/
/*VictorMono*/
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-Thin.eot');
src: local('/upload/fonts/VictorMono/VictorMono-Thin'),
url('/upload/fonts/VictorMono/VictorMono-Thin.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-Thin.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-ExtraLight.eot');
src: local('/upload/fonts/VictorMono/VictorMono-ExtraLight'),
url('/upload/fonts/VictorMono/VictorMono-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-ExtraLight.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-Light.eot');
src: local('/upload/fonts/VictorMono/VictorMono-Light'),
url('/upload/fonts/VictorMono/VictorMono-Light.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-Light.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-Regular.eot');
src: local('/upload/fonts/VictorMono/VictorMono-Regular'),
url('/upload/fonts/VictorMono/VictorMono-Regular.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-Regular.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-Medium.eot');
src: local('/upload/fonts/VictorMono/VictorMono-Medium'),
url('/upload/fonts/VictorMono/VictorMono-Medium.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-Medium.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'VictorMono';
src: url('/upload/fonts/VictorMono/VictorMono-Bold.eot');
src: local('/upload/fonts/VictorMono/VictorMono-Bold'),
url('/upload/fonts/VictorMono/VictorMono-Bold.eot?#iefix') format('embedded-opentype'),
url('/upload/fonts/VictorMono/VictorMono-Bold.woff') format('woff'),
url('/upload/fonts/VictorMono/VictorMono-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
/*---------AJAX preloader-------*/
.ajax-preloader {display:none;animation:ajax-preloader 2s infinite;position:fixed;top:0;left:0;width:0%;height:5px;z-index:999;background:var(--color-accent);}
@keyframes ajax-preloader { 0% {width: 0%;} 50% {width:100%;left:0;} 100% {width:0%;left:100%;} }
/*---------Preloader------------*/
.preloader-container{position:fixed;top:0;left:0;overflow:hidden;height:100%;width:100vw;transition:0.7s;background:var(--color-bg-white);z-index:99999;}
.preloader {transition:0.7s;min-width:100vw;position:absolute;left:0;top:0;width:100%;height:100%;}
.load {width:250px;height:44px;z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.logo-animate {width:0%;transition:0.7s;position:absolute;overflow:hidden;}
.logo-animate img{width:150px;max-width:inherit;}
@media (max-width: 768px){
.load {width:200px;height:37px;}
.logo-animate img{width:100px;max-width:inherit;}
}
/*---------Preloader IMG--------*/
/*.img-load {
min-height:500px;
animation:img-load 5s infinite linear;
background: linear-gradient(to right, #eeeeee 20%, #ddd 30%, #eeeeee 50%);
background-size: 400%;
}
@keyframes img-load {
0% {background-position: 200% 0%;}
100% {background-position: -200% 0%;}
}*/
/*---------Scroll Up------------*/
.scroll-up {cursor:pointer;width:40px;height:40px;border-radius:100%;background:#000;position:fixed;right:15px;bottom:30px;z-index:999;}
.scroll-up:before{width:7px;height:7px;content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-40%) rotate(45deg);border-left:2px solid var(--color-white);border-top:2px solid var(--color-white);}
@media (max-width:768px){}
/*---------Мессенджеры----------*/
.telegram {display:block;position:fixed;bottom:175px;right:15px;width:40px;height:40px;z-index:99;}
.max {display:block;position:fixed;bottom:130px;right:15px;width:40px;height:40px;z-index:99;}
/*---------Text/Title-----------*/
/*Title*/
.h1 {font-size:30px;font-weight:500;margin:0 0 15px 0;line-height:140%;letter-spacing:-0.9px;}
.h2 {font-size:22px;font-weight:500;margin:0 0 15px 0;line-height:150%;letter-spacing:-0.8px;}
.h3 {font-size:18px;font-weight:500;margin:0 0 15px 0;line-height:160%;letter-spacing:-0.8px;}
.h4 {font-size:16px;font-weight:500;margin:0 0 15px 0;line-height:160%;letter-spacing:-0.6px;}
.h5 {font-size:14px;font-weight:500;margin:0 0 15px 0;line-height:160%;}
.h6 {font-size:12px;font-weight:500;margin:0 0 15px 0;line-height:160%;}
.subtitle {font-size:11px;letter-spacing:2px;line-height:100%;text-transform: uppercase;}
.white .h1,.white.h1,
.white .h2,.white.h2,
.white .h3,.white.h3,
.white .h4,.white.h4,
.white .h5,.white.h5,
.white .h6,.white.h6
{font-weight:200;}
.caps {text-transform: uppercase;}
.opacity50 {opacity: 0.5;}
.opacity60 {opacity: 0.6;}
/*ios*/
/*.ios .h1, .ios .h2{font-weight:200;}
.subtitle {font-weight:400;}*/
@media (max-width:768px){
.h1 {font-size:22px;}
.h2 {font-size:20px;}
.h3 {font-size:18px;}
.h4 {font-size:16px;}
.h5 {font-size:14px;}
.h6 {font-size:12px;}
}
@media (min-width:1900px){
/*body {font-size:18px;}
.h1 {font-size:56px;}
.h2 {font-size:40px;}
.h3 {font-size:30px;}
.h4 {font-size:22px;}
.h5 {font-size:20px;}
.h6 {font-size:18px;}
.subtitle {font-size:14px;}*/
}
/*Text*/
.t1 {font-size:18px;margin:0 0 15px 0;line-height:160%;}
.t2 {font-size:14px;margin:0 0 15px 0;line-height:160%;}
@media (max-width:768px){
.t1 {font-size:16px;}
/*.t2 {font-size:12px;}*/
}
@media (min-width:1900px){
/*.t1 {font-size:22px;}
.t2 {font-size:18px;}*/
}
/*Colors*/
.accent {color:var(--color-accent);}
.black {color:var(--color-black);}
.white {color: var(--color-white);font-weight:200;}
.grey {color:var(--color-grey);}
.grey-light {color:var(--color-grey-light);}
.grey-white {color: var(--color-grey-white);}
/*Position*/
.text-center{text-align:center;margin-left:auto; margin-right:auto;}
.text-right {text-align:right; margin-left:auto;}@media(max-width:768px){.text-right{text-align:left; margin-left:inherit;}}
.text-left {text-align: left}
/*weight*/
.fw600 {font-weight: 600;}
/*---------Разделители----------*/
.divider-grey {display:block;border-bottom:1px solid var(--color-grey-light);}
.divider-white {display:block;border-bottom:1px solid var(--color-white);}
/*---------ul-------------------*/
/*Список с точками*/
.ul-dots {margin:0;padding:0;list-style:none; margin-bottom:15px;}
.ul-dots li{margin:4px 0;}
.ul-dots li:before {margin:0 10px 0.3vw 0;background:var(--color-accent);content: '';position: relative;display:inline-block;width:4px;height:4px;border-radius:100%;}
/*Список с цифрами*/
.ul-num {margin:0;padding:0;list-style:none; counter-reset: counter;}
.ul-num li{margin:10px 0 10px 30px; counter-increment: counter;}
.ul-num li:before {content:'0' counter(counter);color:var(--color-accent); position:absolute;left:15px;margin-top:0.9%;font-size:75%;font-weight:500; text-align:center;line-height:100%;}
.ul-num li:nth-child(n+10):before {content:''counter(counter);}
/*---------Buttons--------------*/
/* Кнопка текстом
*/
.btn {background:var(--color-accent);width:fit-content;display:inline-block;padding:0 20px;line-height:38px;margin-right:55px;position:relative;}
.btn:after {right:-55px;width:50px;height:38px;content:url(/upload/icon/black/arrow-btn.svg); display:inline-block;background:#fff;text-align:center;position:absolute;}
.btn div {font-size:14px;line-height:120%; display:inline-flex;position:relative;overflow:hidden;cursor:pointer;}
.btn div i{font-style: normal;display:inline-block;color:rgb(0 0 0 / 0%);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.btn div i:after,.btn div i:before{color:var(--color-black); content:attr(data-text);display:block;position:absolute;}
.btn div i:before{top:0;transform:skewY(0);transform-origin:right bottom;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn div i:after{top:105%;transform:skewY(10deg);transform-origin:left top;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn:hover div i{transform:translateY(-105%);}
.btn:hover div i:before{transform:skewY(10deg);}
.btn:hover div i:after{transform:skewY(0);}
.btn:hover {background:var(--color-accent);}
.btn.brown {background: var(--color-brown);}
.btn.black {background: var(--color-grey);}
.btn.black div i:after, .btn.black div i:before {color: var(--color-white);font-weight: 200;}
/* Кнопка текстом
Button
*/
/*.btn-text {font-size:24px;line-height:120%; display:inline-flex;position:relative;overflow:hidden;cursor:pointer;}
.btn-text i{font-style: normal;display:inline-block;color:rgb(0 0 0 / 0%);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.btn-text i:after,.btn-text i:before{color:var(--color-black); content:attr(data-text);display:block;position:absolute;}
.btn-text i:before{top:0;transform:skewY(0);transform-origin:right bottom;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn-text i:after{top:105%;transform:skewY(10deg);transform-origin:left top;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn-text:hover i{transform:translateY(-105%);}
.btn-text:hover i:before{transform:skewY(10deg);}
.btn-text:hover i:after{transform:skewY(0);}*/
/* Кнопка с заливкой
Button
*/
/*.btn-black {position:relative;border-radius:44px;border:1px solid var(--color-grey-white);height:44px;white-space:nowrap;font-size:14px;padding:0 20px;transform:translateZ(0);transition:transform .3s;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:auto;cursor:pointer;}
.btn-black:hover {transform:scaleX(1.05);transition:transform .6s cubic-bezier(.34,5.56,.64,1)}*/
/*заливка*/
/*.btn-black:before {background:var(--color-black); content:'';position:absolute;overflow:hidden;width:100%;height:100%;transform:translateY(101%);border-radius:50% 50% 0 0;transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1);}
.btn-black:hover:before {border-radius:0;transform:translateY(0);transition-duration:.5s,.9s;}*/
/*текст*/
/*.btn-black .title {position:relative;display:block;overflow:hidden;z-index:2}
.btn-black .title span{display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.btn-black .title span:after{color:var(--color-white); content:attr(data-text);display:block;position:absolute;top:110%;left:0;}
.btn-black:hover .title span {transform:translateY(-110%);}
.btn-white {position: relative; border-radius:44px;border:1px solid var(--color-white);color: var(--color-white); height:44px;font-size:14px;padding:0 20px;transform:translateZ(0);transition:transform .3s;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:auto;cursor:pointer;}
.btn-white:hover {border:1px solid var(--color-black); transform:scaleX(1.05);transition:transform .6s cubic-bezier(.34,5.56,.64,1)}*/
/*заливка*/
/*.btn-white:before {background: var(--color-black); content:'';position:absolute;overflow:hidden;width:100%;height:100%;transform:translateY(101%);border-radius:50% 50% 0 0;transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1);}
.btn-white:hover:before {border-radius:0;transform:translateY(0);transition-duration:.5s,.9s;}*/
/*текст*/
/*.btn-white .title {position:relative;display:block;overflow:hidden;z-index:2}
.btn-white .title span{display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.btn-white .title span:after{color:var(--color-white);font-weight:200; content:attr(data-text);display:block;position:absolute;top:110%;left:0;}
.btn-white:hover .title span {transform:translateY(-110%);}*/
/*---------Buttons dop----------*/
/*Иконка закрыть*/
.btn-close-white, .btn-close-black {margin-right:10px;/*border:2px solid var(--color-accent);*/border-radius:100%;position:relative;width:40px;height:40px;cursor:pointer;display:inline-block}
.btn-close-white:before, .btn-close-black:before{content:"";position:absolute;margin:auto;top:50%;left:0;right:0;width:2px;height:25px;transform:translate(0,-50%) rotate(135deg)}
.btn-close-white:after, .btn-close-black:after{content:"";position:absolute;margin:auto;top:50%;left:0;right:0;width:2px;height:25px;transform:translate(0,-50%) rotate(45deg)}
.btn-close-white:before, .btn-close-white:after {background:var(--color-white);}
.btn-close-black:before, .btn-close-black:after {background:var(--color-black);}
/* Кнопка назад
*/
.btn-back {background:var(--color-white);width:fit-content;display:inline-block;padding:0 20px;line-height:38px;margin-left:55px;position:relative;}
.btn-back:before {left:-55px;width:50px;height:38px;line-height:35px;content:url(/upload/icon/black/arrow-btn.svg);background:var(--color-accent);text-align:center;position:absolute;transform:scale(-1);}
.btn-back div {font-size:14px;line-height:120%; display:inline-flex;position:relative;overflow:hidden;cursor:pointer;}
.btn-back div i{font-style: normal;display:inline-block;color:rgb(0 0 0 / 0%);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.btn-back div i:after,.btn-back div i:before{color:var(--color-black); content:attr(data-text);display:block;position:absolute;}
.btn-back div i:before{top:0;transform:skewY(0);transform-origin:right bottom;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn-back div i:after{top:105%;transform:skewY(10deg);transform-origin:left top;transition:transform 2s cubic-bezier(.19,1,.22,1)}
.btn-back:hover div i{transform:translateY(-105%);}
.btn-back:hover div i:before{transform:skewY(10deg);}
.btn-back:hover div i:after{transform:skewY(0);}
.btn-back:hover {background:var(--color-white);}
/*Иконка назад*/
/*.btn-back-white, .btn-back-black {margin-right:10px;border:2px solid var(--color-accent);border-radius:100%;position:relative;width:40px;height:40px;cursor:pointer;display:inline-block}
.btn-back-white:before, .btn-back-black:before{content:"";position:absolute;margin:auto;top:50%;left:0;right:0;width:7px;height:7px;transform:translate(0%,-50%) rotate(135deg);}
.btn-back-white:before, .btn-back-white:after {border-right:2px solid var(--color-white); border-bottom:2px solid var(--color-white);}
.btn-back-black:before, .btn-back-black:after {border-right:2px solid var(--color-black); border-bottom:2px solid var(--color-black);}*/
/*Prev / Next*/
.btn-next,.btn-prev {cursor:pointer; display:inline-flex;width:50px;height:38px;background:var(--color-grey);align-items:center;justify-content:center;}
.btn-next:before, .btn-prev:before {height:38px;line-height:35px;content:url(/upload/icon/white/arrow-btn.svg);text-align:center;position:absolute;}
.btn-prev {margin-right: 5px;}
.btn-prev:before {transform:scale(-1);}
/*.btn-next.white:before, .btn-prev.white:before {opacity:0.6;background:url(/upload/icon/white/arrow-btn.svg);background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
.btn-next.white:hover:before, .btn-prev.white:hover:before {opacity:1;}*/
/*---------Space----------------*/
.space-15px {height: 15px;}
.space-30px {height:30px;}
.space-60px {height:60px;}
.space-90px {height:90px;}
.space-120px {height:120px;}
.space-150px {height:150px;}
.space-180px {height:180px;}
@media(max-width:767px){
.space-60px{height:30px;}
.space-90px{height:30px;}
.space-120px{height:30px;}
.space-150px{height:30px;}
.space-180px{height:30px;}
}
/*Только для мобильных*/
@media(max-width:767px){
.mobile-space-15px{height:15px;}
.mobile-space-30px{height:30px;}
.mobile-space-60px{height:60px;}
.mobile-space-90px{height:90px;}
}
/*---------Padding / Margin-----*/
.mr-15px {margin-right: 15px !important;}
.mr-30px {margin-right: 30px !important;}
.ml-15px {margin-left: 15px !important}@media(max-width:767px){.ml-15px {margin-left:inherit;}}
.ml-30px {margin-left: 30px !important}@media(max-width:767px){.ml-30px {margin-left:inherit;}}
.pt-0px {padding-top:0px;}
.pt-5px {padding-top:5px;}
.pt-10px {padding-top:10px;}
.pt-15px {padding-top:15px;}
.pt-30px {padding-top:30px;}
.pt-45px {padding-top:45px;}@media(max-width:767px){.pt-45px{padding-top:30px;}}
.pt-60px {padding-top:60px;}@media(max-width:767px){.pt-60px{padding-top:30px;}}
.pt-90px {padding-top:90px;}@media(max-width:767px){.pt-90px{padding-top:30px;}}
.pt-120px {padding-top:120px;}@media(max-width:767px){.pt-120px{padding-top:30px;}}
.pt-150px {padding-top:150px;}@media(max-width:767px){.pt-150px{padding-top:30px;}}
.pt-180px {padding-top:180px;}@media(max-width:767px){.pt-180px{padding-top:30px;}}
.pt-210px {padding-top:210px;}@media(max-width:767px){.pt-210px{padding-top:30px;}}
@media (min-width:1900px){
.pt-60px {padding-top:75px;}
.pt-90px {padding-top:105px;}
.pt-120px {padding-top:135px;}
.pt-150px {padding-top:165px;}
.pt-180px {padding-top:195px;}
.pt-210px {padding-top:225px;}
}
.pb-0px {padding-bottom:0px;}
.pb-5px {padding-bottom:5px;}
.pb-10px {padding-bottom:10px;}
.pb-15px {padding-bottom:15px;}
.pb-30px {padding-bottom:30px;}
.pb-45px {padding-bottom:45px;}@media(max-width:767px){.pb-45px{padding-bottom:30px;}}
.pb-60px {padding-bottom:60px;}@media(max-width:767px){.pb-60px{padding-bottom:30px;}}
.pb-90px {padding-bottom:90px;}@media(max-width:767px){.pb-90px{padding-bottom:30px;}}
.pb-120px {padding-bottom:120px;}@media(max-width:767px){.pb-120px{padding-bottom:30px;}}
.pb-150px {padding-bottom:150px;}@media(max-width:767px){.pb-150px{padding-bottom:30px;}}
.pb-180px {padding-bottom:180px;}@media(max-width:767px){.pb-180px{padding-bottom:30px;}}
.pb-210px {padding-bottom:210px;}@media(max-width:767px){.pb-210px{padding-bottom:30px;}}
@media (min-width:1900px){
.pb-60px {padding-bottom:75px;}
.pb-90px {padding-bottom:105px;}
.pb-120px {padding-bottom:135px;}
.pb-150px {padding-bottom:165px;}
.pb-180px {padding-bottom:195px;}
.pb-210px {padding-bottom:225px;}
}
.mt-0px {margin-top:0px;}
.mt-5px {margin-top:5px;}
.mt-10px {margin-top:10px;}
.mt-15px {margin-top:15px;}
.mt-30px {margin-top:30px;}
.mt-45px {margin-top:45px;}@media(max-width:767px){.mt-45px{margin-top:30px;}}
.mt-60px {margin-top:60px;}@media(max-width:767px){.mt-60px{margin-top:30px;}}
.mt-75px {margin-top:75px;}@media(max-width:767px){.mt-75px{margin-top:30px;}}
.mt-90px {margin-top:90px;}@media(max-width:767px){.mt-90px{margin-top:30px;}}
.mt-120px {margin-top:120px;}@media(max-width:767px){.mt-120px{margin-top:30px;}}
.mt-150px {margin-top:150px;}@media(max-width:767px){.mt-150px{margin-top:30px;}}
.mt-180px {margin-top:180px;}@media(max-width:767px){.mt-180px{margin-top:30px;}}
.mt-210px {margin-top:210px;}@media(max-width:767px){.mt-210px{margin-top:30px;}}
@media (min-width:1900px){
.mt-60px {margin-top:75px;}
.mt-75px {margin-top:90px;}
.mt-90px {margin-top:105px;}
.mt-120px {margin-top:135px;}
.mt-150px {margin-top:165px;}
.mt-180px {margin-top:195px;}
.mt-210px {margin-top:225px;}
}
.mb-0px {margin-bottom:0px;}
.mb-5px {margin-bottom:5px;}
.mb-10px {margin-bottom:10px;}
.mb-15px {margin-bottom:15px;}
.mb-30px {margin-bottom:30px;}
.mb-45px {margin-bottom:45px;}@media(max-width:767px){.mb-45px{margin-bottom:30px;}}
.mb-60px {margin-bottom:60px;}@media(max-width:767px){.mb-60px{margin-bottom:30px;}}
.mb-75px {margin-bottom:75px;}@media(max-width:767px){.mb-75px{margin-bottom:30px;}}
.mb-90px {margin-bottom:90px;}@media(max-width:767px){.mb-90px{margin-bottom:30px;}}
.mb-120px {margin-bottom:120px;}@media(max-width:767px){.mb-120px{margin-bottom:30px;}}
.mb-150px {margin-bottom:150px;}@media(max-width:767px){.mb-150px{margin-bottom:30px;}}
.mb-180px {margin-bottom:180px;}@media(max-width:767px){.mb-180px{margin-bottom:30px;}}
.mb-210px {margin-bottom:210px;}@media(max-width:767px){.mb-210px{margin-bottom:30px;}}
@media (min-width:1900px){
.mb-60px {margin-bottom:75px;}
.mb-75px {margin-bottom:90px;}
.mb-90px {margin-bottom:105px;}
.mb-120px {margin-bottom:135px;}
.mb-150px {margin-bottom:165px;}
.mb-180px {margin-bottom:195px;}
.mb-210px {margin-bottom:225px;}
}
/*---------Max Width------------*/
.max-200px {max-width: 200px;}
.max-250px {max-width: 250px;}
.max-300px {max-width: 300px;}
.max-350px {max-width: 350px;}
.max-400px {max-width: 400px;}
.max-450px {max-width: 450px;}
.max-500px {max-width: 500px;}
.max-550px {max-width: 550px;}
.max-600px {max-width: 600px;}
.max-650px {max-width: 650px;}
.max-700px {max-width: 700px;}
.max-750px {max-width: 750px;}
.max-800px {max-width: 800px;}
.max-10 {max-width: 10%;}
.max-20 {max-width: 20%;}
.max-30 {max-width: 30%;}
.max-40 {max-width: 40%;}
.max-50 {max-width: 50%;}
.max-60 {max-width: 60%;}
.max-70 {max-width: 70%;}
.max-80 {max-width: 80%;}
.max-90 {max-width: 90%;}
/*---------Forms----------------*/
/*Общие стили*/
div[id^="wait-comp-"]{ display: none;} /*bitrix*/
form {position:relative;width:100%;}
textarea,
input,
input:hover,
input:focus,
input:active{font-family:'VictorMono';padding:15px 20px;cursor:pointer;display:block;}
textarea::placeholder,
input::placeholder {font-size: 14px; color: var(--color-grey);}
textarea {min-height:150px;font-size:14px;line-height:140%;}
@media(max-width:768px){
input,input:hover,input:focus,input:active{padding:10px 15px;}
textarea {min-height:100px;}
}
/*Автозаполнение*/
input::auto-fill {background: var(--color-white);}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--color-white) inset !important;}
input[type="text"] {}
input[type="password"] {}
input[type="submit"] {}
/*Инпуты ошибки*/
form [data-name] >* {border:1px solid var(--color-grey-white);}
form .error >* {border:1px solid red;background: color(srgb 1 0 0 / 0.01);}
/*Кнопка формы*/
form [type=submit] {transition:0.3s;background:var(--color-accent);color:var(--color-black);font-weight:400;width:100%;border-radius:0px;font-size:14px;padding:15px 20px;white-space:nowrap;cursor:pointer;border:none;}
/*Анимация кнопки отправки*/
form [type=submit].active {position:relative;display:inline-block;cursor:auto;}
form [type=submit].active:before {
background: rgb(0 0 0 / 20%);
animation:sent-load 1.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
content:'';position:absolute;left:0;top:0;display:block;width:100%;height:100%;clip-path:inset(0 0% 0 0);
}
@keyframes sent-load{
0%{clip-path:inset(0 0% 0 0)}
49%{clip-path:inset(0 100% 0 0%)}
50%{clip-path:inset(0 0% 0 100%)}
100%{clip-path:inset(0 0% 0 0%)}
}
.blocker {width:100%;height:46px;position:absolute;cursor:pointer;}
.blocker:hover ~ button{background: var(--color-brown);transition: 0.3s;}
@media(max-width:768px){
form [type=submit] {padding:12px 15px;}
.blocker {height:38px;}
}
/*Кнопки checkbox в форме*/
form ul {margin:0;padding:0;list-style:none; margin-bottom:10px;}
/*Круглишок с текстом*/
.box{position:relative;margin:5px 0;display:flex;align-items:center;user-select:none}
.box label{color: var(--color-grey);position:relative;z-index:10;padding-left:40px;cursor:pointer}
.box input{opacity:0;visibility:hidden;position:absolute}
.box input:checked ~ .check{border-color:var(--color-accent);box-shadow:0 0 0 15px var(--color-accent) inset}
.box input:checked ~ .check::after{opacity:1;transform:scale(1)}
.box input:checked ~ label{color:var(--color-black)}
.box .check{width:20px;height:20px;display:flex;justify-content:center;align-items:center;position:absolute;border-radius:100px;border:2px solid var(--color-accent);box-shadow:0 0 0 0 var(--color-accent) inset;transition:all .15s cubic-bezier(0,1.05,0.72,1.07)}
/*Кнопка с текстом*/
.box-btn{margin:0px 0px 5px 0px; position:relative;display:inline-flex;align-items:center;justify-content:center;user-select:none}
.box-btn label{padding:10px 20px;font-size:14px;color:var(--color-grey);position:relative;z-index:10;cursor:pointer}
.box-btn input{visibility:hidden;position:absolute}
.box-btn input:checked ~ .check{background: var(--color-black);border:1px solid var(--color-black);}
.box-btn input:checked ~ label{color:var(--color-white)}
.box-btn .check{border-radius:5px;background:var(--color-white);width:100%;height:46px;display:flex;justify-content:center;align-items:center;position:absolute;}
.box-btn:hover .check{transition:0.3s;background:var(--color-accent);border:1px solid var(--color-accent);}
.box-btn:hover label{transition:0.3s;color:var(--color-white);}
@media(max-width:768px){
.box-btn label {padding:6px 15px;}
.box-btn .check {height:38px;}
}
/*---------Search---------------*/
/*Посик*/
.search-wrapper {display:none;z-index:999;background:var(--color-bg-white);position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;}
.search-content {position:absolute;min-height:100vh;height:100%;width:100%;}
.search-close {position:absolute;top:35px;right:35px;}
.bg-search {background:var(--color-bg-white);padding:150px 0 80px 0;}
.search {min-width:280px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);}
.search input {border:none;border-bottom:1px solid rgba(0, 0, 0, 0.6);width:100%;font-size:46px;line-height:56px;font-weight:500;padding-bottom:15px;}
.search button {position:absolute;margin-top:25px;right:5px;cursor:pointer;float:right;}
.search button:before {width:23px;height:23px;content:"";display:inline-block;background:url(/upload/icon/black/search.svg);background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
/*Результаты поиска*/
.search-preloader{
position: relative;top:-2px;width:10%;height:3px;background:var(--color-black);margin-left:90%;
animation:search-preloader 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes search-preloader{0%{margin-left:0%}100%{margin-left:90%}}
.item-serch {display: block;padding: 25px 0;border-bottom:1px solid rgba(0,0,0,0.2);color:var(--color-grey);transition: all 0.5s ease;font-size:22px;margin:0;}
.item-serch:before {content:"";display:inline-block;position:relative;float:right;margin-right:10px;margin-top:8px;width:5px;height:5px;border:1px solid rgba(0, 0, 0, 0.7);transform:rotate(45deg);}
.item-serch:after {transform:translate(0px,10px);transition:all 0.4s ease;content:'';position:relative;float:right;height:1px;width:0px;background:rgba(0, 0, 0, 0.7);}
.item-serch:hover {transition:all 0.5s ease;color:var(--color-black);}
.item-serch:hover:after {width:12px;transform:translate(0px, 10px);transition: all 0.5s ease;}
.item-serch:hover:before {border-left:1px solid rgba(0, 0, 0, 0);border-bottom:1px solid rgba(0, 0, 0, 0);transition: all 0.5s ease;}
@media (max-width: 992px){
.search input{font-size:36px;line-height:46px;}
.search button {margin-top:15px;}
}
@media (max-width: 768px){
.search input{font-size:26px;line-height:38px;}
.search button {margin-top:10px;}
.item-serch {font-size:16px;}
}
/*---------Footer---------------*/
footer {position:relative;color:var(--color-white);font-weight:200;font-size:14px;background:var(--color-black);}
footer .logo {max-width:170px;}
footer .copyright {display:flex;align-items:center;justify-content:space-between;}
footer .copyright .logo {max-width:110px;height:auto;display:inline-block;}
footer a {transition:0.3s;}
footer a:hover {transition:0.3s;color: var(--color-accent);cursor:pointer;}
.btn-contacts {transition:0.3s;display:inline-block; font-size:12px; background:color(srgb 1 1 1 / 0.2); padding:5px 15px; margin:5px 0; }
.btn-contacts:hover,.btn-contacts:focus,.btn-contacts:active {transition:0.3s;font-size:12px; background:color(srgb 1 1 1 / 0.4);color: inherit;}
/*---------Pagination-----------*/
.pagination {display:inline-flex;padding:0;list-style:none;margin:0;position:relative;/*left:50%;transform:translate(-50%,0);*/}
.pagination li {margin-right:5px;display:block;min-width:40px;height:40px;text-align:center;border:1px solid var(--color-grey-light);border-radius:40px;cursor:pointer;}
.pagination li.active {border:1px solid var(--color-accent);}
.pagination a {font-size:14px;font-weight:500;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.pagination-prev:before{content:"";position:relative;display:inline-block;width:6px;height:6px;transform:rotate(45deg);border-left:2px solid;border-bottom:2px solid;margin:0 0 2px 1px}
.pagination-next:before{content:"";position:relative;display:inline-block;width:6px;height:6px;transform:rotate(-135deg);border-left:2px solid;border-bottom:2px solid;margin:0 0 2px 0}
/*---------breadcrumb-----------*/
.breadcrumb {display:flex;align-items:center;margin:15px 0;}
.breadcrumb a {color:var(--color-grey-light);}
.breadcrumb a.active { }
.breadcrumb a:hover {color: var(--color-accent);}
.breadcrumb a:before {background:url(/upload/icon/black/arrow.svg);opacity:.5;content:'';display:inline-block;margin:0 4px 2px 4px;width:7px;height:7px;background-repeat:no-repeat;background-size:contain;background-position:50% 50%;transform:rotate(-90deg);}
.breadcrumb a:first-child:before {display: none;}
/*---------Сворачиваемый текст--*/
.collapsible-text{max-height:100px;overflow:hidden;transition: 1s;}
.open.collapsible-text{max-height:1000px;overflow:hidden;transition:1s;}
.collapsible-text-more {color:var(--color-accent);cursor:pointer;position:relative;display:block;width:100%;}
.collapsible-text-more:before {content:"";opacity:1;transition:1s; position:absolute;bottom:22px;left:0;width:100%;height:100px;background:linear-gradient(180deg, #fff0,#FFF);}
.open.collapsible-text-more:before {opacity:0;transition:1s;}
/*---------Всплывающие рецепты--*/
.modal{display:none; position:fixed;z-index:9999;top:0;left:0;bottom:0;right:0;background:rgb(0 0 0 / 60%);}
.modal-container {background:var(--color-white);border-radius:30px;overflow: hidden;display:flex;align-items:center;position:absolute;width:80vw;height:600px;top:50%;left:50%;transform:translate(-50%, -50%);}
.modal-container .btn-close-black {position: absolute;right:20px;top:20px;}
.modal .content {color: var(--color-black);padding:60px;}
/*---------Блок с цифрой--------*/
.block-num {font-size:16px;line-height:160%;}
.block-num span{font-weight:500;letter-spacing:-0.2px;position:absolute;font-size:12px;border:1px solid var(--color-grey-light);border-radius:100%;line-height:58px;text-align:center;width:60px;}
.block-num p{padding-left:75px;margin-bottom:30px;top:-6px;position:relative;}
/*---------Таблица--------------*/
/*общие стили*/
table {margin:15px 0 30px 0;border-collapse: collapse;width:100%;display:block;overflow-x:auto;font-family:'VictorMono';font-weight:400;font-size:16px;line-height:120%;letter-spacing: 0.1px;}
table tbody {display:block;min-width:600px;}
table b {font-weight:500;color:var(--color-black);}
/*общие стили колонок и полос*/
table tr {color: var(--color-grey);}
table tr td {padding:15px;vertical-align:top;border-bottom:1px solid var(--color-grey-light);}
/*колонки*/
table tr td:first-child {font-weight:500;font-size:12px;padding-left:0;color:var(--color-black);}
table tr td:nth-child(3) {font-weight:400;color:var(--color-black);}
table tr td:nth-child(4) {font-weight:400;color:var(--color-black);}
/*шапка*/
table tr:first-child {font-weight:400;color:var(--color-black);}
table tr:first-child td{border-top:1px solid var(--color-grey-light);}
table tr:first-child td:nth-child(1) {width: 70px;font-size:16px;}
table tr:first-child td:nth-child(2) {width: auto;}
table tr:first-child td:nth-child(3) {width: 120px;}
table tr:first-child td:nth-child(4) {width: 120px;}
/*---------Карта----------------*/
ymaps[class$='-ground-pane'] {filter: grayscale(1); /*черная - filter: grayscale(1) invert(1);*/}
#map {width:100%;height:600px;}
/*---------Обертка контента-----*/
.wrapper {padding-left:45px;padding-right:45px;}
@media (max-width: 768px){.wrapper {padding-left:0px;padding-right:0px;}}
@media (min-width:1900px){.wrapper {padding-left:135px;padding-right:135px;}}
/*---------intro----------------*/
.intro {position:relative;width:100%;height:100vh;}
.intro > .intro-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
@media (max-width:768px) {
.intro {height:auto; color:var(--color-black);padding-bottom:0;}
.intro > .intro-bg {position:static; height:40vh; margin-bottom:15px}
.intro .h1,.intro .h2,.intro .h3,.intro .h4,.intro .h5 {font-weight: 500;}
}
/*---------sticky---------------*/
.sticky-wrapper {position: relative;height: 100%;}
.sticky {position: sticky;top:20px;display: block;}
/*---------Home-----------------*/
/*intro*/
.intro .info {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:0px 5px; }
.intro .info .item {color: var(--color-black);padding:20px;font-weight: 400;}
.intro .info .item p:nth-child(1) {font-size:18px;margin-bottom:20px;}
.intro .info .item p:nth-child(2) {text-align:right;margin-bottom:0px;opacity:0.6;font-size:14px;line-height:140%;}
.intro .info .item.white{background:rgb(255 255 255 / 50%);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}
.intro .info .item.yellow{background:var(--color-accent);}
@media (max-width:768px){
.intro .info {margin-top:15px;}
.intro .info .item {padding:15px;}
.intro .info .item p:nth-child(1) {margin-bottom:15px;}
.intro .info .item p:nth-child(2) {text-align:left;}
}
@media (min-width:1900px){
.intro .info .item p:nth-child(1) {margin-bottom:45px;}
}
/*Кнопки в каталог и индивидуальный заказ*/
.btn-block-catalog {display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:20px;margin-bottom:20px;}
.btn-block {position: relative;aspect-ratio: 1 / 1;grid-row:1;}
.btn-block .info {padding:20px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.btn-block .info .name {font-size:14px;letter-spacing:-0.2px;display:flex;justify-content:space-between;}
.btn-block .info .name h2 {text-transform:uppercase;margin-bottom: 15px;}
.btn-block .info .name p {opacity:0.6;line-height:140%;}
.btn-block .info .name span {text-align:right;white-space:nowrap;margin-left:10px;}
.btn-block .info .btn {align-self: flex-end;}
.btn-block.black {grid-column:1 / span 4; background: var(--color-grey);color:var(--color-white);font-weight:200;}
.btn-block.yellow {grid-column:9 / span 4; background: var(--color-accent);color: var(--color-black);font-weight:400;}
@media (max-width:768px){
.btn-block-catalog {display:flex;flex-direction:column;gap:20px;}
}
/*about*/
.about .info {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:2fr;gap:5px; }
.about .info .item {color: var(--color-black);padding:20px;font-weight: 400;}
.about .info .item p:nth-child(1) {margin-bottom:20px;}
.about .info .item p:nth-child(2) {line-height:140%;font-size:14px;text-align:right;margin-bottom:0px;opacity: 0.5;}
.about .info .item:nth-child(1){grid-column:2;grid-row:1; background:var(--color-accent);}
.about .info .item:nth-child(2){grid-column:1;grid-row:2; background:var(--color-white);}
.about .info .item:nth-child(3){grid-column:2;grid-row:2; background:var(--color-grey);color: var(--color-white);font-weight: 200;}
@media (max-width:768px){
.about .info .item {padding:15px;}
.about .info .item p:nth-child(1) {margin-bottom:15px;}
.about .info .item p:nth-child(2) {text-align: left;}
}
@media (min-width:1900px){
.about .info .item p:nth-child(1) {margin-bottom:45px;}
}
/*director*/
@media (max-width:768px){
.director {margin-bottom: 30px;}
}
/*---------About----------------*/
/*Информация в цифрах*/
.info-num {display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:5px;}
.info-num .item {}
.info-num .item p:nth-child(1) {font-size:20px;letter-spacing:-0.6px;}
.info-num .item p:nth-child(2) {opacity: 0.6;}
@media (max-width:768px){
.info-num {grid-template-columns: 1fr 1fr;}
}
/*История завода*/
.history {display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:20px;}
.history .item {}
.history .item p:nth-child(1) {font-size:20px;letter-spacing:-0.6px;margin-bottom:20px;}
.history .item p:nth-child(2) {opacity:0.6; border-top:1px solid color(srgb 0 0 0 / 0.50);border-bottom:1px solid color(srgb 0 0 0 / 0.50);padding:20px 0;min-height:118px;}
@media (max-width:768px){
.history .item p:nth-child(2) {font-size:14px;line-height:140%;}
}
.category-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.category-grid .item {min-width:0; min-height:0;position: relative;color:var(--color-white);}
.category-grid .item img {display:block; max-width:100%; height:auto}
.category-grid .item .info {padding:20px;width:100%;height:100%;position:absolute;top:0;display:flex;flex-direction:column;justify-content:space-between;}
.category-grid .item .info .name {font-size:14px;font-weight:200;text-transform:uppercase;letter-spacing:-0.2px;display:flex;justify-content:space-between;}
.category-grid .item .info .name span {text-align:right;white-space:nowrap;margin-left:10px;}
.category-grid .item .info .btn {align-self: flex-end;}
.category-grid .item.dop {color:var(--color-black);border:1px solid color(srgb 0 0 0 / 0.2);}
.category-grid .item.dop .info {position:relative;justify-content:start;}
.category-grid .item.dop .info .name {font-weight:500;}
.category-grid .item.dop .info p {font-size: 14px;opacity: 0.6;}
.category-grid .item.dop .info .btn {margin-top: auto;}
@media (max-width:768px){
.category-grid {display:flex;flex-direction:column;gap:15px;}
}
/*---------Contacts-------------*/
/*Блок контактов*/
.intro-contacts{position:relative;width:100%;height:80vh;}
.intro-contacts > .intro-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.contacts {display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows: repeat(3, auto);gap:40px 0px;padding:60px 45px;}
.contacts .item {}
.contacts .item p {margin-bottom:0;font-size:14px;}
.contacts .item>p:nth-child(1) {margin-bottom:5px;opacity: 0.6;}
.contacts .item>p:nth-child(2) {}
.contacts .item a {}
@media (max-width: 768px) {
.intro-contacts {height:40vh;}
.contacts {padding:15px;gap:5px;}
}
/*---------Beton----------------*/
/*Полоса перезвонить мне*/
.callback-line {background:var(--color-brown);padding:30px 60px;display: flex;align-items: center;justify-content:space-between;}
.callback-line .info {display: flex;}
.callback-line .info p {margin-bottom:0;}
.callback-line .info a {margin-left: 15px;}
@media (max-width:768px){
.callback-line {padding:15px; margin: 15px 0px 0 0px; margin-bottom:0;flex-direction:column;align-items:normal;gap:10px;}
.callback-line .info {display:block;}
.callback-line .info p {display: inline;}
.callback-line .info a {margin-left: 10px;color: var(--color-accent);}
}
@media (min-width:1900px){
.callback-line {padding:30px 150px;}
}
/*Желтый блок*/
.accent-block {background:var(--color-accent);padding:20px 20px 40px 20px;margin-bottom: 15px;}
/*Блок с доставкой*/
.info-delivery > p {margin-bottom: 0px;}
.info-delivery > span {font-size:14px;opacity:0.5;margin-bottom:20px;display:block;}
.info-delivery div {padding:20px 0;border-top:1px solid color(srgb 0 0 0 / 0.50);border-bottom:1px solid color(srgb 0 0 0 / 0.50);}
.info-delivery div p {display:flex;justify-content: space-between;font-size:14px;margin-bottom:0px;}
.bg-grey .info-delivery {font-weight:200;}
.bg-grey .info-delivery div {border-top:1px solid color(srgb 1 1 1 / 0.2);border-bottom:1px solid color(srgb 1 1 1 / 0.2);}
/*@media (max-width:768px){
.info-delivery {margin-bottom: 30px;}
.info-delivery:last-of-type {margin-bottom:0px;}
} */