/* width */ ::-webkit-scrollbar { width: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #ccc; } /* Handle */ ::-webkit-scrollbar-thumb { background: #222; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #222; } .sreda__mobile-menu-trigger { position: relative; width: 104px; height: 32px; padding: 8px; } .sreda__mobile-menu-trigger-line { position: absolute; left: 8px; transition: all 0.2s ease-in-out; margin: 0; width: calc(100% - 16px); } .sreda__mobile-menu-trigger-line+.sreda__mobile-menu-trigger-line { margin-top: 0; } .sreda__mobile-menu-trigger-line:first-child { top: 8px; } .sreda__mobile-menu-trigger-line:last-child { top: calc(100% - 8px); transform: translateY(-100%); } .sreda__mobile-menu-trigger-line:nth-child(2) { top: 50%; transform: translateY(-50%); } .open-menu .sreda__mobile-menu-trigger-line:first-child { top: 50%; transform: translateY(-50%) rotate(15deg); } .open-menu .sreda__mobile-menu-trigger-line:last-child { top: 50%; transform: translateY(-50%) rotate(-15deg); } .open-menu .sreda__mobile-menu-trigger-line:nth-child(2) { display: none; } @media (min-width: 1025px) { .sreda__mobile-menu-trigger:hover>.sreda__mobile-menu-trigger-line { top: 50%; transform: translateY(-50%); } } @media (max-width: 1679px) { } @media (max-width: 1024px) { } @media (max-width: 767px) { .sreda__mobile-menu-trigger { width: 64px; height: 24px; -webkit-transform: translate(6px, 0); transform: translate(6px, 0); } } .main-menu__right-side { display: flex !important; width: 100%; max-width: 960px; margin: 40px auto; flex-direction: column; position: fixed; left: 50%; transform: translate(-50%, -50%); top: calc(50% - 50px); } .main-menu__left-side { height: 100%; background: black; opacity: 0.5; width: 50%; } .main-menu_right-sticky { position: fixed; right: -40px; top: 50%; transform: translateY(-50%) rotate(-90deg); } .main-menu_right-sticky > .just-grey { margin-right: 8px; } .main-menu { position: fixed; top: 100px; z-index: 3000; transition: all 0.2s ease-in-out; right: 0; height: calc(100% - 100px); display: flex; width: 100%; flex-direction: column; opacity: 0; transition: opacity 0.4s; pointer-events: none; } .main-menu--open { opacity: 1; background: rgba(0,0,0,0.9); pointer-events: unset; /*backdrop-filter: blur(5px);*/ /*-webkit-backdrop-filter: blur(5px);*/ } @media (max-width: 1200px) { .main-menu__right-side { max-width: unset; margin: unset; position: unset; left: unset; transform: unset; top: unset; } } header { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100px; position: sticky; position: -webkit-sticky; left: 0; top: 0; background-color: #0A0A0A; border-bottom: 1px solid #373737; padding: 24px; z-index: 299; } .main-menu__item_left { background-color: #060606; padding: 26px; border: 1px solid #373737; font-size: 28px !important; font-weight: 600; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s; } .main-menu__item_left:hover { background-color: #101010; } .main-menu_under-side { position: fixed; bottom: 60px; display: flex; width: 100%; max-width: 960px; justify-content: space-between; align-items: center; left: 50%; transform: translateX(-50%); } .main-menu_under-side_right > a { margin-left: 6px; } .main-menu_under-side_left { display: flex; } .main-menu_under-side_left > .menu__social-link { margin-right: 12px; } .main-menu__item_left > img { height: 19px; } .main-menu__item_left:last-child { margin-bottom: 0px; } .main-menu_right-sticky > br { display: none; } @media (max-width: 1200px) { .main-menu__left-side { display: none; } .main-menu__right-side { width: 100%; } .main-menu { background-color: #060606; } .main-menu__item_left { border-left: none; border-right: none; } .main-menu_under-side { max-width: unset; left: 26px; justify-content: unset; bottom: 26px; transform: unset; font-size: 14px !important; } .main-menu_under-side_left { order: 5; margin-left: 60px; } .main-menu_right-sticky { transform: unset; right: 26px; bottom: 26px; top: unset; } .main-menu_right-sticky > * { font-size: 14px !important; } } @media (max-width: 768px) { header { padding: 14px; height: 60px; } .main-menu__item_left { padding-left: 14px; padding-right: 14px; } .main-menu { top: 60px; } .main-menu_under-side { align-items: unset; flex-direction: column; left: 14px; } .main-menu_under-side_left { order: unset; margin-left: unset; margin-bottom: 20px; } .main-menu--open { height: calc(100% - 60px); } .main-menu_right-sticky > br { display: unset; } .main-menu_right-sticky { right: 14px; } } .menu__social-link { margin-top: 4px; } .main-menu p { font-size: 14px !important; }