/*************               ***************/
/************** #navigator ****************/
/*************               ***************/

.logovisible {
  display: none;
}

.logovisible a {
  text-decoration: none;
  color: #333;
}

.hamburger {
  display: none;
  cursor: pointer; 
}
  
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
  
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
  
.change .bar2 {
  opacity: 0;
}
  
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

header {
  width: 100%;
  height: 80px;
  background: #fff;
  box-shadow: 0 0 5px #999;
  position: fixed;
  z-index: 1;
  letter-spacing: -0.2pt;
}

header h1 {
  letter-spacing: -0.5pt;
  font-weight: normal;
}

.nav_grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.logo {
  margin: 1rem;
  padding-bottom: 0px;
  color: #333;
  font-size: 22px;
}

.logo a {
  text-decoration: none;
  color: #333;
}

ul.menu {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1.2fr 1fr;
  justify-items: center;
  margin-top: 25px;
  font-size: 20px;
}

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

.index a {
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

ul.menu p {
  display: block;
  cursor: pointer;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

.dropdown-content {
  display: none;
  position: absolute;
  
}

.dropdown-content a {
  display: block;
  position: relative;
  background-color: rgb(247, 247, 247);
  padding: 3px 10px 3px 10px;
}

.show {display: block;}

.Products a {
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 0px;
  transition: all 0.3s ease;
}

.customer a {
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

.about a {
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

.contact a {
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

ul.menu li a:hover {
  border-bottom: 2px solid #333;
  padding-bottom: 0px;
}

ul.menu li p:hover {
  border-bottom: 2px solid #333;
  padding-bottom: 0px;
}

/*************                       ******************/
/************** เริ่มต้นการปรับแต่งหน้าจอ *******************/
/*************                       ******************/


/****** Kindle Fire HD 8.9" (800 x 1280) ย่อเมื่อจอน้อยกว่า 1280px******/ 
@media only screen and (max-width: 1280px){
}

/****** ย่อเมื่อจอน้อยกว่า 1200px พิเศษไม่ใช่ขนาดหน้าจอ******/
@media only screen and (max-width: 1200px){  
}

/****** ย่อเมื่อจอน้อยกว่า 1100px พิเศษไม่ใช่ขนาดหน้าจอ******/
@media only screen and (max-width: 1100px){
}

/****** iPad Air (768 x 1024),Kindle Fire (600 x 1024) ย่อเมื่อจอน้อยกว่า 1024px*******/
@media only screen and (max-width: 1024px){
}

/****** Galaxy Nexus 7 (603 x 966) ย่อเมื่อจอน้อยกว่า 966px*******/
@media only screen and (max-width: 966px){
}

/****** ปรับจออัตโนมัติ ในช่วง 966-853 เพื่อให้สมดุล ที่ระยะ 900px *******/ 
@media only screen and (max-width: 900px){
  .logo {
    font-size: 21.5px;
  }
}

/****** Galaxy Note 4 (480 x 853),Kindle Fire HD 7" (533 x 853) ย่อเมื่อจอน้อยกว่า 853px*******/
@media only screen and (max-width: 853px){

  .headerlogo{
    display: flex;
    align-items: center;
    height: 80px;
  }

  .logovisible{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-left: 9%;
  }

  .logo{
    display: none;
  }
    
  header .hamburger {
    display: inline-block;
    margin: 20px 25px 15px 15px;
  }

  header {
    height: auto;
  }
    
  .nav_grid {
    overflow: hidden;
    grid-template-columns: 1fr;
    text-align: center;
    height: 0;
  }
    
  ul.menu {
    grid-template-columns: 1fr;
    margin: 0 auto;
    margin-bottom: 15px;
  }

  ul.menu li {
    height: 2rem;
    font-size: 1.4rem;
  }

  ul.menu div a {
    height: 2rem;
    font-size: 1.3rem;
  }

}

/****** Galaxy Tab 2 10.1 (800 x 1280),Kindle Fire HD 8.9" (800 x 1280) ย่อเมื่อจอน้อยกว่า 800px*******/
@media only screen and (max-width: 800px){
}

/****** iPad Air (768 x 1024) ย่อเมื่อจอน้อยกว่า 768px*******/
@media only screen and (max-width: 768px){
}

/****** Iphone 6 Plus (414 x 736) ย่อเมื่อจอน้อยกว่า 736px*******/

@media only screen and (max-width: 736px){
}

/****** Nexus 6 (412 x 690) ย่อเมื่อจอน้อยกว่า 690px*******/
@media only screen and (max-width: 690px){
}

/****** Iphone 6 (375 x 667) ย่อเมื่อจอน้อยกว่า 667px*******/
@media only screen and (max-width: 667px){
}

/****** Galaxy S6 (360 x 640),Lumia 920 (384 x 640),Galaxy Note II (360 x 640) ย่อเมื่อจอน้อยกว่า 640px*******/
@media only screen and (max-width: 640px){
}

/****** Xperia Z3 (360 x 598),Kindle Fire (600 x 1024),Galaxy Nexus 7 (603 x 966) ย่อเมื่อจอน้อยกว่า 603px*******/
@media only screen and (max-width: 603px){
}

/****** Iphone 5 (320 x 568) ย่อเมื่อจอน้อยกว่า 568px*******/
@media only screen and (max-width: 568px){
}

/****** Kindle Fire HD 7" (533 x 853) ย่อเมื่อจอน้อยกว่า 533px*******/
@media only screen and (max-width: 533px){
}

/****** Iphone 4 (320 x 480),Galaxy Note 4 (480 x 853) ย่อเมื่อจอน้อยกว่า 480px*******/
@media only screen and (max-width: 480px){

    .logovisible {
    font-size: 16px;
    }
    
}

/****** Nexus 6 (412 x 690),Iphone 6 Plus (414 x 736) ย่อเมื่อจอน้อยกว่า 414px*******/
@media only screen and (max-width: 414px){
        
  .logovisible {
    font-size: 15px;
  }

  .bar1, .bar2, .bar3 {
    width: 30px;
    height: 4px;
    margin: 5px 0;
  }

  header .hamburger {
    margin: 20px 25px 15px 15px;
  }

  ul.menu li {
    height: 1.8rem;
    font-size: 1.2rem;
}

ul.menu div a {
    height: 1.8rem;
    font-size: 1rem;
}

}

/****** Lumia 920 (384 x 640) ย่อเมื่อจอน้อยกว่า 384px*******/
@media only screen and (max-width: 384px){
       
  .logovisible {
    font-size: 14px;
  }

}

/****** Iphone 6 (375 x 667) ย่อเมื่อจอน้อยกว่า 375px*******/
@media only screen and (max-width: 375px){

  .logovisible {
    font-size: 12px;
  }

}

/****** Galaxy S6 (360 x 640),Xperia Z3 (360 x 598),Galaxy Note II (360 x 640) ย่อเมื่อจอน้อยกว่า 360px*******/
@media only screen and (max-width: 360px){
  .logovisible {
    font-size: 12px;
  }

}

/****** Iphone 5 (320 x 568),Iphone 4 (320 x 480), ย่อเมื่อจอน้อยกว่า 320px*******/
@media only screen and (max-width: 320px){
  .logovisible {
    font-size: 11px;
  }
}