/* Position the image container (needed to position the left and right arrows) */
body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
  	margin: 0;
    background: #DDD;
    color: #000;    
  }

    /* Text Link Format */
    a:link,
    a:visited,
    a:active {
      text-decoration: none;
      color: #444;
    }
    a:hover {
      text-decoration: none;
      color: #000;
    }
    
    /* The navigation bar */
    .navbar {
      overflow: hidden;
      background-color: #fff;
      position: fixed; /* Set the navbar to fixed position */
      top: 0; /* Position the navbar at the top of the page ถ้าต้องการไว้ข้างล่างเปลี่ยนเป็น bottom: 0;ไว้ข้างบนเปลี่ยนเป็น top: 0;*/
      box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 4px 4px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
      z-index: 999;
    }
    
    /* Links inside the navbar */
    .navbar a {
      margin: 0;
      float: left;
      display: block;
      color: #888;
      text-align: center;
      padding: 15px 15px;
      text-decoration: none;
    }
    
    /* Change background on mouse-over */
    .navbar a:hover {
      background: #fff;
      color: #000;
    }

    .container1 {
    position: relative;
    width: 1080px;
    height: 70px;
    font-size: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

    .container2 {
    position: relative;
    width: 1080px;
    height: auto;
    font-size: 30px;
    text-align: left;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding-top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

	.bg_1 {
  	background-color: #ccc;
  	height: 100%; 
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
    padding-top: 0px;
	}

  	.bg_2 {
  	background-color: #99AABB;
  	height: 100%; 
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
    padding-top: 0px;
	}

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
     }

    .shadow {
    box-shadow:rgba(0, 0, 0, 0.30) 5px 5px 10px 0px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
    }  

/* Responsive */
  @media screen and (min-width: 1025px) {

  }

  @media screen and (min-width: 768px) {

  }

  @media (max-width: 412px) {
    body .container1{
    position: relative;
    width: 380px;
    height: 70px;
    font-size: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

    body .container2{
    position: relative;
    width: 380px;
    height: auto;
    font-size: 20px;
    text-align: left;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding-top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

    body .navbar {
      overflow: hidden;
      background-color: #fff;
      position: fixed; /* Set the navbar to fixed position */
      top: 0; /* Position the navbar at the top of the page ถ้าต้องการไว้ข้างล่างเปลี่ยนเป็น bottom: 0;ไว้ข้างบนเปลี่ยนเป็น top: 0;*/
      box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 4px 4px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
      z-index: 999;
    }

    body .navbar a {
      margin: 0;
      float: left;
      display: block;
      color: #aaa;
      text-align: center;
      padding: 5px 5px;
      text-decoration: none;
    }

    .navbar a:hover {
      background: #fff;
      color: #000;
    }
  }


  
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #d1ff07;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #888888;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: rgb(247, 6, 6);
}

/* Style the active link (or home/logo) */
.active {
  background-color: #FFF;
  color: white;
}