.menu ul li
 { list-style-type : none;
   letter-spacing : 1px;
   font-weight : 100;
   font-size : 14px;
 }

.menu ul li a.active
 { background-color : #000;
   border-radius : 3px;
 }

a
 { -webkit-touch-callout : none;
   -webkit-user-select : none;
   -khtml-user-select : none;
   -moz-user-select : none;
   -ms-user-select : none;
   user-select : none;
 }

@media only screen and (max-width : 767px)
 { .menu
    { width : 100%;
      background-color : #20124d;
      z-index : 1000;
      position : absolute;
      box-shadow : 0px 3px 3px black;
      left : 0;
      padding-bottom : 4px;
    }

   .menu .logo i
    { height : 30px;
      position : absolute;
      margin-top : auto;
      margin-bottom : auto;
      top : 0px;
      left : 15px;
      bottom : 0px;
      float : left;
      color : white;
    }

   .navigasi-menu
    { width : 30px;
      height : 27px;
      border : 1px solid white;
      top : 0px;
      bottom : 0px;
      right : 30px;
      border-radius : 5px;
      padding : 5px 10px 5px 10px;
      z-index : 1001;
      margin-left : 20px;
    }

   .navigasi-menu span
    { width : 100%;
      height : 2px;
      background-color : white;
      display : block;
      margin-top : 5px;
    }

   .menu ul
    { position : absolute;
      top : 100%;
      right : 0px;
      width : max-content;
      max-height : 0px;
      overflow-x : hidden;
    }

   .menu ul li
    { background-color : #20124d;
    }

   .menu ul li a
    { color : white;
      text-decoration : none;
      padding : 20px;
      display : block;
    }

   .menu ul li ul
    { position : relative;
      max-height : 0px;
      overflow : hidden;
      border-top : 0px;
    }

   .menu ul li ul li a
    { padding-left : 40px;
    }

   .menu ul li ul li ul li a
    { padding-left : 50px;
    }

   .menu ul li:hover
    { background-color : #1c6fe1;
      animation-name : animasi_menu_utama;
      animation-duration : 0.5s;
    }

   @keyframes animasi_menu_utama
    { 0%
       { background-color : #20124d;
       }
      100%
       { background-color : #1c6fe1;
       }
    }
 }

@media only screen and (min-width : 768px)
 { .container-menu
    { background-color : #20124d;
      width : 100%;
      min-height : 45px;
      z-index : 1000;
    }

   .container-menu .logo i
    { height : 30px;
      position : absolute;
      margin-top : 0px;
      top : 10px;
      bottom : 0px;
      float : left;
      color : white;
    }

   .menu
    { background-color : #20124d;
      position : absolute;
      margin-left : auto;
      margin-right : auto;
      left : 0px;
      right : 0px;
      z-index : 1000;
    }

   .menu ul
    { background-color : #20124d;
      margin-top : 3px;
      margin-bottom : 8px;
      padding-left : 30px;
      padding-right : 30px;
    }

   .menu ul li
    { float : left;
      background-color : #20124d;
      border-radius : 3px;
    }

   .menu ul li:hover
    { background-color : #1c6fe1;
      animation-name : animasi_menu_utama;
      animation-duration : 0.5s;
    }

   .menu ul li:hover ul
    { display : block;
    }

   .menu ul li:hover ul li ul
    { display : none;
    }

   .menu ul li a
    { color : white;
      text-decoration : none;
      padding : 10px 10px;
      display : block;
    }

   .menu ul li a.button
    { padding : 10px;
      border : 1px solid white;
      border-radius : 3px;
      cursor : pointer;
    }

   .menu ul li ul
    { position : absolute;
      display : none;
      margin-top : 0px;
      margin-bottom : 0px;
      padding-left : 0px;
      padding-right : 0px;
      width : max-content;
    }

   .menu ul li ul li
    { float : none;
      position : relative;
      background-color : #1c6fe1;
      border-radius : 0px;
    }

   .menu ul li ul li:hover
    { background-color : #497dc4;
      animation-name : animasi_sub_menu;
      animation-duration : 0.5s;
    }

   .menu ul li ul li:hover ul
    { display : block;
    }

   .menu ul li ul li ul
    { position : absolute;
      left : 100%;
      top : 0px;
      display : none;
      width : max-content;
    }

   .menu ul li ul li ul li
    { background-color : #1c6fe1;
    }

   .menu ul li ul li ul li:hover
    { background-color : #497dc4;
      animation-name : animasi_sub_sub_menu;
      animation-duration : 0.5s;
    }

   @keyframes animasi_menu_utama
    { 0%
       { background-color : #20124d;
       }
      100%
       { background-color : #1c6fe1;
       }
    }

   @keyframes animasi_sub_menu
    { 0%
       { background-color : #1c6fe1;
       }
      100%
       { background-color : #497dc4;
       }
    }

   @keyframes animasi_sub_sub_menu
    { 0%
       { background-color : #1c6fe1;
       }
      100%
       { background-color : #497dc4;
       }
    }

 }