/* ----------------------------------------------------------------
    TEMPLATE FONTS
-----------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Merriweather:300,300i);
@font-face {
    font-family: 'kanitmedium';
    src: url('../fonts/kanit-medium-webfont.woff2') format('woff2'),
         url('../fonts/kanit-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'kanitregular';
    src: url('../fonts/kanit-regular-webfont.woff2') format('woff2'),
         url('../fonts/kanit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'kanitextralight';
    src: url('../fonts/kanit-extralight-webfont.woff2') format('woff2'),
         url('../fonts/kanit-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
/* ----------------------------------------------------------------
    BODY
-----------------------------------------------------------------*/
body {padding: 0;margin:0; overflow-x: hidden;}
.img-responsive { margin: 0 auto;}
.center {margin:0 auto; text-align: center;}
.left {text-align: left;}

section.page--toplogo {
  width: 100%;
  float: left;
  height: auto;
  background:#fff;
}
section.page--toplogo img.logo {
  width:auto;
  float: left;
  text-align: left;
}
section.page--toplogo .boxTR {
  float: right;
  padding:10px 0;
}
section.page--toplogo .boxTR ul {
  width: 100%;
  margin:0;
  display:inline-block;
  justify-content: center!important;
  list-style: none;
  padding: 10px 15px; 
  float: left; 
}
section.page--toplogo .boxTR ul li {
  width: 100%;
  float: left;
  padding:5px 0;
  margin:5px;
}
section.page--toplogo .boxTR ul li img {
  width:54px;
  text-align: center;
  margin:5px 0;
  float: left;
  margin-top: -1%;
}
section.page--toplogo .boxTR ul li p.topic {
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 22px;
  text-align: left;
  margin:0 auto;
  color: #c1001f;
  line-height: 1.3;
  font-weight: normal;
  margin:0;  
  text-transform: uppercase;
  padding-left: 50px;
}
section.page--toplogo .boxTR ul li p {
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 18px;
  text-align: left;
  margin:0 auto;
  color: #353535;
  line-height: 1.3;
  font-weight: normal;
  margin:0; 
  padding-left: 50px; 
}
section.page--toplogo .boxTR ul li p a,
section.page--toplogo .boxTR ul li p a:hover {color:#353535;text-decoration: none;}

/*header*/
section.page--tssupplyandengineering.header {
    background-image: url(../images/bg-header.jpg);
    background-position:center;
    background-repeat: no-repeat;
    height: auto;
    max-height: 492px;
    padding:0;
    overflow: hidden;
    background-size: cover;
    width: 100%;
    float: left;
}
section.page--tssupplyandengineering.header h1{
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 7rem;
  text-align:left;
  padding:4%;
  color: #fff;
  line-height: 0.6;
  font-weight: normal; 
  background: rgba(15, 18, 103, .66); 
  margin:13% 0;
  width:fit-content; 
  text-transform: uppercase;
}
section.page--tssupplyandengineering.header h1 span{font-size:34px;}

/*contact*/
section.page--contact{
  width: 100%;
  float: left;
  height: auto;
  padding:10px 0;
}
section.page--contact ul {
  width: 100%;
  margin:0 auto;
  display:flex;
  justify-content: center!important;
  list-style: none;
  padding: 10px 15px;  
}
section.page--contact ul li {
  width: 50%;
  float: left;
  background:#2e3192;
  text-align: center;
  padding:15px;
  margin:5px;
}
section.page--contact ul li img {
  width:auto;
  text-align: left;
  float: left;
  margin-top:-1%;
  margin-right: 10px;
}
section.page--contact ul li p.topic {
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 22px;
  text-align: left;
  margin:0 auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  margin:5px 0;  
  text-transform: uppercase;
  margin-left: 5%;
}
section.page--contact ul li p {
  font-family: "kanitextralight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 22px;
  text-align: left;
  margin:0 auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  margin:5px 0; 
  margin-left: 5%;
}
section.page--contact ul li p a,
section.page--contact ul li p a:hover {color:#fff; text-decoration: none;}

/*about*/
section.page--about {
    width: 100%;
    float: left;
    height: auto;
    padding:40px 0;
}
section.page--about h1{
  font-family: "kanitmedium", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 4rem;
  text-align: center;
  margin:5px auto;
  color: #2e3192;
  line-height: 1.2;
  padding:0 0 3% 0;
  text-transform: uppercase;
}
section.page--about h2{
  font-family: "kanitmedium", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 4rem;
  text-align: center;
  margin:5px auto;
  color: #2e3192;
  line-height: 1.4;
  padding:2% 0;
  text-transform: uppercase;
  width: 100%;
  float: left;
}
section.page--about .boxall {
  width: 100%;
  float: left;
  vertical-align: top;
}
section.page--about .boxall .boxL{
  width: 50%;
  float: left;
  height: 500px;
  padding:4% 2%;
  background:#2e3192;
}
section.page--about .boxall .boxL ul {
  width: 90%;
  margin:0 auto;
  display:inline-block;
  justify-content: center!important;
  list-style: none;
  padding: 10px 15px;  
  float: right;
}
section.page--about .boxall .boxL ul li {
  width: 100%;
  float: left;
  text-align: left;
  padding:0;
  margin:10px 0;
  float: left;
}
section.page--about .boxall .boxL ul li img {
  width:54px;
  text-align: left;
  float: left;
}
section.page--about .boxall .boxL ul li p{
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 28px;
  text-align: left;
  margin:0 auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  margin:0;
  margin-left: 10%;
}
section.page--about .boxall .boxR{
  background-image: url(../images/img-about.jpg);
  background-position:center;
  background-repeat: no-repeat;
  height: 500px;
  max-height: 500px;
  padding:0;
  overflow: hidden;
  background-size: cover;
  width: 50%;
  float: right;
}

/*services*/
section.page--services {
    width: 100%;
    float: left;
    height: auto;
    padding-bottom: 40px;
}
section.page--services ul {
  width: 100%;
  margin:0 auto;
  display:inline-block;
  justify-content: center!important;
  list-style: none;
  padding: 10px 15px;  
}
section.page--services ul li {
  width: 25%;
  float: left;
  border:5px #fff solid;
}
section.page--services ul li.gray{background:#f5f5f5;}
section.page--services ul li img {
  width:auto;
  text-align: center;
  margin:5px auto;
  position: relative;
  margin-bottom: 5%;
}

/*footer*/
section.page--footer {
    height: auto;
    width: 100%;
    padding:40px 0 0 0;
    overflow: hidden;
    background:#262981;
}
section.page--footer h1{
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 35px;
  text-align: center;
  margin:0 auto 2% auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
}
section.page--footer p {
  font-family: "kanitextralight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 24px;
  text-align: center;
  margin:5px auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
}
section.page--footer ul {
  width: 90%;
  margin:2% auto;
  display:flex;
  justify-content: center!important;
  list-style: none;
  padding: 10px 15px;
}
section.page--footer ul li {
  width: 33.33%;
  float: left;
}
section.page--footer ul li p {
  font-family: "kanitextralight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 20px;
  text-align:left;
  margin:5px auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  margin-left: 50px;
}
section.page--footer ul li p a,
section.page--footer ul li p a:hover {color: #fff;text-decoration: none;}
section.page--footer ul li p.topic {
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 20px;
  text-align:left;
  margin:5px auto;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  text-transform: uppercase;
  margin-left: 60px;
}
section.page--footer ul li img {
  width:64px;
  text-align: left;
  float: left;
  position: relative;
  margin-right: 10px;
}
section.page--footer .copyright{
  width: 100%;float: left;
  background:#1f226e;
  padding: 10px 15px;
}
section.page--footer .copyright p {
  font-family: "kanitregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 13px;
  text-align: center;
  margin:0 auto;
  color: #cacaca;
  line-height: 1.3;
  font-weight: normal;
  text-transform:uppercase;
  margin:10px 0;  
}
section.page--footer .copyright p span {color:#cacaca;}
.visible-600 {display: none;}
@media (max-width: 1366px) {
  section.page--footer ul {width: 100%;}
}
@media (max-width: 1024px) {
  section.page--footer ul li p {font-size: 14px;} 
  section.page--about .boxall .boxL ul {width: 100%;}
  section.page--about .boxall .boxL ul li p {margin-left: 12%;}
  section.page--contact ul {padding:0;}
  section.page--contact ul li p {font-size: 18px;}
  section.page--toplogo img.logo {width: 30%;}
}
@media (max-width: 800px) {
  section.page--contact ul {display: inline-block;}
  section.page--contact ul li {width: 100%;}
  section.page--about .boxall .boxL ul li p {font-size: 22px;}
  section.page--about .boxall .boxL ul li img {width: 34px;}
  section.page--about .boxall .boxR {min-height: auto;}
  section.page--about .boxall .boxR,
  section.page--about .boxall .boxL {height: 380px;}
  section.page--about h2 {padding:2% 15px;font-size: 32px;}
  section.page--footer h1 {font-size:30px;}
  section.page--footer p br {display: none;}
  section.page--footer ul {display: inline-block;}
  section.page--footer ul li {width: 100%;float: left;}
  section.page--contact ul li {margin:5px 0;}
}
@media (max-width: 600px) {
  section.page--about h2 br,
  section.page--toplogo .boxTR {display: none;}
  section.page--toplogo img.logo {width: auto;text-align: center;float: none;margin:0 auto;}
  section.page--toplogo .boxTR {width: 100%;float: none;margin:0 auto;}
  section.page--toplogo .boxTR ul {display: flex;width: 60%;margin: 0 auto;float: none;padding:0;}
  section.page--tssupplyandengineering.header h1 {text-align: center;width: 100%;font-size: 5rem;line-height: 0.9;}
  section.page--tssupplyandengineering.header h1 span {font-size:32px;}
  section.page--about .boxall .boxR {width: 100%;height: 300px;}
  section.page--about .boxall .boxL {width: 100%;height: auto;}
  section.page--about h2 {font-size: 26px;}
  section.page--footer h1 {font-size: 20px;}
  section.page--footer p,
  section.page--footer ul li p {font-size: 16px;}
  section.page--footer ul li img {width: 54px;}
  section.page--about {padding-top:20px;}
  .visible-600 {display: inline-block;}
  section.page--services ul li {width: 50%;}
}
@media (max-width: 414px) {
  section.page--tssupplyandengineering.header h1,
  section.page--about h1 {font-size: 30px;}
  section.page--tssupplyandengineering.header h1 span {font-size: 18px;}
  section.page--contact ul li img {width: 44px;}
  section.page--about .boxall .boxL ul li p {font-size:16px;margin-left: 8%;}
  section.page--about .boxall .boxL ul li img {width: 24px;}
  section.page--about .boxall .boxR {height: 200px;}
  section.page--about h2 {font-size:18px;}
  section.page--services {padding-bottom: 10px;}
  section.page--footer h1 {font-size: 16px;}
  section.page--services ul li {width: 100%;}
}
@media (max-width: 384px) {
  section.page--contact ul li img,
  section.page--footer ul li img{
    float: none;
    text-align: center;
    margin: 0 auto;
    width: 54px;
  }
  section.page--contact ul li p.topic,
  section.page--contact ul li p,
  section.page--footer ul li p.topic,
  section.page--footer ul li p {text-align: center;margin-left: 0;}
  section.page--footer ul li {margin-bottom: 10px;}
  section.page--footer h1{font-size: 12px;}
}