/* Menu */ .ozmenu ul.ozmenu-nav { display: flex; align-items: flex-start; list-style: none; padding-left: 0px; } .ozmenu ul.ozmenu-nav > li { position: relative; float: left; width: auto; } .ozmenu ul li.dropdownitem > a:after { width: 15px; height: 15px; text-align: center; float: right; background-color: currentColor; content: ""; margin: 1px 0px 0px 3px; -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .ozmenu ul li .dropdown { display: none; position: absolute; min-width: 200px; } @media screen and (max-width: 993px) { .ozmenu ul.ozmenu-nav > li a { font-size: 14px; } } @media screen and (min-width: 993px) { .ozmenu ul.ozmenu-nav > li a { text-decoration: none; padding: 10px 10px; display: flex; align-items: center; height: 100%; position: relative; } .ozmenu ul li.dropdownitem:hover .dropdown { display: block; position: absolute; margin: 0; padding: 5px 0px; min-width: 220px; padding-top: 0px !important; } .ozmenu ul li.dropdownitem:hover .dropdown .dropdown { display: none; } .ozmenu ul li.dropdownitem .dropdown li.dropdownitem:hover .dropdown { padding-left: 16px; position: absolute; margin: 0; padding-top: 0px !important; min-width: 200px; display: inline-table; top: 0 !important; left: 100% !important; right: auto !important; } .ozmenu ul li.dropdownitem .dropdown .dropdown .dropdown { display: none !important; visibility: hidden; } .ozmenu ul li.dropdownitem .dropdown ul { list-style: none; float: left; padding: 5px 2px; border-radius: 0px 8px 8px 8px; } .ozmenu ul li.dropdownitem ul li a { text-decoration: none; padding: 5px 0px; float: left; width: 100%; border-radius: 0px; } .ozmenu ul.ozmenu-nav .dropdown ul li a:hover { padding-left: 7px; transition: all 0.15s ease-out; } /* Animations */ @keyframes translateDown { 0% { transform: scaleY(0); } 80% { transform: scaleY(1.1); } 100% { transform: scaleY(1); } } @keyframes translateX { 0% { opacity: 0; transform: translateX(-60px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0px); } } /* Dropdown + Dropdown */ .ozmenu ul li.dropdownitem ul li .nav-dropdown:after { width: 15px; height: 15px; text-align: center; float: right; background-color: currentColor; content: ""; margin: 1px 0px 0px 3px; -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } } .ozmenu ul.ozmenu-nav .dropdown ul li { float: left; width: 100%; } .ozmenu ul.ozmenu-nav .dropdown ul li a { padding: 8px; cursor: pointer; } .ozmenu ul li.dropdownitem ul li a, .ozmenu ul li.dropdownitem ul li:last-child a, .ozmenu ul li.dropdownitem ul li .dropdown ul li:last-child a { border-bottom: 0px !important; } @media screen and (max-width: 993px) { .ozmenu ul li.dropdownitem ul li a, .ozmenu ul li.dropdownitem ul li:last-child a, .ozmenu ul li.dropdownitem ul li .dropdown ul li:last-child a { padding-right: 0px }} /* Dropdown + Dropdown */ .ozmenu ul li.dropdownitem ul li a:before, .ozmenu ul li.dropdownitem ul li .nav-dropdown ul li a:after { display: none !important; } .ozmenu ul li.dropdownitem ul li .nav-dropdown ul li:last-child a { border-bottom: 0px !important; } .ozmenu ul li.dropdownitem .dropdown ul li.dropdownitem { display: inline-block; height: 100%; position: relative; width: 100%; } /* Responsive Menu */ .menu-close, .menu-open { display: none; } @media screen and (max-width: 993px) { .menu-open, .menu-close { cursor: pointer; /*color:#333;*/ text-decoration: none; font-size: 26px; } .menu-open { display: block; } .menu-close { display: none; } .ozmenu { position: relative; display: none; } .ozmenu.active { display: block; } .menu-open { display: block !important; float: right; } .mobile-menu-active .menu-close { display: block !important; z-index: 15; position: absolute; right: 13px; left: unset !important; top: 0px; float: left; } .ozmenu-nav { display: none !important; } .ozmenu.active .ozmenu-nav { display: block !important; } .ozmenu.active { position: fixed; left: 0px; top: 0px; margin-top: 0px !important; width: 40%; height: 100vh; display: flex; z-index: 14; flex-direction: column; background-color: #fff; justify-content: space-between; padding-bottom: 20px; } .ozmenu.active .ozmenu-nav { background-color: #fff; float: left; margin-top: 0px; padding: 40px 20px; width: 100%; overflow: scroll; transform-origin: top center !important; } @keyframes translateX { 0% { opacity: 0; transform: translateX(-160px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0px); } } .ozmenu ul.ozmenu-nav > li { float: left; width: 100%; } .ozmenu ul.ozmenu-nav > li a { float: left; width: 100%; text-decoration: none; padding: 10px 0px; border-bottom: 1px solid #ddd; } .ozmenu ul.ozmenu-nav > li a:hover { float: left; width: 100%; transition: all 0.25s ease-out; text-decoration: none; padding: 10px 0px; } .ozmenu ul li.dropdownitem > a:hover:after { background-color: currentColor; } .nav-dropdown.opened { color: rgb(103, 130, 252) !important; border-bottom: 1px solid rgba(103, 130, 252, 0.5) !important; } .ozmenu ul.ozmenu-nav > li:last-child a { border-bottom: 0px solid #ddd; } .ozmenu.active ul li .nav-dropdown.opened + .dropdown ul { list-style: none; float: left; margin-left: 0px; padding-left: 7px; } .ozmenu.active ul li .nav-dropdown.opened + .dropdown ul .dropdown ul { padding-left: 15px; } .ozmenu.active ul li .nav-dropdown.opened + .dropdown { display: block; position: relative; margin: 0; padding: 5px 0px; min-width: unset; padding-top: 0px !important; float: left; } .ozmenu.active ul li.dropdownitem:hover + .dropdown + .dropdown { display: none; } #menu-overlay { background-color: rgba(0, 0, 0, 0.3); float: left; display: none; width: 100%; height: 100vh; z-index: 13; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } #menu-overlay.show { display: block !important; } .menu-open .open { width: 40px; height: 40px; float: right; background-color: #000; -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all 0.2s ease-out; } .mobile-menu-active .menu-open .open, .menu-open .open:hover { -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); } .menu-close .close { width: 38px; height: 38px; float: right; background-color: #000; -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all 0.2s ease-out; } .menu-close .close:hover { background-color: #000; -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); } .ozmenu.active ul li.dropdownitem > a.opened:after { -webkit-mask-image: url('data:image/svg+xml;charset=utf-8, ') !important; mask-image: url('data:image/svg+xml;charset=utf-8, ') !important; } } @media screen and (max-width: 500px) { .ozmenu.active { width: 70%; } } @media screen and (max-width: 400px) { .ozmenu.active { width: 100%; } }