* {
  box-sizing: border-box;
}
.div100 {
  width: 100%;
  height: auto;
}
.div100 img {
  width: 100%;
  height: auto;
}
.div20 {
  width: 20%;
  height: auto;
}
.div25 {
  width: 25%;
  height: auto;
}
.div30 {
  width: 30%;
  height: auto;
}
.div40 {
  width: 40%;
  height: auto;
}
.div50 {
  width: 50%;
  height: auto;
}
.div75 {
  width: 75%;
  height: auto;
}
.div80 {
  width: 80%;
  height: auto;
}
.divspace10 {
  width: 100%;
  height: 10px;
}
.divspace20 {
  width: 100%;
  height: 20px;
}
.divspace30 {
  width: 100%;
  height: 30px;
}
.divspace40 {
  width: 100%;
  height: 40px;
}
.divspace50 {
  width: 100%;
  height: 50px;
}
.divspace60 {
  width: 100%;
  height: 60px;
}
.divspace70 {
  width: 100%;
  height: 70px;
}
.divspace80 {
  width: 100%;
  height: 80px;
}
.divspace90 {
  width: 100%;
  height: 90px;
}
.divspace100 {
  width: 100%;
  height: 100px;
}
/*--- position --*/
.pp-1 {
  position: relative;
  top: 1px;
}
.pp-2 {
  position: relative;
  top: 2px;
}
.pp-3 {
  position: relative;
  top: 3px;
}
.pp-4 {
  position: relative;
  top: 4px;
}
.pp-5 {
  position: relative;
  top: 5px;
}
.pm-1 {
  position: relative;
  top: -1px;
}
.pm-2 {
  position: relative;
  top: -2px;
}
.pm-3 {
  position: relative;
  top: -3px;
}
.pm-4 {
  position: relative;
  top: -4px;
}
.pm-5 {
  position: relative;
  top: -5px;
}
/*--- link ---*/
.linkcursor {
  cursor: pointer;
}
/*--- square ---*/
.square-index {
	width: 100%;
	padding-bottom: 75%;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
}
.square {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
  border: 1px solid #DFE2E6;
}
.media {
	width: 100%;
	padding-bottom: 65%;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
  border: 1px solid #DFE2E6;
}
.squarebox50 {
  width: 50%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.squarebox33 {
  width: 33.33%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.squarebox25 {
  width: 25%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.roundbox {
  border-radius: 10px;
}
/*--- margin ---*/
.mtp-10 {
  margin-top: 10px;
}
.mtp-20 {
  margin-top: 20px;
}
.mtp-30 {
  margin-top: 30px;
}
.mtp-40 {
  margin-top: 40px;
}
.mtp-50 {
  margin-top: 50px;
}
/*--- header ---*/
#main-logo {
  width: auto;
  height: 80px;
}
.headerspace {
  padding-top: 140px;
}
.nfont a {
  font-size: 1.25em;
}
.sfont a {
  font-size: 1.1em;
  margin-top: 2px;
}
/*--- navigator ---*/
.navigator {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.375em;
  line-height: 1.5;
  font-weight: 400;
}
/*--- body ---*/
.margin-body {
  width: 100%;
  height: auto;
  min-height: 400px;
  margin-top: 150px;
  margin-bottom: 50px;
}
/*--- index.php ---*/
.top-left-round {
  border-top-left-radius: 25px;
}
.bottom-left-round {
  border-bottom-left-radius: 25px;
}
.top-right-round {
  border-top-right-radius: 25px;
}
.bottom-right-round {
  border-bottom-right-radius: 25px;
}
.bottombar {
  width: 100%;
  background: rgba(255,255,255,0.90);
  transition: background 0.90s ease;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  bottom: 0;
}
.bottombar-up {
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 600;
}
.bottombar-down {
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.2;
  font-weight: 200;
}
.topbar {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 10px;
}
.ads-header {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.375em;
  line-height: 1.5;
  font-weight: 400;
}
.ads-body {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 200;
}
#left-ads {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
#middle-ads {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
#right-ads {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
.product-headline {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
  margin-top: 10px;
  text-align: center;
}
.product-headline:hover {
  color: #124980;
}
#supplierbox {
  width: 53%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.supplier-headline {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
  margin-top: 5px;
  text-align: left;
}
.supplier-desc {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 200;
  margin-top: 5px;
  text-align: left;
}
.squareshape {
	width: 80px;
	height: 80px;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
  border: 1px solid #DFE2E6;
  float: right;
}
.bboxname {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  padding-right: 30px;
}
.bboxmessage {
  width: 80%;
  display: inline-block;
  vertical-align: top;
}
.bname {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 4em;
  line-height: 1.4;
  height: 100%;
  font-weight: 300;
  text-align: center;
  color: #ffffff;
}
.spacebox {
  padding-left: 20px;
  padding-right: 20px;
}
.circleshape {
	width: 60px;
  height: 60px;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 1px solid #DFE2E6;
  float: right;
}
.namebox {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  padding-right: 30px;
}
.messagebox {
  width: 75%;
  display: inline-block;
  vertical-align: top;
}
.fname {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  font-family: 'Kanit', sans-serif;
  font-size: 2.8em;
  line-height: 1.5;
  height: 100%;
  font-weight: 300;
  text-align: center;
  color: #ffffff;
}
.feed-headline {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
  margin-top: 3px;
  text-align: left;
}
.feed-desc {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1.125em;
  line-height: 1.5;
  font-weight: 200;
  margin-top: 5px;
  text-align: left;
  overflow-x: hidden;
}
.feed-desc p {
  margin-top: 5px;
}
.feed-date {
  width: 100%;
  color: #F97415;
  font-family: 'Kanit', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  font-weight: 200;
  margin-top: 15px;
  text-align: left;
}
.feed-image {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.feed-image img {
  width: 30%;
  height: auto;
  border: 1px solid #DFE2E6;
}
.preload {
  width: 25px;
  display: inline-block;
}
/*--- footer ---*/
.text-address-header {
  font-size: 1.125em;
  font-weight: bold;
  color: #ffffff;
}
.text-address {
  color: #a9a9a9;
}

/*--- Media Query --*/
@media (max-width: 1365px) {
  #supplierbox {
    width: 70%;
  }
}

@media (max-width: 1023px) {
  #right-ads {
    display: none;
  }
  #middle-ads {
    width: 70%;
  }
  #supplierbox {
    width: 70%;
  }
}

@media (max-width: 990px) {
  #right-ads {
    display: none;
  }
  #middle-ads {
    width: 90%;
  }
  #left-ads {
    display: none;
  }
  #supplierbox {
    width: 93%;
  }
}

@media (max-width: 768px) {
  .headerspace {
    padding-top: 80px;
  }
  .topbar {
    font-size: 1.1em;
  }
  .bottombar-up {
    font-size: 0.875em;
  }
  .bottombar-down {
    font-size: 0.875em;
  }
  #supplierbox {
    width: 90%;
  }
  .product-headline {
    font-size: 0.825em;
  }
  .spacebox {
    padding-left: 10px;
    padding-right: 10px;
  }
  .navigator {
    font-size: 1em;
  }
  .mtp-30 {
    margin-top: 20px;
  }
  .mtp-40 {
    margin-top: 30px;
  }
  .feed-headline {
    font-size: 1em;
  }
  .feed-desc {
    font-size: 1em;
    margin-top: 5px;
  }
  .feed-desc p {
    margin-top: 3px;
  }
  .circleshape {
  	width: 40px;
    height: 40px;
  }
  .namebox {
    width: 15%;
    padding-right: 15px;
  }
  .messagebox {
    width: 85%;
  }
  .fname {
    font-size: 1.9em;
  }
  .squareshape {
  	width: 40px;
    height: 40px;
  }
  .bboxname {
    width: 15%;
    padding-right: 15px;
  }
  .bboxmessage {
    width: 85%;
  }
  .bname {
    font-size: 1.9em;
  }
  .supplier-headline {
    font-size: 1em;
    margin-top: 0px;
  }
  .supplier-desc {
    font-size: 0.825em;
  }
}