*{
padding:   0;
margin: 0;
text-decoration: none;
list-style:  none;
box-sizing:  border-box;
}

body{
 font-family:  montserrat, sarabun,serif;
}
nav{
 background:  #0082e6;
 height: 80px;
 width: 100%
}
label.logo{
color: white;
font-size: 12px;
line-height:  70px;  /*   80%   */
padding:  0  100px;
font-weight: bold;
display:  none;  /* close ไว้ก่อน */
}
.page-content img {  /*  ภาพย่อ ขยาย  ตามขนาดหน้าจอ  */
    max-width: 100%;
    height: auto!important;
}
nav  ul{
float: right;  /*  menu  in  ul  tag   at  right page */
margin-right: 20px;
}

nav ul li {
display: inline-block;
line-height: 80px;
margin: 0   5px;
}

nav ul li a{
  color: white;
  font-size: 17px;
  padding:  7px  13px;
  border-radius:  3px;
  text-transform: uppercase;
}

a.active, a.hover{
 
background: #1b9bff;
  
 


transition:  .5s;
}
.checkbtn{
font-size:  30px;
color:  white;
float: right;  /*  ให้อยู่ฝั่งขวา  */
line-height: 80px;
margin-right: 40px;   /* ห่างจากขอบจอ  40px     */
  cursor:  pointer;  /*  เปลี่ยนเป็นรูปมือชี้  */
display:  none;   /*  ปิดกล่อง   ไว้ก่อน */
}

#check{
    display:  none;   /*  ปิดกล่องcheckbox  ไว้ก่อน */
}

@media (max-width:952px){
    label.logo{
    font-size:  20px;  /*  ขนาดอักษร math  Online ครูสุวิทย์ */
	padding-left:  50px; 
	}
	nav ul li a{
       font-size:  16px;
	 }
}  /*  end  @media  */

@media (max-width:858px){
    .checkbtn{
        display:   block;    /*  เลื่อนย่อหน้าจอกล่องcheckbox will be  enable     */
	  }
/*  ถ้าย่อหน้าจอลง  head.gif จะหายไป  */
	  .page-content{
         display: none;  /*  suwit */
	  }
/*  ถ้าย่อหน้าจอลง  label.log   จะแสดง  */
label.logo{
display:   block;

}
	   
	  ul{
     position:   fixed;   /*  text  ใน  tag  ul  จะ fixed */
	 width:  100%;
	 height:  100vh;
    background:  #2c3e50;   /*  body   color  background  เวลาจอขนาด 858px    */
	  top:  80px;
   /*    left:  0;*/
	  left:  -100%;  /*  กดปุ่ม checkbox  ทำให้ menu  slide  in-out  */
	  text-align:  center;
	  transition: all  .5s;
	  }
   nav ul li{
    display:  block;  /*   แสดงพื้นหลังเป็นรูปกล่อง เรียงจากบนลงล่างของเมนูรายการเลือก */
    margin:  50px  0;
	line-height:  30px;
   }

nav ul li a{
       font-size:  20px;
	 }


a:hover,a.active{
  background:  none;
 
  color: #0082e6;
 
  
}
 #check:checked  ~  ul{
        left: 0;
 }

}   /*  end   @media (max-width:858px)  */

 
section{
background: url(bg1.jpg) no-repeat;
background-size:  cover;
height:  calc(100vh - 80px);
 
}

article a{   /*suwit    เปลี่ยนพื้นหลังและสีตัวอักษรของ a href link  ที่อยู่ในกรอบของ aeticle*/
   background:  #ffffff;
 
  color: #0082e6;
 
 
}

}
.style6 {
font-size: 12
}
.style7 {
color: #FFFFFF;
}
.style8 {
	color: #0000FF;
	font-weight: bold;
}