.header-three__btn-menu { padding: 18px; margin: 0; background: none; border: none; border-right: 1px solid #4D4D4D; } .menu { position: fixed; top: 0; left: 0; width: 0; height: 100%; z-index: 2499; } .menu.show { width: 100%; } .menu.show .menu__wrapper { -webkit-transform: translateX(0); transform: translateX(0); } .menu__overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); } .menu__wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; top: 0; left: 0; width: 300px; height: 100%; min-height: 100vh; min-height: -webkit-fill-available; background-color: #F7F7F7; z-index: 5000000; overflow: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .header-three .menu__wrapper { -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .menu__header { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; height: 60px; } .menu__header-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; border: none; background-color: var(--main-color); -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; cursor: pointer; } .menu__header-btn:hover { background-color: var(--main-color-hover); } .menu__header-btn-icon { stroke: #fff; } .menu__header-logo-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; border-bottom: 1px solid #E6E6E6; } .menu__header-logo { width: 100%; margin-left: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .menu__contact { padding-top: 20px; padding-bottom: 50px; border-top: 1px solid #E6E6E6; } .menu-contact__call-back { position: fixed; bottom: 0; width: 100%; z-index: 100; } .section__item, .menu-nav__item { padding: 0; margin-bottom: 0; } .section__item-main { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; min-height: 44px; padding: 10px 40px 10px 20px; } .section__item-main:hover { background-color: var(--main-color); } .section__item-main:hover .section__item-title { color: #fff; } .section__item-main:hover .section__item-logo-icon { stroke: #fff; } .section__item-main:hover .section__item-arow-icon { stroke: #fff; } .section__item-main.current .section__item-logo-icon { stroke: none; fill: var(--main-color); } .section__item-main.current .section__item-title { color: var(--main-color); } .section__item-main.current .section__item-arow-icon { stroke: var(--main-color); } .section__item-main.current:hover { background-color: var(--main-color); } .section__item-main.current:hover .section__item-title { color: #fff; } .section__item-main.current:hover .section__item-logo-icon { stroke: #fff; } .section__item-main.current:hover .section__item-arow-icon { stroke: #fff; } .section__item-main.open { background-color: #EDEDED; } .section__item-main.open .section__item-arow-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .section__item-main.open:hover { background-color: var(--main-color); } .menu-nav__item-link { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; min-height: 44px; padding: 10px 40px 10px 20px; } .menu-nav__item-link:hover { background-color: var(--main-color); } .menu-nav__item-link:hover .menu-nav__item-title { color: #fff; } .menu-nav__item-link:hover .section__item-logo-icon { stroke: #fff; } .menu-nav__item-link.current .section__item-logo-icon { stroke: none; fill: var(--main-color); } .menu-nav__item-link.current .menu-nav__item-title { color: var(--main-color); } .menu-nav__item-link.current:hover { background-color: var(--main-color); } .menu-nav__item-link.current:hover .menu-nav__item-title { color: #fff; } .menu-nav__item-link.current:hover .section__item-logo-icon { stroke: #fff; } .section__item-arow-icon { position: absolute; right: 18px; top: calc(50% - 2px); fill: none; stroke: #BDBDBD; } .section__item-title, .menu-nav__item-title { padding: 0; font-size: 14px; line-height: 21px; color: #4D4D4D; } .section__item-submenu-item { padding: 0; margin-bottom: 0; } .section__item-submenu-item-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 44px; padding: 10px 40px 10px 20px; margin: 0; } .section__item-submenu-item-link.current { color: var(--main-color); } .section__item-submenu-item-link:hover { color: var(--main-color); } .section__item-logo-icon { display: block; margin-right: 20px; fill: none; stroke: #BDBDBD; } .menu-nav__item-logo-icon { display: block; margin-right: 20px; fill: #BDBDBD; } .menu-nav__item-logo-icon--scale { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .menu-nav__item-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .section__item-submenu { padding-left: 44px; background-color: #F2F2F2; overflow: hidden; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out; } .menu__sectionts { -ms-flex-negative: 0; flex-shrink: 0; border-bottom: 1px solid #E6E6E6; } .menu__nav { -ms-flex-negative: 0; flex-shrink: 0; } .menu__contact { -ms-flex-negative: 0; flex-shrink: 0; margin-top: auto; } .menu-nav__item-count { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 20px; min-width: 20px; margin-left: 10px; padding: 5px; font-size: 12px; line-height: 12px; color: #fff; border-radius: 10px; background-color: #BDBDBD; } .menu-nav__item-count.active { background-color: var(--main-color); } .header-three ~ .footer-block .row { margin: 0; } @media (max-width: 1023px) { .header-three ~ .footer-block, .header-three ~ .site-builder__hide, .header-three ~ .blocks-wrapper { padding-left: 0; } .feedback_block { padding-left: 15px; } } .header-two__nav { display: none; background-color: var(--main-color); } .header-three--not-full-width .header-two__nav { background-color: transparent; } .header-three--not-full-width .header-two__main-nav .header-two__main-nav-catalog.hover > a { border-radius: 4px 0 0 0; } .header-two__main-nav { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: var(--main-width); min-height: 60px; margin-left: auto; margin-right: auto; } .header-two__main-nav.load { overflow: hidden; } .header-two__main-nav > li:first-child { position: static; min-width: 250px; } .header-two__main-nav > li:first-child .site-navigation__item-icon { display: block; } .header-two__main-nav > div { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header-two__main-nav .header-two__main-nav-catalog { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 220px; max-width: 220px; -ms-touch-action: none; touch-action: none; } .header-two__main-nav .header-two__main-nav-catalog.active > a, .header-two__main-nav .header-two__main-nav-catalog.current > a { background-color: var(--main-color-hover); } .header-two__main-nav .header-two__main-nav-catalog > a { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 60px; width: 100%; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 38px; font-size: 1.14rem; font-weight: 700; background-color: var(--main-color); color: #fff; border-radius: 4px 0 0 4px; -ms-touch-action: none; touch-action: none; -webkit-transition: none; transition: none; } .header-two__main-nav .header-two__main-nav-catalog.hover > a { background-color: var(--main-color-hover); color: #fff; border-radius: 0; } .header-two__main-nav .header-two__main-nav-catalog.hover > .header-two__menu-catalog { width: auto; top: 60px; padding: 0; left: 0px; z-index: 100; opacity: 1; height: 500px; } .header-two__main-nav .header-two__main-nav-catalog .site-navigation__item-icon { display: block; } .header-two__main-nav .header-two__main-navigation { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: var(--main-color); } .header-two__main-nav .header-two__main-navigation > div { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header-two__main-nav .header-two__main-navigation:last-child { border-radius: 0 4px 4px 0; } .header-two__main-nav .header-two__main-nav-item { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 0; padding: 0; } .header-two__main-nav .header-two__main-nav-item.current > a { background-color: var(--main-color-hover); } .header-two__main-nav .header-two__main-nav-item > a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%; height: 60px; width: 100%; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 38px; font-size: 1.14rem; font-weight: 700; color: #fff; -webkit-transition: none; transition: none; } .header-two__main-nav .header-two__main-nav-item > span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 60px; width: 100%; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 38px; font-size: 1.14rem; font-weight: 700; color: #fff; background-color: var(--main-color-hover); } .header-two__main-nav .header-two__main-nav-item:hover > a { background-color: var(--main-color-hover); color: #fff; } .header-two__main-nav svg { fill: #fff; } .header-two__main-nav .site-navigation__item-icon { position: absolute; display: none; right: 40px; top: calc(50% - 4px); } .header-two__main-nav .header-two__nav-submenu--other { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .header-three .header-two__main-nav-item-more { -webkit-transition: none; transition: none; } .header-two__main-nav-item-more { width: 60px; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .header-two__main-nav-item-more .header-two__nav-submenu { right: 0; } .header-two__main-nav-item-more .header-two__main-nav-item { width: 100%; border-left: none; border-bottom: 1px solid #EDEDED; } .header-two__main-nav-item-more .header-two__main-nav-item .header-two__nav-submenu { top: 0 !important; right: 100%; left: auto; } .header-two__main-nav-item-more .header-two__main-nav-item a { display: block; width: 100%; padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 14px; font-size: 1.07rem; line-height: 30px; font-weight: 500; color: #fff; background-color: var(--main-color-hover); } .header-two__main-nav-item-more .header-two__main-nav-item.current > span { display: block; width: 100%; height: 60px; padding: 15px 45px 14px; color: var(--main-color); font-size: 1.07rem; line-height: 30px; font-weight: 500; background-color: #F7F7F7; } .header-two__main-nav-item-more .header-two__main-nav-item:hover > a { color: var(--main-color); background-color: #F7F7F7; border-right: 1px solid #F7F7F7; } .header-two__main-nav-item-more .header-two__main-nav-item:hover > svg { fill: var(--main-color); } .header-two__main-nav-item-more .header-two__main-nav-item:hover .header-two__nav-submenu { top: 0 !important; right: 100%; } .header-two__main-nav-item-more:hover { background-color: var(--main-color-hover); } .header-two__main-nav-item-more:hover > .header-two__nav-submenu { display: block; height: auto; opacity: 1; top: 60px; right: 0; z-index: 10; overflow: initial; } .header-two__main-nav-item-more .header-two__nav-submenu-true svg { fill: #000; -webkit-transform: rotate(90deg); transform: rotate(90deg); left: 15px; } .header-two__menu-icon { position: absolute; left: 26px; top: calc(50% - 10px); width: 26px; height: 20px; } .header-two__menu-catalog { height: 0; display: block; position: absolute; top: 70px; left: 0; background-color: #fff; -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); z-index: -1; opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, height 0s, padding 0s; transition: top 0.3s, opacity 0.3s, height 0s, padding 0s; } .header-three .menu-catalog a { -webkit-transition: none; transition: none; } .menu-catalog a { color: #000; background-color: transparent; } .menu-catalog a:hover { background-color: transparent; } .menu-catalog__section-list { margin-bottom: 0; } .header-two__nav-submenu { display: block; width: 300px; height: 0; position: absolute; top: 70px; background-color: #fff; overflow: hidden; -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); opacity: 0; z-index: -1; -webkit-transition: opacity 0.3s, z-index 0.1s ease-in-out 0.1s, height 0s; transition: opacity 0.3s, z-index 0.1s ease-in-out 0.1s, height 0s; } .header-two__nav-submenu.header-two__nav-submenu--right { right: 0; } .header-two__nav-submenu.header-two__nav-submenu--right .header-two__nav-submenu-sublevel { left: -100%; } .header-two__nav-submenu.header-two__nav-submenu--right .site-navigation__item-icon-arrow { left: 20px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .header-two__nav-submenu.header-two__nav-submenu--right .header-two__nav-submenu-item:hover::after { right: 0; } .header-two__nav-submenu.header-two__nav-submenu--left { left: 0; } .header-two__nav-submenu.header-two__nav-submenu--left .header-two__nav-submenu-sublevel { left: 100%; } .header-two__nav-submenu.header-two__nav-submenu--left .header-two__nav-submenu-item:hover::after { left: 0; } .header-two__nav-submenu .header-two__nav-submenu-item:hover > .header-two__nav-submenu-sublevel { width: 300px; opacity: 1; } .header-two__main-nav-item.header-two__nav-submenu-true:hover .header-two__nav-submenu { top: 60px; z-index: 60; opacity: 1; height: auto; max-height: 500px; overflow: initial; -webkit-transition: top 0.3s; transition: top 0.3s; } .header-two__main-nav-item.header-two__nav-submenu-true > a { padding-right: 70px; } .header-two__main-nav-item.header-two__nav-submenu-true > span { padding-right: 70px; } .header-two__main-nav-item.header-two__nav-submenu-true .site-navigation__item-icon { display: block; } .header-two__nav-submenu-item { position: relative; margin-bottom: 0; padding-left: 0; border-bottom: 1px solid #EDEDED; } .header-two__nav-submenu-item:hover > a { color: var(--main-color); } .header-two__nav-submenu-item:hover::after { content: ""; position: absolute; height: 100%; width: 1px; top: 0; background-color: var(--main-color); } .header-two__nav-submenu-item a { display: block; width: 100%; padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 14px; font-size: 1.07rem; line-height: 21px; font-weight: 500; } .header-two__nav-submenu-item span { display: block; width: 100%; padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 14px; font-size: 1.07rem; line-height: 21px; font-weight: 500; color: var(--main-color); } .header-two__nav-submenu-item .site-navigation__item-icon-arrow { position: absolute; display: none; top: calc(50% - 6px); right: 15px; fill: #000; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .header-two__nav-submenu-item:hover .site-navigation__item-icon-arrow { fill: var(--main-color); } .header-two__nav-submenu-item.header-two__nav-submenu-item--sublevel .site-navigation__item-icon-arrow { display: block; } .header-two__nav-submenu-item.header-two__nav-submenu-true svg { display: block; } .header-two__nav-submenu-sublevel { position: absolute; top: 0; width: 0; position: absolute; background-color: #fff; z-index: 10; -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); opacity: 0; -webkit-transition: opacity 0.3s, left 0.3s; transition: opacity 0.3s, left 0.3s; } .header-two__nav-submenu-sublevel .header-two__nav-submenu-item { position: relative; margin-bottom: 0; padding-left: 0; border-bottom: 1px solid #EDEDED; } .header-two__nav-submenu-sublevel a { padding-left: 30px; } .menu-catalog { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow-y: auto; } .menu-catalog__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 25%; flex-basis: 25%; margin-bottom: 21px; padding: 0 15px; } .menu-catalog__image { width: 80px; margin-right: 5px; margin-top: 8px; } .menu-catalog__image img { max-width: 100%; max-height: 100%; } .menu-catalog__description.current > a, .menu-catalog__description.current > span { color: var(--main-color); } .menu-catalog__section { max-width: 210px; margin-bottom: 7px; } .menu-catalog__section.current > a, .menu-catalog__section.current > span { color: var(--main-color); } .menu-catalog__section.active > a, .menu-catalog__section.active > span { color: var(--main-color); } .menu-catalog__title { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; } .menu-catalog__section-title { display: block; margin-bottom: 7px; font-size: 1.07rem; font-weight: 600; } .menu-catalog__section-item { position: relative; } .menu-catalog__section-item.active span { color: var(--main-color); cursor: initial; } .menu-catalog__section-item a { font-size: 1.07rem; line-height: 21px; opacity: 0.7; } .menu-catalog__section-item::after { position: absolute; content: ""; top: 10px; left: 9px; width: 3px; height: 3px; background-color: #000; border-radius: 50%; opacity: 0.7; -webkit-transition: 0.3s; transition: 0.3s; } .menu-catalog__section-item:hover a { opacity: 1; } .menu-catalog__section-item:hover::after { width: 7px; border-radius: 6px; background-color: var(--main-color); opacity: 1; } .header-two__nav-submenu--other { position: relative; } .header-two__nav-submenu--other:hover > a { color: var(--main-color); } .header-two__nav-submenu--other:hover::after { content: ""; position: absolute; height: 100%; width: 1px; top: 0; background-color: var(--main-color); } .header-two__nav-submenu--other a { display: block; width: 100%; padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 14px; font-size: 1.07rem; line-height: 21px; font-weight: 500; } .header-two__nav-submenu--other .header-two__nav-submenu-true { margin-bottom: 0; padding-left: 0; } .header-two__nav-submenu--other .header-two__nav-submenu-true > .site-navigation__item-icon { fill: #000; -webkit-transform: rotate(90deg); transform: rotate(90deg); left: 15px; width: 10px; height: 20px; top: calc(50% - 10px); } .header-two__nav-submenu--other .header-two__nav-submenu-true:hover .header-two__nav-submenu { z-index: 70; opacity: 1; top: 0; } .header-two__nav-submenu--other .header-two__nav-submenu-true .header-two__nav-submenu { top: 10px; left: -100%; } .header-two__nav-submenu--other .header-two__nav-submenu { top: 70px; } .header-two__nav-submenu--other .header-two__nav-submenu > .header-two__nav-submenu--other .header-two__nav-submenu .header-two__nav-submenu { top: 0; } .header-two__main-nav .header-two__main-nav-catalog:hover > .header-two__menu-catalog.menu-catalog-one { max-height: 350px; padding: 0; } .header-two__menu-catalog.menu-catalog-one { background-color: transparent; } .menu-catalog-one { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; background-color: #fff; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .menu-catalog-one__main-menu { min-width: 220px; } .menu-catalog-one__main-menu-item { position: relative; margin: 0; padding: 15px 30px; background-color: var(--main-color); } .menu-catalog-one__main-menu-item .menu-catalog-one__menu-item-icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .menu-catalog-one__main-menu-item:hover { background-color: #f7f7f7; } .menu-catalog-one__main-menu-item:hover > .menu-catalog-one__submenu { display: block; } .menu-catalog-one__submenu-item { margin: 0; padding: 15px 30px; } .menu-catalog-one__submenu-item:hover > .menu-catalog-one__submenu { display: block; } .menu-catalog-one__submenu { position: absolute; left: 100%; top: 0; width: 312px; display: none; background-color: #f7f7f7; } .menu-catalog-one__submenu:nth-of-type(2n) { background-color: red; } .menu-catalog-one__submenu .menu-catalog-one__submenu--white { background-color: #fff; } @media (min-width: 1024px) { .header-three--unfixed .header-two__nav { display: block; } } .slider-header-three { height: 100vh; width: 100%; } .slider-header-three__button-next.btn-slider-main.btn-slider-main--next { right: 80px; } .slider-header-three__button-prev.btn-slider-main.btn-slider-main--prev { left: 80px; } .slider-header-three__pagination .swiper-pagination-bullet { width: 14px; height: 14px; background: #CCCCCC; border: 3px solid #FFFFFF; opacity: 1; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); } .slider-header-three__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 42px; background: var(--main-color); border-radius: 7px; } .slider-header-three-item__background-wrap { position: absolute; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .slider-header-three-item__background { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .slider-header-three-item__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; cursor: default; z-index: 1; } .slider-header-three-item__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .slider-header-three-item__title { max-width: 886px; padding: 0 0 40px 0; font-weight: bold; font-size: 48px; line-height: 65px; text-align: center; } .slider-header-three-item__text { max-width: 886px; padding: 0; font-weight: 600; font-size: 24px; line-height: 33px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .slider-header-three-item__link { position: absolute; bottom: -90px; left: calc(50% - 120.5px); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 241px; height: 50px; border: 3px solid; border-radius: 38px; font-weight: bold; font-size: 17px; line-height: 25px; } .slider-header-three-item__link:hover { background-color: var(--main-color); border: none; } .slider-header-three-item .slider-header-three-item__link:hover { color: #FFF; } .slider-header-three-item--white .slider-header-three-item__title, .slider-header-three-item--white .slider-header-three-item__text, .slider-header-three-item--white .slider-header-three-item__link { color: #FFF; } .slider-header-three-item--white .slider-header-three-item__link { border-color: #FFF; } .slider-header-three-item--black .slider-header-three-item__title, .slider-header-three-item--black .slider-header-three-item__text, .slider-header-three-item--black .slider-header-three-item__link { color: #000; } .slider-header-three-item--black .slider-header-three-item__link { border-color: #000; } @media (max-width: 1344px) { .slider-header-three-item__title, .slider-header-three-item__text { max-width: 770px; } .slider-header-three-item__title { font-size: 48px; line-height: 48px; } .slider-header-three-item__text { font-size: 24px; line-height: 33px; } .slider-header-three__button-next.btn-slider-main.btn-slider-main--next { right: 40px; } .slider-header-three__button-prev.btn-slider-main.btn-slider-main--prev { left: 40px; } } @media (max-width: 1199px) { .slider-header-three-item__title, .slider-header-three-item__text { max-width: 620px; } .slider-header-three-item__text { font-size: 20px; line-height: 27px; } .slider-header-three-item__link { font-size: 17px; line-height: 25px; } } @media (min-width: 1024px) { .slider-header-three { margin-top: -120px; } } @media (max-width: 1023px) { .slider-header-three-item__title, .slider-header-three-item__text { max-width: 608px; } .slider-header-three-item__title { padding: 0 0 30px 0; font-size: 36px; line-height: 49px; } .slider-header-three-item__text { font-size: 17px; line-height: 25px; } } @media (max-width: 850px) { .slider-header-three__button-next.btn-slider-main.btn-slider-main--next { right: 20px; } .slider-header-three__button-prev.btn-slider-main.btn-slider-main--prev { left: 20px; } } @media (max-width: 767px) { .slider-header-three-item__title, .slider-header-three-item__text { max-width: 100%; } .slider-header-three-item__title { padding: 0 40px 20px 40px; font-size: 24px; line-height: 29px; } .slider-header-three-item__text { padding: 0 40px; font-size: 14px; line-height: 21px; } .slider-header-three-item__link { bottom: -70px; left: calc(50% - 96.5px); width: 193px; height: 40px; font-size: 14px; line-height: 21px; } } @media (max-width: 480px) { .slider-header-three-item__title { max-width: 100%; padding: 0 20px 20px 20px; } .slider-header-three-item__text { max-width: 100%; padding: 0 20px; } } .menu-contact__title { padding: 0 20px; font-size: 12px; line-height: 18px; color: #808080; } .menu-contact__item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 6px; padding: 0 20px; font-size: 14px; } .menu-contact__item:last-of-type { margin-bottom: 0; } .menu-contact__item.menu-contact__item--contact { margin-bottom: 20px; } .menu-contact__item-link-phone { color: #ffffff; } .menu-contact__item-link { font-size: 14px; line-height: 21px; color: var(--main-color); } .menu-contact__item-link:hover { color: var(--main-color-hover); } .menu-contact__item-link:not(:first-of-type) { margin-top: 6px; } .menu-contact__item-link.menu-contact__item-link--phone { font-weight: bold; } .menu-contact__item-text { padding: 0; font-size: 14px; line-height: 21px; } .menu-contact__item-text:not(:first-of-type) { margin-top: 6px; } .menu-contact__call-back { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 40px; margin-top: 20px; font-weight: bold; font-size: 14px; line-height: 21px; color: #fff; background-color: var(--main-color); } .contact-phone__drop-down { position: absolute !important; top: 0; right: 0; width: 280px; padding: 0; background-color: #fff; border-radius: 0px 0px 4px 4px; -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); } .contact-phone__drop-down-item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 20px 0 24px; } .contact-phone__drop-down-item:not(:first-of-type) { margin-top: 26px; } .contact-phone__drop-down-item:last-of-type { margin-bottom: 26px; } .contact-phone__drop-down-item > svg { position: absolute; top: 2px; left: 20px; fill: #BDBDBD; } .contact-phone__drop-down-item.contact-phone__drop-down-item--phone { margin-top: 20px; } .contact-phone__drop-down-item.contact-phone__drop-down-item--phone > svg { top: 6px; } .contact-phone__drop-down-item .contact-phone__link-phone { font-weight: 600; font-size: 17px; line-height: 25px; } .contact-phone__drop-down-item .contact-phone__link-phone:not(:first-of-type) { margin-top: 18px; } .contact-phone__drop-down-item a { padding-left: 27px; font-size: 14px; line-height: 21px; text-overflow: ellipsis; color: var(--main-color); white-space: nowrap; overflow: hidden; } .contact-phone__drop-down-item a:hover { color: var(--main-color-hover); } .contact-phone__drop-down-item p { padding-bottom: 0; padding-left: 27px; font-size: 14px; line-height: 21px; color: #000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .contact-phone__link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .contact-phone__link-icon { margin-right: 10px; } .contact-phone__arrow-icon { margin-left: 8px; } .contact-phone__drop-down-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 40px; margin-top: 34px; font-weight: bold; font-size: 14px; line-height: 21px; color: #fff; background-color: var(--main-color); border-radius: 0 4px 0 4px; } .contact-phone__drop-down-btn:hover { color: #fff; background-color: var(--main-color-hover); } .sidebar { position: fixed; display: none; height: 100%; width: 76px; background-color: #F7F7F7; overflow: hidden; z-index: 101; } .sidebar { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .sidebar__item { padding: 0; margin-bottom: 0; height: auto !important; } .sidebar__item-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 14px 0; -webkit-transition: color 0.1s ease-out; transition: color 0.1s ease-out; } .sidebar__item-link:hover { color: var(--main-color); } .sidebar__item-link:hover svg { fill: var(--main-color); stroke: var(--main-color); } .sidebar__item-link svg { fill: #BDBDBD; -webkit-transition: fill 0.1s ease-out; transition: fill 0.1s ease-out; } .sidebar__item-link.current { color: var(--main-color); } .sidebar__item-link.current svg { fill: var(--main-color); stroke: var(--main-color); } .sidebar__item-logo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 26px; margin-bottom: 6px; -o-object-fit: contain; object-fit: contain; overflow: hidden; } .sidebar__item-logo > svg { fill: none; stroke: #BDBDBD; } .sidebar__item-name { padding: 0; font-size: 12px; line-height: 18px; } .sidebar__slider-button { display: none; } @media (max-width: 1023px) { .sidebar { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; bottom: 0; left: 0; width: 100%; height: 62px; padding: 0 25px; -webkit-box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.1); } .sidebar__item { width: auto; } .sidebar__wrapper.swiper-wrapper { width: auto; } .sidebar__item-link { padding: 8px 10px 4px 10px; } .sidebar__slider-button { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; width: 25px; height: 100%; background-color: #F7F7F7; z-index: 1; } .sidebar__slider-button.sidebar__slider-button--next { right: 0; } .sidebar__slider-button.sidebar__slider-button--prev { left: 0; } .sidebar__slider-button.swiper-button-disabled { display: none; } .sidebar__slider-button-icon { width: 12px; height: 15px; fill: none; stroke: #808080; } } @media (max-width: 767px) { .sidebar { height: 52px; } .sidebar__item-link { padding-top: 0; } .sidebar__item-name { font-size: 11px; line-height: 17px; } .sidebar__item-logo { margin-bottom: 0; margin-top: 5px; } .sidebar__item-logo > svg { width: 16px; height: 16px; } } @-webkit-keyframes showHeader { from { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-animation-duration: 0s; animation-duration: 0s; } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-duration: 1s; animation-duration: 1s; } } @keyframes showHeader { from { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-animation-duration: 0s; animation-duration: 0s; } to { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-duration: 1s; animation-duration: 1s; } } .header-three a, .header-three div, .header-three { -webkit-transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s; } .header-three { position: fixed; left: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 60px; z-index: 1001; } .header-three.header-three--unfixed { position: relative; } .header-three.js-side-panel-show ~ .btn-round-menu-open { z-index: 0; } .header-three.js-side-panel-show ~ .btn_error-share__overlays-wrapper { position: relative; z-index: 0; } .header-three.header-three--black { background-color: #333333; } .header-three.header-three--black .header-three__btn-menu { border-color: #4D4D4D; } .header-three.header-three--black .header-three__btn-menu:hover { background-color: #4D4D4D; } .header-three.header-three--black .basket-item-count { color: #4D4D4D; background: #fff; border-color: #333333; } .header-three.header-three--black .header-three__personal-photo { border-color: #fff; } .header-three.header-three--black .contact-phone__link { color: #fff; } .header-three.header-three--white { background-color: #fff; -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); } .header-three.header-three--white .header-three__btn-menu { border-color: #EDEDED; } .header-three.header-three--white .header-three__btn-menu:hover { background-color: #E6E6E6; } .header-three.header-three--white .header-three__btn-menu:hover .header-three__btn-menu-icon { stroke: #fff; } .header-three.header-three--white .basket-item-count { color: #fff; background: #BDBDBD; border-color: #F7F7F7; } .header-three.header-three--white .header-three__personal-photo { border-color: #E6E6E6; } .header-three.header-three--white .contact-phone__link { color: #000; } .header-three .header-two__basket-favorites.active .basket-item-count, .header-three .header-two__basket-buy.active .basket-item-count, .header-three .header-two__basket-compare.active .basket-item-count { background: var(--main-color); color: #fff; } .header-three .header-three__city { position: relative; } .header-three .select-city__dropdown-wrap { top: 0; left: 0; } .header-three--black .header-three__city > a { color: #FFF; } .header-three--black .header-three__city > a:hover { color: var(--main-color); -webkit-transition: none; transition: none; } .header-three--black .header-three__personal-sign-in { color: #fff; } .header-three--black .header-three__personal-sign-in:hover { color: var(--main-color); } .header-three--white .header-three__city > a { color: var(--main-color); } .header-three--white .header-three__city > a:hover { color: var(--main-color-hover); -webkit-transition: none; transition: none; } .header-three--white .header-three__personal-sign-in { color: #333; } .header-three--white .header-three__personal-sign-in:hover { color: var(--main-color); } .header-three-link-cabinet-unfixed__icon { min-width: 20px; min-height: 20px; margin-right: 10px; fill: #fff; } .header-three-link-cabinet-unfixed__text { width: -webkit-max-content; width: -moz-max-content; width: max-content; font-weight: bold; font-size: 15px; line-height: 24px; } .header-three__search-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header-three__search-icon-open, .header-three__search-icon-close { display: none; } .header-three__btn-menu { padding: 18px 27px; margin: 0; background: none; border: none; } .header-three-shadow { height: 60px; } .header-three__wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; min-height: 60px; } .header-three__btn-menu-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .header-three__btn-menu { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .header-three__btn-menu-icon { stroke: #CBCBCB; } .header-three__logo-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 20px; margin-right: 15px; } .header-three__city { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 15px; margin-right: 50px; color: var(--main-color); } .header-three__city > svg { margin-right: 10px; fill: #BDBDBD; } .header-three__city > a { font-size: 15px; font-weight: bold; line-height: 24px; color: #CBCBCB; } .header-three__search { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-preferred-size: 886px; flex-basis: 886px; margin: 0 auto; } #search { width: 100%; } #search.state-input .header-search__btn-close { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; z-index: 101; } #search form { position: relative; overflow: hidden; } #search input { width: 100%; padding: 10px 28px 10px 12px; border: 1px solid #EDEDED; border-radius: 4px; } #search input::-webkit-input-placeholder { font-size: 14px; line-height: 21px; color: #808080; } #search input::-moz-placeholder { font-size: 14px; line-height: 21px; color: #808080; } #search input:-ms-input-placeholder { font-size: 14px; line-height: 21px; color: #808080; } #search input::-ms-input-placeholder { font-size: 14px; line-height: 21px; color: #808080; } #search input::placeholder { font-size: 14px; line-height: 21px; color: #808080; } #search button { position: absolute; top: 1px; right: 1px; width: 44px; height: calc(100% - 2px); padding: 0 12px; background-color: #fff; border: 1px solid transparent; border-radius: 0 4px 4px 0; cursor: pointer; } #search button svg { fill: #BDBDBD; -webkit-transition: 0.2s fill ease-out; transition: 0.2s fill ease-out; } #search button:hover svg { fill: #000; } .header-search__btn-close { display: none; } .header-search__btn-close-icon { stroke: #BDBDBD; } .header-three__contact { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 50px; margin-right: 30px; color: #fff; cursor: pointer; -webkit-transition: 0.2s color ease-out; transition: 0.2s color ease-out; } .header-three__contact .contact-phone__link { font-weight: bold; } .header-three__contact .contact-phone__link-icon, .header-three__contact .contact-phone__arrow-icon { -webkit-transition: 0.2s fill ease-out; transition: 0.2s fill ease-out; } .header-three__contact:hover { color: var(--main-color); } .header-three__contact:hover .contact-phone__link-icon, .header-three__contact:hover .contact-phone__arrow-icon { fill: var(--main-color); } .header-three__contact:hover .contact-phone__drop-down { height: auto; top: 0px; } .header-three__contact .contact-phone__link-icon { fill: #CBCBCB; } .header-three__contact .contact-phone__arrow-icon { fill: #CBCBCB; } .header-three__contact .contact-phone__drop-down { position: absolute; top: 10px; right: 0; height: 0; overflow: hidden; z-index: 100; -webkit-transition: top 0.2s ease-out; transition: top 0.2s ease-out; } .header-three__basket { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .header-three__basket.right-panel--show { display: none; } .header-three__basket .header-two__basket-compare, .header-three__basket .header-two__basket-favorites, .header-three__basket .header-two__basket-buy { height: 60px; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; z-index: 100; } .header-three__basket .header-two__basket-compare:hover, .header-three__basket .header-two__basket-favorites:hover, .header-three__basket .header-two__basket-buy:hover { color: #000; } .header-three__basket .basket-compare-icon { width: 24px; height: 20px; fill: #CBCBCB; } .header-three__basket .basket-compare-icon:hover { fill: var(--main-color); } .header-three__basket .basket-favorites-icon { width: 24px; height: 20px; fill: #CBCBCB; } .header-three__basket .basket-favorites-icon:hover { fill: var(--main-color); } .header-three__basket .basket-buy-icon { width: 24px; height: 20px; fill: #CBCBCB; } .header-three__basket .basket-buy-icon:hover { fill: var(--main-color); } .header-three__basket .basket-item-count { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 6px; right: -6px; height: 24px; min-width: 24px; font-weight: 600; font-size: 12px; line-height: 12px; background-color: #fff; border: 2px solid; border-radius: 12px; } .header-three__basket .header-two__basket-buy.active, .header-three__basket .header-two__basket-favorites.active, .header-three__basket .header-two__basket-compare.active { color: #fff; } .header-three__basket .window_basket { right: -14px; } .header-three__personal { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 22px; } .header-three__personal.right-panel--show { display: none; } .header-three__personal > a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; } .header-three__personal-photo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 36px; height: 36px; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid; background-color: gray; background-image: url("/local/templates/sotbit_origami/assets/img/logo_avatar.svg"); background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; overflow: hidden; } .header-three__personal-sign-in { margin-left: 10px; font-weight: bold; font-size: 15px; line-height: 24px; } .mobile_filter_icon_sorting_mobile, .mobile_filter_icon_list_mobile { display: none; } .header-five.puzzle_block:not(.catalog-wrapper):not(.catalog_section_block) { width: calc(100% - 111px); } .footer-block .puzzle_block { width: 100%; } .footer-block .row .col-xl-3:first-child { padding-left: 0; } .footer-block .row .col-xl-3:last-child { padding-right: 0; } @media (min-width: 1024px) { .header-three:not(.header-three--unfixed) { -webkit-animation: showHeader 1s; animation: showHeader 1s; } .header-three--unfixed { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } .header-three--unfixed .header-three__wrapper { max-width: var(--main-width); margin: 0 auto; } .header-three--unfixed.header-three--not-full-width { max-width: var(--main-width); margin: 0 auto; } .header-three--unfixed .header-two__basket-compare, .header-three--unfixed .header-two__basket-favorites, .header-three--unfixed .header-two__basket-buy { padding: 10px 10px 10px 27px; } .header-three--unfixed .bx-basket { margin-left: 13px; } .header-three--unfixed .header-three__contact.hidden { display: none; } .header-three--unfixed .header-three__personal { margin: 0 0 0 27px; } .header-three--unfixed .header-three__search-icon-open { cursor: pointer; z-index: 1; } .header-three--unfixed .header-three__search { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header-three--unfixed .header-three__btn-menu-wrapper { display: none; } .header-three--unfixed.header-three--black { background-color: transparent; } .header-three--unfixed.header-three--black .basket-compare-icon, .header-three--unfixed.header-three--black .basket-favorites-icon, .header-three--unfixed.header-three--black .basket-buy-icon { fill: #FFF; } .header-three--unfixed.header-three--black .basket-compare-icon:hover, .header-three--unfixed.header-three--black .basket-favorites-icon:hover, .header-three--unfixed.header-three--black .basket-buy-icon:hover { fill: var(--main-color); } .header-three--unfixed.header-three--black .basket-item-count { background: #E6E6E6; border-color: transparent; } .header-three--unfixed.header-three--black .contact-phone__link-icon { fill: #fff; } .header-three--unfixed.header-three--black .contact-phone__arrow-icon { fill: #fff; } .header-three--unfixed.header-three--black .header-three__city svg { fill: #fff; } .header-three--unfixed.header-three--white { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .header-three--unfixed.header-three--white .basket-compare-icon, .header-three--unfixed.header-three--white .basket-favorites-icon, .header-three--unfixed.header-three--white .basket-buy-icon { fill: #999; } .header-three--unfixed.header-three--white .basket-compare-icon:hover, .header-three--unfixed.header-three--white .basket-favorites-icon:hover, .header-three--unfixed.header-three--white .basket-buy-icon:hover { fill: var(--main-color); } .header-three--unfixed.header-three--white .basket-item-count { color: #4D4D4D; background: #FFF; border-color: #EDEDED; } .header-three--unfixed.header-three--white .contact-phone__link-icon { fill: #999; } .header-three--unfixed.header-three--white .contact-phone__arrow-icon { fill: #999; } .header-three--unfixed.header-three--white .header-three__city svg { fill: #999; } .header-three--unfixed.header-three--white .header-three__city > a { color: #333; } .header-three--unfixed.header-three--white .header-three__city > a:hover { color: var(--main-color); } .header-three--unfixed .header-three__logo-wrapper { margin-left: 0; margin-right: 80px; } .header-three--unfixed .header-three__city { margin-left: 0; margin-right: 50px; } .header-three--unfixed .header-three__contact { margin-left: 0; margin-right: 0; } .header-three--white .header-three-link-cabinet-unfixed__icon { fill: #333333; } .header-three--white .header-three-link-cabinet-unfixed__text { color: #333333; } .header-three--white .header-three__search-icon-open { fill: #999; } .header-three--white .header-three__search-icon-open:hover { fill: var(--main-color); } .header-three--black .header-three__search-icon-open { fill: #fff; } .header-three--black .header-three__search-icon-open:hover { fill: var(--main-color); } .search-wrap--unfixed { position: relative; } .search-wrap--unfixed #search { position: absolute; top: calc(50% - 21.5px); right: 0; width: 32px; z-index: 1; } .search-wrap--unfixed #search button { left: 1px; border-radius: 6px 0 0 6px; } .search-wrap--unfixed #search input { padding: 10px 38px 10px 45px; } .search-wrap--unfixed.search-wrap--close .header-search__btn-search.hidden { display: none; } .search-wrap--unfixed.search-wrap--open #search { width: 100%; } .search-wrap--unfixed.search-wrap--open .header-three__search-icon-open { display: none; } .search-wrap--unfixed.search-wrap--hide-input #title-search-input { border: 1px solid transparent; background: transparent; cursor: default; } .search-wrap--unfixed.search-wrap--hide-input .header-search__btn-search { display: none; } .search-wrap--unfixed.search-wrap--hide-input .header-three__search-icon-open { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .header-three__search-icon-close { position: absolute; right: 20px; z-index: 1; cursor: pointer; stroke: #BDBDBD; } .header-three__search-icon-close.show { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .header-three__search-icon-close:hover { stroke: var(--main-color); } #search.transitionOn { -webkit-transition: width 1s; transition: width 1s; } } @media (min-width: 1023px) and (max-width: 1343px) { .header-three--not-full-width.header-three--unfixed { padding: 0 42px; } .header-three--not-full-width .header-three__wrapper { padding: 0; } .header-three__wrapper { padding: 0 15px; } } @media (min-width: 1023px) and (max-width: 1200px) { .header-three.header-three--unfixed .header-three-link-cabinet-unfixed__text { display: none; } .header-three.header-three--unfixed .header-two__basket-compare, .header-three.header-three--unfixed .header-two__basket-favorites, .header-three.header-three--unfixed .header-two__basket-buy { margin-left: 7px; } } @media (max-width: 1023px) { .header-three__city { display: none; } .header-three__contact { display: none; } .header-five.puzzle_block:not(.catalog-wrapper):not(.catalog_section_block) { width: calc(100% - 20px); } .header-three__wrapper { margin: 0 20px; } .header-three__btn-menu-wrapper { position: absolute; top: calc(50% - 22px); left: 20px; height: 44px; z-index: 1; } .header-three__btn-menu { padding: 0 12px; border: none; } .header-three__btn-menu-icon { stroke: #BDBDBD; } .header-three__search { margin: 0 auto; } .header-three__logo-wrapper { display: none; } .header-three__search { -ms-flex-preferred-size: auto; flex-basis: auto; width: 100%; margin: 0; } #search input { padding-left: 50px; padding-right: 45px; background-repeat: no-repeat; background-position: center; } #search button { display: none; } .header-three__basket .header-two__basket-compare { display: none; } .header-three__basket .header-two__basket-favorites { display: none; } .header-three__basket .header-two__basket-buy { position: absolute; top: calc(50% - 22px); right: 0px; height: 44px; padding: 10px 12px; } .header-three__basket .basket-item-count { display: none; } .header-three__basket .basket-buy-icon { width: 20px; } .header-three__personal { display: none; } .contact-phone__drop-down { display: none; } } @media (max-width: 767px) { .header-three__wrapper { margin: 0 15px; } } @media (max-width: 575px) { .mobile_filter_icon_sorting_mobile, .mobile_filter_icon_list_mobile { display: block; } body .catalog_content__sort_horizon form .select_block { position: relative; height: 40px; padding-top: 0; } .mobile_filter_icon_sorting_mobile { position: absolute; top: calc(50% - 6px); left: calc(50% - 6px); } .mobile_filter_icon_list_mobile { position: absolute; top: calc(50% - 7px); left: calc(50% - 6px); } }