@import 'https://fonts.googleapis.com/css?family=Kanit|Prompt';
* {
box-sizing: border-box;
}
article {
    font-family: 'Kanit', Sans-Serif;
    }
td {
    font-family: 'Prompt', Sans-Serif;
    }
a, a:visited
{
    text-decoration:none;
    color:Blue;
}
a:hover 
{
    font-weight:bold;
}
.buttom {
    font-family: 'Prompt', Sans-Serif;
    }
.top {
  float:left;
  margin-top: 0px;
  width:100%;
  font-size:large;
  padding:15px;
}
.main {
  float:left;
  margin-top: 30px;
  width:75%;
  padding:0 20px;
  font-size:large;
}
.right {
  float:left;
  margin-top: 40px;
  width:25%;
  padding:15px;
  text-align:center;
  font-size:large;
}
.colp1,.colp2
{
  float:left;
  width:50%;
}
.colp3
{
  float:left;
  width:20%;
}
.colp4
{
  float:left;
  width:80%;
  height:auto;
}
.col1
{
  float:left;
  width:50%;
  padding: 10px 5px 0 5px;
  clear:left;
}
.col2
{
  float:left;
  width:50%;
  padding: 10px 5px 0 5px;
  font-size:large;
}
.column{
  float:left;
  width:50%;
  padding: 10px 5px 0 5px;
  max-height: 880px;
  height: auto;
}
.column-font{
  font-size: 18px;
  height: 60px;
  max-width: 550px;
}
.column-image-container{
  height: auto;
}
.column-image{
  border: 1px solid black;
  width: 100%;
  max-width: 550px;
  height: auto;
}
.clear
{
    clear:left;
}
@media only screen and (max-width:1200px) {
  .column-font{
    font-size: 16px;
  }
}
@media only screen and (max-width:1000px) {
  .column-font{
    font-size: 14px;
  }
}
@media only screen and (max-width:760px) {
  /* For mobile phones: */
.top
{
  margin-top:0px;
  width:100%;
  font-size:4vw;
}
.main {
  float:left;
  margin-top: 30px;
  width:75%;
  padding:0 20px;
  font-size:large;
}
.right {
  float:left;
  margin-top: 40px;
  width:25%;
  padding:15px;
  text-align:center;
  font-size:large;
}
.colp1,.colp2
{
  float:left;
  width:100%;
}
.colp3
{
  float:left;
  width:30%;
}
.colp4
{
  float:left;
  width:70%;
  height:auto;
}
.col1
{
  float:left;
  width:50%;
  padding: 15px 3px 0 3px;
}
.col2
{
  float:left;
  width:50%;
  padding: 0 3px 0 3px;
  font-size:3vw;
}
.column{
  width:100%;
}
.column-font{
  font-size: 18px;
}
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
.top, .main, .right 
{
  margin-top:0px;
  width:100%;
  font-size:4vw;
}
.colp1,.colp2
{
  float:left;
  width:100%;
}
.colp3small
{
  float:left;
  width:50%;
}
.colp3,.colp4
{
  float:left;
  width:100%;
  height:auto;
}
.col1
{
  float:left;
  width:100%;
  padding: 15px 3px 0 3px;
}

.col2
{
  float:left;
  width:100%;
  padding: 0 3px 0 3px;
  font-size:4vw;
}
}