:root{--1X:0.625vw;--2X:1.25vw;--3X:1.875vw;--4X:2.5vw}
@media(min-width: 1440px){:root{--1X:9px;--2X:18px;--3X:27px;--4X:36px}
}
body{min-width: auto}
#header{position: fixed;width: 100%;z-index: 1000;background-color: #fff;cursor: n-resize;height: 70px;transition: .5s;-webkit-transition: .5s ease;top: 0}
body.partner #header{z-index:1002}
#header.scr{box-shadow: 0 0 4px rgba(0,0,0,0.1)}
#header .wrap{display: flex;flex-direction: row;justify-content: space-between;max-width: 1440px;margin: 0 auto;height: 70px;position: relative;top: 0;-webkit-transition: .3s ease;box-sizing: border-box;padding: 0 var(--2X)}
#header .wrap .logo_{display: flex;justify-content: center;align-items: center;width: 60px;height: 60px;padding: 5px var(--2X);line-height:0}
#header .wrap .block-column{flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column}
body.news #header,body.news #header .wrap,body.news #header .block-column{overflow: hidden}
#header .wrap .search{width: max-content;display: flex;justify-content: center;align-items: center}
#header .menu_{display: flex;flex: 1;justify-content: flex-end;margin-right: var(--3X)}
body.news #header .menu_{justify-content: center;margin-right:0}
#header .menu_ ul{flex-direction: row;display: flex;justify-content: center;padding: 0;list-style-type: none}
ul.menu a.col{padding: 0 var(--3X);position: relative;font: 1rem/4.4rem var(--FONT1);display: inline-block;white-space: nowrap}
body:not(.news) ul.menu a.col{cursor: default}
body.news ul.menu a.col{font-size:1.125rem}
ul.menu a.col::first-letter{text-transform: uppercase}
ul.menu a.col:before{content: '';position: absolute;left: 50%;right: 50%;top: 0;height: 2px;transition: all 1s ease;-webkit-transition: all 1s ease;opacity: 0.2}
ul.menu li:hover a.col:before,ul.menu li a.col:focus:before,ul.menu a.col.act:before{left: 24px;right: 24px;opacity: 1}
#header .menu_ > ul > li{position: relative}
#header .menu_ > ul > li > div{opacity:0}
#header .menu_ > ul > li:hover > div{opacity:1;transition:opacity 0.3s}
#header .menu_ > ul > li > div ul{display: none;position: absolute;left: 0;top: 60px;background: #fff;padding: 10px 0 20px;box-shadow: 0 16px 48px rgba(20,40,60,.15);border-radius: 16px}
#header .menu_ > ul > li:last-child > div ul{left: auto;right:0}
#header .menu_ > ul > li:hover > div ul{display: block}
#header .menu_ > ul > li > div li{display: block;float: none;font: 1rem/2.125rem var(--FONT1);padding: 2px 24px}
#header .menu_ > ul > li > div a{color: #333;padding: 1px 10px;margin: -8px -10px;border-radius: 20px;transition:background 0.3s;display: inline-flex;align-items: center;flex-wrap: nowrap;white-space: nowrap}
#header .menu_ > ul > li > div ul.col_m1 a:hover{background:var(--GROUP_COLOR1_OPAC)}
#header .menu_ > ul > li > div ul.col_m2 a:hover{background:var(--GROUP_COLOR2_OPAC)}
#header .menu_ > ul > li > div ul.col_m3 a:hover{background:var(--GROUP_COLOR3_OPAC)}
#header .menu_ > ul > li > div ul.col_m4 a:hover{background:var(--GROUP_COLOR4_OPAC)}
.p20{margin-right: 20px}
#header .account ._search:hover:before,#header .account ._search:focus:before,#header .search ._search:hover:before,#header .search ._search:focus:before{transform: scale(1.2)}
#header .search ._search:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;transition: 0.25s}
#header .search ~ .account,#header .account ~ .search{padding-right: 0}
#header .account ._search,#header .search ._search{border-radius: 30px;padding: 0;position: relative}
#header .account svg,#header .search svg{width: 40px;height: 40px}
#header .account ._search:hover:before,#header .account ._search:focus:before,#header .search ._search:hover:before,#header .search ._search:focus:before{background-color: rgba(119,187,0,0.1)}
.bd_cat #header .account ._search:hover:before,.bd_cat #header .account ._search:focus:before,.bd_cat #header .search ._search:hover:before,.bd_cat #header .search ._search:focus:before{background-color: var(--CAT_OPAC1)}
.account__open{display: inline-block;padding: 6px 20px;border-radius: 20px;color:inherit;border: 2px solid #333;margin: 15px var(--2X) 15px var(--1X) !important;cursor: pointer;transition: background 0.3s;font: 500 14px/24px var(--FONT1);white-space: nowrap}
.account__login,.account__onlyLogin,.account__signup,.account__line{color:inherit;text-transform:inherit;font:inherit}
.account__line{font-weight:100;margin:0 2px}
.account__login,.account__line,.account__open.alt .account__signup{opacity:0.7}
.account__login:hover,.account__login:focus,.account__signup:hover,.account__signup:focus{opacity:1}
.bd_cat .account__open{border-color: var(--CAT_COLOR);color: var(--CAT_COLOR)}
.account__open:hover,.account__open:focus-within{background-color: var(--GREEN);border-color: var(--GREEN);color: #fff}
.bd_cat .account__open:hover,.bd_cat .account__open:focus-within{background-color: var(--CAT_COLOR);border-color: var(--CAT_COLOR);color: #fff}
body:not(.news) .account__open{background:var(--MAGENTA);border-color:var(--MAGENTA);color:#fff;transition:0.3s;box-shadow:0 0 0 12px transparent}
body:not(.news) .account__open:active,body:not(.news) .account__open:focus-within{transition:none;box-shadow:0 0 0 6px var(--MAGENTA_OPAC2)}
@media(min-width:480px){body.page-home #header:not(.scr2) .account__open{border-color:#333;background-color:#fff;color:#333}
body.page-home #header:not(.scr2) .account__open:hover,body.page-home #header:not(.scr2) .account__open:focus-within{background-color: var(--MAGENTA);border-color: var(--MAGENTA);color: #fff}
}
#header .progress div{background: var(--CAT_COLOR)}
ul.menu a.col_1{color:var(--CAT_COLOR1)}
ul.menu a.col_2{color:var(--CAT_COLOR2)}
ul.menu a.col_3{color:var(--CAT_COLOR3)}
ul.menu a.col_1:before{background: var(--CAT_COLOR1)}
ul.menu a.col_2:before{background: var(--CAT_COLOR2)}
ul.menu a.col_3:before{background: var(--CAT_COLOR3)}
ul.menu a.col_m1,ul.menu a.col_m2,ul.menu a.col_m3,ul.menu a.col_m4{color:#333}
ul.menu li:hover a.col_m1{color:var(--GROUP_COLOR1)}
ul.menu li:hover a.col_m2{color:var(--GROUP_COLOR2)}
ul.menu li:hover a.col_m3{color:var(--GROUP_COLOR3)}
ul.menu li:hover a.col_m4{color:var(--GROUP_COLOR4)}
ul.menu a.col_m1:before{background: var(--GROUP_COLOR1)}
ul.menu a.col_m2:before{background: var(--GROUP_COLOR2)}
ul.menu a.col_m3:before{background: var(--GROUP_COLOR3)}
ul.menu a.col_m4:before{background: var(--GROUP_COLOR4)}
.scroll-title span{color: var(--CAT_COLOR)}
#header .name{font: 600 22px/40px var(--FONT2);white-space: nowrap;display: inline-block;margin: 15px 0;vertical-align: middle;color: #333}
#header .name a{color: #000}
#header .name a:hover{color: #000}
#header .name_hov{position:relative}
#header .name_hov:before{content: '';position: absolute;left: 50%;right: 50%;top: 0;height: 2px;transition: all 1s ease;-webkit-transition: all 1s ease;opacity: 0.2;background:#333}
#header .name_hov:hover:before{left: 0;right: 0;opacity: 1}
a.logo svg{fill: var(--CAT_COLOR)}
#header .search a svg,#header .search button svg{fill: #000}
body.bd_cat #header .search a svg,body.bd_cat #header .search button svg{fill: var(--CAT_COLOR)}
#header .progress div{height: 0;opacity: 0.4}
#header .progress{position: absolute;left: 0;right: 0;bottom: 0;height: 2px;background: #fff;z-index: 10}
#header .logo_ svg{width: 60px;height: 60px;transition: .3s;-webkit-transition: .3s ease;fill: var(--GREEN)}
.bd_cat #header .logo_ svg{fill: var(--CAT_COLOR)}
body #header .logo_:hover svg{fill: #333}
.scroll-title{position: absolute;transition: top 0.3s ease;-webkit-transition: top 0.3s ease}
#header.header_alt .scroll-title{top: 0}
#header .scroll-title{display: block;overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;font: 400 18px/70px var(--FONT2);padding: 0;text-overflow: ellipsis;box-sizing: border-box}
.header_alt #header .logo_ svg{width: 40px;height: 40px}
.block-column{display: flex;flex-direction: column;align-self: flex-start;width: 100%}
.block-original{top: 0}
.header_alt .block-original,.header_alt .block-special{top: -70px}
.block-original,.block-special{display: flex;width: 100%;position: relative;top: 0;transition: .3s ease .3s}
.block-special{display:block}
.block-name-header{position: relative;top: 0;transition: .3s;height: 70px}
.block-name-post{height: 70px;transition: .3s}
#header:hover .block-column .block-original,#header:hover .block-column .block-special{top: 0;transition: .3s ease .5s}
body.bd_auth #header .block-column .block-original,body.bd_auth #header .block-column .block-special{transition: 1s ease 2s}
.bg_tag{background-color: #0bb;text-align: center;color: #fff;height: 15vw;display: flex;justify-content: center;align-items: center;padding: 10px}
.subtitle.bg_tag h1{padding: 0;font-size: 100px;font-size: 7vw;font-weight: bold}
.subtitle.bg_tag h1 span{float: none;margin: 0;font-size: 70px;font-size: 5vw;color: #70cfcf}
.tags.tags__,.tags.tags_{font-family: "Fira Sans"}
#catalog .tags.tags_{height: 220px;overflow: hidden}
#header #header .search .acc img{float: right;border-radius: 24px;transform: scale(0.75,0.75);-webkit-transform: scale(0.75,0.75);width: 48px;height: 48px}
@media(max-width: 992px){#header .wrap > div:nth-child(1){width: 50px;min-width: 50px}
}
@media(max-width: 992px){#header .logo_ svg{width: 50px;height: 50px}
ul.menu a{font-size:1rem}
}
@media(max-width: 992px){ul.menu a{padding: 0 10px}
}
@media(max-width: 992px){.account__open{text-transform: capitalize;margin: 0}
}
@media(max-width: 768px){ul.menu a{padding: 0 10px}
ul.menu a:hover:before,ul.menu a.act:before{left: 12px;right: 12px}
.col_3 span:first-child{display: none}
}
@media(max-width: 768px){}
@media(max-width: 768px){#header .menu_ .menu,#header .search{display: none !important}
.header_alt #header .wrap{top: -70px}
#header .wrap > div.search:not(.user-active){width:0}
#header #header .wrap .user-active{width: max-content}
#header.header_alt #header .wrap .block-special{top: 0}
#header #header .wrap .block-original{transition: none}
.header_alt #header .wrap .block-original,.header_alt #header .wrap .block-special{top: 0}
#header.header_alt .scroll-title{position: relative}
#header.header_alt #header .wrap .scroll-title{position: absolute}
#header.header_hid{top: -68px}
#header .search ~ .account,#header .account ~ .search{padding-right: 0}
}
@media(max-width: 768px){}
@media(max-width: 480px){.account__line,.account__login{display: none}
}
