#side_menu.style-7 { position: fixed; top: 0; left: 80px; z-index: 10; background-color: #fff; height: 100vh; width: 40%; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; pointer-events: none; border-top-right-radius: 100%; border-bottom-right-radius: 100%; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 99; } #side_menu.style-7 .pages_links { padding: 15px 7vw; max-height: 350px; overflow: auto; } #side_menu.style-7 .pages_links::-webkit-scrollbar { height: 5px; width: 3px; background: #f1f1f1; border-radius: 10px; } #side_menu.style-7 .pages_links::-webkit-scrollbar-thumb { background: #3A4B75; -webkit-border-radius: 0; border-radius: 10px; } #side_menu.style-7 .pages_links::-webkit-scrollbar-corner { background: #3A4B75; border-radius: 10px; } #side_menu.style-7 .pages_links li { opacity: 0; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } #side_menu.style-7 .pages_links li a { color: #222; font-size: calc(14px + 2vw); font-weight: bold; margin: 12px 0; position: relative; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } #side_menu.style-7 .pages_links li a::after { position: absolute; content: ""; left: 110%; top: 60%; width: 0; height: 2px; background-color: #3A4B75; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #side_menu.style-7 .pages_links li a:hover, #side_menu.style-7 .pages_links li a.active { color: #3A4B75; } #side_menu.style-7 .pages_links li a:hover::after, #side_menu.style-7 .pages_links li a.active::after { width: 50px; } #side_menu.style-7 .pages_links ul li { -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #side_menu.style-7 .pages_links ul li:nth-of-type(1) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #side_menu.style-7 .pages_links ul li:nth-of-type(2) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } #side_menu.style-7 .pages_links ul li:nth-of-type(3) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } #side_menu.style-7 .pages_links ul li:nth-of-type(4) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } #side_menu.style-7 .pages_links ul li:nth-of-type(5) { -webkit-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } #side_menu.style-7 .pages_links ul li:nth-of-type(6) { -webkit-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } #side_menu.style-7 .pages_links ul li:nth-of-type(7) { -webkit-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } #side_menu.style-7 .pages_links ul li:nth-of-type(8) { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #side_menu.style-7.show { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); pointer-events: all; border-radius: 0; } #side_menu.style-7.show li { opacity: 1; -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }