/* Анимация */ @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fade-deep-in { from { visibility: visible; opacity: 0; } to { opacity: 1; } } @keyframes fade-deep-in { from { visibility: visible; opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-deep-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes fade-deep-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @-webkit-keyframes menu-in-down { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } to { opacity: 1; } } @keyframes menu-in-down { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } to { opacity: 1; } } @-webkit-keyframes menu-in-up { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); visibility: hidden; } } @keyframes menu-in-up { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); visibility: hidden; } } @-webkit-keyframes menu-in-right { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } to { opacity: 1; } } @keyframes menu-in-right { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } to { opacity: 1; } } @-webkit-keyframes menu-in-left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); visibility: hidden; } } @keyframes menu-in-left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); visibility: hidden; } } @-webkit-keyframes slide-fade-in-down { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; } } @keyframes slide-fade-in-down { from { visibility: visible; opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; } } @-webkit-keyframes slide-fade-in-up { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: hidden; } } @keyframes slide-fade-in-up { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: hidden; } } @-webkit-keyframes zoom-in { from { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoom-in { from { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* Нормализация */ *, *::before, *::after { box-sizing: inherit; } html { height: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.5; font-weight: 600; color: #fff; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: auto; } body { height: inherit; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: inherit; line-height: inherit; color: #fff; background-color: #3F60B1; } dl, dt, dd, nav, main, aside, figure, footer, header, hgroup, legend, section, address, article, fieldset, figcaption { display: block; } p, dl, dt, dd, ul, ol, form, legend, figure, address, fieldset, figcaption { margin: 0; padding: 0; } address { font-style: normal; } iframe, object { max-width: 100%; } object { background: none; border: none; outline: none; border-radius: 0; } legend, fieldset { min-width: 0; } fieldset { border: none; } legend { max-width: 100%; width: 100%; font: inherit; line-height: inherit; color: inherit; white-space: normal; } ul, ol { list-style: none; } img { max-width: 100%; height: auto; vertical-align: middle; border-style: none; } svg { display: block; overflow: hidden; fill: currentColor; } em { font-style: italic; } b, strong { font-weight: 700; } hr { height: 0; margin-top: 1rem; margin-bottom: 1rem; overflow: visible; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); } label { word-wrap: break-word; word-wrap: break-word; word-break: break-word; } label[for] { cursor: pointer; } textarea { min-height: 100px; line-height: inherit; resize: vertical; } a { text-decoration: none; word-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: transparent; outline: none; transition: all .2s } a:link, a:visited { color: inherit; } a:hover, a:focus, a:active { text-decoration: underline; outline: none; } a:hover { color: #C5D33D; } a:focus, a:active { color: #d1db6c; } /* Свободные классы-помощники — Ширина */ ._w1 { width: 100% !important; } ._w2 { width: 50% !important; } ._w3 { width: 33.33333% !important; } ._w4 { width: 25% !important; } ._w5 { width: 20% !important; } ._w40 { width: 40px !important; } ._w50 { width: 50px !important; } ._w60 { width: 60px !important; } ._w80 { width: 80px !important; } ._w100 { width: 100px !important; } ._w120 { width: 120px !important; } ._w140 { width: 140px !important; } ._w150 { width: 150px !important; } ._w160 { width: 160px !important; } ._w180 { width: 180px !important; } ._w200 { width: 200px !important; } ._w220 { width: 220px !important; } ._w240 { width: 240px !important; } ._w250 { width: 250px !important; } ._w260 { width: 260px !important; } ._w280 { width: 280px !important; } ._w300 { width: 300px !important; } ._w_auto { width: auto !important; } ._mw1 { max-width: 100% !important; } ._mw2 { max-width: 50% !important; } ._mw3 { max-width: 33.33333% !important; } ._mw4 { max-width: 25% !important; } ._mw5 { max-width: 20% !important; } ._mw40 { max-width: 40px !important; } ._mw50 { max-width: 50px !important; } ._mw60 { max-width: 60px !important; } ._mw80 { max-width: 80px !important; } ._mw100 { max-width: 100px !important; } .mw120 { max-width: 120px !important; } ._mw140 { max-width: 140px !important; } ._mw150 { max-width: 150px !important; } ._mw160 { max-width: 160px !important; } ._mw180 { max-width: 180px !important; } ._mw200 { max-width: 200px !important; } ._mw250 { max-width: 250px !important; } ._mw280 { max-width: 280px !important; } ._mw300 { max-width: 300px !important; } /* Свободные классы-помощники — Высота */ ._h20 { height: 20px !important; } ._h30 { height: 30px !important; } ._h40 { height: 40px !important; } ._h50 { height: 50px !important; } ._mh20 { max-height: 20px !important; } ._mh30 { max-height: 30px !important; } ._mh40 { max-height: 40px !important; } ._mh50 { max-height: 50px !important; } ._mh60 { max-height: 60px !important; } ._mh80 { max-height: 80px !important; } ._mh90 { max-height: 90px !important; } ._mh100 { max-height: 100px !important; } ._mh500 { max-height: 500px !important; } ._minh40 { min-height: 40px !important; } ._minh100 { min-height: 100px !important; } ._minh200 { min-height: 200px !important; } ._minh250 { min-height: 250px !important; } ._minh300 { min-height: 300px !important; } /* Свободные классы-помощники — Поля */ ._ml0 { margin-left: 0 !important; } ._ml5 { margin-left: 0.41667rem !important; /* 5/12 */ } ._ml10 { margin-left: 0.83333rem !important; /* 10/12 */ } ._ml, ._ml15 { margin-left: 1.25rem !important; /* 15/12 */ } ._ml20 { margin-left: 1.66667rem !important; /* 20/12 */ } ._ml30 { margin-left: 2.5rem !important; /* 30/12 */ } ._ml_auto { margin-left: auto !important; } ._mt0 { margin-top: 0 !important; } ._mt5 { margin-top: 0.41667rem !important; /* 5/12 */ } ._mt10 { margin-top: 0.83333rem !important; /* 10/12 */ } ._mt, ._mt15 { margin-top: 1.25rem !important; /* 15/12 */ } ._mt20 { margin-top: 1.66667rem !important; /* 20/12 */ } ._mt30 { margin-top: 2.5rem !important; /* 30/12 */ } ._mt_auto { margin-top: auto !important; } ._mr0 { margin-right: 0 !important; } ._mr5 { margin-right: 0.41667rem !important; /* 5/12 */ } ._mr10 { margin-right: 0.83333rem !important; /* 10/12 */ } ._mr, ._mr15 { margin-right: 1.25rem !important; /* 15/12 */ } ._mr20 { margin-right: 1.66667rem !important; /* 20/12 */ } ._mr30 { margin-right: 2.5rem !important; /* 30/12 */ } ._mr_auto { margin-right: auto !important; } ._mb0 { margin-bottom: 0 !important; } ._mb5 { margin-bottom: 0.41667rem !important; /* 5/12 */ } ._mb10 { margin-bottom: 0.83333rem !important; /* 10/12 */ } ._mb, ._mb15 { margin-bottom: 1.25rem !important; /* 15/12 */ } ._mb20 { margin-bottom: 1.66667rem !important; /* 20/12 */ } ._mb30 { margin-bottom: 2.5rem !important; /* 30/12 */ } ._mb_auto { margin-bottom: auto !important; } /* Свободные классы-помощники — Отступы */ ._pl0 { padding-left: 0 !important; } ._pl5 { padding-left: 0.41667rem !important; /* 5/12 */ } ._pl10 { padding-left: 0.83333rem !important; /* 10/12 */ } ._pl, ._pl15 { padding-left: 1.25rem !important; /* 15/12 */ } ._pl20 { padding-left: 1.66667rem !important; /* 20/12 */ } ._pl30 { padding-left: 2.5rem !important; /* 30/12 */ } ._pt0 { padding-top: 0 !important; } ._pt5 { padding-top: 0.41667rem !important; /* 5/12 */ } ._pt10 { padding-top: 0.83333rem !important; /* 10/12 */ } ._pt, ._pt15 { padding-top: 1.25rem !important; /* 15/12 */ } ._pt20 { padding-top: 1.66667rem !important; /* 20/12 */ } ._pt30 { padding-top: 2.5rem !important; /* 30/12 */ } ._pr0 { padding-right: 0 !important; } ._pr5 { padding-right: 0.41667rem !important; /* 5/12 */ } ._pr10 { padding-right: 0.83333rem !important; /* 10/12 */ } ._pr, ._pr15 { padding-right: 1.25rem !important; /* 15/12 */ } ._pr20 { padding-right: 1.66667rem !important; /* 20/12 */ } ._pr30 { padding-right: 2.5rem !important; /* 30/12 */ } ._pb0 { padding-bottom: 0 !important; } ._pb5 { padding-bottom: 0.41667rem !important; /* 5/12 */ } ._pb10 { padding-bottom: 0.83333rem !important; /* 10/12 */ } ._pb, ._pb15 { padding-bottom: 1.25rem !important; /* 15/12 */ } ._pb20 { padding-bottom: 1.66667rem !important; /* 20/12 */ } ._pb30 { padding-bottom: 2.5rem !important; /* 30/12 */ } /* Список */ ._list > * { margin-bottom: 1.25rem /* 15/12 */ } ._list > *:last-child { margin-bottom: 0; } /* Вид */ ._viewrows > * { margin-bottom: 2.5rem /* 30/12 */ } ._viewrows > *:last-child { margin-bottom: 0; } ._viewgrid > * { max-width: 25rem; /* 300/12 */ margin-bottom: 2.5rem; /* 30/12 */ } ._viewgrid > *:last-child { margin-bottom: 0; } @media (min-width: 576px) { ._viewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20.83333rem, 1fr)); /* 250/12 */ gap: 2.5rem; /* 30/12 */ align-items: start; } ._viewgrid > * { max-width: none; margin-bottom: 0; } } /* Плитка */ ._tile { padding: 1.25rem; /* 15/12 */ border: 1px solid #dfdfdf; border-radius: 0.25rem; /* 3/12 */ } /* Граница */ ._bounded:not(:last-child) { margin-bottom: 0; } ._bounded:not(:first-child), ._bounded ._bounded:first-child { border-top: 1px solid #dfdfdf; } ._bounded:not(:first-child), ._bounded ._bounded:first-child { margin-top: 2.5rem; /* 30/12 */ padding-top: 2.5rem; /* 30/12 */ } /* Уведомления */ ._ok, ._err, ._warn, ._note, ._attent, ._unavailable { margin: 0.41667em auto; /* 5/12 */ padding: 0.41667em 0.83333em; /* 5/12 10/12 */ color: #fff; border-radius: 0.25em; /* 3/12 */ overflow: hidden; } ._ok:link, ._ok:visited, ._ok:hover, ._ok:focus, ._ok:active, ._err:link, ._err:visited, ._err:hover, ._err:focus, ._err:active, ._warn:link, ._warn:visited, ._warn:hover, ._warn:focus, ._warn:active, ._note:link, ._note:visited, ._note:hover, ._note:focus, ._note:active, ._attent:link, ._attent:visited, ._attent:hover, ._attent:focus, ._attent:active { color: #fff; } ._ok a:link, ._ok a:visited, ._ok a:hover, ._ok a:focus, ._ok a:active, ._err a:link, ._err a:visited, ._err a:hover, ._err a:focus, ._err a:active, ._warn a:link, ._warn a:visited, ._warn a:hover, ._warn a:focus, ._warn a:active, ._note a:link, ._note a:visited, ._note a:hover, ._note a:focus, ._note a:active, ._attent a:link, ._attent a:visited, ._attent a:hover, ._attent a:focus, ._attent a:active { color: inherit; } ._ok a, ._err a, ._warn a, ._note a, ._attent a { text-decoration: underline } ._ok a:hover, ._ok a:focus, ._ok a:active, ._err a:hover, ._err a:focus, ._err a:active, ._warn a:hover, ._warn a:focus, ._warn a:active, ._note a:hover, ._note a:focus, ._note a:active, ._attent a:hover, ._attent a:focus, ._attent a:active { text-decoration: none; } ._ok { background-color: #3aaa35; } ._err, ._warn { background-color: #d1db6c; } ._note { background-color: #2196f3; } ._attent { background-color: #ffb400; } ._unavailable { color: inherit; background-color: #dfdfdf; } /* Статус/Маркер */ ._blocked { padding: 1.25rem; /* 15/12 */ background-color: #ebebeb; border: 1px solid #dfdfdf; } ._noact { background-color: #ebebeb; } ._isnew, ._unread { padding: 1.25rem; /* 15/12 */ background-color: #fef8f6; border: 1px solid #fdede8; } ._bounded._isnew, ._bounded._unread { padding: 2.5rem 1.25rem; /* 30/12 15/12 */ } ._bounded._isnew + ._isnew, ._bounded._unread + ._bounded { margin-top: 0; } ._asterisk::after { display: inline; content: '*'; color: #f00; } /* Помощники */ ._box { max-width: 1150px; width: 100%; margin-left: auto; margin-right: auto; } ._inline { display: inline !important; } ._block { display: block !important; } ._iblock { display: inline-block !important; } ._grid { display: grid !important; } ._flex { display: flex !important; } ._hidden { display: none !important; } :disabled, .disabled, ._disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } ._images { vertical-align: top } ._images img { display: inline-block; margin-right: 1.25rem; /* 15/12 */ margin-bottom: 1.25rem; /* 15/12 */ vertical-align: top; border-radius: 0.25rem; /* 3/12 */ } ._attachments > * { display: block; margin-bottom: 0.41667rem; /* 5/12 */ } ._attachments > *:empty, ._attachments > *:last-child { margin-bottom: 0; } ._attachments img { border-radius: 0.25rem; /* 3/12 */ } ._ellipsis { display: block; text-overflow: ellipsis; overflow: hidden; } ._wordbreak { word-break: break-word; } ._wordbreak_all { word-break: break-all; } ._wordwrap { word-wrap: break-word; word-wrap: break-word; } ._underlined { text-decoration: underline !important; } a._underline:hover, a._underline:focus, a._underline:active, ._underline a:hover, ._underline a:focus, ._underline a:active { text-decoration: underline; } ._cover { display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; } /* Подгонка */ ._fit, ._fit_none, ._fit_cover, ._fit_contain { display: block; max-width: 100%; width: 100%; height: auto; position: relative; overflow: hidden } ._fit::after, ._fit_none::after, ._fit_cover::after, ._fit_contain::after { display: block; padding-bottom: 100%; content: ''; } ._fit img, ._fit video, ._fit iframe, ._fit canvas, ._fit_none img, ._fit_none video, ._fit_none iframe, ._fit_none canvas, ._fit_cover img, ._fit_cover video, ._fit_cover iframe, ._fit_cover canvas, ._fit_contain img, ._fit_contain video, ._fit_contain iframe, ._fit_contain canvas, ._fit__object { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: contain; object-fit: contain; } ._fit_cover img, ._fit_cover video, ._fit_cover iframe, ._fit_cover canvas, ._fit_cover ._fit__object { -o-object-fit: cover; object-fit: cover; } ._fit_contain img, ._fit_contain video, ._fit_contain iframe, ._fit_contain canvas, ._fit_contain ._fit__object { -o-object-fit: contain; object-fit: contain; } ._fit_none img, ._fit_none video, ._fit_none iframe, ._fit_none canvas, ._fit_none ._fit__object { -o-object-fit: none; object-fit: none; } /* Подгонка — Форма */ ._fit_rect::after, ._fit._rect::after { padding-bottom: 50%; } ._fit_circle, ._fit._circle { border-radius: 50%; } /* Изображение-заглушка */ ._dummyimage { display: block; max-width: 100%; width: 100%; height: auto; position: relative; background-image: url('../img/dummyimage.svg'); background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 58 58'%3E%3Cpath fill='%23dfdfdf' d='M57,6H1C0.448,6,0,6.447,0,7v44c0,0.553,0.448,1,1,1h56c0.552,0,1-0.447,1-1V7C58,6.447,57.552,6,57,6z M56,50H2V8h54V50z' /%3E%3Cpath fill='%23dfdfdf' d='M16,28.138c3.071,0,5.569-2.498,5.569-5.568C21.569,19.498,19.071,17,16,17s-5.569,2.498-5.569,5.569 C10.431,25.64,12.929,28.138,16,28.138z M16,19c1.968,0,3.569,1.602,3.569,3.569S17.968,26.138,16,26.138s-3.569-1.601-3.569-3.568 S14.032,19,16,19z'/%3E%3Cpath fill='%23dfdfdf' d='M7,46c0.234,0,0.47-0.082,0.66-0.249l16.313-14.362l10.302,10.301c0.391,0.391,1.023,0.391,1.414,0s0.391-1.023,0-1.414 l-4.807-4.807l9.181-10.054l11.261,10.323c0.407,0.373,1.04,0.345,1.413-0.062c0.373-0.407,0.346-1.04-0.062-1.413l-12-11 c-0.196-0.179-0.457-0.268-0.72-0.262c-0.265,0.012-0.515,0.129-0.694,0.325l-9.794,10.727l-4.743-4.743 c-0.374-0.373-0.972-0.392-1.368-0.044L6.339,44.249c-0.415,0.365-0.455,0.997-0.09,1.412C6.447,45.886,6.723,46,7,46z'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 50px 50px; overflow: hidden } ._dummyimage::after { display: block; padding-bottom: 100%; content: ''; } ._dummyimage img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: none; object-fit: none; } ._circle { display: block; border-radius: 50%; overflow: hidden; } ._circle40 { display: block; width: 3.33333rem; /* 40/12 */ height: 3.33333rem; /* 40/12 */ border-radius: 50%; overflow: hidden; } ._bordered { border: 1px solid #dfdfdf; } ._rounded { overflow: hidden; border-radius: 0.25rem; /* 3/12 */ } ._scroll { overflow: hidden; overflow-y: auto } ._scroll::-webkit-scrollbar { width: 4px; background: #dfdfdf; border-radius: 3px; transition: all; } ._scroll::-webkit-scrollbar-thumb { background: #C5D33D; border-radius: 3px; transition: all; } ._scroll:hover::-webkit-scrollbar-thumb { background: #d1db6c; } ._dark { color: #fff } ._dark a:hover { color: #dfdfdf; } ._dark a:focus, ._dark a:active { color: #c8c7c7; } ._animated { -webkit-animation-fill-mode: both; animation-fill-mode: both; } ._ctext { text-align: center !important; } ._rtext { text-align: right !important; } ._jtext { text-align: justify !important; } /* Свободные классы-помощники — Цвет */ ._black { color: #000 !important; } ._green { color: #3aaa35 !important; } ._gray { color: #c8c7c7 !important; } ._blue { color: #2196f3 !important; } ._yellow { color: #ffb400 !important; } ._red { color: #c53c12 !important; } /* Свободные классы-помощники — Скругление углов */ ._radius_t0, ._radius_l0, ._radius_tl0 { border-top-left-radius: 0 !important; } ._radius_t0, ._radius_r0, ._radius_tr0 { border-top-right-radius: 0 !important; } ._radius_b0, ._radius_l0, ._radius_bl0 { border-bottom-left-radius: 0 !important; } ._radius_b0, ._radius_r0, ._radius_br0 { border-bottom-right-radius: 0 !important; } /* Поле ввода ( по умолчанию ) */ input, select, textarea { display: block; width: 100%; max-width: 100%; padding: 0.75rem; /* 9/12 */ font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; background: #fff; border: 1px solid #dfdfdf; outline: none; border-radius: 0.25rem /* 3/12 */ } input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus { border-color: #c8c7c7; } input::-webkit-input-placeholder { opacity: 1; transition: opacity .1s; } input::-moz-placeholder { opacity: 1; transition: opacity .1s; } input:-moz-placeholder { opacity: 1; transition: opacity .1s; } input:-ms-input-placeholder { opacity: 1; transition: opacity .1s; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { opacity: 0; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { opacity: 0; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { opacity: 0; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { opacity: 0; } option { font-size: 1.16667em; /* 14/12 */ line-height: inherit; font-weight: normal; } .field-d { position: relative; } .field-d:empty { display: none; } .field-d:after { display: table; content: ''; clear: both; } .field-d input[type='radio'], .field-d input[type='checkbox'] { width: 0; height: 0; margin: 0; padding: 0; position: absolute; border: none; clip: rect(0,0,0,0); opacity: 0; } .field-d input[type='radio'] + label, .field-d input[type='checkbox'] + label { display: inline-block; min-height: 18px; padding-top: 1px; padding-left: 2.08333em; /* 25/12 */ position: relative; vertical-align: middle; } .field-d input[type='radio'] + label:hover::before, .field-d input[type='checkbox'] + label:hover::before { border-color: #c8c7c7; } .field-d input[type='radio'] + label::before, .field-d input[type='checkbox'] + label::before { display: block; width: 18px; height: 18px; position: absolute; top: 0; left: 0; content: ''; background: #fff no-repeat center center; border: 1px solid #dfdfdf; transition: all 0.1s; z-index: 2; } .field-d input[type='checkbox'] + label::before { border-radius: 0.25em;/* 3/12 */ } .field-d input[type='radio'] + label::before { border-radius: 50%; } .field-d input[type='radio']:checked + label::before, .field-d input[type='checkbox']:checked + label::before { color: #C5D33D; border-color: currentColor; background-color: currentColor; } .field-d input[type='checkbox']:checked + label::before { background-image: url('../img/check.svg'); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E"); background-size: 10px 10px; } .field-d input[type='radio']:checked + label::after { display: block; width: 8px; height: 8px; position: absolute; top: 5px; left: 5px; content: ''; background: #fff; border-radius: 50%; -webkit-animation: 0.2s both zoom-in; animation: 0.2s both zoom-in; z-index: 2; } .infofield, .field-d__name { display: block; margin-bottom: 0.41667em; /* 5/12 */ word-wrap: break-word; word-break: break-word; } .field-d__title { font-size: 1.16667rem; /* 14/12 */ } .field-d__text, .attachment_extensions { margin-top: 0.45455em; /* 5/11 */ font-size: 0.91667rem; /* 11/12 */ } .field-d__bb, .bbcode_toolbar { margin-bottom: -1px; padding: 0.41667rem; /* 5/12 */ border: 1px solid #dfdfdf; border-bottom: none; border-radius: 0.25rem 0.25rem 0 0; /* 3/12 */ } .field-d__bb img, .bbcode_toolbar img { cursor: pointer; } .bbcode_smiles { margin-top: 0.41667rem; /* 5/12 */ padding-top: 0.41667rem; /* 5/12 */ border-top: 1px solid #dfdfdf; } .field-d__list > *:not(:last-child) { margin-bottom: 0.83333rem; /* 10/12 */ } /* Поле ввода - Файл */ .attach-d, .inpimage, .inpattachment { display: block; padding: 0.41667rem 0; /* 5/12 0 */ position: relative; float: left; clear: both; overflow: hidden } .attach-d input[type='file'], .inpimage input[type='file'], .inpattachment input[type='file'] { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; opacity: 0; border: none; z-index: 2; cursor: pointer; } .attach-d input[type='file']::-webkit-file-upload-button, .inpimage input[type='file']::-webkit-file-upload-button, .inpattachment input[type='file']::-webkit-file-upload-button { cursor: pointer; } .attach-d input[type='file'] + label, .inpimage input[type='file'] + label, .inpattachment input[type='file'] + label { display: inline-block; padding-left: 1.66667em;/* 20/12 */ vertical-align: middle; color: #C5D33D; background-repeat: no-repeat; background-color: transparent; background-position: 0 center; background-image: url('../img/attach.svg'); background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23e54d43' d='M97.344,482.17c-23.311,0-45.215-9.084-61.689-25.555c-34.01-34.014-34.01-89.361,0-123.371L305.343,63.543 c21.727-21.75,50.645-33.713,81.39-33.713c30.75,0,59.667,11.963,81.395,33.713c21.748,21.744,33.726,50.645,33.726,81.389 c0,30.75-11.964,59.65-33.708,81.381L255.843,438.596c-6.374,6.371-16.696,6.371-23.067,0c-6.374-6.373-6.374-16.695,0-23.07 l212.298-212.283c15.583-15.58,24.153-36.291,24.153-58.311c0-22.016-8.588-42.74-24.167-58.322 c-15.583-15.58-36.294-24.154-58.327-24.154c-22.029,0-42.74,8.574-58.323,24.154L58.725,356.311 c-21.283,21.301-21.283,55.938,0,77.234c20.645,20.617,56.589,20.617,77.233,0l181.091-181.105 c4.924-4.924,7.745-11.74,7.745-18.688c0-7.045-2.755-13.686-7.759-18.689c-10.291-10.291-27.067-10.322-37.358,0L156,338.754 c-6.37,6.375-16.697,6.375-23.067,0c-6.374-6.371-6.374-16.697,0-23.066l123.673-123.691c23.005-23.004,60.461-23.004,83.497,0 c11.169,11.166,17.317,26,17.317,41.756c0,15.547-6.308,30.762-17.3,41.754L159.029,456.615 C142.555,473.086,120.65,482.17,97.344,482.17z'/%3E%3C/svg%3E%0A"); background-size: 15px 15px; cursor: pointer; } .attach-d:hover input[type='file'] + label, .inpimage:hover input[type='file'] + label, .inpattachment:hover input[type='file'] + label { color: #d1db6c; } .attach-d + *, .inpimage + *, .inpattachment + * { clear: both; } .image_delete, .attach-d__delete, .delete_attachment, .inpattachment_delete { display: inline-block; width: 1.08333rem; /* 13/12 */ height: 1.08333rem; /* 13/12 */ margin: 0.41667rem; /* 5/12 */ padding: 0; position: relative; vertical-align: middle; font-size: 0; background-repeat: no-repeat; background-color: transparent; background-position: center center; background-image: url('../img/trash.svg'); background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23000000' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23000000' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23000000' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); background-size: 1.08333rem 1.08333rem; /* 13/12 */ border: none; outline: none; border-radius: 0; overflow: hidden; transition: none; cursor: pointer; z-index: 3 } .image_delete:hover, .attach-d__delete:hover, .delete_attachment:hover, .inpattachment_delete:hover { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23e55e34' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23e54d43' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23e54d43' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23e54d43' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); } .image_delete:focus, .image_delete:active, .attach-d__delete:focus, .attach-d__delete:active, .delete_attachment:focus, .delete_attachment:active, .inpattachment_delete:focus, .inpattachment_delete:active { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23a22802' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23e2382c' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23e2382c' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23e2382c' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); } .image_delete { margin-top: 0; margin-left: 0; } .inpimage img { margin-right: 0.41667rem; /* 5/12 */ margin-bottom: 0.41667rem; /* 5/12 */ border-radius: 0.25rem; /* 3/12 */ } /* Поле ввода в форме */ form .field-d { margin-bottom: 1.25rem; /* 15/12 */ } form .field-d:last-child { margin-bottom: 0; } form .field-d ~ .button-d, form .field-d ~ [type='reset'], form .field-d ~ [type='submit'] { margin-top: 0.41667rem; /* 5/12 */ } /* Кнопка */ .button-d, [type='reset'], [type='submit'] { display: inline-flex; justify-content: center; align-items: center; max-width: 100%; width: auto; margin: 0; padding: 1.07143em 1.42857em; /* 15/14 20/14 */ font-family: 'Montserrat', sans-serif; font-size: 1.16667em; /* 14/12 */ font-weight: 600; text-align: center; line-height: 1; white-space: nowrap; vertical-align: middle; text-overflow: ellipsis; background: #C5D33D; border: none; border-radius: 0.21429em; /* 3/14 */ outline: none; overflow: hidden; cursor: pointer; transition: all 0.1s; } .button-d:hover, [type='reset']:hover, [type='submit']:hover, .button-d:focus, [type='reset']:focus, [type='submit']:focus, .button-d:active, [type='reset']:active, [type='submit']:active { color: #fff; background-color: #d1db6c; outline: none; } .button-d:active, [type='reset']:active, [type='submit']:active { background-color: #d1db6c; } .button-d__icon, .button-d__name { margin-right: 0.71429em /* 10/14 */ } .button-d__icon:last-child, .button-d__name:last-child { margin-right: 0; } .button-d:link, .button-d:visited { color: #000; } .button-d:link:hover, .button-d:link:focus, .button-d:visited:hover, .button-d:visited:focus { color: #000; background-color: #d1db6c; } .button-d:link:active, .button-d:visited:active { color: #000; background-color: #d1db6c; } .button-d_wide { width: 100%; } .button-d_narrow { padding-top: 0.71429em; /* 10/14 */ padding-bottom: 0.71429em; /* 10/14 */ } .button-d_short { padding: 0.83333em; /* 10/12 */ font-size: 1em; /* 12/12 */ } .button-d_short .button-d__icon, .button-d_short .button-d__name { margin-right: 0.41667em; /* 5/12 */ } .button-d_short .button-d__icon:last-child, .button-d_short .button-d__name:last-child { margin-right: 0; } .button-d_dark, .button-d_dark:link, .button-d_dark:visited { color: inherit; } .button-d_dark { background-color: #dfdfdf; } .button-d_transparent, .button-d_transparent:link, .button-d_transparent:visited { color: inherit; } .button-d_transparent, .button-d_transparent:hover, .button-d_transparent:focus, .button-d_transparent:active { background-color: transparent; } .button-d_transparent { border: 1px solid transparent } .button-d_transparent:hover, .button-d_transparent:focus, .button-d_transparent:active { border-color: currentColor; } .button-d_transparent:hover, .button-d_transparent:focus { color: #C5D33D; } .button-d_transparent:active { color: #d1db6c; } /* Кнопка в форме */ form .button-d, form [type='reset'], form [type='submit'] { margin-top: 1.66667rem; /* 20/12 */ margin-right: 1.25rem /* 15/12 */ } form .button-d:last-child, form [type='reset']:last-child, form [type='submit']:last-child { margin-right: 0; } /* Кнопка Вверх */ .upper-d { width: 3.33333rem; /* 40/12 */ height: 3.33333rem; /* 40/12 */ padding: 0; position: fixed; bottom: 50px; right: 50px; opacity: 0; filter: alpha(opacity=0); z-index: -2; -webkit-animation: .8s both fade-deep-out; animation: .8s both fade-deep-out; } ._upper-show .upper-d { opacity: 1; filter: alpha(opacity=100); color: #fff; z-index: 101; -webkit-animation-name: fade-deep-in; animation-name: fade-deep-in; } /* Кнопка Убрать/Удалить */ .remover-d { cursor: pointer } .remover-d:hover { color: #C5D33D; } .remover-d__input { width: 0; height: 0; margin: 0; padding: 0; position: absolute; clip: rect(0,0,0,0); opacity: 0; border: none; } .remover-d__icon { display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; text-align: center; line-height: 1; font-size: 1.33333rem; /* 16/12 */ color: inherit; } .remover-d__input:focus + .remover-d__icon, .remover-d__input:active + .remover-d__icon { color: #d1db6c; } .clean-d { display: inline-block; width: 1.08333em; /* 13/12 */ height: 1.08333em; /* 13/12 */ margin: 0; padding: 0; vertical-align: middle; background-repeat: no-repeat; background-color: transparent; background-position: center center; background-image: url('../img/trash.svg'); background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23000000' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23000000' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23000000' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); background-size: 1.08333em 1.08333em; /* 13/12 */ border: none; outline: none; border-radius: 0; overflow: hidden; cursor: pointer } .clean-d:hover { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23e54d43' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23e54d43' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23e54d43' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23e54d43' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); } .clean-d:focus, .clean-d:active { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23e2382c' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23e2382c' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23e2382c' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23e2382c' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); } .clean-d_white, .clean-d_white:hover, .clean-d_white:focus, .clean-d_white:active { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30 c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512 h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30 C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408 c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z'/%3E%3Cpath fill='%23ffffff' d='M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z'/%3E%3Cpath fill='%23ffffff' d='M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z'/%3E%3Cpath fill='%23ffffff' d='M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z'/%3E%3C/svg%3E%0A"); } /* Сaptcha */ .captcha { margin-top: 1.25rem; /* 15/12 */ margin-bottom: 1.25rem; /* 15/12 */ } .captcha .button-d { margin: 0; } .captcha + .button-d, .captcha + [type='reset'], .captcha + [type='submit'] { margin-top: 0.41667rem; /* 5/12 */ } .captcha-d__name, .captcha-d__question { display: block; margin-bottom: 0.41667rem; /* 5/12 */ word-wrap: break-word; word-break: break-word; } /* Ошибки/уведомления */ .error a, .errors a, .privacy_field a{ color: #C5D33D; } .error a:hover, .error a:focus, .error a:active, .errors a:hover, .errors a:focus, .errors a:active, .privacy_field a:hover, .privacy_field a:focus, .privacy_field a:active { color: #d1db6c; } .required_field, .privacy_field { margin-top: 0.45455em; /* 5/11 */ font-size: 0.91667rem; /* 11/12 */ } .error, .errors { padding: 0.5em 1em; /* 5/12 10/12 */ font-size: 0.83333rem; /* 10/12 */ color: #d1db6c; border-bottom: 1px solid; } /* Заголовки */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { display: block; margin-top: 0.5em; margin-bottom: 1em; line-height: 1.3; font-weight: 700; word-wrap: break-word; word-break: break-word } h1:empty, h1:first-child, h2:empty, h2:first-child, h3:empty, h3:first-child, h4:empty, h4:first-child, h5:empty, h5:first-child, h6:empty, h6:first-child, .h1:empty, .h1:first-child, .h2:empty, .h2:first-child, .h3:empty, .h3:first-child, .h4:empty, .h4:first-child, .h5:empty, .h5:first-child, .h6:empty, .h6:first-child { margin-top: 0; } h1, .h1 { margin-top: 0; margin-bottom: 0.76923em; /* 20/26 */ font-size: 2.16667em; /* 26/12 */ } h2, .h2 { font-size: 1.33333em; /* 16/12 */ } h3, .h3 { font-size: 1.16667em; /* 14/12 */ } h4, h5, h6, .h4, .h5, .h6 { font-size: 1.08333em; /* 13/12 */ } @media (min-width: 576px) { h1, .h1 { font-size: 2.5em; /* 30/12 */ } h2, .h2 { font-size: 1.66667em; /* 20/12 */ } } @media (min-width: 922px) { h1, .h1 { margin-bottom: 0.55556em; /* 20/36 */ font-size: 3em; /* 36/12 */ } h2, .h2 { font-size: 2em; /* 24/12 */ } h3, .h3 { font-size: 1.66667em; /* 20/12 */ } h4, h5, h6, .h4, .h5, .h6 { font-size: 1.33333em; /* 16/12 */ } } h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, .h1:empty, .h2:empty, .h3:empty, .h4:empty, .h5:empty, .h6:empty { margin-bottom: 0; } /* Типографика */ ._text { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; word-break: break-word } ._text a { color: #C5D33D; } ._text a:hover, ._text a:focus, ._text a:active { text-decoration: underline; color: #C5D33D; } ._text a:active { color: #d1db6c; } ._text h1, ._text h2, ._text h3, ._text h4, ._text h5, ._text h6 { margin-top: 0.5em; margin-bottom: 0.5em; line-height: inherit; font-weight: 700; } ._text h1 { margin-top: 0; } ._text p, ._text ol, ._text ul, ._text pre, ._text table { margin-top: 0.5em; margin-bottom: 1em; } ._text p:empty, ._text p:first-child, ._text ol:empty, ._text ol:first-child, ._text ul:empty, ._text ul:first-child, ._text pre:empty, ._text pre:first-child, ._text table:empty, ._text table:first-child { margin-top: 0; } ._text p:empty, ._text p:last-child, ._text ol:empty, ._text ol:last-child, ._text ul:empty, ._text ul:last-child, ._text pre:empty, ._text pre:last-child, ._text table:empty, ._text table:last-child { margin-bottom: 0; } ._text p { margin-bottom: 1.5em; } ._text ol, ._text ul { padding-left: 1em; list-style-position: outside; } ._text ol { list-style-type: decimal; } ._text ul { list-style-type: disc; } ._text ol li, ._text ul li { margin-bottom: 0.5em; list-style: inherit; } ._text ol li:last-child, ._text ul li:last-child { margin-bottom: 0; } ._text ol ul, ._text ol ol, ._text ul ol, ._text ul ul { margin-bottom: 0; } ._text ol ul:first-child, ._text ol ol:first-child, ._text ul ol:first-child, ._text ul ul:first-child { margin-top: 0.5em; } ._text ol ol, ._text ul ul { list-style: inherit; } ._text table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid; } ._text table thead, ._text table tbody, ._text table tfoot, ._text table tr, ._text table th, ._text table td { border: inherit; } ._text table th, ._text table thead { font-weight: 700; text-align: inherit; } ._text table th, ._text table td { padding: 0.5em; vertical-align: top; } ._text hr { box-sizing: border-box; height: 1px; margin-top: 1em; margin-bottom: 1em; color: #444; background: currentColor; border: 0; overflow: visible; } ._text img { vertical-align: baseline; border-style: none; } ._text b, ._text strong { font-weight: bold; } ._text em { font-style: italic; } ._text small { font-size: 80%; } ._text sub, ._text sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } ._text sub { bottom: -0.5em; } ._text sup { top: -0.5em; } ._text pre, ._text code, ._text kbd, ._text samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 1em; } /* Навигационная цепочка */ .breadcrumbs-d { margin-bottom: 1.25rem; font-size: 0.83333em; color: #595959; } /* Настройки */ .settings-d { border-bottom: 1px solid #dfdfdf; } .setting-d { margin-bottom: 1.25rem; /* 15/12 */ } .setting-d a:hover, .setting-d a:focus, .setting-d a:active { text-decoration: none; } .setting-d__item { display: inline-block; margin-right: 2.5rem; /* 30/12 */ vertical-align: middle; } .setting-d__item:last-child { margin-right: 0; } .setting-d__item > * { vertical-align: inherit; } .setting-d__name { margin-right: 0.83333rem; /* 10/12 */ } .setting-d__icon { font-size: 1.16667rem; /* 14/12 */ } .setting-d ._active { color: #C5D33D; } .setting-d ._active:link, .setting-d ._active:visited { color: #C5D33D; } .setting-d ._active:hover { color: unset; } .setting-d__view, .setting-d__direction { margin-right: 0.83333rem; /* 10/12 */ line-height: 1 } .setting-d__view:last-child, .setting-d__direction:last-child { margin-right: 0; } .setting-d__view { cursor: pointer; } .setting-d__view .setting-d__icon { font-size: 1.33333rem; /* 16/12 */ } .setting-d_views { margin-left: auto; } @media (max-width: 479px) { .setting-d_views { display: none; } } @media (min-width: 576px) { .settings-d { display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; } .setting-d:not(:last-child) { margin-right: 2.5rem; /* 30/12 */ } } /* Постраничная навигация */ .paginat-d { margin-top: 2.5rem /* 30/12 */ } .paginat-d a:hover, .paginat-d a:focus, .paginat-d a:active { text-decoration: none; } .paginat-d__item { margin: 0 0.25rem; /* 0 3/12 */ vertical-align: middle; border-bottom: 1px solid transparent; } .paginat-d__item:not(.button-d) { display: inline-block; padding: 0.41667rem; /* 5/12 */ font-size: 1.16667em; /* 14/12 */ } .paginat-d__item:first-child { margin-left: 0; } .paginat-d__item:last-child { margin-right: 0; } .paginat-d__item:hover, .paginat-d__item:focus, .paginat-d__item:active { border-bottom-color: currentColor; } .paginat-d__item_current { border-bottom-color: #C5D33D; } .paginat-d__item_prev { margin-right: 2.5rem; /* 30/12 */ } .paginat-d__item_next { margin-left: 2.5rem; /* 30/12 */ } .prevnext-d { margin-top: 2.5rem; /* 30/12 */ padding-top: 1.25rem; /* 15/12 */ overflow: hidden; border-top: 1px solid #dfdfdf; } .prevnext-d__prev, .prevnext-d__next { position: relative; } .prevnext-d__icon { position: absolute; top: 0.25rem; /* 3/12 */ line-height: 1; vertical-align: middle; } .prevnext-d__prev { padding-left: 2.5rem; /* 30/12 */ float: left; } .prevnext-d__prev .icon-d { margin-right: 1.25rem; /* 15/12 */ left: 0; } .prevnext-d__next { padding-right: 2.5rem; /* 30/12 */ float: right; } .prevnext-d__next .icon-d { margin-left: 1.25rem; /* 15/12 */ right: 0; } /* Показать ещё */ .showmore-d { align-self: end; margin-top: 2.5rem /* 30/12 */ } .showmore-d .button-d, .showmore-d [type='reset'], .showmore-d [type='submit'] { margin-top: 0; } /* Дата */ .date-d { font-size: 0.83333rem; /* 10/12 */ color: #595959; } /* Редактор сообщения */ .messeditor-d { font-size: 0.83333rem; /* 10/12 */ color: #595959; } /* Учетная запись пользователя */ .account-d__nikname { color: #595959; } .account-d_row { display: flex; align-items: center; max-width: 100% } .account-d_row .account-d__images { flex: none; flex-basis: 5em; /* 60/12 */ max-width: 5em; /* 60/12 */ margin-right: 1.25em; /* 15/12 */ } .account-d_row .account-d__details { flex: auto; display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; } .account-d_list > * { margin-bottom: 1.25em; /* 15/12 */ } .account-d_list > *:last-child { margin-bottom: 0; } .account-d_profile > * { margin-bottom: 1.66667rem;/* 20/12 */ } .account-d_profile > *:last-child { margin-bottom: 0; } .account-d_profile .account-d__images { display: flex; align-items: center; max-width: 100%; } .account-d_profile .account-d__avatar { flex: 0 0 auto; margin-right: 1rem; /* 12/12 */ } .account-d_profile .account-d__greeting { flex-grow: 1; font-size: 1.16667rem; /* 14/12 */ } .account-d_profile .account-d__nav .item-d:not(:last-child) { margin-bottom: 1.25rem; /* 15/12 */ } /* Панель — Языки */ .langs-d { display: flex; max-width: 100%; } .lang-d { display: block; padding: 0.41667rem 0; /* 5/12 0 */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-bottom: 1px solid transparent } .lang-d:not(:last-child) { margin-right: 1.25rem; /* 15/12 */ } .lang-d:hover, .lang-d:focus, .lang-d:active { text-decoration: none; } .lang-d:hover, .lang-d_current { border-color: #C5D33D; } /* */ .intercap-d { position: relative; } .intercap-d__tip { display: block; padding: 0.83333rem 0; /* 10/12 0 */ position: relative } .intercap-d__tip .tip-d__icon { font-size: 1.33333rem;/* 16/12 */ color: #595959; } .intercap-d__tip:hover, .intercap-d__tip:focus, .intercap-d__tip:active { text-decoration: none; } .intercap-d__tip:hover .tip-d__icon, .intercap-d__tip:focus .tip-d__icon, .intercap-d__tip:active .tip-d__icon { color: inherit; } .intercap-d__tip .amount-d__num { top: -2rem; /* 24/12 */ right: -10px; } .intercap-d__tip:after { display: block; width: 2.5rem; /* 30/12 */ height: 100%; position: absolute; top: 0; right: 0; content: ''; z-index: 2; } .intercap-d__result { min-width: 250px; max-width: 74vw; max-height: 60vh; position: absolute; top: 100%; right: -0.83333rem; /* -10/12 */ background-color: #fff; visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); z-index: -1 } .intercap-d__result::before { display: block; width: 100%; height: 1.25rem; /* 15/12 */ position: absolute; top: -1.25rem; /* -15/12 */ left: 0; content: ''; } .intercap-d__result:after { display: block; width: 0.83333rem; /* 10/12 */ height: 0.83333rem; /* 10/12 */ position: absolute; top: -0.41667rem; /* -5/12 */ right: 0.91667rem; /* 11/12 */ content: ''; background-color: inherit; border-top: 1px solid #c8c7c7; border-right: 1px solid #c8c7c7; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 2; } .intercap-d__box { max-height: inherit; padding: 1.25rem; /* 15/12 */ padding-bottom: 8.33333rem; /* 100/12 */ background-color: inherit; border: 1px solid #c8c7c7 } .intercap-d__box::-webkit-scrollbar { background: transparent; } @media (min-width: 480px) { .intercap-d_cart .intercap-d__result { width: 350px; } } @media (min-width: 768px) { .intercap-d_cart .intercap-d__result { width: 800px; } .intercap-d:hover .intercap-d__result:not(:empty), ._intercap-cart-open .intercap-d_cart .intercap-d__result:not(:empty) { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; } } .intercap-d__button_cart_bottom { margin-top: 1.25rem; /* 15/12 */ float: right; } /* Закрыть */ .close-d { margin: 0; padding: 0.41667rem 0.83333rem; /* 5/12 10/12 */ position: absolute; top: 0; right: 0; line-height: 1; background: none; border: none; outline: none; cursor: pointer; z-index: 2; } .close-d::after { content: '×'; font-size: 2.33333rem; /* 28/12 */ } .close-d:hover { color: #C5D33D; } .close-d:focus, .close-d:active { color: #d1db6c; } /* Рейтинг */ .rating-d { display: inline-block; vertical-align: middle; line-height: 1; } .rating-d fieldset { position: relative; } .rating-d input, .rating-d legend { width: 0; height: 0; margin: 0; padding: 0; position: absolute; clip: rect(0,0,0,0); opacity: 0; border: none; } .rating-d input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .rating-d .errors, .rating-d__details { margin-top: 0.41667em; /* 5/12 */ } .rating-d__details > * { margin-bottom: 0.5em; /* 5/10 */ font-size: 0.83333rem; /* 10/12 */ } /* Рейтинг — Значки шрифта "Font Awesome" */ .rating-d_fa input:focus + label, .rating-d_fa input:checked + label { font-weight: 900; color: #C5D33D; } .rating-d_fa label { position: absolute; top: 0; left: 0; font-family: 'Font Awesome 5 Free'; font-style: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; font-weight: 400; letter-spacing: 0.16667em; /* 2/12 */ text-rendering: auto; line-height: 1; color: transparent; z-index: 5; } .rating-d_fa label::before { content: '\f005'; } .rating-d_fa label:nth-of-type(2) { z-index: 4; } .rating-d_fa label:nth-of-type(2)::before { content: '\f005 \f005'; } .rating-d_fa label:nth-of-type(3) { z-index: 3; } .rating-d_fa label:nth-of-type(3)::before { content: '\f005 \f005 \f005'; } .rating-d_fa label:nth-of-type(4) { z-index: 2; } .rating-d_fa label:nth-of-type(4)::before { content: '\f005 \f005 \f005 \f005'; } .rating-d_fa label:last-of-type { position: relative; color: #C5D33D; z-index: 1; } .rating-d_fa label:last-of-type::before { content: '\f005 \f005 \f005 \f005 \f005'; } .rating-d_fa label:hover { font-weight: 900; color: #C5D33D; } .rating-d_fa label:hover ~ input:focus + label, .rating-d_fa label:hover ~ input:checked + label { font-weight: 400; color: transparent; } .rating-d_fa label:hover ~ input:focus + label:last-of-type, .rating-d_fa label:hover ~ input:checked + label:last-of-type { color: #C5D33D; } /* Рейтинг — Значки из картинок */ .rating-d_img fieldset { width: 6.25em; /* 75/12 */ height: 1.25em; /* 15/12 */ } .rating-d_img input:focus + label, .rating-d_img input:checked + label { background-color: #fff; background-image: url('../img/star_on.svg'); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.481 19.481' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23c53c12' d='m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z'/%3E%3C/svg%3E%0A"); } .rating-d_img label { width: 1.25em; /* 15/12 */ height: 100%; position: absolute; top: 0; left: 0; background-repeat: repeat-x; background-size: 1.25em 1.25em; /* 15/12 */ z-index: 5; } .rating-d_img label:nth-of-type(2) { width: 2.5em; /* 30/12 */ padding-left: 1.25em; /* 15/12 */ z-index: 4; } .rating-d_img label:nth-of-type(3) { width: 3.75em; /* 45/12 */ padding-left: 2.5em; /* 30/12 */ z-index: 3; } .rating-d_img label:nth-of-type(4) { width: 5em; /* 60/12 */ padding-left: 3.75em; /* 45/12 */ z-index: 2; } .rating-d_img label:last-of-type { width: 100%; padding-left: 5em; /* 60/12 */ background-image: url('../img/star_off.svg'); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 487.222 487.222'%3E%3Cpath fill='%23c53c12' d='M486.554,186.811c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6l-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5l0,0c-5.1,0-9.8,2.9-12.1,7.6 l-67.5,137.9l-152,22.6c-5.1,0.8-9.3,4.3-10.9,9.2s-0.2,10.3,3.5,13.8l110.3,106.9l-25.5,151.4c-0.9,5.1,1.2,10.2,5.4,13.2 c2.3,1.7,5.1,2.6,7.9,2.6c2.2,0,4.3-0.5,6.3-1.6l135.7-71.9l136.1,71.1c2,1,4.1,1.5,6.2,1.5l0,0c7.4,0,13.5-6.1,13.5-13.5 c0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5l109.6-107.5C486.854,197.111,488.154,191.711,486.554,186.811z M349.554,293.911 c-3.2,3.1-4.6,7.6-3.8,12l22.9,131.3l-118.2-61.7c-3.9-2.1-8.6-2-12.6,0l-117.8,62.4l22.1-131.5c0.7-4.4-0.7-8.8-3.9-11.9 l-95.6-92.8l131.9-19.6c4.4-0.7,8.2-3.4,10.1-7.4l58.6-119.7l59.4,119.4c2,4,5.8,6.7,10.2,7.4l132,18.8L349.554,293.911z'/%3E%3C/svg%3E%0A"); z-index: 1; } .rating-d_img label:hover { background-color: #fff; background-image: url('../img/star_on.svg'); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.481 19.481' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23c53c12' d='m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z'/%3E%3C/svg%3E%0A"); } .rating-d_img label:hover ~ input:focus + label, .rating-d_img label:hover ~ input:checked + label { background-image: url('../img/star_off.svg'); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 487.222 487.222'%3E%3Cpath fill='%23c53c12' d='M486.554,186.811c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6l-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5l0,0c-5.1,0-9.8,2.9-12.1,7.6 l-67.5,137.9l-152,22.6c-5.1,0.8-9.3,4.3-10.9,9.2s-0.2,10.3,3.5,13.8l110.3,106.9l-25.5,151.4c-0.9,5.1,1.2,10.2,5.4,13.2 c2.3,1.7,5.1,2.6,7.9,2.6c2.2,0,4.3-0.5,6.3-1.6l135.7-71.9l136.1,71.1c2,1,4.1,1.5,6.2,1.5l0,0c7.4,0,13.5-6.1,13.5-13.5 c0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5l109.6-107.5C486.854,197.111,488.154,191.711,486.554,186.811z M349.554,293.911 c-3.2,3.1-4.6,7.6-3.8,12l22.9,131.3l-118.2-61.7c-3.9-2.1-8.6-2-12.6,0l-117.8,62.4l22.1-131.5c0.7-4.4-0.7-8.8-3.9-11.9 l-95.6-92.8l131.9-19.6c4.4-0.7,8.2-3.4,10.1-7.4l58.6-119.7l59.4,119.4c2,4,5.8,6.7,10.2,7.4l132,18.8L349.554,293.911z'/%3E%3C/svg%3E%0A"); } /* Индикатор */ .indicat-d__track { display: block; min-height: 1em; line-height: 1; text-align: center; color: #fff; background-color: #dfdfdf; border-radius: 0.25rem; /* 3/12 */ overflow: hidden; } .indicat-d__value { display: block; min-height: inherit; padding: 0.16667em 0; /* 2/12 */ line-height: 1; overflow: hidden; background-color: #C5D33D; border-radius: inherit; } /* Тег */ .tag-d { display: inline-block; margin-top: 0.2em; /* 2/10 */ margin-bottom: 0.2em; /* 2/10 */ padding: 0.2em 0.5em; /* 2/10 5/10 */ vertical-align: middle; font-size: 0.83333rem; /* 10/12 */ text-decoration: none; background-color: #dfdfdf; border-radius: 0.3em; /* 3/10 */ transition: all .2s; } .tag-d, .tag-d:link, .tag-d:visited { color: #595959; } .tag-d:hover, .tag-d:focus, .tag-d:active { color: #fff; background-color: #d1db6c; } .tag-d:active { background-color: #C5D33D; } /* Значок */ .shield-d { display: flex; align-items: center; max-width: 100%; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: 1; color: inherit; background: none; border: none; border-radius: 0; outline: none; cursor: pointer; transition: all 0.1s } .shield-d:hover, .shield-d:focus, .shield-d:active { background: none; outline: none; } .shield-d > * { margin-right: 0.66667rem; /* 8/12 */ } .shield-d > *:last-child { margin-right: 0; } .shield-d__name { display: block; text-overflow: ellipsis; overflow: hidden; } /* Файл */ .file-d > * { margin-bottom: 0.83333rem /* 10/12 */ } .file-d > *:last-child { margin-bottom: 0; } /* Стикер */ .stickers-d { position: absolute; top: 0.83333rem; /* 10/12 */ left: 0.83333rem; /*10/12 */ z-index: 2; } .sticker-d { margin-right: 0.625em; /* 5/8 */ margin-bottom: 0.625em; /* 5/8 */ padding: 0.25em 0.625em; /* 2/8 5/8 */ float: left; clear: both; vertical-align: middle; font-size: 0.66667rem; /* 8/12 */ text-transform: uppercase; color: #fff; background-color: #C5D33D; border-radius: 0.375em; /* 3/8 */ } .sticker-d_new { background-color: #ffb400; } .sticker-d_hit { background-color: #c41200; } .sticker-d_action { background-color: #390b46; } /* Взаимодействие */ .interacts-d { position: absolute; top: 0.83333rem; /* 10/12 */ right: 0.83333rem; /* 10/12 */ z-index: 2; } .interact-d { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; margin: 0; padding: 0; text-align: center; background: #ebebeb; border: none; border-radius: 50%; outline: none; overflow: hidden; cursor: pointer; transition: all 0.3s; } .interact-d:not(:last-child) { margin-bottom: 0.83333rem; /* 10/12 */ } .interact-d, .interact-d:link, .interact-d:visited { color: #595959; } .interact-d:hover, .interact-d:focus, .interact-d:active { text-decoration: none; outline: none; } .interact-d:hover, .interact-d:active { color: #fff; } .interact-d:hover { background-color: #d1db6c; } .interact-d:active { background-color: #d1db6c; } .interact-d__icon { padding-top: 2px; font-size: 1.33333rem; /* 16/12 */ } .interact-d_active, .interact-d._active { color: #fff; background-color: #c53c12 } .interact-d_active:link, .interact-d_active:visited, .interact-d._active:link, .interact-d._active:visited { color: #fff; } .interact-d_active:hover, .interact-d._active:hover { color: #595959; background-color: #dfdfdf; } .interact-d_active:active, .interact-d._active:active { color: #fff; background-color: #d1db6c; } /* Цена */ .price-d { display: inline-block; font-weight: 700; vertical-align: middle } .price-d > * { line-height: 1.2; vertical-align: middle; } .price-d_old { position: relative; color: #595959 } .price-d_old::after { display: block; width: 100%; height: 0; position: absolute; top: 50%; left: 0; content: ''; border-bottom: 1px solid currentColor; } /* Количество */ .count-d { max-width: 10rem; /* 120/12 */ text-align: center; position: relative; overflow: hidden } .count-d:hover .count-d__input { border-color: #bdbdbd; } .count-d__control { width: 6.66667rem; /* 80/12 */ position: relative; float: left; } .count-d__unit, .count-d__input { padding: 1.08333rem 0; /* 13/12 0 */ } .count-d__input { padding-left: 1.66667rem; /* 20/12 */ padding-right: 1.66667rem; /* 20/12 */ text-align: inherit; border-width: 2px; } .count-d__input::-webkit-inner-spin-button { -moz-dearance: none; -webkit-appearance: none; appearance: none; } .count-d__input::-webkit-outer-spin-button { -moz-dearance: none; -webkit-appearance: none; appearance: none; } .count-d__dec, .count-d__inc { display: flex; justify-content: center; align-items: center; width: 1.66667rem; /* 20/12 */ height: 100%; height: calc(100% - 4px); margin: 0 !important; padding: 0; position: absolute; top: 2px; line-height: 1; font-size: 0.91667rem; /* 11/12 */ text-align: center; color: inherit; background: none; border: none; border-radius: 0; outline: none; overflow: hidden; cursor: pointer; transition: all 0.1s; z-index: 2 } .count-d__dec:hover, .count-d__dec:focus, .count-d__dec:active, .count-d__inc:hover, .count-d__inc:focus, .count-d__inc:active { background: none; } .count-d__dec:hover, .count-d__inc:hover { color: #C5D33D; } .count-d__dec:focus, .count-d__dec:active, .count-d__inc:focus, .count-d__inc:active { color: #d1db6c; } .count-d__dec { left: 2px; } .count-d__inc { right: 2px; } .count-d__unit { max-width: 2.5rem; /* 30/12 */ margin-left: 0.41667rem; /* 5/12 */ float: right; } /* Действие */ .action-d { display: inline-flex; justify-content: center; align-items: center; width: 2em; /* 24/12 */ height: 2em; /* 24/12 */ margin: 0.25em; /* 3/12 */ padding: 0; vertical-align: middle; text-align: center; background-color: #ebebeb; border-radius: 50%; overflow: hidden; outline: none; cursor: pointer } .action-d:first-child { margin-left: 0; } .action-d:last-child { margin-right: 0; } .action-d, .action-d:link, .action-d:visited { color: #595959; } .action-d:hover, .action-d:focus, .action-d:active { text-decoration: none; outline: none; } .action-d:hover, .action-d:active { color: #fff; } .action-d:hover { background-color: #d1db6c; } .action-d:active { background-color: #d1db6c; } /* Функция */ .function-d { margin-top: 0.83333rem; /* 10/12 */ margin-right: 1.25rem; /* 15/12 */ } .function-d:last-child { margin-right: 0; } .function-d:empty { display: none; } .functions-d__contents > * { margin-top: 0.83333rem; /* 10/12 */ } /* Интерактивный счётчик */ .amount-d__num { display: inline-block; min-width: 18px; height: 18px; padding: 4px 6px; line-height: 1; vertical-align: middle; white-space: nowrap; font-size: 10px; font-weight: 500; text-align: center; color: #fff; background-color: #C5D33D; border-radius: 9px; } .amount-d__num:empty { display: none; } .amount-d_stick { display: block; position: relative; } .amount-d_stick .amount-d__num { position: absolute; overflow: hidden; z-index: 2; } .amount-d_green .amount-d__num { background-color: #3aaa35; } /* Бегунок */ .runner-d .field-d { margin: 0; } .runner-d__from { grid-area: from; } .runner-d__div { grid-area: div; } .runner-d__to { grid-area: to; } .runner-d__board { display: grid; grid: 'from div to' / 1fr auto 1fr; gap: 1.25rem; /* 15/12 */ align-items: center; } .runner-d__track.ui-slider { height: 2px; margin-top: 1.66667rem; /* 20/12 */ margin-bottom: 2.08333rem; /* 25/12 */ background: #dfdfdf; border: none; border-radius: 0; cursor: pointer; } .runner-d__track.ui-slider::after { display: block; width: 100%; height: 20px; position: absolute; top: 50%; left: 0; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .runner-d__track.ui-slider .ui-slider-range { background: #C5D33D; border-radius: 0; } .runner-d__track.ui-slider .ui-slider-handle { width: 18px; height: 18px; top: -8px; margin-left: -9px; color: #C5D33D; background: #fff; border: 2px solid currentColor; border-radius: 50%; cursor: pointer; } .runner-d__track.ui-slider .ui-slider-handle:hover, .runner-d__track.ui-slider .ui-slider-handle:focus, .runner-d__track.ui-slider .ui-slider-handle:active { outline: none; color: #d1db6c; } .runner-d__track.ui-slider .ui-slider-handle:focus, .runner-d__track.ui-slider .ui-slider-handle:active { color: #d1db6c; } /* Изображение */ .img-d { display: block; max-width: 100%; width: auto; height: auto; position: relative; } .img-d img { display: block; max-width: 100%; width: auto; height: auto; } /* Аватар */ .avatar-d { display: block; width: 5rem; /* 60/12 */ height: 5rem; /* 60/12 */ overflow: hidden; border-radius: 50%; } .avatar-d_cover { background-repeat: no-repeat; background-position: center center; background-size: cover; } .avatar-d_contain { background-repeat: no-repeat; background-position: center center; background-size: contain; } .avatar-d_fit { position: relative; } .avatar-d_fit img, .avatar-d_fit video, .avatar-d_fit iframe, .avatar-d_fit canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; } .avatar-d_fit_contain img, .avatar-d_fit_contain video, .avatar-d_fit_contain iframe, .avatar-d_fit_contain canvas { -o-object-fit: contain; object-fit: contain; } .avatar-d_none { display: flex; justify-content: center; align-items: center; text-align: center; background-color: #ebebeb; } .avatar-d_none .avatar-d__icon { font-size: 2rem; /* 24/12 */ line-height: 1; } .avatar-d_none, .avatar-d_none:link, .avatar-d_none:visited, .avatar-d_none:hover, .avatar-d_none:focus, .avatar-d_none:active { color: #595959; } /* Обложка */ .cover-d { display: block; max-width: 100%; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden } .cover-d::after { display: block; padding-bottom: 100%; content: ''; } /* Обложка — Форма */ .cover-d_rect::after, .cover-d._rect::after { padding-bottom: 50%; } .cover-d_circle, .cover-d._circle { border-radius: 50%; } /* Слайд */ .slide-d { display: block; max-width: 100%; position: relative; } .slide-d:hover, .slide-d:focus, .slide-d:active { text-decoration: none; } .slide-d__content { display: block; max-width: 100%; word-wrap: break-word; word-break: break-word; } .slide-d_fit, .slide-d_cover, .slide-d_contain { overflow: hidden } .slide-d_fit::after, .slide-d_cover::after, .slide-d_contain::after { display: block; padding-bottom: 100%; content: ''; } .slide-d_fit .slide-d__content, .slide-d_cover .slide-d__content, .slide-d_contain .slide-d__content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1.25rem; /* 15/12 */ position: absolute; top: 0; left: 0; color: #fff; background-color: rgba(0, 0, 0, .5); z-index: 2; } .slide-d_fit .slide-d__content > *, .slide-d_cover .slide-d__content > *, .slide-d_contain .slide-d__content > * { margin-bottom: 1.25rem; /* 15/12 */ } .slide-d_fit .slide-d__content > *:last-child, .slide-d_cover .slide-d__content > *:last-child, .slide-d_contain .slide-d__content > *:last-child { margin-bottom: 0; } .slide-d_fit:link, .slide-d_fit:visited, .slide-d_cover:link, .slide-d_cover:visited, .slide-d_contain:link, .slide-d_contain:visited { color: #fff; } .slide-d_fit:hover, .slide-d_fit:focus, .slide-d_fit:active, .slide-d_cover:hover, .slide-d_cover:focus, .slide-d_cover:active, .slide-d_contain:hover, .slide-d_contain:focus, .slide-d_contain:active { color: #fff; } .slide-d_cover, .slide-d_contain { text-align: center; background-repeat: no-repeat; background-position: center center; background-size: cover; } .slide-d_contain { background-size: contain; } /* __object, но не __img, так как может понадобится подогнать: img, video, iframe, canvas, ... */ .slide-d_fit img, .slide-d_fit .slide-d__object { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; z-index: 1; } .slide-d_fit_contain .slide-d__object { -o-object-fit: contain; object-fit: contain; } .slide-d._bordered { border-radius: 0.25rem; /* 3/12 */ } /* Галерея */ .swiper-wrapper { box-sizing: inherit; height: auto; } .swiper-button-next:after, .swiper-button-prev:after { display: none; } .gall-d__button, .swiper-button-prev, .swiper-button-next { width: auto; height: auto; margin: 0; padding: 1.25rem; /* 15/12 */ vertical-align: middle; position: absolute; top: 50%; line-height: 1; text-align: center; color: #dfdfdf; background: none; border: none; outline: none; overflow: hidden; cursor: pointer; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.1s; z-index: 2; } .gall-d__button.swiper-button-lock, .swiper-button-prev.swiper-button-lock, .swiper-button-next.swiper-button-lock { display: none !important; } .gall-d__button .icon-d, .swiper-button-prev .icon-d, .swiper-button-next .icon-d { font-size: 2rem; /* 24/12 */ } .gall-d__button:hover, .swiper-button-prev:hover, .swiper-button-next:hover { color: #C5D33D; background: none; } .gall-d__button:focus, .gall-d__button:active, .swiper-button-prev:focus, .swiper-button-prev:active, .swiper-button-next:focus, .swiper-button-next:active { color: #d1db6c; background: none; } .swiper-button-prev, .gall-d__button_prev { left: 0; } .swiper-button-next, .gall-d__button_next { right: 0; } .swiper-pagination-bullets { bottom: 0; } .swiper-pagination-bullet { display: inline-flex; justify-content: center; align-items: center; width: 1.66667rem; /* 20/12 */ height: 3.33333rem; /* 40/12 */ margin: 0; vertical-align: middle; color: #dfdfdf; border-radius: 0; background: none; opacity: 1; } .swiper-pagination-bullet::after { display: block; width: 10px; height: 10px; content: ''; background: currentColor; border-radius: 50%; } .swiper-pagination-bullet-active { color: #C5D33D; } .swiper-pagination-progressbar, .swiper-pagination-progressbar-fill { border-radius: 0.25rem; /* 3/12 */ } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #C5D33D; } .swiper-container:not(.swiper-container-initialized) .gall-d__nav, .swiper-container:not(.swiper-container-initialized) .gall-d__pagin, .swiper-container:not(.swiper-container-initialized) .swiper-pagination { display: none; } .gall-d.swiper-container:not(.swiper-container-initialized) .gall-d__list, .gall-d.swiper-container:not(.swiper-container-initialized) .swiper-wrapper { display: grid; grid-template-columns: repeat(auto-fill, 20.83333rem); gap: 2.5rem; /* 30/12 */ align-items: start; } .slideshow-d .gall-d.swiper-container:not(.swiper-container-initialized) .gall-d__list, .slideshow-d .gall-d.swiper-container:not(.swiper-container-initialized) .swiper-wrapper { display: flex; } .slideshow-d .gall-d.swiper-container:not(.swiper-container-initialized) .swiper-slide:not(:first-child) { display: none; } .gall-d_navbottom .gall-d__nav { text-align: center; } .gall-d_navbottom .gall-d__button, .gall-d_navbottom .swiper-button-prev, .gall-d_navbottom .swiper-button-next { display: inline-flex; position: static; -webkit-transform: none; transform: none; } .gall-d_navbottom .swiper-button-prev, .gall-d_navbottom .gall-d__button_prev { padding-right: 0.66667rem; /* 8/12 */ } .gall-d_navbottom .swiper-button-next, .gall-d_navbottom .gall-d__button_next { padding-left: 0.66667rem; /* 8/12 */ } .gall-d_navbottom .gall-d__pagin { position: static; } /* Слайд-шоу */ .slideshow-d .slide-d { border-radius: 0.25rem; /* 3/12 */ } .slideshow-d_main .slide-d::after { padding-bottom: 100%; } .slideshow-d_main .slide-d__content { padding: 0 5rem; /* 0 60/12 */ } .slideshow-d_main .gall-d__pagin { bottom: 0; } .slideshow-d_main h2, .slideshow-d_main .title-d, .slideshow-d_banners h2, .slideshow-d_banners .title-d { font-size: 1.5rem;/* 18/12 */ line-height: 1.2; font-weight: 900; } .slideshow-d_banners .slide-d::after { padding-bottom: 60%; } @media (min-width: 480px) { .slideshow-d_main .slide-d::after { padding-bottom: 80%; } .slideshow-d_main h2, .slideshow-d_main .title-d, .slideshow-d_banners h2, .slideshow-d_banners .title-d { font-size: 1.66667rem; } .slideshow-d_banners .slide-d::after { padding-bottom: 50%; } } @media (min-width: 576px) { .slideshow-d_main .slide-d::after { padding-bottom: 60%; } .slideshow-d_main h2, .slideshow-d_main .title-d, .slideshow-d_banners h2, .slideshow-d_banners .title-d { font-size: 2rem; } .slideshow-d_banners .slide-d::after { padding-bottom: 40%; } } @media (min-width: 768px) { .slideshow-d_main .slide-d::after { padding-bottom: 50%; } .slideshow-d_main h2, .slideshow-d_main .title-d, .slideshow-d_banners h2, .slideshow-d_banners .title-d { font-size: 2.66667rem; } .slideshow-d_banners .slide-d::after { padding-bottom: 30%; } } @media (min-width: 922px) { .slideshow-d_main .slide-d::after { padding-bottom: 25%; } .slideshow-d_main h2, .slideshow-d_main .title-d, .slideshow-d_banners h2, .slideshow-d_banners .title-d { font-size: 4rem; } .slideshow-d_banners .slide-d::after { padding-bottom: 23%; } } /* Вкладки */ .tabs-d { position: relative; } .tabname-d { display: flex; align-items: center; max-width: 100%; padding: 1.25rem 0.41667rem; /* 15/12 5/12 */ position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s; } .tabname-d:hover, .tabname-d:focus, .tabname-d:active { text-decoration: none; } .tabname-d:link, .tabname-d:hover, .tabname-d:focus, .tabname-d:active, .tabname-d:visited, .tabname-d_active { outline: none; } .tabname-d__icon { padding-left: 1.25rem; /* 15/12 */ } .tabname-d__name { display: block; padding-left: 1.25rem; /* 15/12 */ padding-right: 1.25rem; /* 15/12 */ font-size: 1.16667rem; /* 14/12 */ text-overflow: ellipsis; overflow: hidden; } .tab-d { padding: 2.08333rem 1.66667rem; /* 25/12 20/12 */ position: absolute; visibility: hidden; opacity: 0; clip: rect(0,0,0,0); filter: alpha(opacity=0); z-index: -2; } .tab-d_active { position: static; visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 2; } @media (min-width: 576px) { .tabs-d_sm .tabs-d__tabnames { display: flex; flex-wrap: wrap; max-width: 100%; } } .tabs-d_gray .tabname-d { line-height: 1; color: inherit; background-color: #dfdfdf; } .tabs-d_gray .tabname-d:before { display: block; width: 0.41667rem;/* 5/12 */ height: 100%; position: absolute; top: 0; left: 0; content: ''; background-color: transparent; z-index: 2; } .tabs-d_gray .tabname-d:link, .tabs-d_gray .tabname-d:hover, .tabs-d_gray .tabname-d:focus, .tabs-d_gray .tabname-d:active, .tabs-d_gray .tabname-d:visited, .tabs-d_gray .tabname-d_active { color: inherit; } .tabs-d_gray .tabname-d:hover, .tabs-d_gray .tabname-d:focus, .tabs-d_gray .tabname-d:active, .tabs-d_gray .tabname-d_active { background-color: #c8c7c7; } .tabs-d_gray .tabname-d:hover:before, .tabs-d_gray .tabname-d:focus:before, .tabs-d_gray .tabname-d:active:before, .tabs-d_gray .tabname-d_active:before { background-color: #C5D33D; } .tabs-d_gray .tabs-d__tabnames { margin-bottom: -1px; } .tabs-d_gray .tabs-d__stack { background-color: #fff; border: 1px solid #dfdfdf; } @media (min-width: 576px) { .tabs-d_sm_gray .tabname-d:before { width: 100%; height: 0.41667rem; /* 5/12 */ } .tabs-d_sm_gray .tabname-d:after { display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 0; content: ''; background: linear-gradient(to bottom, #c8c7c7 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c7c7', endColorstr='rgb(0, 255, 255)', GradientType=1); z-index: 1; } .tabs-d_sm_gray .tabname-d:first-child { border-radius: 0.25rem 0 0 0; /* 3/12 */ } .tabs-d_sm_gray .tabname-d:first-child:after { display: none; } .tabs-d_sm_gray .tabname-d:last-child { border-radius: 0 0.25rem 0 0; /* 3/12 */ } .tabs-d_sm_gray .tabname-d:hover:after, .tabs-d_sm_gray .tabname-d:focus:after, .tabs-d_sm_gray .tabname-d:active:after, .tabs-d_sm_gray .tabname-d_active:after { display: none; } .tabs-d_sm_gray .tabname-d:hover + .tabname-d:after, .tabs-d_sm_gray .tabname-d:focus + .tabname-d:after, .tabs-d_sm_gray .tabname-d:active + .tabname-d:after, .tabs-d_sm_gray .tabname-d_active + .tabname-d:after { display: none; } .tabs-d_sm_gray .tabname-d:hover + .tabname-d:hover:after, .tabs-d_sm_gray .tabname-d:hover + .tabname-d:focus:after, .tabs-d_sm_gray .tabname-d:hover + .tabname-d:active:after, .tabs-d_sm_gray .tabname-d:hover + .tabname-d.tabname-d_active:after, .tabs-d_sm_gray .tabname-d:focus + .tabname-d:hover:after, .tabs-d_sm_gray .tabname-d:focus + .tabname-d:focus:after, .tabs-d_sm_gray .tabname-d:focus + .tabname-d:active:after, .tabs-d_sm_gray .tabname-d:focus + .tabname-d.tabname-d_active:after, .tabs-d_sm_gray .tabname-d:active + .tabname-d:hover:after, .tabs-d_sm_gray .tabname-d:active + .tabname-d:focus:after, .tabs-d_sm_gray .tabname-d:active + .tabname-d:active:after, .tabs-d_sm_gray .tabname-d:active + .tabname-d.tabname-d_active:after, .tabs-d_sm_gray .tabname-d_active + .tabname-d:hover:after, .tabs-d_sm_gray .tabname-d_active + .tabname-d:focus:after, .tabs-d_sm_gray .tabname-d_active + .tabname-d:active:after, .tabs-d_sm_gray .tabname-d_active + .tabname-d.tabname-d_active:after { display: block; background: linear-gradient(to bottom, #dfdfdf 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='rgb(0, 255, 255)', GradientType=1); } } .tabs-d_white .tabname-d { margin-bottom: -1px; font-weight: 700; background-color: #fff; border: 1px solid #dfdfdf; border-radius: 0.25rem 0.25rem 0 0; /* 3/12 */ } .tabs-d_white .tabname-d:not(:last-child) { margin-right: -1px; } .tabs-d_white .tabname-d__name { font-size: 1.33333rem; /* 16/12 */ } .tabs-d_white .tabname-d:link, .tabs-d_white .tabname-d:hover, .tabs-d_white .tabname-d:focus, .tabs-d_white .tabname-d:active, .tabs-d_white .tabname-d:visited, .tabs-d_white .tabname-d_active { color: inherit; } .tabs-d_white .tabname-d:hover, .tabs-d_white .tabname-d:focus, .tabs-d_white .tabname-d:active, .tabs-d_white .tabname-d_active { border-bottom-color: #fff; } .tabs-d_white .tabs-d__stack { background-color: #fff; border: 1px solid #dfdfdf; } /* Купить в 1 клик */ .oneclick-d { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1.25rem; /* 15/12 */ position: absolute; top: 0; left: 0; text-align: center; background-color: #fff; z-index: 2; } .oneclick-d form { max-width: 300px; margin: 0 auto; } .oneclick-d .button-d { display: block; margin-left: auto; margin-right: auto; } .oneclick-d__close { display: block; top: auto; bottom: 0; } /* Деталь */ .details-d, .details-d__enum { display: block; } .details-d > *, .details-d__enum > * { margin-bottom: 0.83333rem; /* 10/12 */ } .details-d > *:empty, .details-d > *:last-child, .details-d__enum > *:empty, .details-d__enum > *:last-child { margin-bottom: 0; } .detail-d { word-wrap: break-word; word-break: break-word; } .detail-d_anons { color: #595959; } .detail-d_anons > a { color: inherit; } /* Характеристики */ .param-d { margin-bottom: 0.25rem; /* 3/12 */ } .param-d:last-child { margin-bottom: 0; } .param-d__title { font-size: 1.16667rem; /* 14/12 */ } .param-d_brand .param-d__images { margin-top: 0.83333rem; /* 10/12 */ } /* Элементы */ .element-d { display: block; position: relative; } a.element-d:hover, a.element-d:focus, a.element-d:active { text-decoration: none; } .element-d__images { display: block; position: relative; } .element-d__images img { border-radius: 0.25rem; /* 3/12 */ } .element-d__images ._fit img { -o-object-fit: none; object-fit: none; } .element-d__details > .detail-d_name, .element-d__details > .details-d__enum > .detail-d_name { font-size: 1.16667rem; /* 14/12 */ } .element-d_card > .element-d__details > .detail-d_name, .element-d_card > .element-d__details > .details-d__enum > .detail-d_name, .element-d_rowcard > .element-d__details > .detail-d_name, .element-d_rowcard > .element-d__details > .details-d__enum > .detail-d_name, .element-d_postcard > .element-d__details > .detail-d_name, .element-d_postcard > .element-d__details > .details-d__enum > .detail-d_name { font-size: 1.33333rem; /* 16/12 */ line-height: 1.3; } .element-d_card, .element-d_rowcard { border: 1px solid #dfdfdf; border-radius: 0.25rem; /* 3/12 */ } .element-d_card > .element-d__images, .element-d_rowcard > .element-d__images { border: inherit; border-width: 0; border-bottom-width: 1px; } .element-d_card > .element-d__details, .element-d_rowcard > .element-d__details { padding: 1.25rem; /* 15/12 */ } .element-d_card > *, .element-d_postcard > * { /* __images, __details, __... */ margin-bottom: 1.25rem; /* 15/12 */ } .element-d_card > *:last-child, .element-d_postcard > *:last-child { margin-bottom: 0; } .element-d_card > .element-d__images + .element-d__details { padding-top: 0; } .element-d_row > .element-d__images ._fit::after { padding-bottom: 50%; } @media (min-width: 576px) { .element-d_rowcard { display: flex; max-width: 100%; } .element-d_rowcard > * { flex-grow: 1; margin-right: 1.25rem; /* 15/12 */ } .element-d_rowcard > *:last-child { margin-right: 0; } .element-d_rowcard > .element-d__images { flex-shrink: 0; flex-basis: 20.83333rem; /* 250/12 */ max-width: 20.83333rem; /* 250/12 */ border-right-width: 1px; border-bottom-width: 0; } .element-d_rowcard > .element-d__images + .element-d__details { padding-left: 0; } .element-d_row { display: flex; max-width: 100%; } .element-d_row > * { margin-right: 1.25rem; /* 15/12 */ } .element-d_row > *:last-child { margin-right: 0; } .element-d_row > .element-d__images { flex-shrink: 0; flex-basis: 20.83333rem; /* 250/12 */ max-width: 20.83333rem; /* 250/12 */ border: none; } .element-d_row > .element-d__images ._fit::after { padding-bottom: 100%; } } .element-d_shop_item > .element-d__details > *, .element-d_shop_item > .element-d__details > .details-d__enum > * { margin-bottom: 1.66667rem; /* 20/12 */ } .element-d_shop_item > .element-d__details > .detail-d_params, .element-d_shop_item > .element-d__details > .details-d__enum > .detail-d_params { font-size: 0.83333rem; /* 10/12 */ color: #595959; } .element-d_shop_item > .element-d__details > .offer-d, .element-d_shop_item > .element-d__details > .details-d__enum > .offer-d { margin-bottom: 0; } @media (min-width: 480px) { ._viewrows > .element-d_shop_item { display: grid; grid-template-columns: 15rem 1fr; /* 180/12 */ gap: 1.66667rem; /* 20/12 */ } ._viewrows > .element-d_shop_item > * { margin: 0; } ._viewrows > .element-d_shop_item > .element-d__images { padding: 1.25rem; /* 15/12 */ border-right-width: 1px; border-bottom-width: 0; } ._viewrows > .element-d_shop_item > .element-d__images + .element-d__details { padding-left: 0; } ._viewrows > .element-d_shop_item > .element-d__details { padding: 1.66667rem; /* 20/12 */ } } @media (min-width: 576px) { ._viewrows > .element-d_shop_item { grid-template-columns: 20.83333rem 1fr; /* 250/12 */ } } @media (min-width: 768px) and (max-width: 921px), (min-width: 1080px) { ._viewrows > .element-d_shop_item > .element-d__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.66667rem; /* 20/12 */ } ._viewrows > .element-d_shop_item > .element-d__details > * { margin: 0; } ._viewrows .offer-d { padding-left: 1.66667rem; /* 20/12 */ border-left: 1px solid #dfdfdf; } } @media (min-width: 768px) and (max-width: 900px), (min-width: 1080px) and (max-width: 1200px) { ._viewrows .offer-d__button_tocart .button-d__icon { margin-right: 0; } ._viewrows .offer-d__button_tocart .button-d__name { display: none; } } .element-d_message { display: flex; max-width: 100% } .element-d_message > * { margin-right: 1.25rem; /* 15/12 */ } .element-d_message > *:last-child { margin-right: 0; } .element-d_message > .element-d__images { flex: none; } .element-d_message > .element-d__images .account-d__images { margin-right: 0; } .element-d_message > .element-d__details, .element-d_message > .element-d__details > .details-d__enum { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; } .element-d_message > .element-d__details > *, .element-d_message > .element-d__details > .details-d__enum > * { flex-grow: 1; flex-basis: 100%; margin-bottom: 0.66667rem; /* 8/12 */ } .element-d_message > .element-d__details > *:last-child, .element-d_message > .element-d__details > .details-d__enum > *:last-child { margin-bottom: 0; } .element-d_message > .element-d__details > *:empty, .element-d_message > .element-d__details > .details-d__enum > *:empty { display: none; } .element-d_message > .element-d__details > .detail-d_name, .element-d_message > .element-d__details > .detail-d_date, .element-d_message > .element-d__details > .detail-d_account, .element-d_message > .element-d__details > .detail-d_actions, .element-d_message > .element-d__details > .details-d__enum > .detail-d_name, .element-d_message > .element-d__details > .details-d__enum > .detail-d_date, .element-d_message > .element-d__details > .details-d__enum > .detail-d_account, .element-d_message > .element-d__details > .details-d__enum > .detail-d_actions { flex: initial; } .element-d_message > .element-d__details > .detail-d_name, .element-d_message > .element-d__details > .detail-d_account, .element-d_message > .element-d__details > .details-d__enum > .detail-d_name, .element-d_message > .element-d__details > .details-d__enum > .detail-d_account { margin-right: auto; } .element-d_message > .element-d__details > .detail-d_name, .element-d_message > .element-d__details > .details-d__enum > .detail-d_name { font-size: 1.33333rem; /* 16/12 */ } .element-d_message > .element-d__details > .detail-d_account .detail-d_name, .element-d_message > .element-d__details > .details-d__enum > .detail-d_account .detail-d_name { font-size: unset; } .element-d_message > .element-d__details > .detail-d_actions, .element-d_message > .element-d__details > .details-d__enum > .detail-d_actions { margin-right: 1.25rem; /* 15/12 */ } .element-d_message > .element-d__details > .detail-d_functions, .element-d_message > .element-d__details > .details-d__enum > .detail-d_functions { margin-bottom: 0; } @media (min-width: 480px) { .element-d_col, .element-d_col > .element-d__details { display: grid; grid-auto-flow: column; gap: 1.25rem; /* 15/12 */ align-items: center; } .element-d_col > .element-d__details > * { margin-bottom: 0; } } @media (min-width: 480px) and (min-width: 576px) { .element-d_col, .element-d_col > .element-d__details { gap: 2.5rem; /* 30/12 */ } } .element-d_col > .element-d__details > .detail-d:before { display: block; margin-bottom: 0.41667rem; /* 5/12 */ font-weight: 700; content: attr(title); } @media (min-width: 480px) { .element-d_col > .element-d__details > .detail-d:before { display: none; } } .element-d_col > .element-d__details > .detail-d_count, .element-d_col > .element-d__details > .detail-d_author { display: none; } .element-d_col_head { padding-bottom: 0.41667rem; /* 5/12 */ font-size: 0.83333rem; /* 10/12 */ } @media (max-width: 479px) { .element-d_col_head { display: none; } } .element-d_col_head._tile { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; } .element-d_col_head > .element-d__details > * { font-size: inherit; } .element-d_forum_sec._tile, .element-d_forum_cat._tile { border-color: #ebebeb; } .element-d_forum_sec._tile._isnew, .element-d_forum_sec._tile._unread, .element-d_forum_cat._tile._isnew, .element-d_forum_cat._tile._unread { border-color: #fdede8; } .element-d_forum_sec._tile._blocked, .element-d_forum_cat._tile._blocked { border-color: #dfdfdf; } @media (min-width: 480px) { .element-d_forum_sec > .element-d__details { grid-auto-columns: 1fr 4.16667rem 16.66667rem; /* 50/12 200/12 */ } .element-d_forum_sec > .element-d__details > .detail-d_count { display: block; } .element-d_forum_cat { grid-auto-columns: 1fr 8.33333rem;/* 100/12 */ } .element-d_forum_cat > .element-d__details { grid-auto-columns: 1fr 16.66667rem; /* 200/12 */ } } @media (min-width: 1200px) { .element-d_forum_cat > .element-d__details { grid-auto-columns: 1fr 4.16667rem 12.5rem 16.66667rem; /* 50/12 150/12 200/12 */ } .element-d_forum_cat > .element-d__details > .detail-d_count, .element-d_forum_cat > .element-d__details > .detail-d_author { display: block; } } /* Таблица */ .cell-d { flex-shrink: 0; margin-bottom: 0.83333rem /* 10/12 */ } .cell-d:last-child { margin-bottom: 0; } .cell-d:before { display: block; font-size: 1.16667rem; /* 14/12 */ font-weight: 700; content: attr(title); } .cell-d_num:before { display: inline-block; margin-right: 0.41667rem; /* 5/12 */ } .cell-d_buy .button-d { margin-top: 0; } .cell-d_title { font-size: 1.33333rem; /* 16/12 */ } .cell-d_coupon { flex-shrink: 1; } .table-d .detail-d { margin-bottom: 0.41667rem;/* 5/12 */ } .table-d .detail-d:last-child { margin-bottom: 0; } .table-d .param-d, .table-d .addition-d { margin-bottom: 0.25rem;/* 3/12 */ } .table-d .param-d:last-child, .table-d .addition-d:last-child { margin-bottom: 0; } .table-d__row { margin-bottom: 1.66667rem; /* 20/12 */ padding-bottom: 1.66667rem; /* 20/12 */ border-bottom: 1px solid #dfdfdf } .table-d__head .table-d__row { margin-bottom: 0.41667rem; /* 5/12 */ padding-bottom: 0.41667rem;/* 5/12 */ } .table-d__row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .table-d__head { display: none; margin-bottom: 1.66667rem; /* 20/12 */ padding-bottom: 0.41667rem; /* 5/12 */ font-size: 0.66667rem; /* 8/12 */ font-weight: bold; border-bottom: 1px solid #dfdfdf; } .table-d__total { margin-top: 1.66667rem; /* 20/12 */ padding: 1.66667rem; /* 20/12 */ font-size: 1.16667rem; /* 14/12 */ background-color: #dfdfdf; border-radius: 0.25rem /* 3/12 */ } .table-d__total .table-d__row:not(:last-child) { border-bottom: 1px solid #fff; } .table-d__total .cell-d_count strong { display: inline-block; width: 6.66667rem; /* 80/12 */ padding: 0.83333rem; /* 10/12 */ line-height: 1; font-weight: 700; font-size: 1.33333rem; /* 16/12 */ text-align: center; vertical-align: middle; background-color: #fff; border-radius: 0.25rem; /* 3/12 */ } .table-d__total .cell-d_sum .price-d { margin-right: 0.83333rem; /* 10/12 */ } .table-d__total .cell-d_sum .price-d:last-child { margin-right: 0; } .table-d__total .cell-d_sum .price-d_old { font-weight: inherit; font-size: inherit; } .table-d__total .price-d { white-space: nowrap; font-size: 1.33333rem; /* 16/12 */ } .table-d__total .price-d_tax { font-size: 0.91667em; /* 11/12 */ } .table-d__total_cart { padding-right: 2.5rem; /* 30/12 */ } @media (min-width: 480px) { .table-d_xs .table-d__row { display: flex; align-items: center; max-width: 100%; } .table-d_xs .cell-d { margin-bottom: 0; } .table-d_xs .cell-d:before { display: none; } .table-d_xs .cell-d:not(:last-child) { margin-right: 0.83333rem;/* 10/12 */ } .table-d_xs .cell-d_title { text-align: right; } .table-d_xs .table-d__head { display: block; } } @media (min-width: 576px) { .table-d_sm:not(.table-d_xs) .table-d__row { display: flex; align-items: center; max-width: 100%; } .table-d_sm:not(.table-d_xs) .cell-d { margin-bottom: 0; } .table-d_sm:not(.table-d_xs) .cell-d:before { display: none; } .table-d_sm:not(.table-d_xs) .cell-d:not(:last-child) { margin-right: 0.83333rem; /* 10/12 */ } .table-d_sm:not(.table-d_xs) .cell-d_title { text-align: right; } .table-d_sm:not(.table-d_xs) .table-d__head { display: block; } .table-d_sm:not(.table-d_xs) .table-d__total_goods { padding-left: 0; padding-right: 0; } .table-d_sm:not(.table-d_xs) .table-d__total_goods .cell-d_count { text-align: center; } .table-d_sm { } } @media (min-width: 768px) { .table-d_md:not(.table-d_xs) { } .table-d_md:not(.table-d_sm) { } .table-d_md { } } @media (min-width: 1024px) { .table-d_lg:not(.table-d_xs) { } .table-d_lg:not(.table-d_sm) { } .table-d_lg:not(.table-d_md) { } .table-d_lg { } } .table-d_orders .cell-d_price { display: none; } @media (min-width: 480px) { .table-d_orders.table-d_xs { } } @media (min-width: 576px) { .table-d_orders.table-d_sm .cell-d_num { flex-basis: 4.16667rem; /* 50/12 */ max-width: 4.16667rem; /* 50/12 */ } .table-d_orders.table-d_sm .cell-d_date { flex-basis: 6.66667rem; /* 80/12 */ max-width: 6.66667rem; /* 80/12 */ } .table-d_orders.table-d_sm .cell-d_details { flex: auto; } .table-d_orders.table-d_sm .cell-d_price, .table-d_orders.table-d_sm .cell-d_status, .table-d_orders.table-d_sm .cell-d_sum { flex-basis: 8.33333rem; /* 100/12 */ max-width: 8.33333rem; /* 100/12 */ } } @media (min-width: 768px) { .table-d_orders.table-d_md { } } @media (min-width: 1024px) { .table-d_orders.table-d_lg .cell-d_price { display: block; } } .table-d_intercap .cell-d_price { display: none; } @media (min-width: 480px) { .table-d_intercap.table-d_xs { } } @media (min-width: 576px) { .table-d_intercap.table-d_sm .cell-d_images { flex-basis: 4.16667rem; /* 50/12 */ max-width: 4.16667rem; /* 50/12 */ } .table-d_intercap.table-d_sm .cell-d_details { flex: auto; } } @media (min-width: 768px) { .table-d_intercap.table-d_md .cell-d_images { flex-basis: 4.16667rem; /* 50/12 */ max-width: 4.16667rem; /* 50/12 */ } .table-d_intercap.table-d_md .cell-d_details { flex: auto; } .table-d_intercap.table-d_md .cell-d_count { flex-basis: 6.66667rem; /* 80/12 */ max-width: 6.66667rem; /* 80/12 */ } .table-d_intercap.table-d_md .cell-d_price, .table-d_intercap.table-d_md .cell-d_sum { flex-basis: 8.33333rem; /* 100/12 */ max-width: 8.33333rem; /* 100/12 */ } .table-d_intercap.table-d_md .cell-d_remove { flex-basis: 1.66667rem; /* 20/12 */ max-width: 1.66667rem; /* 20/12 */ } .table-d_intercap.table-d_md .table-d__total { padding-left: 0; padding-right: 0; } .table-d_intercap.table-d_md .cell-d_price { display: block; } } @media (min-width: 1024px) { .table-d_intercap.table-d_lg { } } .table-d_wishlist .cell-d_price { display: none; } @media (min-width: 480px) { .table-d_wishlist.table-d_xs .cell-d_images { display: none; flex-basis: 4.16667rem; /* 50/12 */ max-width: 4.16667rem; /* 50/12 */ } .table-d_wishlist.table-d_xs .cell-d_details { flex: auto; } .table-d_wishlist.table-d_xs .cell-d_count { flex-basis: 6.66667rem; /* 80/12 */ max-width: 6.66667rem; /* 80/12 */ } .table-d_wishlist.table-d_xs .cell-d_price, .table-d_wishlist.table-d_xs .cell-d_sum { flex-basis: 8.33333rem; /* 100/12 */ max-width: 8.33333rem; /* 100/12 */ } .table-d_wishlist.table-d_xs .cell-d_buy { flex-basis: 5.83333rem; /* 70/12 */ max-width: 5.83333rem; /* 70/12 */ } .table-d_wishlist.table-d_xs .cell-d_remove { flex-basis: 1.66667rem; /* 20/12 */ max-width: 1.66667rem; /* 20/12 */ } .table-d_wishlist.table-d_xs .table-d__total { padding-left: 0; padding-right: 0; } } @media (min-width: 576px) { .table-d_wishlist.table-d_sm .cell-d_images { display: block; } .table-d_wishlist.table-d_sm .cell-d_buy { flex-basis: 8.33333rem; /* 100/12 */ max-width: 8.33333rem; /* 100/12 */ } } @media (min-width: 768px) { .table-d_wishlist.table-d_md { } } @media (min-width: 1024px) { .table-d_wishlist.table-d_lg .cell-d_price { display: block; } } .table-d__goods .detail-d { font-size: 0.83333rem; /* 10/12 */ } .table-d__additions .detail-d_name, .table-d__deliveries .detail-d_name { font-weight: bold; } .table-d__additions .price-d, .table-d__deliveries .price-d { font-size: 1.33333rem; /* 16/12 */ } .table-d__fulltotal { font-size: 1.33333rem; /* 16/12 */ } .table-d__discounts { margin-bottom: 1.66667rem; /* 20/12 */ padding-top: 1.66667rem; /* 20/12 */ border-top: 1px solid #dfdfdf; } .table-d__discounts .price-d { font-size: 1.33333rem; /* 16/12 */ } .table-d__promises { margin-bottom: 0; } .table-d__promises .table-d__row { display: block !important; padding: 1rem; /* 12/12 */ color: #fff; background-color: #C5D33D; } .table-d__promises .table-d__row:not(:last-child) { border-bottom: 1px solid #fff; } .table-d_cart .cell-d_unit, .table-d_cart .cell-d_price, .table-d_cart .cell-d_discount, .table-d_cart .cell-d_price_old { display: none; } .table-d_cart .table-d__total_goods { margin-top: 0; } @media (min-width: 480px) { .table-d_cart.table-d_xs { } } @media (min-width: 576px) { .table-d_cart.table-d_sm .cell-d_unit, .table-d_cart.table-d_sm .cell-d_images { flex-basis: 4.16667rem; /* 50/12 */ max-width: 4.16667rem; /* 50/12 */ } .table-d_cart.table-d_sm .cell-d_details { flex: auto; } .table-d_cart.table-d_sm .cell-d_count { flex-basis: 6.66667rem; /* 80/12 */ max-width: 6.66667rem; /* 80/12 */ } .table-d_cart.table-d_sm .cell-d_price, .table-d_cart.table-d_sm .cell-d_price_old, .table-d_cart.table-d_sm .cell-d_discount, .table-d_cart.table-d_sm .cell-d_sum { flex-basis: 8.33333rem; /* 100/12 */ max-width: 8.33333rem; /* 100/12 */ } .table-d_cart.table-d_sm .cell-d_select, .table-d_cart.table-d_sm .cell-d_remove { flex-basis: 1.66667rem; /* 20/12 */ max-width: 1.66667rem; /* 20/12 */ } .table-d_cart.table-d_sm .cell-d_images, .table-d_cart.table-d_sm .cell-d_discount { display: none; } .table-d_cart.table-d_sm .table-d__discounts { text-align: right; } .table-d_cart.table-d_sm .table-d__discounts .table-d__row { justify-content: flex-end; } .table-d_cart.table-d_sm .table-d__promises .table-d__row { text-align: center; } } @media (min-width: 768px) { .table-d_cart.table-d_md { } } @media (min-width: 1024px) { .table-d_cart.table-d_lg .cell-d_price, .table-d_cart.table-d_lg .cell-d_images, .table-d_cart.table-d_lg .cell-d_discount { display: block; } } @media (min-width: 1200px) { .table-d_cart.table-d_lg .cell-d_unit, .table-d_cart.table-d_lg .cell-d_price_old { display: block; } } .cart__invoice { position: relative } .cart__invoice .error_message { position: absolute; top: 0; right: 0; background: #fff; } .cart__form .block-d_payment { margin-top: 2.91667rem; /* 35/12 */ } .cart__autorization ._note, .cart__registration ._note { margin-bottom: 1.66667rem; /* 20/12 */ } /* Значок-бутерброд */ .burger-d { display: flex; align-items: center; max-width: 100%; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: 1; color: inherit; background: none; border: none; border-radius: 0; outline: none; cursor: pointer; transition: all 0.1s } .burger-d:hover, .burger-d:focus, .burger-d:active { text-decoration: none; background: none; outline: none; } .burger-d:hover { color: inherit; } .burger-d:focus, .burger-d:active { color: inherit; } .burger-d > * { margin-right: 0.83333rem; /* 10/12 */ } .burger-d > *:empty, .burger-d > *:last-child { margin-right: 0; } .burger-d__icon { display: block; width: 25px } .burger-d__icon::before, .burger-d__icon span, .burger-d__icon::after { display: block; height: 4px; background: currentColor; transition: all 0.2s; } .burger-d__icon::before, .burger-d__icon::after { content: ''; -webkit-transform-origin: 24px; transform-origin: 24px; } .burger-d__icon span { margin: 4px 0; } .burger-d__name { display: block; text-overflow: ellipsis; overflow: hidden; } /* Навигация */ .link-d__name, .item-d__text { word-wrap: break-word; word-break: break-word; } .item-d__text, .item-d__text { display: none; margin-top: 0.25rem; /* 3/12 */ } .menu-d { -webkit-animation-fill-mode: both; animation-fill-mode: both; } .nav-d { position: relative; } .nav-d:not(._underline):not(.nav-d_broad) a:hover, .nav-d:not(._underline):not(.nav-d_broad) a:focus, .nav-d:not(._underline):not(.nav-d_broad) a:active { text-decoration: none; } /* Навигация — Модификации */ .nav-d_vertical .nav-d__menu, .nav-d_vertical .nav-d__inside, .nav-d_horizontal .nav-d__menu, .nav-d_horizontal .nav-d__inside { background-color: inherit; /* Наследуем оформление ( конкретные цвета устанавливаются в цветовых модификациях ( по потребности ) ) */ } /* Подменю */ .nav-d_vertical .item-d__menu, .nav-d_horizontal .item-d__menu { position: absolute; background-color: inherit; /* Наследуем цветовое оформление ( конкретные цвета задаются в цветовых модификациях ( по потребности ) ) */ visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); z-index: -100; -webkit-animation-name: menu-in-up; animation-name: menu-in-up; -webkit-animation-duration: 0s; animation-duration: 0s; } .nav-d_vertical .nav-d__burger, .nav-d_horizontal .nav-d__burger { padding: 1.25rem; background-color: inherit; /* Наследуем цветовое оформление ( конкретные цвета задаются в цветовых модификациях ( по потребности ) ) */ } /* Наследуем цветовое оформление ( конкретные цвета задаются в цветовых модификациях ( по потребности ) ) */ .nav-d_vertical .nav-d__burger:hover, .nav-d_vertical .nav-d__burger:focus, .nav-d_vertical .nav-d__burger:active, .nav-d_horizontal .nav-d__burger:hover, .nav-d_horizontal .nav-d__burger:focus, .nav-d_horizontal .nav-d__burger:active { color: inherit; background-color: inherit; } /* Пункт */ .nav-d_vertical .item-d, .nav-d_horizontal .item-d { position: relative; background-color: inherit; /* Наследуем цветовое оформление ( конкретные цвета задаются в цветовых модификациях ( по потребности ) ) */ } /* Ссылка */ .nav-d_vertical .item-d__link, .nav-d_horizontal .item-d__link { display: flex; align-items: center; max-width: 100%; position: relative; background-color: inherit; /* Наследуем цветовое оформление ( конкретные цвета задаются в цветовых модификациях ( по потребности ) ) */ transition: all .6s; font-size: 18px; font-family: 'DIN Pro'; font-style: normal; font-weight: 700; margin: 0 8px; } /* Курсор */ .nav-d_vertical .item-d__link::before, .nav-d_horizontal .item-d__link::before { display: block; width: 0.41667rem; /* 5/12 */ height: 100%; position: absolute; top: 0; left: 0; content: ''; background-color: transparent; z-index: 2; } /* Исходные габариты компонентов пункта */ .nav-d_vertical .item-d__link .link-d__icon, .nav-d_vertical .item-d__link .link-d__name, .nav-d_vertical .item-d__link .link-d__sign, .nav-d_horizontal .item-d__link .link-d__icon, .nav-d_horizontal .item-d__link .link-d__name, .nav-d_horizontal .item-d__link .link-d__sign { display: block; max-width: 100%; padding: 1.25rem; /* 15/12 */ } .nav-d_vertical .item-d__link .link-d__icon, .nav-d_horizontal .item-d__link .link-d__icon { max-width: 5rem; /* 60/12 */ padding-right: 0; overflow: hidden; border-radius: 0.25rem; /* 3/12 */ } .nav-d_vertical .item-d__link .link-d__name, .nav-d_horizontal .item-d__link .link-d__name { flex-grow: 1; } /* Указатель на пункте — Иконка */ .nav-d_vertical .item-d__link .sign-d__icon, .nav-d_horizontal .item-d__link .sign-d__icon { padding-top: 0.16667rem; /* 2/12 */ transition: all .1s; } /* Ссылка — Указатель на пункте */ .nav-d_vertical .item-d__link .link-d__sign, .nav-d_horizontal .item-d__link .link-d__sign { display: flex; justify-content: center; align-items: center; margin-left: -1.25rem; /* -15/12 */ z-index: 2; } .nav-d_vertical .item-d__link:link, .nav-d_vertical .item-d__link:hover, .nav-d_vertical .item-d__link:focus, .nav-d_vertical .item-d__link:active, .nav-d_vertical .item-d__link:visited, .nav-d_horizontal .item-d__link:link, .nav-d_horizontal .item-d__link:hover, .nav-d_horizontal .item-d__link:focus, .nav-d_horizontal .item-d__link:active, .nav-d_horizontal .item-d__link:visited { color: inherit; /* Наследуем цветовое оформление ( конкретные цвета устанавливаем в цветовых модификациях ( по потребности ) ) */ } .nav-d_vertical .item-d__link:hover, .nav-d_vertical .item-d__link:focus, .nav-d_vertical .item-d__link:active, .nav-d_horizontal .item-d__link:hover, .nav-d_horizontal .item-d__link:focus, .nav-d_horizontal .item-d__link:active { background-color: inherit; /* Наследуем цветовое оформление ( конкретные цвета устанавливаем в цветовых модификациях ( по потребности ) ) */ } /* Навигация горизонтальная на широкоэкранных устройствах ( viewport > 992px ) */ /* Прячем кнопку-бутерброд */ .nav-d_horizontal .nav-d__burger { display: none; } /* Приводим компоненты ссылки подпункта к единым габаритам ( 2+ уровень ) */ .nav-d_horizontal .item-d__link_child .link-d__icon, .nav-d_horizontal .item-d__link_child .link-d__name, .nav-d_horizontal .item-d__link_child .link-d__sign { padding-top: 0.83333rem; /* 10/12 */ padding-bottom: 0.83333rem; /* 10/12 */ } /* Преобразуем иконку указателя подпункта ( 2+ уровень ) */ .nav-d_horizontal .item-d__link_child .link-d__sign .sign-d__icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* Задаём габаритные ограничения подменю ( все уровни ) */ .nav-d_horizontal .item-d__menu { max-width: 300px; min-width: 200px; } /* Анимация подменю ( 2+ уровень ) */ .nav-d_horizontal .item-d__menu .item-d__menu { -webkit-animation-name: menu-in-left; animation-name: menu-in-left; } /* По наведению на пункт показываем его подменю ( все уровни ) */ .nav-d_horizontal .item-d:hover > .item-d__menu { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } /* Позиция подменю ( 1 уровень ) */ .nav-d_horizontal .item-d_main > .item-d__menu { top: 100%; left: 0; } /* По наведению на пункт преобразование указателя на пункте ( 1 уровень ) */ .nav-d_horizontal .item-d_main:hover > .item-d__link .link-d__sign .sign-d__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* По наведению на пункт анимация подменю ( 1 уровень ) */ .nav-d_horizontal .item-d_main:hover > .item-d__menu { -webkit-animation-name: menu-in-down; animation-name: menu-in-down; } /* Позиция подменю ( 2+ уровень ) */ .nav-d_horizontal .item-d_child > .item-d__menu { top: 0; left: 100%; } /* По наведению на пункт анимация подменю ( 2+ уровень ) */ .nav-d_horizontal .item-d_child:hover > .item-d__menu { -webkit-animation-name: menu-in-right; animation-name: menu-in-right; } /* Меню */ .nav-d_horizontal .nav-d__menu { display: flex; flex-wrap: wrap; max-width: 100%; } /* Навигация горизонтальная ( viewport < 992px ) */ @media (max-width: 921px) { /* Показываем значок-бутерброд */ .nav-d_horizontal_laptop .nav-d__burger { display: flex; } /* Смещаем курсор из-за рамки меню ( все уровни ) */ .nav-d_horizontal_laptop .item-d__link:before { left: -1px; } /* Приводим компоненты ссылки подпункта к единым габаритам ( все уровни ) */ .nav-d_horizontal_laptop .item-d__link .link-d__icon, .nav-d_horizontal_laptop .item-d__link .link-d__name, .nav-d_horizontal_laptop .item-d__link .link-d__sign { padding-top: 0.83333rem; /* 10/12 */ padding-bottom: 0.83333rem; /* 10/12 */ } /* Смещаем подпункты ( 2+ уровень ) */ .nav-d_horizontal_laptop .item-d__link_child { padding-left: 0.83333rem; /* 10/12 */ } /* Восстанавливаем исходное состояние иконки указателя на пункте ( 2+ уровень ) */ .nav-d_horizontal_laptop .item-d__link_child .link-d__sign .sign-d__icon { -webkit-transform: none; transform: none; } /* Сбрасываем габаритные ограничения подменю ( все уровни ) */ .nav-d_horizontal_laptop .item-d__menu { max-width: none; min-width: 0; } /* По наведению на пункт сбрасываем преобразование иконки указателя на пункте ( все уровни ) */ .nav-d_horizontal_laptop .item-d:hover > .item-d__link .link-d__sign .sign-d__icon { -webkit-transform: none; transform: none; } /* По наведению на пункт отменяем показ подменю ( все уровни ) */ .nav-d_horizontal_laptop .item-d:hover > .item-d__menu { visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); z-index: -100; -webkit-animation-name: menu-in-up; animation-name: menu-in-up; -webkit-animation-duration: 0s; animation-duration: 0s; } /* Преобразуем указатель на пункте ( все уровни ) */ .nav-d_horizontal_laptop .item-d._active > .item-d__link .link-d__sign .sign-d__icon, .nav-d_horizontal_laptop .item-d.item-d_active > .item-d__link .link-d__sign .sign-d__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* Показываем подменю ( все уровни ) */ .nav-d_horizontal_laptop .item-d._active > .item-d__menu, .nav-d_horizontal_laptop .item-d.item-d_active > .item-d__menu { position: static; visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } /* Добавляем отступ к подменю ( все уровни ) */ .nav-d_horizontal_laptop .item-d:not(:last-child) > .item-d__menu { padding-bottom: 1.25rem; /* 15/12 */ } /* Создаём разделитель пунктов родительского и дочернего меню ( все уровни ) */ .nav-d_horizontal_laptop .item-d:not(:last-child) > .item-d__menu:after { display: block; width: 62%; height: 1px; position: absolute; left: 0; bottom: 1.25rem; /* 15/12 */ content: ''; z-index: 1; } /* Создаём указатель меню */ .nav-d_horizontal_laptop .item-d_main:first-child > .item-d__link:after { display: block; width: 0.83333rem; /* 10/12 */ height: 0.83333rem;/* 10/12 */ position: absolute; top: -0.5rem;/* -6/12 */ left: 1.16667rem;/* 14/12 */ content: ''; background-color: inherit; border-top: 1px solid transparent; border-right: 1px solid transparent; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: 2px 0px 2px -2px rgba(0, 0, 0, .2); z-index: 2; } /* Меняем представление меню */ .nav-d_horizontal_laptop .nav-d__menu { display: block; max-width: none; width: 220px; margin-top: -0.33333rem; /* -4/12 */ position: absolute; top: 100%; left: 0.41667rem; visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); border: 1px solid transparent; z-index: -100; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); -webkit-animation-name: menu-in-up; animation-name: menu-in-up; -webkit-animation-duration: 0s; animation-duration: 0s; } } /* Навигация серая на широкоэкранных устройствах ( viewport > 992px ) (в цветовые схемы выносим только .item-d ... ) */ /* Красим навигацию */ .nav-d_horizontal_gray {} /* Красим меню ( все уровни ) */ .nav-d_horizontal_gray .item-d__menu { background-color: #c8c7c7; } /* Красим меню ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d__menu .item-d__menu { background-color: #bdbdbd; } /* Красим меню ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d__menu .item-d__menu .item-d__menu { background-color: #b3b3b3; } /* Красим меню ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: #a8a8a8; } /* Красим меню ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d__menu .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: #9e9e9e; } /* Красим кнопку-бутерброд по её состоянию */ .nav-d_horizontal_gray .nav-d__burger:hover, .nav-d_horizontal_gray .nav-d__burger:focus, .nav-d_horizontal_gray .nav-d__burger:active { background-color: #c8c7c7; } /* По состоянию кнопки-бутерброда красим её иконку */ .nav-d_horizontal_gray .nav-d__burger:hover .burger-d__icon, .nav-d_horizontal_gray .nav-d__burger:focus .burger-d__icon, .nav-d_horizontal_gray .nav-d__burger:active .burger-d__icon { color: #C5D33D; } /* Красим ссылка по её состоянию ( все уровни ) */ .nav-d_horizontal_gray .item-d__link:hover, .nav-d_horizontal_gray .item-d__link:focus, .nav-d_horizontal_gray .item-d__link:active {} /* Красим ссылку ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d__link_child {} /* Красим курсор ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d__link_child:before { background-color: #bdbdbd; } /* Красим ссылка по её состоянию ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d__link_child:hover, .nav-d_horizontal_gray .item-d__link_child:focus, .nav-d_horizontal_gray .item-d__link_child:active { } /* Красим курсор по состоянию ссылки ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d__link_child:hover:before, .nav-d_horizontal_gray .item-d__link_child:focus:before, .nav-d_horizontal_gray .item-d__link_child:active:before { background-color: #C5D33D; } /* По наведению на пункт красим его ссылку ( все уровни ) */ .nav-d_horizontal_gray .item-d:hover > .item-d__link { border-bottom: 2px solid #c5d33d; color: #C5D33D; margin-bottom: -2px; } /* Красим ссылку текущего пункта ( все уровни ) */ .nav-d_horizontal_gray .item-d_current > .item-d__link { } /* По наведению на родительский пункт красим его курсор ( 1 уровень ) */ .nav-d_horizontal_gray .item-d_parent:hover > .item-d__link_main:before { } /* По наведению на родительский пункт и по наведению на ссылку красим её курсор ( 1 уровень ) */ .nav-d_horizontal_gray .item-d_parent:hover > .item-d__link_main:hover:before { background-color: #C5D33D; } /* По наведению на подпункт красим его ссылку ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d_child:hover > .item-d__link { } /* По наведению на подпункт красим его курсор ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* По наведению на подпункт красим его указатель ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d_child:hover > .item-d__link .link-d__sign { color: #C5D33D; } /* Красим ссылку текущего подпункта ( 2+ уровень ) */ .nav-d_horizontal_gray .item-d_child.item-d_current > .item-d__link {} /* Красим ссылку подпункта ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link {} /* Красим курсор подпункта ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:before {} /* Красим курсор подпункта по состоянию ссылки подпункта ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_gray .item-d_child .item-d_child > .item-d__link:active {} /* По наведению на подпункт красим его ссылку ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child:hover > .item-d__link {} /* По наведению на подпункт красим его курсор ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 3+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child.item-d_current > .item-d__link {} /* Красим ссылку подпункта ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link {} /* Красим курсор подпункта ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:before {} /* Красим курсор подпункта по состоянию ссылки подпункта ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child > .item-d__link:active { background-color: #a8a8a8; } /* По наведению на подпункт красим его ссылку ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link { background-color: #a8a8a8; } /* По наведению на подпункт красим его курсор ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 4+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link { background-color: #a8a8a8; } /* Красим ссылку подпункта ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link { background-color: #a8a8a8; } /* Красим курсор подпункта ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:before { background-color: #9e9e9e; } /* Красим курсор подпункта по состоянию ссылки подпункта ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active { background-color: #9e9e9e; } /* По наведению на подпункт красим его ссылку ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link { background-color: #9e9e9e; } /* По наведению на подпункт красим его курсор ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 5+ уровень ) */ .nav-d_horizontal_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link { background-color: #9e9e9e; } /* Навигация серая ( viewport < 992px ) */ @media (max-width: 921px) { /* Красим меню ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d__menu, .nav-d_horizontal_laptop_gray .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_gray .item-d__menu .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_gray .item-d__menu .item-d__menu .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_gray .item-d__menu .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: inherit; } /* Красим разделитель пунктов родительского и дочернего меню ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:not(:last-child) > .item-d__menu:after { background: linear-gradient(to right, #bdbdbd 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='rgb(0, 255, 255)', GradientType=1); } /* Наследуем цветовое оформление ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link { background-color: inherit; } /* Наследуем цветовое оформление по состоянию ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d > .item-d__link:link2, .nav-d_horizontal_laptop_gray .item-d > .item-d__link:visited2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:link2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:visited2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:link2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:visited2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:link2, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:visited2 { background-color: inherit; } /* Красим ссылка по её состоянию ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d > .item-d__link:hover, .nav-d_horizontal_laptop_gray .item-d > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active { background-color: #c8c7c7; } /* Красим курсор по состоянию ссылки ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим курсор подпункта ( 2+ уровень ) */ .nav-d_horizontal_laptop_gray .item-d > .item-d__link_child:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child > .item-d__link_child:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child > .item-d__link_child:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link_child:before { background-color: #c8c7c7; } /* По наведению на пункт сбрасываем перекрашивание указателя на пункте ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign { color: inherit; } /* По наведению на пункт и по наведению на указатель на пункте красим указатель на пункте ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover { color: #C5D33D; } /* По наведению на пункт красим его курсор ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #c8c7c7; } /* По наведению на пункт красим его курсор по состоянию ссылки ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку по состоянию пункта и состоянию самой ссылки ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link, .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d:hover > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d._active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d._active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d._active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d.item-d_active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d.item-d_current > .item-d__link, .nav-d_horizontal_laptop_gray .item-d.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_gray .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active { background-color: #c8c7c7; } /* Приводим к единому оформлению: по наведению на родительский пункт красим курсор ( 1 уровень ) */ .nav-d_horizontal_laptop_gray .item-d_parent:hover > .item-d__link_main:before { background-color: transparent; } /* Приводим к единому оформлению: по наведению на родительский пункт красим курсор по состоянию ссылки ( все уровни ) */ .nav-d_horizontal_laptop_gray .item-d_parent:hover > .item-d__link_main:hover:before, .nav-d_horizontal_laptop_gray .item-d_parent:hover > .item-d__link_main:focus:before, .nav-d_horizontal_laptop_gray .item-d_parent:hover > .item-d__link_main:active:before { background-color: #C5D33D; } /* Красим границы указателя меню */ .nav-d_horizontal_laptop_gray .item-d_main:first-child > .item-d__link:after { border-top-color: #bdbdbd; border-right-color: #bdbdbd; } /* Красим границы меню */ .nav-d_horizontal_laptop_gray .nav-d__menu { border-color: #bdbdbd; } } /* Навигация чёрная на широкоэкранных устройствах ( viewport > 992px ) (в цветовые схемы выносим только .item-d ... ) */ /* Красим навигацию */ .nav-d_horizontal_black { background-color: #000 } /* Красим меню ( все уровни ) */ .nav-d_horizontal_black .item-d__menu { background-color: #c8c7c7; } /* Красим меню ( 2+ уровень ) */ .nav-d_horizontal_black .item-d__menu .item-d__menu { background-color: #bdbdbd; } /* Красим меню ( 3+ уровень ) */ .nav-d_horizontal_black .item-d__menu .item-d__menu .item-d__menu { background-color: #b3b3b3; } /* Красим меню ( 4+ уровень ) */ .nav-d_horizontal_black .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: #a8a8a8; } /* Красим меню ( 5+ уровень ) */ .nav-d_horizontal_black .item-d__menu .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: #9e9e9e; } /* Красим кнопку-бутерброд */ .nav-d_horizontal_black .nav-d__burger { color: #fff; } /* Красим кнопку-бутерброд по её состоянию */ .nav-d_horizontal_black .nav-d__burger:hover, .nav-d_horizontal_black .nav-d__burger:focus, .nav-d_horizontal_black .nav-d__burger:active { background-color: #232323; } /* По состоянию кнопки-бутерброда красим её иконку */ .nav-d_horizontal_black .nav-d__burger:hover .burger-d__icon, .nav-d_horizontal_black .nav-d__burger:focus .burger-d__icon, .nav-d_horizontal_black .nav-d__burger:active .burger-d__icon { color: #C5D33D; } /* По наведению красим кнопку-бутерброд */ .nav-d_horizontal_black .nav-d__burger:hover { color: #c8c7c7; } /* Красим кнопку-бутерброд в фокусе */ .nav-d_horizontal_black .nav-d__burger:focus { color: #bdbdbd; } /* Красим кнопку-бутерброд по нажатию */ .nav-d_horizontal_black .nav-d__burger:active { color: #999999; } /* Красим ссылку ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main { color: #fff; } /* Красим ссылка по её состоянию ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main:link, .nav-d_horizontal_black .item-d__link_main:visited { color: #fff; } /* Красим ссылка по её состоянию ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main:hover, .nav-d_horizontal_black .item-d__link_main:focus, .nav-d_horizontal_black .item-d__link_main:active { background-color: #232323; } /* По наведению красим ссылка по её состоянию ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main:hover { color: #c8c7c7; } /* Красим ссылку в фокусе ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main:focus { color: #bdbdbd; } /* Красим ссылку по нажатию ( 1 уровень ) */ .nav-d_horizontal_black .item-d__link_main:active { color: #999999; } /* Красим ссылку ( 2+ уровень ) */ .nav-d_horizontal_black .item-d__link_child { background-color: #c8c7c7; } /* Красим курсор ( 2+ уровень ) */ .nav-d_horizontal_black .item-d__link_child:before { background-color: #bdbdbd; } /* Красим ссылка по её состоянию ( 2+ уровень ) */ .nav-d_horizontal_black .item-d__link_child:hover, .nav-d_horizontal_black .item-d__link_child:focus, .nav-d_horizontal_black .item-d__link_child:active { background-color: #bdbdbd; } /* Красим курсор по состоянию ссылки ( 2+ уровень ) */ .nav-d_horizontal_black .item-d__link_child:hover:before, .nav-d_horizontal_black .item-d__link_child:focus:before, .nav-d_horizontal_black .item-d__link_child:active:before { background-color: #C5D33D; } /* Красим ссылку текущего пункта и его состояния ( 1 уровень ) */ .nav-d_horizontal_black .item-d_current > .item-d__link_main, .nav-d_horizontal_black .item-d_current > .item-d__link_main:focus, .nav-d_horizontal_black .item-d_current > .item-d__link_main:active { background-color: #232323; } /* Красим ссылку текущего пункта ( 1 уровень ) */ .nav-d_horizontal_black .item-d_current > .item-d__link_main { color: #c8c7c7; } /* Красим ссылку текущего пункта в фокусе ( 1 уровень ) */ .nav-d_horizontal_black .item-d_current > .item-d__link_main:focus { color: #bdbdbd; } /* Красим ссылку текущего пункта по нажатию ( 1 уровень ) */ .nav-d_horizontal_black .item-d_current > .item-d__link_main:active { color: #999999; } /* Красим ссылку текущего пункта и его состояния ( 2+ уровень ) */ .nav-d_horizontal_black .item-d_current > .item-d__link_child, .nav-d_horizontal_black .item-d_current > .item-d__link_child:focus, .nav-d_horizontal_black .item-d_current > .item-d__link_child:active { color: inherit; } /* По наведению на родительский пункт красим его курсор ( 1 уровень ) */ .nav-d_horizontal_black .item-d_parent:hover > .item-d__link_main:before { background-color: #171717; } /* По наведению на родительский пункт и по наведению на ссылку красим её курсор ( 1 уровень ) */ .nav-d_horizontal_black .item-d_parent:hover > .item-d__link_main:hover:before { background-color: #C5D33D; } /* По наведению на пункт красим его ссылку и состояния ссылки ( 1 уровень ) */ .nav-d_horizontal_black .item-d_main:hover > .item-d__link, .nav-d_horizontal_black .item-d_main:hover > .item-d__link:focus, .nav-d_horizontal_black .item-d_main:hover > .item-d__link:active { background-color: #232323; } /* По наведению на пункт красим его ссылку ( 1 уровень ) */ .nav-d_horizontal_black .item-d_main:hover > .item-d__link { color: #c8c7c7; } /* По наведению на пункт красим его ссылку в фокусе ( 1 уровень ) */ .nav-d_horizontal_black .item-d_main:hover > .item-d__link:focus { color: #bdbdbd; } /* По наведению на пункт красим его ссылку по нажатию ( 1 уровень ) */ .nav-d_horizontal_black .item-d_main:hover > .item-d__link:active { color: #999999; } /* По наведению на подпункт красим его ссылку ( 2+ уровень ) */ .nav-d_horizontal_black .item-d_child:hover > .item-d__link { background-color: #bdbdbd; } /* По наведению на подпункт красим его курсор ( 2+ уровень ) */ .nav-d_horizontal_black .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* По наведению на подпункт красим его указатель ( 2+ уровень ) */ .nav-d_horizontal_black .item-d_child:hover > .item-d__link .link-d__sign { color: #C5D33D; } /* Красим ссылку текущего подпункта ( 2+ уровень ) */ .nav-d_horizontal_black .item-d_child.item-d_current > .item-d__link { background-color: #bdbdbd; } /* Красим ссылку подпункта ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link { background-color: #bdbdbd; } /* Красим курсор подпункта ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:before { background-color: #b3b3b3; } /* Красим курсор подпункта по состоянию ссылки подпункта ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_black .item-d_child .item-d_child > .item-d__link:active { background-color: #b3b3b3; } /* По наведению на подпункт красим его ссылку ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child:hover > .item-d__link { background-color: #b3b3b3; } /* По наведению на подпункт красим его курсор ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 3+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child.item-d_current > .item-d__link { background-color: #b3b3b3; } /* Красим ссылку подпункта ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link { background-color: #b3b3b3; } /* Красим курсор подпункта ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:before { background-color: #a8a8a8; } /* Красим курсор подпункта по состоянию ссылки подпункта ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child > .item-d__link:active { background-color: #a8a8a8; } /* По наведению на подпункт красим его ссылку ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link { background-color: #a8a8a8; } /* По наведению на подпункт красим его курсор ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 4+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link { background-color: #a8a8a8; } /* Красим ссылку подпункта ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link { background-color: #a8a8a8; } /* Красим курсор подпункта ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:before { background-color: #9e9e9e; } /* Красим курсор подпункта по состоянию ссылки подпункта ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:hover:before, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus:before, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку подпункта по его состоянию ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:focus, .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child > .item-d__link:active { background-color: #9e9e9e; } /* По наведению на подпункт красим его ссылку ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link { background-color: #9e9e9e; } /* По наведению на подпункт красим его курсор ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #C5D33D; } /* Красим ссылку текущего подпункта ( 5+ уровень ) */ .nav-d_horizontal_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link { background-color: #9e9e9e; } /* Навигация чёрная */ @media (max-width: 921px) { /* Красим навигацию */ .nav-d_horizontal_laptop_black { color: #fff; } /* Красим меню ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d__menu, .nav-d_horizontal_laptop_black .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_black .item-d__menu .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_black .item-d__menu .item-d__menu .item-d__menu .item-d__menu, .nav-d_horizontal_laptop_black .item-d__menu .item-d__menu .item-d__menu .item-d__menu .item-d__menu { background-color: inherit; } /* Красим разделитель пунктов родительского и дочернего меню ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:not(:last-child) .item-d__menu:after { background: linear-gradient(to right, #232323 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='rgb(0, 255, 255)', GradientType=1); } /* Наследуем цветовое оформление ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link { color: inherit; background-color: inherit; } /* Наследуем цветовое оформление по состоянию ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:link, .nav-d_horizontal_laptop_black .item-d .item-d__link:visited, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:visited, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:visited, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:visited { color: inherit; } /* Красим ссылка по её состоянию ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:active { background-color: #232323; } /* Красим курсор по состоянию ссылки ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылка по её состоянию ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:hover { color: #c8c7c7; } /* Красим ссылку в фокусе ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:focus { color: #bdbdbd; } /* Красим ссылку по нажатию ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link:active { color: #999999; } /* Красим курсор ( 2+ уровень ) */ .nav-d_horizontal_laptop_black .item-d .item-d__link_child:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d__link_child:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d__link_child:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child .item-d__link_child:before { background-color: #232323; } /* По наведению на пункт сбрасываем перекрашивание указателя на пункте ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign { color: inherit; } /* По наведению на пункт и по наведению на указатель на пункте красим указатель на пункте ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link .link-d__sign:hover { color: #C5D33D; } /* По наведению на пункт красим его курсор ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:before { background-color: #232323; } /* По наведению на пункт красим его курсор по состоянию ссылки ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:hover:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus:before, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active:before { background-color: #C5D33D; } /* Красим ссылку по состоянию пункта и состоянию самой ссылки ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active { background-color: #232323; } /* Красим ссылку по состоянию пункта ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link { color: #c8c7c7; } /* Красим ссылку в фокусе по состоянию пункта ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:focus, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:focus { color: #bdbdbd; } /* Красим нажатую ссылку по состоянию пункта ( все уровни ) */ .nav-d_horizontal_laptop_black .item-d:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child:hover > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child._active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_active > .item-d__link:active, .nav-d_horizontal_laptop_black .item-d_child .item-d_child .item-d_child .item-d_child.item-d_current > .item-d__link:active { color: #999999; } /* Красим границы указателя меню */ .nav-d_horizontal_laptop_black .item-d_main:first-child > .item-d__link:after { border-top-color: #595959; border-right-color: #595959; } /* Красим границы меню */ .nav-d_horizontal_laptop_black .nav-d__menu { border-color: #595959; } } /* Навигация вертикальная */ /* Приводим компоненты ссылки подпункта к единым габаритам ( все уровни ) */ .nav-d_vertical .item-d__link .link-d__icon, .nav-d_vertical .item-d__link .link-d__name, .nav-d_vertical .item-d__link .link-d__sign { padding-top: 0.83333rem; /* 10/12 */ padding-bottom: 0.83333rem; /* 10/12 */ } /* Смещаем подпункты ( 2+ уровень ) */ .nav-d_vertical .item-d__link_child { padding-left: 0.83333rem; /* 10/12 */ } /* Преобразуем иконку указателя пункта по состоянию пункта ( все уровни ) */ .nav-d_vertical .item-d._active > .item-d__link .link-d__sign .sign-d__icon, .nav-d_vertical .item-d.item-d_active > .item-d__link .link-d__sign .sign-d__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* Показываем подменю по состоянию пункта ( все уровни ) */ .nav-d_vertical .item-d._active > .item-d__menu, .nav-d_vertical .item-d.item-d_active > .item-d__menu { position: static; visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: auto; z-index: initial; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } /* Добавляем отступ к подменю ( все уровни ) */ .nav-d_vertical .item-d:not(:last-child) > .item-d__menu { padding-bottom: 1.25rem;/* 15/12 */ } /* Создаём разделитель пунктов родительского и дочернего меню ( все уровни ) */ .nav-d_vertical .item-d:not(:last-child) > .item-d__menu:after { display: block; width: 62%; height: 1px; position: absolute; left: 0; bottom: 1.25rem; /* 15/12 */ content: ''; z-index: 1; } /* Навигация серая (в цветовые схемы выносим только .item-d ... ) */ /* Красим навигацию */ .nav-d_vertical_gray { color: inherit; /* Наследуем цветовое оформление или красим в какой-либо цвет */ background-color: #dfdfdf } /* Красим меню ( все уровни ) */ .nav-d_vertical_gray .item-d__menu { /* background-color: #dfdfdf; */ /* так как background-color: inherit; */ } /* По состоянию кнопки-бутерброда красим её иконку */ .nav-d_vertical_gray .nav-d__burger:hover .burger-d__icon, .nav-d_vertical_gray .nav-d__burger:focus .burger-d__icon, .nav-d_vertical_gray .nav-d__burger:active .burger-d__icon { color: #C5D33D; } /* По наведению на указатель пункта красим его иконку ( все уровни ) */ .nav-d_vertical_gray .item-d__link .link-d__sign:hover { color: #C5D33D; } /* Красим ссылка по её состоянию ( все уровни ) */ .nav-d_vertical_gray .item-d__link:hover, .nav-d_vertical_gray .item-d__link:focus, .nav-d_vertical_gray .item-d__link:active { background-color: #c8c7c7; } /* по состоянию ссылки красим его курсор ( все уровни ) */ .nav-d_vertical_gray .item-d__link:hover:before, .nav-d_vertical_gray .item-d__link:focus:before, .nav-d_vertical_gray .item-d__link:active:before { background-color: #C5D33D; } /* Красим курсор подпункта ( 2+ уровень ) */ .nav-d_vertical_gray .item-d__link_child:before { background-color: #c8c7c7; } /* Красим разделитель пунктов родительского и дочернего меню ( все уровни ) */ .nav-d_vertical_gray .item-d:not(:last-child) > .item-d__menu:after { background: linear-gradient(to right, #bdbdbd 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='rgb(0, 255, 255)', GradientType=1); } /* Красим ссылку по состоянию пункта и состоянию самой ссылки ( все уровни ) */ .nav-d_vertical_gray .item-d:hover > .item-d__link, .nav-d_vertical_gray .item-d:hover > .item-d__link:focus, .nav-d_vertical_gray .item-d:hover > .item-d__link:active, .nav-d_vertical_gray .item-d._active > .item-d__link, .nav-d_vertical_gray .item-d._active > .item-d__link:focus, .nav-d_vertical_gray .item-d._active > .item-d__link:active, .nav-d_vertical_gray .item-d.item-d_active > .item-d__link, .nav-d_vertical_gray .item-d.item-d_active > .item-d__link:focus, .nav-d_vertical_gray .item-d.item-d_active > .item-d__link:active, .nav-d_vertical_gray .item-d.item-d_current > .item-d__link, .nav-d_vertical_gray .item-d.item-d_current > .item-d__link:focus, .nav-d_vertical_gray .item-d.item-d_current > .item-d__link:active { background-color: #c8c7c7; } .nav-d_vertical .link-d__icon .icon-d { width: 30px; } /* Главное меню */ .nav-d_main ._box { padding-left: 0; padding-right: 0; } .nav-d_main .item-d__link_main .link-d__name { padding: 1.15385em; /* 15/13 */ font-size: 1.08333rem; /* 13/12 */ } .nav-d_main .item-d_main:first-child > .item-d__link:after { left: 1.66667rem; /* 20/12 */ } @media (max-width: 921px) { .nav-d_main.nav-d_horizontal_laptop .item-d__link_main .link-d__name { padding-top: 0.76923em; /* 10/13 */ padding-bottom: 0.76923em; /* 10/13 */ } } ._nav-main-open .nav-d_main .burger-d__icon span { opacity: 0; } ._nav-main-open .nav-d_main .burger-d__icon::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } ._nav-main-open .nav-d_main .burger-d__icon::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } ._nav-main-open .nav-d_main .nav-d__menu { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } /* Меню на внутренних страницах */ .nav-d_internal .item-d__link .link-d__name, .nav-d_internal .item-d__link .link-d__sign { padding: 0.9375em; /* 15/16 */ font-size: 1.33333rem; /* 16/12 */ } .nav-d_internal .item-d__link .link-d__name { padding-left: 0; } .nav-d_internal .item-d__link .link-d__sign { margin-left: -0.9375em; /* -15/16 */ padding-right: 0; } .nav-d_internal .item-d__menu { margin-left: 1.25rem; /* 15/12 */ margin-bottom: 1.25rem; /* 15/12 */ border-left: 1px solid #dfdfdf; } .nav-d_internal .item-d__menu:after { display: none !important; } .nav-d_internal .item-d_main:not(:last-child) { border-bottom: 1px solid #dfdfdf; } /* Меню */ .nav-d_broad .link-d__icon, .nav-d_broad .link-d__sign { display: none; } .nav-d_broad .item-d__link_main { font-size: 1.08333rem; /* 13/12 */ font-weight: 700; } .nav-d_broad .item-d_child { margin-bottom: 0.41667rem; /* 5/12 */ } .nav-d_broad .item-d__text { display: block; margin-top: 0.27273em; /* 3/11 */ font-size: 0.91667rem; /* 11/12 */ } .nav-d_broad .item-d__menu { margin-top: 1.66667rem; /* 20/12 */ } .nav-d_broad .nav-d__menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; /* 30/12 */ } @media (min-width: 576px) { .nav-d_broad .nav-d__menu { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 922px) { .nav-d_broad .nav-d__menu { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .nav-d_broad .nav-d__menu { grid-template-columns: repeat(6, 1fr); } } .nav-d_broad_gray { padding: 2.5rem 0; /* 30/12 */ color: #fff; background-color: #707070 } .nav-d_broad_gray .item-d__link:hover { color: #c8c7c7; } .nav-d_broad_gray .item-d__link:focus, .nav-d_broad_gray .item-d__link:active { color: #bdbdbd; } .nav-d_broad_gray .item-d__link:hover:before, .nav-d_broad_gray .item-d__link:focus:before, .nav-d_broad_gray .item-d__link:active:before { display: none; } .nav-d_broad_gray .item-d_active > .item-d__link, .nav-d_broad_gray .item-d_current > .item-d__link { color: #dfdfdf; } .nav-d_broad_gray .item-d_active > .item-d__link:active, .nav-d_broad_gray .item-d_current > .item-d__link:active { color: #c8c7c7; } .nav-d_broad_gray .item-d__menu { color: #dfdfdf; } /* Склады */ .store-d_many .store-d__count, .store-d_many .store-d__unit { color: #3aaa35; } .store-d_few .store-d__count, .store-d_few .store-d__unit { color: #e30613; } /* Список ожидания */ .waitlist-d { display: grid; grid: 'title title' 'field button' 'error error' / auto 1fr; gap: 0.83333rem /* 10/12 */ } .waitlist-d .errors { grid-area: error; } .waitlist-d__title { grid-area: title; font-size: 0.91667rem; /* 11/12 */ } .waitlist-d__field { grid-area: field; margin-bottom: 0 !important; } .waitlist-d__button { grid-area: button; margin-top: 0 !important; margin-right: 0 !important; } /* Предложение */ .offer-d .price-d__num, .offer-d .price-d__curr { font-size: 2.5rem; /* 30/12 */ } .offer-d .price-d_old .price-d__num, .offer-d .price-d_old .price-d__curr { font-size: 0.83333rem; /* 10/12 */ } .offer-d > * { margin-bottom: 1.66667rem; /* 20/12 */ } .offer-d > *:last-child { margin-bottom: 0; } .offer-d__choices > *, .offer-d__additions > *, .offer-d__pricelist > * { margin-bottom: 1.25rem; /* 15/12 */ } .offer-d__choices > *:empty, .offer-d__choices > *:last-child, .offer-d__additions > *:empty, .offer-d__additions > *:last-child, .offer-d__pricelist > *:empty, .offer-d__pricelist > *:last-child { margin-bottom: 0; } .offer-d__pricelist { margin-bottom: 1.25rem; /* 15/12 */ } .offer-d__price { white-space: nowrap; } .offer-d__price:not(:last-child) { margin-right: 0.83333rem; /* 10/12 */ } .offer-d__price.price-d_discount { display: block; } .offer-d__count { grid-area: count; } .offer-d__button { margin: 0 !important; } .offer-d__button_tocart { grid-area: tocart; } .offer-d__button_oneclick { grid-area: oneclick; } .offer-d__actionbar { display: grid; grid: 'count tocart' 'oneclick oneclick' / auto 1fr; gap: 1.5rem 0.83333rem; /* 18/12 10/12 */ margin-bottom: 0 } .offer-d__actionbar:empty { display: none; } /* Страница */ .page-d { display: flex; flex-direction: column; min-height: 100vh; min-width: 300px } .page-d > * { flex: 0 0 auto; } /* Панель */ .page-d__hpanel {} .page-d__hpanel ._box { padding-left: 0; } .page-d__hpanel a:link, .page-d__hpanel a:hover, .page-d__hpanel a:focus, .page-d__hpanel a:active, .page-d__hpanel a:visited { color: inherit; } .hpanel-d { display: flex; align-items: center; background-color: inherit } .hpanel-d > * { margin-right: 1.25rem; /* 15/12 */ } @media (min-width: 480px) { .hpanel-d > * { margin-right: 1.66667rem; /* 20/12 */ } } @media (min-width: 576px) { .hpanel-d > * { margin-right: 2.5rem; /* 30/12 */ } } .hpanel-d > *:last-child { margin-right: 0; } /* Панель — Навигация */ .hpanel-d__nav { flex-grow: 1 } .hpanel-d__nav .burger-d__icon { width: 16px; margin-right: 0.41667rem; /* 5/12 */ } .hpanel-d__nav .burger-d__icon::before, .hpanel-d__nav .burger-d__icon span, .hpanel-d__nav .burger-d__icon::after { height: 3px; } .hpanel-d__nav .burger-d__icon::before, .hpanel-d__nav .burger-d__icon::after { -webkit-transform-origin: 15px; transform-origin: 15px; } .hpanel-d__nav .burger-d__icon span { margin: 2px 0; } ._hpanel-nav-open .hpanel-d__nav .burger-d__icon::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } ._hpanel-nav-open .hpanel-d__nav .burger-d__icon::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } ._hpanel-nav-open .hpanel-d__nav .burger-d__icon span { opacity: 0; } @media (max-width: 921px) { ._hpanel-nav-open .hpanel-d__nav .nav-d__menu { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } } /* Панель — Контакты */ .hpanel-d__contacts { display: flex; align-items: center } .hpanel-d__contacts > * { margin-right: 1.25rem; /* 15/12 */ } @media (min-width: 480px) { .hpanel-d__contacts > * { margin-right: 1.66667rem; /* 20/12 */ } } @media (min-width: 576px) { .hpanel-d__contacts > * { margin-right: 2.5rem; /* 30/12 */ } } .hpanel-d__contacts > *:last-child { margin-right: 0; } .hpanel-d__contacts .contact-d { display: flex; align-items: center; } .hpanel-d__contacts .contact-d > * { margin-right: 0.66667rem; /* 8/12 */ } .hpanel-d__contacts .contact-d > *:last-child { margin-right: 0; } .hpanel-d__contacts .contact-d__list a { white-space: nowrap; } .hpanel-d__contacts .contact-d_phone a { font-size: 1.5rem; /* 18/12 */ } .contact-d_tooltip { position: relative; } .contact-d_tooltip .contact-d__icon { margin-right: 0.66667rem; /* 8/12 */ font-size: 1.33333rem; /* 16/12 */ color: #595959; } @media (max-width: 921px) { .contact-d_tooltip { cursor: pointer; } .contact-d_tooltip .contact-d__icon { margin-right: 0; } .contact-d_tooltip:hover .contact-d__icon { color: #C5D33D; } .contact-d_tooltip:focus .contact-d__icon, .contact-d_tooltip:active .contact-d__icon { color: #d1db6c; } .contact-d_tooltip .contact-d__list { min-width: 12.5rem; /* 150/12 */ max-width: 25rem; /* 300/12 */ max-height: 80vh; padding: 1.25rem; /* 15/12 */ position: absolute; top: 2.08333rem; /* 25/12 */ right: -0.75rem; /* -8/12 */ background-color: #dfdfdf; border: 1px solid #c8c7c7; visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); -webkit-animation: 0s both menu-in-up; animation: 0s both menu-in-up; z-index: -1; } .contact-d_tooltip .contact-d__list::before { display: block; width: 100%; height: 1.25rem; /* 15/12 */ position: absolute; top: -1.25rem; /* -15/12 */ left: 0; content: ''; } .contact-d_tooltip .contact-d__list:after { display: block; width: 0.83333rem;/* 10/12 */ height: 0.83333rem;/* 10/12 */ position: absolute; top: -0.5rem;/* -6/12 */ right: 0.91667rem;/* 11/12 */ content: ''; background-color: inherit; border-top: 1px solid #bdbdbd; border-right: 1px solid #bdbdbd; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: -1; } .contact-d_tooltip.contact-d_active .contact-d__icon { color: #C5D33D; } .contact-d_tooltip.contact-d_active .contact-d__list { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 101; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } } /* Логотип */ .signboard-d { display: flex; align-items: center; max-width: 33.33333rem; /* 400/12 */ } .signboard-d:hover, .signboard-d:focus, .signboard-d:active { text-decoration: none; } .signboard-d > * { margin-right: 1.25rem; /* 15/12 */ } .signboard-d > *:last-child { margin-right: 0; } .signboard-d__logo { max-width: 16.66667rem; /* 200/12 */ } .signboard-d__logo, .signboard-d__inscript { display: block; text-overflow: ellipsis; overflow: hidden; } .inscript-d__slogan, .inscript-d__monogram { display: block; } .inscript-d__monogram { font-size: 1.36667rem; /* 20/12 */ line-height: 1; font-weight: 700; text-overflow: ellipsis; overflow: hidden; } .inscript-d__slogan { margin-top: 0.375em; /* 3/8 */ font-size: 0.66667rem; /* 8/12 */ word-wrap: break-word; word-break: break-word; } .logo-d_diafan svg { display: block; width: 3.33333rem; /* 40/12 */ height: 3.33333rem; /* 40/12 */ } @media (min-width: 576px) { .inscript-d__monogram { font-size: 1.96667rem; /* 26/12 */ } .inscript-d__slogan { margin-top: 0.25rem; /* 3/12 */ font-size: inherit; } .logo-d_diafan svg { width: 4.16667rem; /* 50/12 */ height: 4.16667rem; /* 50/12 */ } } /* Доска, Панель инструментов */ .hboard-d .search-d, .toolbar-d .search-d { position: relative; } .hboard-d .search-d__shield, .toolbar-d .search-d__shield { padding: 0.83333rem 0; /* 10/12 */ } @media (min-width: 922px) { .hboard-d .search-d__shield, .toolbar-d .search-d__shield { display: none; } } .hboard-d .search-d__shield .shield-d__icon, .toolbar-d .search-d__shield .shield-d__icon { font-size: 1.33333rem; /* 16/12 */ color: #595959; } @media (max-width: 767px) { .hboard-d .search-d__shield .shield-d__icon, .toolbar-d .search-d__shield .shield-d__icon { margin-right: 0; } .hboard-d .search-d__shield .shield-d__name, .toolbar-d .search-d__shield .shield-d__name { display: none; } } .hboard-d .search-d__shield:hover .shield-d__icon, .hboard-d .search-d__shield:focus .shield-d__icon, .hboard-d .search-d__shield:active .shield-d__icon, .toolbar-d .search-d__shield:hover .shield-d__icon, .toolbar-d .search-d__shield:focus .shield-d__icon, .toolbar-d .search-d__shield:active .shield-d__icon { color: inherit; } .hboard-d .search-d__shield:hover, .toolbar-d .search-d__shield:hover { color: #C5D33D; } .hboard-d .search-d__shield:focus, .hboard-d .search-d__shield:active, .toolbar-d .search-d__shield:focus, .toolbar-d .search-d__shield:active { color: #d1db6c; } .hboard-d .search-d__field, .toolbar-d .search-d__field { margin-bottom: 0; } .hboard-d .search-d__field input, .toolbar-d .search-d__field input { padding: 1.08333rem 4.16667rem 1.08333rem 1.5rem; /* 13/12 50/12 13/12 18/12 */ border-width: 2px; } .hboard-d .search-d__field + .search-d__button, .toolbar-d .search-d__field + .search-d__button { margin-top: 0; } .hboard-d .search-d__button, .toolbar-d .search-d__button { width: 4.16667rem; /* 50/12 */ height: 100%; margin: 0; padding: 0; position: absolute; top: 0; right: 0; font-size: 1.14286em; /* 16/14 */ color: #595959; background: none; z-index: 2; } .hboard-d .search-d__button:hover, .toolbar-d .search-d__button:hover { color: #C5D33D; } .hboard-d .search-d__button:focus, .hboard-d .search-d__button:active, .toolbar-d .search-d__button:focus, .toolbar-d .search-d__button:active { color: #d1db6c; } .hboard-d .search-d__form, .toolbar-d .search-d__form { position: relative; } @media (max-width: 921px) { .hboard-d .search-d__form, .toolbar-d .search-d__form { display: none; } } .hboard-d .search-d__form:hover .search-d__field input, .toolbar-d .search-d__form:hover .search-d__field input { border-color: #bdbdbd; } .hboard-d .search-d__result, .toolbar-d .search-d__result { max-height: 60vh; width: 100%; margin-top: -1px; padding: 1.25rem; /* 15/12 */ padding-bottom: 8.33333rem; /* 100/12 */ position: absolute; top: 100%; left: 0; background-color: #fff; border: 2px solid #dfdfdf; border-top: none; visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); -webkit-animation: 0s both menu-in-up; animation: 0s both menu-in-up; z-index: -1; } .hboard-d .search-d__result::-webkit-scrollbar, .toolbar-d .search-d__result::-webkit-scrollbar { background: transparent; } .hboard-d .search-d__result ._viewgrid, .toolbar-d .search-d__result ._viewgrid { grid-template-columns: repeat(auto-fill, minmax(13.33333rem, 1fr)); /* 160/12 */ } .hboard-d .auth-d__nav .nav-d__menu, .toolbar-d .auth-d__nav .nav-d__menu { display: flex; align-items: center; } .hboard-d .auth-d__nav .nav-d__menu > *, .toolbar-d .auth-d__nav .nav-d__menu > * { margin-right: 1.25rem; /* 15/12 */ } @media (min-width: 480px) { .hboard-d .auth-d__nav .nav-d__menu > *, .toolbar-d .auth-d__nav .nav-d__menu > * { margin-right: 1.66667rem; /* 20/12 */ } } @media (min-width: 576px) { .hboard-d .auth-d__nav .nav-d__menu > *, .toolbar-d .auth-d__nav .nav-d__menu > * { margin-right: 2.5rem; /* 30/12 */ } } .hboard-d .auth-d__nav .nav-d__menu > *:last-child, .toolbar-d .auth-d__nav .nav-d__menu > *:last-child { margin-right: 0; } .hboard-d .auth-d__nav .item-d__link, .toolbar-d .auth-d__nav .item-d__link { display: flex; align-items: center; padding: 0.83333rem 0; /* 10/12 */ } .hboard-d .auth-d__nav .item-d__link .link-d__icon, .toolbar-d .auth-d__nav .item-d__link .link-d__icon { font-size: 1.33333rem; /* 16/12 */ color: #595959; } .hboard-d .auth-d__nav .item-d__link:hover .link-d__icon, .hboard-d .auth-d__nav .item-d__link:focus .link-d__icon, .hboard-d .auth-d__nav .item-d__link:active .link-d__icon, .toolbar-d .auth-d__nav .item-d__link:hover .link-d__icon, .toolbar-d .auth-d__nav .item-d__link:focus .link-d__icon, .toolbar-d .auth-d__nav .item-d__link:active .link-d__icon { color: inherit; } .hboard-d .auth-d__nav .item-d__link .link-d__name, .toolbar-d .auth-d__nav .item-d__link .link-d__name { display: none; } @media (min-width: 768px) { .hboard-d .auth-d__nav .item-d__link .link-d__icon, .toolbar-d .auth-d__nav .item-d__link .link-d__icon { margin-right: 0.66667rem; /* 8/12 */ } .hboard-d .auth-d__nav .item-d__link .link-d__name, .toolbar-d .auth-d__nav .item-d__link .link-d__name { display: block; } } ._search-result-show .search-d__result:not(:empty) { visibility: visible; clip: auto; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .hboard-d__intercaps, .toolbar-d__intercaps { display: flex; align-items: center } .hboard-d__intercaps > *, .toolbar-d__intercaps > * { margin-right: 1.25rem;/* 15/12 */ } @media (min-width: 480px) { .hboard-d__intercaps > *, .toolbar-d__intercaps > * { margin-right: 1.66667rem; /* 20/12 */ } } @media (min-width: 576px) { .poisk-top { float: right; padding-top: 10px;margin-left: 30px; } .nav-d_menu { float: right; } .hboard-d__intercaps > *, .toolbar-d__intercaps > * { margin-right: 2.5rem; /* 30/12 */ } } .hboard-d__intercaps > *:empty, .hboard-d__intercaps > *:last-child, .toolbar-d__intercaps > *:empty, .toolbar-d__intercaps > *:last-child { margin-right: 0; } /* Доска */ .page-d__hboard { padding-top: 1.66667rem; /* 20/12 */ padding-bottom: 0.83333rem; /* 10/12 */ } .hboard-d { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .hboard-d > * { margin-right: 2.5rem; /* 30/12 */ } .hboard-d > *:empty, .hboard-d > *:last-child { margin-right: 0; } @media (min-width: 480px) { .page-d__hboard { padding-bottom: 1.66667rem; /* 20/12 */ } .hboard-d { flex-wrap: nowrap; justify-content: space-between; border-bottom: 2px solid; } } @media (min-width: 1024px) { .page-d__hboard { padding-top: 2.91667rem; /* 35/12 */ padding-bottom: 2.91667rem; /* 35/12 */ } } /* Доска — Вывеска */ @media (max-width: 479px) { .hboard-d__signboard { flex: 1 1 100%; margin-right: 0; margin-bottom: 0.83333rem; /* 10/12 */ } .hboard-d__signboard .signboard-d { justify-content: center; max-width: 100%; } } /* Доска, , Панель инструментов — Поиск на сайте */ @media (min-width: 922px) { .hboard-d__search, .toolbar-d__search { flex-grow: 1; } } ._hboard-search-active .hboard-d > *:not(.hboard-d__signboard):not(.hboard-d__search) { display: none; } ._hboard-search-active .hboard-d__search { flex-grow: 1; margin-right: 0; } ._hboard-search-active .hboard-d__search .search-d__shield { display: none; } ._hboard-search-active .hboard-d__search .search-d__field input { padding-top: 0.75rem; /* 9/12 */ padding-bottom: 0.75rem; /* 9/12 */ } ._hboard-search-active .hboard-d__search .search-d__form { display: block; } @media (max-width: 921px) { body:not(._hboard-search-active) .hboard-d .search-d__result, body:not(._toolbar-search-active) .toolbar-d .search-d__result { display: none !important; } } /* Панель инструментов */ .toolbar-d { width: 100%; position: fixed; top: 0; left: 0; background-color: #c4d23e; border-bottom: 1px solid #bdbdbd; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); opacity: 0; filter: alpha(opacity=0); -webkit-animation: 0s both slide-fade-in-up; animation: 0s both slide-fade-in-up } ._load .toolbar-d { -webkit-animation-duration: 1s; animation-duration: 1s; } ._toolbar-show .toolbar-d { visibility: visible; opacity: 1; filter: alpha(opacity=100); z-index: 200; -webkit-animation-name: slide-fade-in-down; animation-name: slide-fade-in-down; } .toolbar-d__inside { display: flex; justify-content: space-between; align-items: center; padding-top: 0.83333rem; /* 10/12 */ padding-bottom: 0.83333rem; /* 10/12 */ background-color: inherit } .toolbar-d__inside > * { margin-right: 0.83333rem; /* 10/12 */ } @media (min-width: 480px) { .toolbar-d__inside > * { margin-right: 2.08333rem; /* 25/12 */ } } @media (min-width: 576px) { .toolbar-d__inside > * { margin-right: 2.5rem; /* 30/12 */ } } .toolbar-d__inside > *:empty, .toolbar-d__inside > *:last-child { margin-right: 0; } .toolbar-d .signboard-d > * { display: none; } .toolbar-d .signboard-d__logo { display: block; margin-right: 0; } .toolbar-d__search .search-d__field input { border-color: #bdbdbd; } .toolbar-d__nav { display: flex; align-items: center; max-width: 100% } .toolbar-d__nav .nav-d__burger { justify-content: end; padding-left: 0; padding-top: 0.83333rem; /* 10/12 */ padding-bottom: 0.83333rem; /* 10/12 */ } @media (max-width: 575px) { .toolbar-d__nav .nav-d__burger .burger-d__name { display: none; } } /* Смещение курсора на всех уровнях ( из-за рамки меню ) */ .toolbar-d__nav .item-d__link:before { left: -1px; } .toolbar-d__nav .item-d_main:first-child > .item-d__link:after { display: block; width: 0.83333rem; /* 10/12 */ height: 0.83333rem; /* 10/12 */ position: absolute; top: -0.5rem; /* -6/12 */ right: 1.08333rem; /* 43/12 */ content: ''; background-color: inherit; border-top: 1px solid #bdbdbd; border-right: 1px solid #bdbdbd; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: 2px 0px 2px -2px rgba(0, 0, 0, .2); z-index: 2; } .toolbar-d__nav .nav-d__menu { width: 220px; margin-top: 0.41667rem; /* 5/12 */ position: absolute; top: 100%; right: 0.41667rem; /* 5/12 */ visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); border: 1px solid #bdbdbd; z-index: -100; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); -webkit-animation-name: menu-in-up; animation-name: menu-in-up; -webkit-animation-duration: 0s; animation-duration: 0s; } .toolbar-d__nav:last-child { margin-right: -1.25rem; /* -15/12 */ } ._toolbar-nav-open .toolbar-d__nav .burger-d__icon span { opacity: 0; } ._toolbar-nav-open .toolbar-d__nav .burger-d__icon::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } ._toolbar-nav-open .toolbar-d__nav .burger-d__icon::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } ._toolbar-nav-open .toolbar-d__nav .nav-d__menu { clip: auto; visibility: visible; opacity: 1; filter: alpha(opacity=100); z-index: 100; -webkit-animation-name: menu-in-down; animation-name: menu-in-down; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } ._toolbar-search-active .toolbar-d__inside > *:not(.toolbar-d__signboard):not(.toolbar-d__search) { display: none; } ._toolbar-search-active .toolbar-d__search { flex-grow: 1; margin-right: 0; } ._toolbar-search-active .toolbar-d__search .search-d__shield { display: none; } ._toolbar-search-active .toolbar-d__search .search-d__field input { padding-top: 0.75rem; /* 9/12 */ padding-bottom: 0.75rem; /* 9/12 */ } ._toolbar-search-active .toolbar-d__search .search-d__form { display: block; } .page-d__slideshow_main { margin-top: 1.66667rem; /* 20/12 */ } .page-d__content { flex: 1 0 auto; margin-top: 1.25rem; /* 15/12 */ margin-bottom: 1.25rem; /* 15/12 */ } @media (min-width: 480px) { .page-d__content { margin-top: 2.5rem; /* 30/12 */ margin-bottom: 2.5rem; /* 30/12 */ } } @media (min-width: 576px) { .page-d__content { margin-top: 4.16667rem; /* 50/12 */ margin-bottom: 4.16667rem; /* 50/12 */ } } .content-d { display: grid; grid: 'main' 'aside' / minmax(0, 1fr); gap: 2.91667rem 2.5rem; /* 35/12 30/12 */ } @media (min-width: 922px) { .content-d { grid: 'aside main' / 25rem minmax(0, 1fr); /* 300/12 */ } } main { grid-area: main; } aside { grid-area: aside; } @media (min-width: 576px) { aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; gap: 0 2.5rem; /* 30/12 */ } } @media (min-width: 922px) { aside { display: block; } } .block-d, section > *, main section, aside section { margin-bottom: 2.91667rem; /* 35/12 */ } section:last-child, .block-d:last-child, section > *:last-child { margin-bottom: 0; } section > header { margin-bottom: 1em; line-height: 1.3; font-weight: 700; word-wrap: break-word; word-break: break-word; } .section-d_main > header { font-size: 1.33333rem; /* 16/12 */ } @media (min-width: 576px) { .section-d_main > header { font-size: 1.66667rem; /* 20/12 */ } } @media (min-width: 922px) { .section-d_main > header { font-size: 2rem; /* 24/12 */ } } .section-d_child { margin-bottom: 1.66667rem; /* 20/12 */ } .section-d_child > header { font-size: 1.16667rem; /* 14/12 */ } @media (min-width: 922px) { .section-d_child > header { font-size: 1.66667rem; /* 20/12 */ } } .block-d__name { font-size: 1.33333rem; /* 16/12 */ } @media (min-width: 576px) { .block-d__name { font-size: 1.5rem; /* 18/12 */ } } @media (min-width: 1200px) { .block-d__name { font-size: 2rem; /* 24/12 */ } } .page-d_home main > ._text { font-size: 1.16667rem; /* 14/12 */ } .page-d_home main > ._text h1 { font-size: 1.33333rem; /* 16/12 */ } @media (min-width: 576px) { .page-d_home main > ._text h1 { font-size: 2rem; /* 24/12 */ } } @media (min-width: 1200px) { .page-d_home main > ._text h1 { font-size: 3rem; /* 36/12 */ } } main > section > header, .page-d_home main .block-d__name { margin-bottom: 0.76923em; /* 20/26 */ font-size: 2.16667rem; /* 26/12 */ } @media (min-width: 576px) { main > section > header, .page-d_home main .block-d__name { font-size: 2.5rem; /* 30/12 */ } } @media (min-width: 922px) { main > section > header, .page-d_home main .block-d__name { margin-bottom: 0.55556em; /* 20/36 */ font-size: 3rem; /* 36/12 */ } } aside .element-d_news_item { display: flex; max-width: 100% } aside .element-d_news_item .detail-d:not(:last-child) { margin-bottom: 0.41667rem; /* 5/12 */ } aside .element-d_news_item .detail-d_name { margin-top: -0.25em; /* -3/12 */ } aside .element-d_news_item .element-d__images { flex-shrink: 0; flex-basis: 5.83333rem; /* 70/12 */ max-width: 5.83333rem; /* 70/12 */ margin-right: 1.25rem; /* 15/12 */ } aside .element-d_news_item._bounded:not(:first-child), aside .element-d_news_item._bounded ._bounded:first-child { margin-top: 1.25rem; /* 15/12 */ padding-top: 1.25rem; /* 15/12 */ } aside .filter-d, aside .profile-d, aside .block-d_files_item { padding: 2.08333rem 1.25rem; /* 25/12 15/12 */ border: 1px solid #dfdfdf; border-radius: 0.25rem; /* 3/12 */ } aside .block-d_menu .nav-d { border-radius: 0.25rem; /* 3/12 */ overflow: hidden; } .profile-d__note { display: inline-block; margin-top: 0.41667rem; /* 5/12 */ vertical-align: middle } .profile-d__note a { display: block; } .profile-d__note a::after { content: ' ➔'; } aside .element-d_files_item._bounded:not(:first-child), aside .element-d_files_item._bounded ._bounded:first-child { margin-top: 1.25rem; /* 15/12 */ padding-top: 0.83333rem; /* 10/12 */ } aside .element-d_votes_item .detail-d:not(:last-child) { margin-bottom: 1.25rem; /* 15/12 */ } aside .element-d_votes_item .param-d:not(:last-child) { margin-bottom: 0.41667rem; /* 5/12 */ } .element-d_faq_item .detail-d_anons { margin-bottom: 0.83333rem; /* 10/12 */ font-size: 1.33333em; /* 16/12 */ color: inherit; } .element-d_faq_item .detail-d_text { margin-top: 0.83333rem; /* 10/12 */ color: #595959; } .element-d_faq_item .detail-d_text .icon-d { margin-right: 1.25rem; /* 15/12 */ } .element-d_faq_item._bounded:not(:first-child), .element-d_faq_item._bounded ._bounded:first-child { margin-top: 2.08333rem; /* 25/12 */ padding-top: 2.08333rem; /* 25/12 */ } .section-d_faq_id .section-d__text { margin-left: 2.5rem; /* 30/12 */ color: #595959; } /* Товар */ .product-d { margin-bottom: 4.16667rem /* 50/12 */ } .product-d > * { margin-bottom: 2.5rem; /* 30/12 */ } .product-d > *:last-child { margin-bottom: 0; } @media (min-width: 480px) { .product-d { display: grid; grid: 'images details' 'attributes attributes' 'tabs tabs' / minmax(0, 1fr) 1fr; -webkit-column-gap: 2.5rem; column-gap: 2.5rem; /* 30/12 */ align-items: start; } } @media (min-width: 922px) { .product-d { grid: 'images details attributes' 'tabs tabs tabs' / minmax(0, 370px) 1fr minmax(0, 170px); /* 370/12 170/12 */ } } @media (min-width: 480px) and (max-width: 576px), (min-width: 921px) and (max-width: 1200px) { .product-d .offer-d__button_tocart .button-d__icon { margin-right: 0; } .product-d .offer-d__button_tocart .button-d__name { display: none; } } .product-d__images { grid-area: images; position: relative; } .product-d__details { grid-area: details; position: relative; } .product-d__attributes { grid-area: attributes; } .product-d__tabs { grid-area: tabs } .product-d__tabs ._text { font-size: 1.16667rem;/* 14/12 */ } .product-d__present.swiper-container:not(.swiper-container-initialized) .swiper-slide:not(:first-child) { display: none; } .product-d__preview { margin-top: 0.83333rem; /* 10/12 */ } .product-d__preview.swiper-container:not(.swiper-container-initialized) { display: none; } .product-d__preview .slide-d { cursor: pointer; } .product-d__preview .slide-d._bordered:hover, .product-d__preview .swiper-slide-thumb-active._bordered { border-color: #000; } /* Купон */ .coupon-d { padding: 1.25rem; /* 15/12 */ background-color: #dfdfdf; border-radius: 0.25rem; /* 3/12 */ } .coupon-d form .error_message { max-width: 46.25rem; /* 555/12 */ margin-left: auto; margin-right: auto; color: #595959; } .coupon-d__inside { display: grid; grid: 'title' 'field' 'button'; gap: 1.25rem; justify-content: start; justify-items: start; align-items: center; } .coupon-d__title { grid-area: title; font-size: 1.33333rem; /* 16/12 */ } .coupon-d__field { grid-area: field; width: 19.16667rem; /* 230/12 */ margin-bottom: 0 !important; } .coupon-d__button { grid-area: button; margin-top: 0 !important; } @media (min-width: 576px) { .coupon-d { text-align: center; } .coupon-d__inside { grid: 'title title' 'field button'; justify-content: center; justify-items: center; } } @media (min-width: 768px) { .coupon-d__inside { grid: 'title field button'; } } /* Корзина — Варианты оплаты */ .paymethod-d { display: flex; max-width: 100%; } .paymethod-d__details .detail-d_desc, .paymethod-d__details .detail-d_discount { font-size: 0.83333rem; /* 10/12 */ color: #595959; } .paymethod-d__name { font-size: 1.16667rem; /* 14/12 */ } form .paymethod-d__select { margin-bottom: 0; } /* Подписаться */ .page-d__subscript_main { padding: 1.25rem 0; /* 15/12 */ background-color: #dfdfdf } .page-d__subscript_main .error_message { max-width: 51.66667rem; /* 620/12 */ margin-left: auto; margin-right: auto; color: #595959; } .subscript-d_main { position: relative; text-align: center } .subscript-d_main .subscript-d__inside { display: grid; grid: 'title' 'field' 'button'; gap: 1.25rem; /* 15/12 */ justify-content: center; justify-items: center; align-items: center; } @media (min-width: 576px) { .subscript-d_main .subscript-d__inside { grid: 'title title' 'field button'; } } @media (min-width: 768px) { .subscript-d_main .subscript-d__inside { grid: 'title field button'; } } .subscript-d_main .subscript-d__title { grid-area: title; font-size: 1.33333rem; /* 16/12 */ } .subscript-d_main .subscript-d__field { grid-area: field; width: 19.16667rem; /* 230/12 */ margin: 0; } .subscript-d_main .subscript-d__button { grid-area: button; margin: 0; margin-top: 0 !important; } .subscript-d_main .subscript-d__robot { margin: 0; position: absolute; right: 0.41667rem; /* 5/12 */ bottom: 0; z-index: 1; } .subscript-d_main .captcha { max-width: 300px; margin: 0; margin-top: 0.41667rem; /* 5/12 */ padding: 1.66667rem; /* 20/12 */ position: absolute; top: 100%; right: 0.41667rem; /* 5/12 */ text-align: left; text-align: initial; background-color: #fff; border-radius: 0.25rem; /* 3/12 */ visibility: hidden; clip: rect(0,0,0,0); opacity: 0; filter: alpha(opacity=0); border: 1px solid #c8c7c7; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2); z-index: -1; } .subscript-d_main .captcha:after { display: block; width: 0.83333rem; /* 10/12 */ height: 0.83333rem; /* 10/12 */ position: absolute; top: -0.5rem; /* -6/12 */ right: 0.91667rem; /* 11/12 */ content: ''; background-color: inherit; border-top: 1px solid #c8c7c7; border-right: 1px solid #c8c7c7; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 2; } ._subscript_captcha-show .captcha { visibility: visible; clip: auto; opacity: 0.95; filter: alpha(opacity=100); z-index: 2; } /* Подвал */ .page-d__foot { margin-top: auto; padding-top: 4.16667rem; /* 50/12 */ padding-bottom: 4.16667rem; /* 50/12 */ background-color: #595959; color: #dfdfdf } .page-d__foot a:hover { color: #bdbdbd; } .page-d__foot a:focus, .page-d__foot a:active { color: #999; } .foot-d > * { margin-bottom: 2.5rem; /* 30/12 */ } .foot-d > *:last-child { margin-bottom: 0; } @media (min-width: 576px) { .foot-d { display: grid; grid: 'contacts nav' 'icons icons' 'website website' / 1fr 1fr; gap: 2.5rem;/* 30/12 */ } .foot-d > * { margin-bottom: 0; } } @media (min-width: 922px) { .foot-d { grid: 'contacts nav icons website' / 1fr 1fr 1fr 1fr; } } .foot-d__contacts a, .foot-d__website a { text-decoration: underline; } .foot-d__contacts a:hover, .foot-d__contacts a:focus, .foot-d__contacts a:active, .foot-d__website a:hover, .foot-d__website a:focus, .foot-d__website a:active { text-decoration: none; } .foot-d__title { margin-bottom: 1rem; /* 12/12 */ font-size: 1.33333rem; /* 16/12 */ } .foot-d__contacts { grid-area: contacts; } .foot-d__nav { grid-area: nav } .foot-d__nav .item-d:not(:last-child) { margin-bottom: 0.41667rem; /* 5/12 */ } .foot-d__icons { grid-area: icons; } .foot-d__icons > *:not(:last-child) { margin-bottom: 2.5rem; /* 30/12 */ } @media (min-width: 576px) and (max-width: 921px) { .foot-d__icons { display: flex; max-width: 100%; } .foot-d__icons > * { flex: 1 1 50%; max-width: 50%; margin-bottom: 0; } } .foot-d__icons a { display: inline-block; margin-right: 0.55556em; /* 10/18 */ margin-bottom: 0.55556em; /* 10/12 */ vertical-align: middle; font-size: 1.5rem; /* 18/12 */ } .foot-d__icons a, .foot-d__icons a:hover, .foot-d__icons a:focus, .foot-d__icons a:active { text-decoration: none; } .foot-d__socnets a { width: 2.22222em; /* 40/18 */ height: 2.22222em; /* 40/18 */ line-height: 2.22222em; /* 40/18 */ vertical-align: middle; text-align: center; border: 1px solid; border-radius: 50% } .foot-d__socnets a > * { line-height: inherit; vertical-align: inherit; } .foot-d__payments a { margin-right: 0.3125em; /* 10/32 */ margin-bottom: 0.3125em; /* 10/32 */ font-size: 2.66667rem; /* 32/12 */ } .foot-d__website { grid-area: website; } .website-d .icon-d { margin-right: 0.5em; /* 5/10 */ } .website-d__item { font-size: 0.83333rem; /* 5/12 */ } .website-d__item:not(:last-child) { margin-bottom: 1em; /* 10/10 */ } .section-d_messages_id { margin-top: 5rem; /* 60/12 */ } .element-d_shop_cat .element-d__list_children { margin-left: 1.25rem; /* 15/12 */ } .show_all { margin-top: 1.25rem; /* 15/12 */ } .show_all a { display: inline-block; padding: 0.41667rem 0.83333rem; /* 5/12 10/12 */ vertical-align: middle; background-color: #dfdfdf; border-radius: 0.25rem; /* 3/12 */ transition: all .2s; } .show_all a:hover, .show_all a:focus, .show_all a:active { color: #fff; background-color: #d1db6c; } .show_all a:active { background-color: #C5D33D; } form[loading='true'] { display: block; min-width: 50px; min-height: 50px; background: url(../img/loader.gif) no-repeat center center; cursor: progress } form[loading='true'].showmore-d > * { visibility: hidden; opacity: 0; } .benefit_enum { text-align: center } .benefit_enum > * { display: inline-block; width: 14.16667rem; /* 170/12 */ margin: 10px; vertical-align: top; } .benefit_enum a { color: inherit; } .benefit_enum a:hover, .benefit_enum a:focus, .benefit_enum a:active { text-decoration: none; } .benefit_enum a:hover span, .benefit_enum a:focus span, .benefit_enum a:active span { text-decoration: underline; } .benefit_enum i { display: flex; justify-content: center; align-items: center; width: 6.25rem; /* 75/12 */ height: 6.25rem; /* 75/12 */ margin: 0 auto; font-size: 3rem; /* 36/12 */ line-height: 1; color: #595959; background-color: #ebebeb; border-radius: 50%; overflow: hidden; } ._text .benefit_enum { margin: 0; padding: 0; list-style: none; } .attribute_enum { margin: 0; padding: 2.5rem 1.25rem; /* 30/12 15/12 */ padding-bottom: 0; list-style: none; text-align: center } .attribute_enum > * { display: inline-block; width: 14.16667rem; /* 170/12 */ margin: 2.5rem 1.25rem; /* 30/12 15/12 */ margin-top: 0; vertical-align: top; } @media (min-width: 922px) { .attribute_enum > * { width: auto; } } .attribute_enum a:hover, .attribute_enum a:focus, .attribute_enum a:active { text-decoration: none; } .attribute_enum a:hover span, .attribute_enum a:focus span, .attribute_enum a:active span { text-decoration: underline; } .attribute_enum i { display: flex; justify-content: center; align-items: center; width: 6.25rem; /* 75/12 */ height: 6.25rem; /* 75/12 */ margin: 0 auto; font-size: 3rem; /* 36/12 */ line-height: 1; color: #595959; background-color: #ebebeb; border-radius: 50%; overflow: hidden; } .yashare-auto-init .b-share__handle { height: auto; } .devoloper_tech{ position: fixed; z-index: 999; bottom: 0px; width: 100%; min-width: 320px; max-height: 16px; padding: 0px 5px 2px 0px; font-size: 100%; letter-spacing: 1px; font: 12px/15px clear; color: #fff; background-color: #ff4a0b; text-align: center; } .devoloper_tech > a{ color: #fff; } .devoloper_tech > a > span{ white-space: nowrap; } .devoloper_tech ~ .devoloper_profiler { padding-bottom: 34px; } .privacy_policy ~ .devoloper_profiler { padding-bottom: 84px; } .devoloper_profiler, .devoloper_profiling { font: 14px/20px ptsans, sans-serif; color: #2e2e2e; } .devoloper_profiler table, .devoloper_profiling table { border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .devoloper_profiler table caption, .devoloper_profiling table caption, .devoloper_profiler table tr th, .devoloper_profiling table tr th, .devoloper_profiler table tr td, .devoloper_profiling table tr td { text-align: left; vertical-align: top; padding: 0 10px; } .devoloper_profiler table tr, .devoloper_profiling table tr { border-color: transparent; } .devoloper_profiler table.devoloper_post pre { margin: 0px; } .devoloper_profiler .totalmemory, .devoloper_profiler .totaltime { padding: 0 10px; } .privacy_policy { position: fixed; z-index: 998; bottom: 0px; width: 100%; min-width: 320px; /*max-height: 72px;*/ padding: 10px 5px 12px 0px; font-size: 100%; letter-spacing: 1px; font: 12px/15px clear; color: #fff; background-color: #222; text-align: center; } .devoloper_tech ~ .privacy_policy { padding-bottom: 24px; } .privacy_policy .button { color: #FFF; border: 2px solid #FFF; font-size: 12px; padding: 3px 10px; font-weight: normal; margin: 0 0 0 10px; cursor: pointer; }