.menu ul li
 { list-style-type : none;
 }

.menu .logo a
 { color : white ;
   text-decoration : none;
   user-select : none;
   cursor : pointer;     
 }

 .menu .logo a:hover
 { color : red;
   text-decoration : none;
   user-select : none;
   cursor : pointer;   
 }

@media only screen and (max-width : 767px)
 { 
   .container
    { padding-right: 0px;
      padding-left: 0px;
      margin-right: auto;
      margin-left: auto;
    }

   .container-menu .logo
    { height : 40px;
      position : relative;
      margin-top : auto;
      margin-bottom : auto;
      top : 0px;
      bottom : 0px;
      float : left;
      padding-left : 20px;
      font-weight : bold;
      font-size : 30px;
      color : white;
    }

   .container-menu .logo img
    { max-height : 50px;
      margin-right : 5px;
    }

   .menu
    { width : 100%;
      min-height : 60px;
      background-color : #05806B;
      position : fixed;
      z-index : 16;
      /* background-image : url('../images/header-banner.jpg'); */
      
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow : 1px 1px 3px red;
    }

   .menu nav
    { width : 25px;
      height : 35px;
      border : 1px solid white;
      position : absolute;
      margin-top : auto;
      margin-bottom : auto;
      top : 0px;
      bottom : 0px;
      right : 20px;
      border-radius : 5px;
      padding : 5px 10px 5px 10px;
    }

   .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 #05806B;
      max-height : 0px;
      /*overflow-y : scroll;*/
      overflow-x : hidden;
    }

   .menu ul li
    { background-color : #05806B;
    }

   .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 : #05806B;
      animation-name : animasi_menu_utama;
      animation-duration : 0.5s;
    }

   @keyframes animasi_menu_utama
    { 0%
       { background-color : white;
       }
      100%
       { background-color : #05806B;
       }
    }

   .banner
    { top : 50px;
      min-height : 100vh;
    }

   .banner .content
    { position : relative;
      top : 15vh;
      bottom : 50px;
      height : 700px;
      vertical-align : middle;
    }

   .banner .form
    { grid-template-columns : auto;
    }

   .latest-job .content
    { grid-template-columns : auto;
    }

   .latest-job .content .content-item:nth-child(1)
    { grid-column-start : 1;
      grid-column-end : 2;
    }

   .testimoni .content .slider1 .slider1-item p
    { padding-left : 20px;
      padding-right : 20px;
    }

   .latest-news .content .news
    { grid-template-columns: repeat(1, 1fr);
    }

   .partners .content .container-slider2 .slider2
    { grid-template-columns : repeat(2, 1fr);
    }

   .footer1 .content .kolom
    { grid-template-columns : auto;
    }

   .konten
    { top : 50px;
      margin-bottom : 50px;
    }

   .konten .container-isi .isi, .konten .container-isi .isi-form
    { grid-template-columns : 1fr;
    }

   .konten .container-isi .isi .kiri
    { padding-right : 0px;
      border-right : 0px;
    }

   .konten .container-isi .isi .kanan
    { padding-left : 0px;
      margin-top : 20px;
    }

   .konten .container-isi .all-job
    { grid-template-columns : 1fr;
    }

   .konten .container-isi .all-job .content-item:nth-child(1)
    { grid-column-start : 1;
      grid-column-end : 2;
    }

   .container-isi .all-job .content-item .jobs .filter
    { grid-template-columns : 1fr;
    }

   #form-input
    { grid-template-columns : 1fr;
    }

 }


@media only screen and (min-width : 768px)
 { .container-menu
    { width : 100%;
      min-height : 40px;
      position : fixed;
      z-index : 16;
    }

   .container-menu .logo
    { height : 30px;
      position : relative;
      margin-top : 10px;
      top : 0px;
      bottom : 0px;
      float : left;
      color : white;
      font-weight : bold;
      font-size : 30px;
    }

   .container-menu .logo img
    { max-height : 40px;
      margin-right : 5px;
    }

   .menu
    { padding-left : 20px;
      padding-right : 20px;
      min-height : 80px;
      background: #05806B;      
      position : absolute;
      margin-left : auto;
      margin-right : auto;
      left : 0px;
      right : 0px;
      /* background-image : url('../images/header-banner.jpg'); */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow : 1px 1px 3px darkred;      
    }

   .menu ul
    { float : right;
      margin-top : 15px;
      padding-left : 200px;
    }

   .menu ul li
    { float : left;
      border-radius : 3px;
      user-select : none;
      cursor : pointer;
    }

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

   .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 : 15px;
      display : block;
      font-weight : bold;
    }

   .menu ul li a:hover
    { color : red;
      animation-name : animasi_menu_utama;
      animation-duration : 0.5s;
    }

   .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 : #05806B;
      border-radius : 0px;
    }

   .menu ul li ul li:hover
    { color : yellow;
      animation-name : animasi_menu_utama;
      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: rgb(104,161,25);
        background: linear-gradient(90deg, rgba(104,161,25,1) 0%, rgba(51,235,21,1) 11%, rgba(117,186,15,1) 67%);
    }

   .menu ul li ul li ul li:hover
    { color : yellow;
      animation-name : animasi_menu_utama;
      animation-duration : 0.5s;
    }

   @keyframes animasi_menu_utama
    { 0%
       { color : white;
       }
      100%
       { color : yellow;
       }
    }

 }