*
 { margin : 0px;
   padding : 0px;
 }

.menu ul li
 { list-style-type : none;
   font-family : EncodeSansCompressed-Bold;
   letter-spacing : 1px;
 }

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

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'RobotoBold';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Roboto Black'), local('Roboto-Black'),
       url('../fonts/roboto/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

@media only screen and (max-width : 767px)
 { .menu
    { width : 100%;
      min-height : 50px;
      background-color : #009c54;
      z-index : 1000;
      position : absolute;
      box-shadow : 0px 3px 3px black;
    }

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

   .menu nav
    { width : 43px;
      height : 37px;
      border : 1px solid white;
      position : absolute;
      margin-top : auto;
      margin-bottom : auto;
      top : 0px;
      bottom : 0px;
      right : 15px;
      border-radius : 5px;
      padding : 5px 10px 5px 10px;
      z-index : 1001;
     
    }

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

   .menu ul
    { position : absolute;
      top : 100%;
      width : 100%;
      border-top : 1px solid #028046;
      max-height : 0px;
      overflow-x : hidden;
    }

   .menu ul li
    { background-color : #009c54;
    }

   .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 : 20px;
    }

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

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

   @keyframes animasi_menu_utama
    { 0%
       { background-color : #009c54;
       }
      100%
       { background-color : #01733f;
       }
    }
 }

@media only screen and (min-width : 768px)
 { .container-menu
    { background-color : #009c54;
      border-top : 1px solid #bcbfbf;
      box-shadow : 0px 3px 3px black;
      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
    { max-width : 1180px;
      background-color : #009c54;
      position : absolute;
      margin-left : auto;
      margin-right : auto;
      left : 0px;
      right : 0px;
      z-index : 1000;
    }

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

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

   .menu ul li:hover
    { background-color : #01733f;
      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;
    }

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

   .menu ul li ul li:hover
    { background-color : #047204;
      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 : #01733f;
    }

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

   @keyframes animasi_menu_utama
    { 0%
       { background-color : #009c54;
       }
      100%
       { background-color : #01733f;
       }
    }

   @keyframes animasi_sub_menu
    { 0%
       { background-color : #01733f;
       }
      100%
       { background-color : #047204;
       }
    }

   @keyframes animasi_sub_sub_menu
    { 0%
       { background-color : #01733f;
       }
      100%
       { background-color : #047204;
       }
    }

 }