.side-nav{ width: 250px; overflow-x: hidden; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 2rem; padding-bottom: 4rem; cursor: pointer; } @media (max-width: calc(1280px - 1px)) { .side-nav{ width: 105px; } } @media (max-width: calc(768px - 1px)) { .side-nav{ display: none; } } .side-nav.side-nav--simple{ width: 105px; } .side-nav.side-nav--simple .side-menu .side-menu__title{ display: none; } .side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon{ display: none; } .side-nav.side-nav--simple .side-menu:not(.side-menu--active) .side-menu__icon:before{ display: none; } .side-nav .side-nav__devider{ position: relative; z-index: 10; height: 1px; width: 100%; background-color: rgb(255 255 255 / 0.08); } .dark .side-nav .side-nav__devider{ background-color: rgb(255 255 255 / 0.07); } .side-nav .side-menu{ position: relative; margin-bottom: 0.25rem; display: flex; height: 50px; align-items: center; border-radius: 0.5rem; padding-left: 1.25rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .dark .side-nav .side-menu{ --tw-text-opacity: 1; color: rgb(var(--color-slate-300) / var(--tw-text-opacity)); } .side-nav .side-menu .side-menu__title{ margin-left: 0.75rem; display: flex; width: 100%; align-items: center; } .side-nav .side-menu .side-menu__title .side-menu__sub-icon{ margin-left: auto; margin-right: 1.25rem; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg{ height: 1rem; width: 1rem; } @media (max-width: calc(1280px - 1px)) { .side-nav .side-menu .side-menu__title .side-menu__sub-icon{ display: none; } .side-nav .side-menu .side-menu__title{ display: none; } } .side-nav > ul > li:nth-child(1).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(1 * 0.1s); animation-delay: calc(1 * 0.1s); } .side-nav > ul > li:nth-child(1) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(1 * 0.1s); animation-delay: calc(1 * 0.1s); } .side-nav > ul > li:nth-child(1) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(2).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(2 * 0.1s); animation-delay: calc(2 * 0.1s); } .side-nav > ul > li:nth-child(2) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(2 * 0.1s); animation-delay: calc(2 * 0.1s); } .side-nav > ul > li:nth-child(2) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(3).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(3 * 0.1s); animation-delay: calc(3 * 0.1s); } .side-nav > ul > li:nth-child(3) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(3 * 0.1s); animation-delay: calc(3 * 0.1s); } .side-nav > ul > li:nth-child(3) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(4).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(4 * 0.1s); animation-delay: calc(4 * 0.1s); } .side-nav > ul > li:nth-child(4) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(4 * 0.1s); animation-delay: calc(4 * 0.1s); } .side-nav > ul > li:nth-child(4) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(5).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(5 * 0.1s); animation-delay: calc(5 * 0.1s); } .side-nav > ul > li:nth-child(5) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(5 * 0.1s); animation-delay: calc(5 * 0.1s); } .side-nav > ul > li:nth-child(5) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(6).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(6 * 0.1s); animation-delay: calc(6 * 0.1s); } .side-nav > ul > li:nth-child(6) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(6 * 0.1s); animation-delay: calc(6 * 0.1s); } .side-nav > ul > li:nth-child(6) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(7).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(7 * 0.1s); animation-delay: calc(7 * 0.1s); } .side-nav > ul > li:nth-child(7) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(7 * 0.1s); animation-delay: calc(7 * 0.1s); } .side-nav > ul > li:nth-child(7) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(8).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(8 * 0.1s); animation-delay: calc(8 * 0.1s); } .side-nav > ul > li:nth-child(8) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(8 * 0.1s); animation-delay: calc(8 * 0.1s); } .side-nav > ul > li:nth-child(8) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(9).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(9 * 0.1s); animation-delay: calc(9 * 0.1s); } .side-nav > ul > li:nth-child(9) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(9 * 0.1s); animation-delay: calc(9 * 0.1s); } .side-nav > ul > li:nth-child(9) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(10).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(10 * 0.1s); animation-delay: calc(10 * 0.1s); } .side-nav > ul > li:nth-child(10) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(10 * 0.1s); animation-delay: calc(10 * 0.1s); } .side-nav > ul > li:nth-child(10) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(11).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(11 * 0.1s); animation-delay: calc(11 * 0.1s); } .side-nav > ul > li:nth-child(11) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(11 * 0.1s); animation-delay: calc(11 * 0.1s); } .side-nav > ul > li:nth-child(11) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(12).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(12 * 0.1s); animation-delay: calc(12 * 0.1s); } .side-nav > ul > li:nth-child(12) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(12 * 0.1s); animation-delay: calc(12 * 0.1s); } .side-nav > ul > li:nth-child(12) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(13).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(13 * 0.1s); animation-delay: calc(13 * 0.1s); } .side-nav > ul > li:nth-child(13) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(13 * 0.1s); animation-delay: calc(13 * 0.1s); } .side-nav > ul > li:nth-child(13) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(14).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(14 * 0.1s); animation-delay: calc(14 * 0.1s); } .side-nav > ul > li:nth-child(14) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(14 * 0.1s); animation-delay: calc(14 * 0.1s); } .side-nav > ul > li:nth-child(14) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(15).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(15 * 0.1s); animation-delay: calc(15 * 0.1s); } .side-nav > ul > li:nth-child(15) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(15 * 0.1s); animation-delay: calc(15 * 0.1s); } .side-nav > ul > li:nth-child(15) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(16).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(16 * 0.1s); animation-delay: calc(16 * 0.1s); } .side-nav > ul > li:nth-child(16) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(16 * 0.1s); animation-delay: calc(16 * 0.1s); } .side-nav > ul > li:nth-child(16) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(17).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(17 * 0.1s); animation-delay: calc(17 * 0.1s); } .side-nav > ul > li:nth-child(17) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(17 * 0.1s); animation-delay: calc(17 * 0.1s); } .side-nav > ul > li:nth-child(17) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(18).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(18 * 0.1s); animation-delay: calc(18 * 0.1s); } .side-nav > ul > li:nth-child(18) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(18 * 0.1s); animation-delay: calc(18 * 0.1s); } .side-nav > ul > li:nth-child(18) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(19).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(19 * 0.1s); animation-delay: calc(19 * 0.1s); } .side-nav > ul > li:nth-child(19) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(19 * 0.1s); animation-delay: calc(19 * 0.1s); } .side-nav > ul > li:nth-child(19) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(20).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(20 * 0.1s); animation-delay: calc(20 * 0.1s); } .side-nav > ul > li:nth-child(20) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(20 * 0.1s); animation-delay: calc(20 * 0.1s); } .side-nav > ul > li:nth-child(20) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(21).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(21 * 0.1s); animation-delay: calc(21 * 0.1s); } .side-nav > ul > li:nth-child(21) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(21 * 0.1s); animation-delay: calc(21 * 0.1s); } .side-nav > ul > li:nth-child(21) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(22).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(22 * 0.1s); animation-delay: calc(22 * 0.1s); } .side-nav > ul > li:nth-child(22) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(22 * 0.1s); animation-delay: calc(22 * 0.1s); } .side-nav > ul > li:nth-child(22) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(23).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(23 * 0.1s); animation-delay: calc(23 * 0.1s); } .side-nav > ul > li:nth-child(23) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(23 * 0.1s); animation-delay: calc(23 * 0.1s); } .side-nav > ul > li:nth-child(23) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(24).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(24 * 0.1s); animation-delay: calc(24 * 0.1s); } .side-nav > ul > li:nth-child(24) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(24 * 0.1s); animation-delay: calc(24 * 0.1s); } .side-nav > ul > li:nth-child(24) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(25).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(25 * 0.1s); animation-delay: calc(25 * 0.1s); } .side-nav > ul > li:nth-child(25) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(25 * 0.1s); animation-delay: calc(25 * 0.1s); } .side-nav > ul > li:nth-child(25) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(26).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(26 * 0.1s); animation-delay: calc(26 * 0.1s); } .side-nav > ul > li:nth-child(26) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(26 * 0.1s); animation-delay: calc(26 * 0.1s); } .side-nav > ul > li:nth-child(26) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(27).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(27 * 0.1s); animation-delay: calc(27 * 0.1s); } .side-nav > ul > li:nth-child(27) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(27 * 0.1s); animation-delay: calc(27 * 0.1s); } .side-nav > ul > li:nth-child(27) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(28).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(28 * 0.1s); animation-delay: calc(28 * 0.1s); } .side-nav > ul > li:nth-child(28) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(28 * 0.1s); animation-delay: calc(28 * 0.1s); } .side-nav > ul > li:nth-child(28) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(29).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(29 * 0.1s); animation-delay: calc(29 * 0.1s); } .side-nav > ul > li:nth-child(29) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(29 * 0.1s); animation-delay: calc(29 * 0.1s); } .side-nav > ul > li:nth-child(29) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(30).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(30 * 0.1s); animation-delay: calc(30 * 0.1s); } .side-nav > ul > li:nth-child(30) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(30 * 0.1s); animation-delay: calc(30 * 0.1s); } .side-nav > ul > li:nth-child(30) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(31).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(31 * 0.1s); animation-delay: calc(31 * 0.1s); } .side-nav > ul > li:nth-child(31) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(31 * 0.1s); animation-delay: calc(31 * 0.1s); } .side-nav > ul > li:nth-child(31) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(32).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(32 * 0.1s); animation-delay: calc(32 * 0.1s); } .side-nav > ul > li:nth-child(32) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(32 * 0.1s); animation-delay: calc(32 * 0.1s); } .side-nav > ul > li:nth-child(32) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(33).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(33 * 0.1s); animation-delay: calc(33 * 0.1s); } .side-nav > ul > li:nth-child(33) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(33 * 0.1s); animation-delay: calc(33 * 0.1s); } .side-nav > ul > li:nth-child(33) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(34).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(34 * 0.1s); animation-delay: calc(34 * 0.1s); } .side-nav > ul > li:nth-child(34) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(34 * 0.1s); animation-delay: calc(34 * 0.1s); } .side-nav > ul > li:nth-child(34) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(35).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(35 * 0.1s); animation-delay: calc(35 * 0.1s); } .side-nav > ul > li:nth-child(35) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(35 * 0.1s); animation-delay: calc(35 * 0.1s); } .side-nav > ul > li:nth-child(35) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(36).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(36 * 0.1s); animation-delay: calc(36 * 0.1s); } .side-nav > ul > li:nth-child(36) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(36 * 0.1s); animation-delay: calc(36 * 0.1s); } .side-nav > ul > li:nth-child(36) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(37).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(37 * 0.1s); animation-delay: calc(37 * 0.1s); } .side-nav > ul > li:nth-child(37) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(37 * 0.1s); animation-delay: calc(37 * 0.1s); } .side-nav > ul > li:nth-child(37) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(38).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(38 * 0.1s); animation-delay: calc(38 * 0.1s); } .side-nav > ul > li:nth-child(38) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(38 * 0.1s); animation-delay: calc(38 * 0.1s); } .side-nav > ul > li:nth-child(38) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(39).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(39 * 0.1s); animation-delay: calc(39 * 0.1s); } .side-nav > ul > li:nth-child(39) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(39 * 0.1s); animation-delay: calc(39 * 0.1s); } .side-nav > ul > li:nth-child(39) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(40).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(40 * 0.1s); animation-delay: calc(40 * 0.1s); } .side-nav > ul > li:nth-child(40) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(40 * 0.1s); animation-delay: calc(40 * 0.1s); } .side-nav > ul > li:nth-child(40) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(41).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(41 * 0.1s); animation-delay: calc(41 * 0.1s); } .side-nav > ul > li:nth-child(41) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(41 * 0.1s); animation-delay: calc(41 * 0.1s); } .side-nav > ul > li:nth-child(41) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(42).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(42 * 0.1s); animation-delay: calc(42 * 0.1s); } .side-nav > ul > li:nth-child(42) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(42 * 0.1s); animation-delay: calc(42 * 0.1s); } .side-nav > ul > li:nth-child(42) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(43).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(43 * 0.1s); animation-delay: calc(43 * 0.1s); } .side-nav > ul > li:nth-child(43) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(43 * 0.1s); animation-delay: calc(43 * 0.1s); } .side-nav > ul > li:nth-child(43) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(44).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(44 * 0.1s); animation-delay: calc(44 * 0.1s); } .side-nav > ul > li:nth-child(44) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(44 * 0.1s); animation-delay: calc(44 * 0.1s); } .side-nav > ul > li:nth-child(44) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(45).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(45 * 0.1s); animation-delay: calc(45 * 0.1s); } .side-nav > ul > li:nth-child(45) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(45 * 0.1s); animation-delay: calc(45 * 0.1s); } .side-nav > ul > li:nth-child(45) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(46).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(46 * 0.1s); animation-delay: calc(46 * 0.1s); } .side-nav > ul > li:nth-child(46) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(46 * 0.1s); animation-delay: calc(46 * 0.1s); } .side-nav > ul > li:nth-child(46) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(47).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(47 * 0.1s); animation-delay: calc(47 * 0.1s); } .side-nav > ul > li:nth-child(47) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(47 * 0.1s); animation-delay: calc(47 * 0.1s); } .side-nav > ul > li:nth-child(47) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(48).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(48 * 0.1s); animation-delay: calc(48 * 0.1s); } .side-nav > ul > li:nth-child(48) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(48 * 0.1s); animation-delay: calc(48 * 0.1s); } .side-nav > ul > li:nth-child(48) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(49).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(49 * 0.1s); animation-delay: calc(49 * 0.1s); } .side-nav > ul > li:nth-child(49) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(49 * 0.1s); animation-delay: calc(49 * 0.1s); } .side-nav > ul > li:nth-child(49) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul > li:nth-child(50).side-nav__devider{ opacity: 0; -webkit-animation: 0.4s intro-devider-animation ease-in-out 0.33333s; animation: 0.4s intro-devider-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(50 * 0.1s); animation-delay: calc(50 * 0.1s); } .side-nav > ul > li:nth-child(50) > a:not(.side-menu--active){ opacity: 0; transform: translateX(50px); -webkit-animation: 0.4s intro-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(50 * 0.1s); animation-delay: calc(50 * 0.1s); } .side-nav > ul > li:nth-child(50) > a.side-menu--active { -webkit-animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .side-nav > ul ul li:nth-child(1) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(1 * 0.1s); animation-delay: calc(1 * 0.1s); } .side-nav > ul ul li:nth-child(2) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(2 * 0.1s); animation-delay: calc(2 * 0.1s); } .side-nav > ul ul li:nth-child(3) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(3 * 0.1s); animation-delay: calc(3 * 0.1s); } .side-nav > ul ul li:nth-child(4) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(4 * 0.1s); animation-delay: calc(4 * 0.1s); } .side-nav > ul ul li:nth-child(5) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(5 * 0.1s); animation-delay: calc(5 * 0.1s); } .side-nav > ul ul li:nth-child(6) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(6 * 0.1s); animation-delay: calc(6 * 0.1s); } .side-nav > ul ul li:nth-child(7) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(7 * 0.1s); animation-delay: calc(7 * 0.1s); } .side-nav > ul ul li:nth-child(8) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(8 * 0.1s); animation-delay: calc(8 * 0.1s); } .side-nav > ul ul li:nth-child(9) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(9 * 0.1s); animation-delay: calc(9 * 0.1s); } .side-nav > ul ul li:nth-child(10) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(10 * 0.1s); animation-delay: calc(10 * 0.1s); } .side-nav > ul ul li:nth-child(11) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(11 * 0.1s); animation-delay: calc(11 * 0.1s); } .side-nav > ul ul li:nth-child(12) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(12 * 0.1s); animation-delay: calc(12 * 0.1s); } .side-nav > ul ul li:nth-child(13) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(13 * 0.1s); animation-delay: calc(13 * 0.1s); } .side-nav > ul ul li:nth-child(14) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(14 * 0.1s); animation-delay: calc(14 * 0.1s); } .side-nav > ul ul li:nth-child(15) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(15 * 0.1s); animation-delay: calc(15 * 0.1s); } .side-nav > ul ul li:nth-child(16) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(16 * 0.1s); animation-delay: calc(16 * 0.1s); } .side-nav > ul ul li:nth-child(17) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(17 * 0.1s); animation-delay: calc(17 * 0.1s); } .side-nav > ul ul li:nth-child(18) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(18 * 0.1s); animation-delay: calc(18 * 0.1s); } .side-nav > ul ul li:nth-child(19) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(19 * 0.1s); animation-delay: calc(19 * 0.1s); } .side-nav > ul ul li:nth-child(20) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(20 * 0.1s); animation-delay: calc(20 * 0.1s); } .side-nav > ul ul li:nth-child(21) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(21 * 0.1s); animation-delay: calc(21 * 0.1s); } .side-nav > ul ul li:nth-child(22) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(22 * 0.1s); animation-delay: calc(22 * 0.1s); } .side-nav > ul ul li:nth-child(23) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(23 * 0.1s); animation-delay: calc(23 * 0.1s); } .side-nav > ul ul li:nth-child(24) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(24 * 0.1s); animation-delay: calc(24 * 0.1s); } .side-nav > ul ul li:nth-child(25) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(25 * 0.1s); animation-delay: calc(25 * 0.1s); } .side-nav > ul ul li:nth-child(26) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(26 * 0.1s); animation-delay: calc(26 * 0.1s); } .side-nav > ul ul li:nth-child(27) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(27 * 0.1s); animation-delay: calc(27 * 0.1s); } .side-nav > ul ul li:nth-child(28) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(28 * 0.1s); animation-delay: calc(28 * 0.1s); } .side-nav > ul ul li:nth-child(29) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(29 * 0.1s); animation-delay: calc(29 * 0.1s); } .side-nav > ul ul li:nth-child(30) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(30 * 0.1s); animation-delay: calc(30 * 0.1s); } .side-nav > ul ul li:nth-child(31) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(31 * 0.1s); animation-delay: calc(31 * 0.1s); } .side-nav > ul ul li:nth-child(32) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(32 * 0.1s); animation-delay: calc(32 * 0.1s); } .side-nav > ul ul li:nth-child(33) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(33 * 0.1s); animation-delay: calc(33 * 0.1s); } .side-nav > ul ul li:nth-child(34) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(34 * 0.1s); animation-delay: calc(34 * 0.1s); } .side-nav > ul ul li:nth-child(35) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(35 * 0.1s); animation-delay: calc(35 * 0.1s); } .side-nav > ul ul li:nth-child(36) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(36 * 0.1s); animation-delay: calc(36 * 0.1s); } .side-nav > ul ul li:nth-child(37) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(37 * 0.1s); animation-delay: calc(37 * 0.1s); } .side-nav > ul ul li:nth-child(38) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(38 * 0.1s); animation-delay: calc(38 * 0.1s); } .side-nav > ul ul li:nth-child(39) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(39 * 0.1s); animation-delay: calc(39 * 0.1s); } .side-nav > ul ul li:nth-child(40) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(40 * 0.1s); animation-delay: calc(40 * 0.1s); } .side-nav > ul ul li:nth-child(41) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(41 * 0.1s); animation-delay: calc(41 * 0.1s); } .side-nav > ul ul li:nth-child(42) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(42 * 0.1s); animation-delay: calc(42 * 0.1s); } .side-nav > ul ul li:nth-child(43) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(43 * 0.1s); animation-delay: calc(43 * 0.1s); } .side-nav > ul ul li:nth-child(44) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(44 * 0.1s); animation-delay: calc(44 * 0.1s); } .side-nav > ul ul li:nth-child(45) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(45 * 0.1s); animation-delay: calc(45 * 0.1s); } .side-nav > ul ul li:nth-child(46) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(46 * 0.1s); animation-delay: calc(46 * 0.1s); } .side-nav > ul ul li:nth-child(47) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(47 * 0.1s); animation-delay: calc(47 * 0.1s); } .side-nav > ul ul li:nth-child(48) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(48 * 0.1s); animation-delay: calc(48 * 0.1s); } .side-nav > ul ul li:nth-child(49) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(49 * 0.1s); animation-delay: calc(49 * 0.1s); } .side-nav > ul ul li:nth-child(50) > a{ opacity: 0; transform: translateX(50px); -webkit-animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; animation: 0.2s intro-submenu-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: calc(50 * 0.1s); animation-delay: calc(50 * 0.1s); } .side-nav > ul ul{ position: relative; display: none; border-radius: 0.5rem; background-color: rgb(255 255 255 / 0.04); } .dark .side-nav > ul ul{ background-color: transparent; } .side-nav > ul ul:before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; display: block; border-radius: 0.5rem; background-color: rgb(var(--color-primary) / 0.6); } .dark .side-nav > ul ul:before{ background-color: rgb(var(--color-darkmode-900) / 0.3); } .side-nav > ul ul.side-menu__sub-open{ display: block; } .side-nav > ul ul .side-menu__icon:before{ display: none; } .side-nav > ul ul li a:not(.side-menu--active){ color: rgb(255 255 255 / 0.7); } .dark .side-nav > ul ul li a:not(.side-menu--active){ --tw-text-opacity: 1; color: rgb(var(--color-slate-400) / var(--tw-text-opacity)); } .side-nav > ul ul li a.side-menu--active .side-menu__title{ font-weight: 500; } .side-nav > ul ul ul{ position: relative; display: none; border-radius: 0.5rem; background-color: rgb(255 255 255 / 0.04); } .dark .side-nav > ul ul ul{ background-color: transparent; } .side-nav > ul ul ul:before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; display: block; border-radius: 0.5rem; background-color: rgb(var(--color-primary) / 0.6); } .dark .side-nav > ul ul ul:before{ background-color: rgb(var(--color-darkmode-900) / 0.3); } .side-nav > ul > li > .side-menu.side-menu--active{ --tw-bg-opacity: 1; background-color: rgb(var(--color-primary) / var(--tw-bg-opacity)); } .dark .side-nav > ul > li > .side-menu.side-menu--active{ background-color: transparent; } .side-nav > ul > li > .side-menu.side-menu--active:before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; display: block; border-radius: 0.5rem; border-bottom-width: 3px; border-style: solid; border-color: rgb(0 0 0 / 0.1); background-color: rgb(255 255 255 / 0.08); } .dark .side-nav > ul > li > .side-menu.side-menu--active:before{ --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-700) / var(--tw-bg-opacity)); } .side-nav > ul > li > .side-menu.side-menu--active:after { content: ""; width: 20px; height: 80px; margin-right: -47px; -webkit-animation: 0.3s active-side-menu-chevron-animation ease-in-out 0.33333s; animation: 0.3s active-side-menu-chevron-animation ease-in-out 0.33333s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 1s; animation-delay: 1s; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23e1e5f8'/%3E%3C/svg%3E"); position: absolute; top: 0px; bottom: 0px; right: 0px; margin-top: auto; margin-bottom: auto; background-size: cover; background-repeat: no-repeat; opacity: 0; } .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon{ z-index: 10; } .dark .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon{ --tw-text-opacity: 1; color: rgb(var(--color-slate-300) / var(--tw-text-opacity)); } .side-nav > ul > li > .side-menu.side-menu--active .side-menu__title{ z-index: 10; font-weight: 500; } .dark .side-nav > ul > li > .side-menu.side-menu--active .side-menu__title{ --tw-text-opacity: 1; color: rgb(var(--color-slate-300) / var(--tw-text-opacity)); } .dark .side-nav > ul > li > .side-menu .side-menu__icon{ --tw-text-opacity: 1; color: rgb(var(--color-slate-400) / var(--tw-text-opacity)); } .dark .side-nav > ul > li > .side-menu .side-menu__title{ --tw-text-opacity: 1; color: rgb(var(--color-slate-400) / var(--tw-text-opacity)); } .side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open){ background-color: rgb(var(--color-primary) / 0.6); } .dark .side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open){ background-color: transparent; } .side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open):before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; display: block; border-radius: 0.5rem; background-color: rgb(255 255 255 / 0.04); } .dark .side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{ --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-700) / var(--tw-bg-opacity)); } .dark .side-nav > ul > li > .side-menu.side-menu--active:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E"); }