@charset "UTF-8";
/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

@font-face { font-family: "AlumniSans-ExtraLight"; font-style: normal; font-weight: 200; font-display: swap;
  /* Браузер сначала попробует найти шрифт локально */
src: local("AlumniSans"), url("/font/AlumniSans-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "RalewayLight"; font-style: normal; font-weight: 300; font-display: swap;
  /* Браузер сначала попробует найти шрифт локально */
src: local("Raleway"), url("/font/Raleway-Light.ttf") format("truetype"); }
@font-face { font-family: "RalewayRegular"; font-style: normal; font-weight: 500; font-display: swap;
  /* Браузер сначала попробует найти шрифт локально */
src: local("Raleway"), url("/font/Raleway-Regular.ttf") format("truetype"); }
@font-face { font-family: "RalewayBold"; font-style: normal; font-weight: 600; font-display: swap; src: url("/font/Raleway-Bold.ttf") format("truetype"); }
body { font-family: "RalewayRegular", Arial, tahoma; background: #2E2E2E; color: #fefefe; }

footer { text-align: center; padding: 50px 0px; margin-bottom: 24px; }

.forAdmin { position: absolute; top: 20px; left: 20px; width: 200px; }

h1 { font-family: "RalewayRegular"; font-size: 2em; font-weight: 600; margin-bottom: 15px; }

h1 + p { max-width: 1120px; margin: 0 auto; margin-bottom: 20px; }

h2 { padding-bottom: 25px; line-height: 35px; font-size: 25px; }

.masterbox { width: 100%; max-width: 100%; margin: 0 auto; margin-top: 25px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

a { color: #999; }
a:hover { color: #dcb90d; }

.containerFlex { display: flex; flex-direction: row; justify-content: flex-start; }

.itemCol { width: 100%; /* A fixed width as the default */ }

.zvuk_page { text-align: center; }

.select-css { display: block; font-size: 14px; font-weight: 700; color: #444; line-height: 1.3; padding: .4em 1.4em .4em .5em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); border-radius: .2em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; }
.select-css option { padding-right: 20px; }

.select-css::-ms-expand { display: none; }

.select-css:hover { border-color: #888; cursor: pointer; }

.select-css:focus { border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; font-weight: normal; }

.select-css option { font-weight: normal; }

*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; }

.select { margin-right: 10px; }

.boxselect { display: flex; flex-direction: row; justify-content: flex-start; box-sizing: border-box; }

.selectDiv { margin-bottom: 40px; }

.hdr { background: url(/img/logo.png) no-repeat left center; padding-left: 60px; line-height: 60px; display: inline-block; background-size: 44px; margin-bottom: 0px; }
.hdr .name { font-weight: bold; font-size: 20px; }
.hdr .slogan { font-size: 14px; }
.hdr a { text-decoration: none; color: #d6b574; }
.hdr a:hover { color: #d6b574; }
.hdr span { display: block; line-height: 25px; }

.sticky { position: -webkit-sticky; position: sticky; top: 0; }

.searchitem { display: flex; flex-direction: row; justify-content: flex-start; z-index: 9; }

.gap { display: inline-flex; flex-wrap: wrap; gap: 12px; }

.searchinput { flex-grow: 1; box-sizing: content-box; width: 100%; position: relative; }
.searchinput input { width: 100%; box-sizing: border-box; padding: 5px; line-height: 30px; border-radius: 5px; padding-left: 110px; font-size: 18px; }
.searchinput .searchbutton { position: absolute; left: 0; color: #000; cursor: pointer; background: #ffe68c url(/img/search_icon.png) no-repeat 3px center; background-size: 18px; padding-right: 5px; padding-left: 25px; line-height: 24px; top: 10px; left: 10px; border-radius: 5px; border: none; background-color: #ffe68c; text-transform: uppercase; }

.categorysidebar li { margin-bottom: 5px; }

.subMenu { margin-bottom: 15px; margin-top: 10px; }
.subMenu a { font-family: "RalewayLight"; color: #e6e6e6; font-size: 18px; text-decoration: none; line-height: 30px; }
.subMenu a:hover { color: #dcb90d; }

.categoryName + .subMenu li.active a { color: #dcb90d; }
.categoryName + .subMenu li.active a:hover { color: #dc0d5c; }
.categoryName + .subMenu a { font-family: "RalewayLight"; color: #e6e6e6; font-size: 16px; text-decoration: none; line-height: 30px; }
.categoryName + .subMenu a:hover { color: #dcb90d; }

.mainMenu { margin-bottom: 20px; flex-wrap: wrap; justify-content: space-evenly; column-count: 5; }
.mainMenu li a { font-size: 16px; text-decoration: none; background: #2d2d2d; padding: 7px; padding-left: 15px; padding-right: 15px; margin-bottom: 10px; display: inline-block; border-radius: 5px; color: #fff; display: inline-block; width: 100%; }

.nav .subMenu { margin-bottom: 15px; margin-top: 10px; column-count: 1; column-gap: 30px; text-align: left; }
.nav .subMenu li { display: inline-block; width: auto; padding-right: 15px; }

.categoryList { background: #151515; padding: 20px; border-radius: 5px; margin-bottom: 15px; }
.categoryList li { margin: 0; display: grid; grid-template-rows: 1fr auto; margin-bottom: 10px; break-inside: avoid; }
.categoryList:nth-child(8) { padding: 20px; border-radius: 5px; margin-bottom: 15px; background: #151515 url(/mf/img/energy.jpg) no-repeat right; alignment-baseline: middle; }
.categoryList:nth-child(7) { padding: 20px; border-radius: 5px; margin-bottom: 15px; background: #151515 url(/mf/img/dark.jpg) no-repeat right; alignment-baseline: middle; }
.categoryList.oneCatMain li { width: auto; }

.active a, .mainMenu li.active a { color: #dcb90d; }

.categoryName { margin-bottom: 10px; color: #f5e596; }

.breadcrumb { margin-bottom: 15px; }
.breadcrumb li { display: inline-block; }

.mainCat a { text-decoration: none; font-size: 38px; color: #fff; font-weight: 400; line-height: 56px; }

.result_cats { margin-bottom: 15px; }
.result_cats li { display: inline-block; }
.result_cats li a { color: #dddddd; margin-right: 7px; background: #000; display: inline-block; padding: 10px; border-radius: 20px; }
.result_cats li a:hover { color: gold; }
.result_cats li a:before { content: "#"; }

.mm { column-count: 3; column-gap: 22px; max-width: 1526px; margin: 0 auto; margin-bottom: 50px; }
.mm .categoryList { border-radius: 5px; overflow: hidden; padding: 23px; box-sizing: border-box; }
@media (max-width: 1024px) { .mm { column-count: 3; } }
@media (max-width: 720px) { .mm { column-count: 1; } }

/*menu*/
.centerBox { position: relative; text-align: center; max-width: 1400px; margin: 0 auto; }

.toggle input { display: flex; width: 40px; height: 32px; position: absolute; cursor: pointer; opacity: 0; z-index: 10; position: absolute; right: 0; op: 5px; }

.toggle span { display: flex; width: 29px; height: 2px; margin-bottom: 5px; position: relative; background: #ffffff; border-radius: 3px; z-index: 1; transform-origin: 5px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; z-index: 9; position: absolute; right: 0; }

.toggle span.line1 { top: 12px; }

.toggle span.line2 { top: 19px; }

.toggle span.line3 { top: 26px; }

.toggle span:first-child { transform-origin: 0% 0%; }

.toggle span:nth-last-child(2) { transform-origin: 0% 100%; }

.toggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-3px, -1px); background: #ffe68c; }

.toggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }

.toggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }

#menu { -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; display: none; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }

#menu li { transition-delay: 2s; }

.toggle input:checked ~ div#menu { display: block; }

.breadcrumbs { margin-bottom: 20px; }

/*toggle desc mob*/
.text-block { max-height: 50px; overflow: hidden; position: relative; transition: max-height 0.3s ease; }
.text-block p { margin-bottom: 24px; line-height: 1.2; }

.text-block::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: url("/img/down.png") no-repeat center bottom, linear-gradient(transparent, rgba(46, 46, 46, 0.8)); cursor: pointer; transition: background 0.3s ease; }

.text-block.expanded { max-height: 1000px; }

.text-block.expanded::after { background: url("/img/up.png") no-repeat center bottom; }

@media screen and (min-width: 920px) { .text-block, .text-block.expanded { max-height: none; }
  .text-block::after, .text-block.expanded::after { display: none; } }
.demoBox { margin: 20px; background: #fff; border-radius: 5px; overflow: hidden; padding: 15px; color: #333; box-shadow: 1px 2px 5px #1d1d1d; width: 350px; }

.zvuk_page h1 { max-width: 750px; margin: 0 auto; font-size: 1.8em; line-height: 1.5; }
.zvuk_page .demoBox { width: 100%; max-width: 800px; }

.trackList { display: flex; flex-wrap: wrap; justify-content: center; }

.downloadTrack { display: flex; flex-direction: row; justify-content: flex-start; }
.downloadTrack a { color: #44875a; margin-right: 10px; padding: 5px; }
.downloadTrack a:hover { color: #53c313; }
.downloadTrack span { color: #44875a; margin-right: 10px; padding: 5px; }
.downloadTrack span:hover { color: #53c313; cursor: pointer; }

.controlButton { overflow: hidden; clear: both; }

.mainButton { display: flex; flex-direction: row; justify-content: flex-start; float: left; }

.time { float: right; }

.controls { margin-right: 10px; }

.waveTrack { margin-bottom: 10px; height: 64px; overflow: hidden; }

.headTrack { margin-bottom: 15px; min-height: 32px; }

.btn-primary { background: #f4f4f4 url(/img/play-button.png) no-repeat 7px center; padding: 5px; padding-left: 30px; border: #ccc 1px solid; border-radius: 3px; padding-right: 10px; font-size: 14px; cursor: pointer; }
.btn-primary:hover { border: #2a742c 1px solid; }
.btn-primary:before { content: "Слушать"; }
.btn-primary.Pause { background: #f4f4f4 url(/img/pause.svg) no-repeat 5px center; background-size: 20px; }
.btn-primary.Pause:before { content: "Пауза"; }

:root { --white: #f9f9f9; --black: #36383F; --grey: #85888C; }

* { margin: 0; padding: 0; box-sizing: border-box; }

a { text-decoration: none; }

ul { list-style: none; }

/* Header */
.header { background-color: var(--black); box-shadow: -4px -3px 9px 3px #242424; position: sticky; top: 0; width: 100%; z-index: 999999; }
.header .logo { display: inline-block; padding: 25px 15px; }
.header .searchitem { display: inline-block; margin: 0 auto; width: calc(100% - 400px); padding: 25px 15px; box-sizing: border-box; position: relative; top: 0px; }
.header .hdr span, .header .hdr a { font-size: 22px; font-family: "AlumniSans-ExtraLight"; font-weight: 200; display: inline-block; }

.nav { transition: max-height .5s ease-out; display: none; position: sticky; }

/* Menu Icon */
.hamb { cursor: pointer; float: right; padding: 40px 20px; }

.hamb-title { display: inline-block; padding-right: 15px; }

.hamb-line { background: var(--white); display: inline-block; height: 2px; position: relative; width: 24px; top: -3px; }

.hamb-line::before, .hamb-line::after { background: var(--white); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }

.hamb-line::before { top: 5px; }

.hamb-line::after { top: -5px; }

.side-menu { display: none; }

/* Toggle menu icon */
.side-menu:checked ~ nav { position: sticky; display: block; background: #36383F; }

.side-menu:checked ~ .hamb .hamb-line { background: transparent; }

.side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top: 0; }

.side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top: 0; }

/* Responsiveness */
@media (max-width: 790px) { .masterbox { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .header .logo .hdr { text-transform: capitalize; }
  .header .logo .hdr span.fw { display: none; }
  .header .searchitem { width: calc(100% - 285px); }
  .header .hamb-title { display: none; }
  .nav .mainMenu { column-count: 3; }
  .nav .subMenu .categoryList li { display: inline-block; width: auto; padding-right: 15px; } }
@media (max-width: 620px) { .searchinput .searchbutton { font-size: 0px; }
  .searchinput input { padding-left: 49px; }
  .header .logo { top: 0px; position: relative; }
  .header .logo .hdr { padding-left: 44px; }
  .header .logo .hdr .name { font-size: 0px; }
  .header .searchitem { width: calc(100% - 155px); padding-left: 0; }
  .nav .mainMenu { column-count: 2; } }