/* @media screen and (min-width: 1025px) */
/* @media screen and (min-width: 769px) and (max-width: 1024px)*/
/* @media screen and (max-width: 768px) */


/* Position the image container (needed to position the left and right arrows) */
body {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
  }

@media screen and (min-width: 1025px) {
    body .container {width: 1025px;}

  /* ตัวหนังสือวิ่ง */
  .marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee {
    position: fixed;
    white-space: nowrap;
    display: inline-block;
    animation: marquee 30s linear infinite; 
    animation-delay: 0.5s;
    padding: 0%;
    margin: 0 auto;
    color: red;
    width: 100%;
    overflow: hidden;
  }
  @keyframes marquee {
    0% { transform: translate(30%, 0); }
    100% { transform: translate(-150%, 0); }
  }

  /* 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.10) 0px 0px 3px 3px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
  }
    
  /* Links inside the navbar */
  .navbar a {
    margin: 0;
    float: left;
    display: block;
    color: #aaa;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
  }
    
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #fff;
    color: #000;
  }

  .container1 {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1080px;
  height: auto;
  padding: 0px;
  padding-right: 0px;
  padding-left: 0px;
  }

  .container2 {
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1080px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  font-size:20px;
  }

  .container3 {
  display: block;
  margin-top: 50px;
  margin-left: 0;
  margin-right: auto;
  position: relative;
  width: 500px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  }

  .row {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1080px;
  height: auto;
  padding: 20;
  }

  .indent50px {text-indent: 50px;
  }

	.bg_grey {
  	/* The image used */
  	background-color: #ccc;

  	/* Full height */
  	height: 100%; 

  	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	}

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

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

  .border-radius {
    overflow: hidden;
    display: inline-block;
    width: 300px;
    height: 300px;
    background: #666;
    margin: auto;
    padding: 0;
    border-radius: 50% 10% 50% 10%  ;
    box-shadow:rgba(0, 0, 0, 0.30) 5px 5px 10px 0px;
  }

  .pack-type {
    font-family: impact;
    font-size: 2em;
    color: #003b71!important;
    margin: 0;
  }

  body #contact-buttons-bar {
    top: 190px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body .container {width: 700px;}

  /* ตัวหนังสือวิ่ง */
  .marquee {
    position: fixed;
    white-space: nowrap;
    display: inline-block;
    animation: marquee 10s linear infinite; 
    animation-delay: 0.5s;
    padding: 0%;
    margin: 0 auto;
    color: rgb(0, 255, 68);
    width: 100%;
    overflow: hidden;
  }
  @keyframes marquee {
    0% {
      transform: translate(100%, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }

  /* 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.10) 0px 0px 3px 3px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
  }
    
  /* Links inside the navbar */
  .navbar a {
    margin: 0;
    float: left;
    display: block;
    color: #aaa;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
  }
    
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #fff;
    color: #000;
  }

  .container1 {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 700px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  }

  .container2 {
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 700px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  font-size:20px;
  }

  .container3 {
  display: block;
  margin-top: 50px;
  margin-left: 0;
  margin-right: auto;
  position: relative;
  width: 400px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  }

  .row {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 700px;
  height: auto;
  padding: 20;
  }

  .indent50px {text-indent: 50px;
  }

	.bg_grey {
  	/* The image used */
  	background-color: #ccc;

  	/* Full height */
  	height: 100%; 

  	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	}

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

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

  .border-radius {
    overflow: hidden;
    display: inline-block;
    width: 300px;
    height: 300px;
    background: #666;
    margin: auto;
    padding: 0;
    border-radius: 50% 10% 50% 10%  ;
    box-shadow:rgba(0, 0, 0, 0.30) 5px 5px 10px 0px;
  }

  .pack-type {
    font-family: impact;
    font-size: 2em;
    color: #003b71!important;
    margin: 0;
  }

  body #contact-buttons-bar {
    top: 190px;
  }
}

@media (max-width: 768px) {
  body .container {width: 768px;}

  /* ตัวหนังสือวิ่ง */
  .marquee {
    position: fixed;
    white-space: nowrap;
    display: inline-block;
    animation: marquee 10s linear infinite; 
    animation-delay: 0.5s;
    padding: 0%;
    margin: 0 auto;
    color: rgb(0, 0, 255);
    width: 100%;
    overflow: hidden;
  }
  @keyframes marquee {
    0% {
      transform: translate(100%, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }

  /* 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.10) 0px 0px 3px 3px; /* เขียนอีกแบบ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
  }
    
  /* Links inside the navbar */
  .navbar a {
    margin: 0;
    float: left;
    display: block;
    color: #aaa;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
  }
    
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #fff;
    color: #000;
  }

  .container1 {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 768px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  }

  .container2 {
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 768px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  font-size:20px;
  }

  .container3 {
  display: block;
  margin-top: 50px;
  margin-left: 0;
  margin-right: auto;
  position: relative;
  width: 400px;
  height: auto;
  padding: 0;
  padding-right: 0px;
  padding-left: 0px;
  }

  .row {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 768px;
  height: auto;
  padding: 20;
  }

  .indent50px {text-indent: 50px;
  }

	.bg_grey {
  	/* The image used */
  	background-color: #ccc;

  	/* Full height */
  	height: 100%; 

  	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	}

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

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

  .border-radius {
    overflow: hidden;
    display: inline-block;
    width: 300px;
    height: 300px;
    background: #666;
    margin: auto;
    padding: 0;
    border-radius: 50% 10% 50% 10%  ;
    box-shadow:rgba(0, 0, 0, 0.30) 5px 5px 10px 0px;
  }

  .pack-type {
    font-family: impact;
    font-size: 2em;
    color: #003b71!important;
    margin: 0;
  }

  body #contact-buttons-bar {
    top: 190px;
  }
}