/* МЕНЮ КАТАЛОГА */

#s-menu-wrapper                 { width: 200px; margin-left: 20px; padding: 0; background: #7030A0; transition: all 0.4s }
#s-menu-wrapper > div           { background: #7030A0; padding-bottom: 20px }
#s-menu-wrapper .hr             { background: #999; margin: 12px 30px }



/* ссылка "Каталог" вверху меню каталога */
.s-menu-link                    { position: relative; display: block; padding: 25px 10px 20px 65px; font-weight: bold; font-size: 28px; line-height: 30px; color: #FFF; transition: all 0.2s; cursor: pointer }
.s-menu-link img                { position: absolute; width: 30px; margin-left: -40px }
.s-menu-link:hover              { color: #FFF }



/* кнопка вызова меню каталога на мобильных экранах */ 
.s-menu-mobile                  { flex-shrink: 0; display: none; background: #7030A0; text-align: center; cursor: pointer; transition: all 0.2s }
.s-menu-mobile:hover            { background: #9241CE }
.s-menu-mobile:before           { display: inline-block; vertical-align: middle; height: 100%; content: "" }
.s-menu-mobile .s-menu-link     { display: inline-block; vertical-align: middle; font-size: 18px; padding: 0 20px 0 50px; margin: 0; text-transform: uppercase; font-weight: 900 }
.s-menu-mobile .s-menu-link img { width: 25px; margin-left: -35px; top: 50%; transform: translateY(-50%) }

@media screen and (max-width: 767px) {
    .s-menu-mobile .s-menu-link { font-size: 16px }
}
@media screen and (max-width: 359px) {
    .s-menu-mobile              { width: 65% }
}
/* /кнопка вызова меню каталога на мобильных экранах */ 



.s-menu-close                   { display: none; text-align: right; padding: 20px 10px 10px 0 }
#s-menu-close:before            { font-family: themify; content: "\e646"; font-size: 20px; line-height: 20px; padding: 10px; color: #222; cursor: pointer }
#s-menu-close:hover:before      { color: #666 }

.s-menu-new                     { margin-bottom: 3px }

.s-menu-name2                   { display: block; font-size: 12px; line-height: 16px; color: #AAA; font-weight: bold }



/* меню первого уровня ----------------------------------- */

/* базовый стиль для всех состояний */
.s-menu-item                    { font-family: Font, Verdana, sans-serif; font-size: 18px; line-height: 20px; font-weight: 900; padding: 10px 10px 10px 20px; display: block; color: #222; text-transform: uppercase; text-decoration: none; transition: all 0.1s }

/* особые пункты */
.s-menu-item.empth              {  }
.s-menu-item.empth:hover        {  }

/* hover */
.s-menu-item:hover,
.s-menu-item.hover              { color: #0041A5 }
.s-menu-item:hover .s-menu-name2,
.s-menu-item.hover .s-menu-name2 { color: #BBB }

/* homepage menu */
.store_first .s-menu-item:hover,
.store_first .s-menu-item.hover { color: #DDD; background: transparent }

/* active */
.s-menu-item.active             { background: #EEE }
.s-menu-item.active:hover,
.s-menu-item.hover.active       {  }
.s-menu-item.active .s-menu-name2 {  }

/* arrow */
.s-menu-item.arrow:before       { margin-top: 3px; margin-left: 10px; float: right; font-family: themify; content: "\e649"; font-size: 15px; line-height: 15px; color: #222 } 

/* arrow hover */
.s-menu-item.arrow.hover:before  {  }

/* arrow active */
.s-menu-item.arrow.active:before {  }

/* точка координат в пункте меню для подменю */
.s-menu-pointer                 { position: absolute; width: 0; height: 0; margin-top: -19px }

/* / меню первого уровня --------------------------------- */



/* меню второго и т.д. уровня ---------------------------- */

.s-submenu                      { padding: 20px 0; background: #FFF; text-align: left; white-space: nowrap }
.s-submenu td                   {  }

/* базовый стиль для всех состояний */
.s-submenu-item                 { font-family: Font, Verdana, sans-serif; font-size: 18px; line-height: 20px; font-weight: 900; padding: 10px 25px 10px; display: block; color: #222; text-transform: uppercase; text-decoration: none; transition: all 0.1s }

/* hover */
.s-submenu-item:hover,
.s-submenu-item.hover           { color: #0041A5 }
.s-submenu-item:hover .s-menu-name2,
.s-submenu-item.hover .s-menu-name2 { color: #BBB }

/* active */
.s-submenu-item.active          { background: #EEE }
.s-submenu-item.active:hover,
.s-submenu-item.hover.active    {  }
.s-submenu-item.active .s-menu-name2 {  }

/* arrow */
.s-submenu-item.arrow:before    { margin-top: 3px; margin-right: -10px; float: right; font-family: themify; content: "\e649"; font-size: 15px; line-height: 15px; color: #222 }

/* arrow hover */
.s-submenu-item.arrow.hover:before  {  }

/* arrow active */
.s-submenu-item.arrow.active:before {  }

/* другие элементы */
/* точка координат в пункте подменю для подменю следующего уровня */
.s-submenu-pointer	            { position: absolute; width: 0; height: 0; margin-top: -19px }
/* контейнер для подменю (не изменять) */
.s-submenu-wrapper              { position: absolute; visibility: hidden; top: 0; left: -1000px; overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.4) }
/* / меню второго и т.д. уровня ----------------------- */



@media screen and (max-width: 1023px) {
    #s-menu-wrapper                 { position: fixed; z-index: -1; left: 0; top: 0; overflow-x: hidden; overflow-y: auto; width: 0; height: 100%; margin: 0; box-shadow: 0 0 80px rgba(0,0,0,0.35); pointer-events: none }
    #s-menu-wrapper.active          { z-index: 999; width: 280px; pointer-events: auto }
    #s-menu-wrapper > div           { width: 280px }

    .s-menu-mobile                  { display: block }
    
    /* ссылка "Каталог" вверху меню каталога */
    .s-menu-link                    { padding-top: 5px }

    .s-menu-close                   { display: block }
    
    .s-menu-item                    { padding-right: 25px }
    .s-submenu-item                 { padding-right: 35px }
    
    .s-menu-item.arrow:before,
    .s-submenu-item.arrow:before    { content: "\e64b"; transition: all 0.8s; transform-origin: center center }
    .s-menu-item.hover.arrow:before,
    .s-submenu-item.hover.arrow:before { transform: rotate(-180deg) }
    
    .s-submenu                      { width: 260px; white-space: normal; padding: 10px 0 }
    .s-submenu-3                    { width: 230px }
    
    .s-menu-pointer                 { margin-left: -260px; margin-top: 36px }
    .s-submenu-pointer	            { margin-left: -230px; margin-top: 36px }
    
    .s-submenu-wrapper              { box-shadow: none }
}