@charset "utf-8";
/* CSS Document */
.body {
  background: #ffffff;
}
/* container*/
.container {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
}
.header {
	align-content: center;
 	background: #ffffff;
}

.header h1 {
  font-size: 25px;
}
/* Style the top navigation bar */
.topnav {
  font-size: 14px;
  overflow: hidden;
  background-color: #ffffff;
}

/* Style the topnav links */

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Left column */
.leftcolumn { 
  width: 75%;
  float: left;
}
.leftcolumn p{
 font-size: 14px;
}
/* Right column */
.rightcolumn {
 float: right;
 width: 25%;
 background-color: #f1f1f1;
 padding: 5px;
 margin-top: 0px;
}
.rightcolumn p {
 font-size: 14px;
}
/* Fake image */
.columdivide{
	width: 50%;
	float: left;	
}
.fakeimg {
  background-color: #ffffff;
  align-content: center;
  width: 100%;
	margin-top: 20px;
}
/* Add a card effect for articles */
.container2{
  background-color: #ffffff;
  width: 30%;
  padding: 5px;
  margin: 5px;
  float: left
}
.container3{
  width: 35%;
  padding: 5px;
  margin: 5px;
  float:left;
  clear: both;
}
.box{
  background-color: #E5E5E5;
  width: 30%;
  margin: 2px;
  border: solid 1px #000;
  float: left;
}
.boxborder {
	border: solid 1px #000;
}
.box p{
	font-size: 14px;
	padding-left: 5px;
	margin-top: 5px;
}
.box img{
	border: solid 1px #000;
}
.box2{
  background-color:#132b87;
  padding: 5px;
  padding-left: 10px;
}
.box2 p{
	font-weight: 700;
	padding: 0px;
	margin-top: 5px;
}
.box3{
  background-color:#D3D3D3;
  padding: 5px;
  padding-left: 10px;
}
.box4{
  padding: 5px;
  padding-left: 10px;
}
.card {
  background-color: #ffffff;
  align-content: center;
  padding: 5px;
  margin-top: 5px;
}

/* Clear floats after the columns */
.row:after {
  content: ""; 
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 10px;
  font-family: 'sarabun', sans-serif;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  background: #132b87;
  margin-top: 10px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}