nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; }
  nav > ul > li.nav-li {
    position: relative;
    cursor: pointer; }

ul.drop-menu {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 16vw;
  padding: 0;
  z-index: 9999; }
  ul.drop-menu li {
    background: darkred;
    text-align: left;
    text-transform: capitalize;
    padding: 5px;
    padding-left: 15px; }
    ul.drop-menu li:hover {
      z-index: 9999; }
    ul.drop-menu li:last-child {
      border-radius: 0px 0px 5px 5px;
      padding-bottom: 10px; }
    ul.drop-menu li:first-child {
      border-radius: 5px 5px 0px 0px;
      padding-top: 10px; }
    ul.drop-menu li a {
      text-decoration: none;
      color: white; }
      ul.drop-menu li a:hover {
        color: yellow; }

ul.drop-menu li {
  display: none; }

li.nav-li:hover > ul.drop-menu li {
  display: block; }

li:hover > ul.drop-menu.menu-1 {
  perspective: 1000px; }
  li:hover > ul.drop-menu.menu-1 li {
    opacity: 0;
    transform-origin: top right; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(5) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(6) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(7) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(8) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(9) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(10) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(11) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(12) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(13) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(14) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-1 li:nth-child(15) {
      animation-name: menu1;
      animation-duration: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }

@keyframes menu1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
li:hover > ul.drop-menu.menu-2 {
  perspective: 1000px; }
  li:hover > ul.drop-menu.menu-2 li {
    opacity: 0;
    transform-origin: top center; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(1) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: -150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(2) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 0ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(3) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(4) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(5) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 450ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(6) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 600ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(7) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 750ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(8) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 900ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(9) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1050ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(10) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1200ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(11) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1350ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(12) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1500ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(13) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1650ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(14) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1800ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-2 li:nth-child(15) {
      animation-name: menu2;
      animation-duration: 300ms;
      animation-delay: 1950ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }

@keyframes menu2 {
  0% {
    opacity: 0;
    transform: rotateX(-90deg); }
  60% {
    transform: rotateX(50deg); }
  100% {
    opacity: 1;
    transform: rotateX(0deg); } }
li:hover > ul.drop-menu.menu-3 {
  perspective: 1000px; }
  li:hover > ul.drop-menu.menu-3 li {
    opacity: 0; }
    li:hover > ul.drop-menu.menu-3 li:nth-child(1) {
      animation-name: menu3;
      animation-duration: 300ms;
      animation-delay: -150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-3 li:nth-child(2) {
      animation-name: menu3;
      animation-duration: 300ms;
      animation-delay: 0ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    li:hover > ul.drop-menu.menu-3 li:nth-child(3) {
      animation-name: menu3;
      animation-duration: 300ms;
      animation-delay: 150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }

@keyframes menu3 {
  0% {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    transform: translateX(50px); }
  100% {
    opacity: 1;
    transform: translateX(0px); } }
ul.menu-4:focus {
  perspective: 1000px; }
  ul.menu-4:focus li {
    opacity: 0; }
    ul.menu-4:focus li:nth-child(1) {
      animation-name: menu4;
      animation-duration: 300ms;
      animation-delay: -150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    ul.menu-4:focus li:nth-child(2) {
      animation-name: menu4;
      animation-duration: 300ms;
      animation-delay: 0ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    ul.menu-4:focus li:nth-child(3) {
      animation-name: menu4;
      animation-duration: 300ms;
      animation-delay: 150ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    ul.menu-4:focus li:nth-child(4) {
      animation-name: menu4;
      animation-duration: 300ms;
      animation-delay: 300ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }
    ul.menu-4:focus li:nth-child(5) {
      animation-name: menu4;
      animation-duration: 300ms;
      animation-delay: 450ms;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards; }

@keyframes menu4 {
  0% {
    opacity: 0;
    transform: translateX(20px); }
  50% {
    transform: translateX(50px); }
  100% {
    opacity: 1;
    transform: translateX(0px); } }

/*# sourceMappingURL=style.css.map */