@font-face {
  font-family: 'Plex';
  src: url('/img/IBMPlexSansThaiLooped-Regular.eot');
  src: url('/img/IBMPlexSansThaiLooped-Regular.eot?#iefix') format('embedded-opentype'),
      url('/img/IBMPlexSansThaiLooped-Regular.woff2') format('woff2'),
      url('/img/IBMPlexSansThaiLooped-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Samson';
  src: url('/img/PSLSamsonExtraProBoldItalic.eot');
  src: url('/img/PSLSamsonExtraProBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('/img/PSLSamsonExtraProBoldItalic.woff2') format('woff2'),
      url('/img/PSLSamsonExtraProBoldItalic.woff') format('woff');
  font-weight: bold;  
  font-display: swap;
}
@font-face {
  font-family: 'City';
  src: url('/img/Cit-Bold.eot');
    src: url('/img/Cit-Bold.eot?#iefix') format('embedded-opentype'),
    url('/img/City-Bold.woff2') format('woff2'),
      url('/img/City-Bold.woff') format('woff');
  font-weight: bold;  
  font-display: swap;
}

*{font-family:'IBM Plex Sans', serif;font-style:normal;font-weight: 300;cursor:hand;}
.toplogo{height:108px;}  
.dexlogo{height:60px;}
.main2{padding-top:150px;padding-bottom:300px;}

body{background-color:#3caeed;background-image:url('/img/bg10.png');background-position : top;background-size: 100% auto;background-repeat: no-repeat;cursor:hand;}
.container{max-width:1000px;}
.bg-white1{background-color:rgba(255,255,255,0.75) ;}
.bg-white2{background-color:rgba(255,255,255,0.5) ;}
nav,h1,h2,h3,.packinfo, .unit, h2 span{font-family: 'Samson';}
.txtsamson{font-family: 'Samson';font-size:1.6rem;}
.packs-km{font-family: 'Prompt';font-weight:700 ;font-size:80px;width:33%;text-align: center;padding-top:12px;}
.packs-km.active{background-color: #f1cb3b;border-radius: 42px;color:#016aae;text-shadow: 0 0 10px #fff;}
.unit{font-size:1rem;}
.packs-info div.pack:hover{background:#f1cb3b;cursor:hand;}
.packs-info div.pack:hover .txtyellow{color:#ffffff;}
h1{font-size:80px;color:#016aae;text-shadow: 0px 0px 4px #ffffff;}
h2{font-size:50px;}
.txtblue{color:#016aae;}
.txtyellow{color:#f1cb3b;}
.bgblue{background-color: #121243;color:white;}
div.packs1 div.pack{border-radius:30px 0 0 30px; background: white;}
div.packs1 div.pack-name{border-radius: 30px;width:250px;}
div.packs1 div.pack-info{text-align: center;}
.txtyellow{color:#f1cb3b;}
.txtred{color:#ED1C24;text-shadow: 0 0 2px #ffffff;}
a, .nav-link, a:link, .nav-link.active {color:#121243;text-decoration:none;font-style:italic}
a.active{font-weight: 800;color:#121243!important}
footer{background-color: #121243;color:#fff;}
div.runner :first .fa-trash{display:none;}
.btn-primary, .btn-primary:hover{border-radius: 20px;height:40px;background:#f1cb3b;color:#121243;font-weight: 700;padding:0 30px;border-color: #f1cb3b;font-style: italic;  font-family: 'Samson';font-size:1.5rem;}

.btn-primary.active{color:#ffffff!important;}
.btn-secondary, .btn2{height:40px;border-radius: 20px;padding:0 20px;border-color:#f1cb3b;color:#f1cb3b;}
.btn3{background-color: #f1cb3b;color:#121243!important;}
.text-yellow{color:#f1cb3b;}
.navbar-toggler-icon{color:#121243!important}
.hometop{margin-top:15vw}
.form-control{margin-top:0px;margin-bottom: 10px;}
.hide{display:none;}
label{color:#888;font-size:0.8rem;margin:0}
option[value='']{color:#888;}
.cookie_setting{
  background-color: #121243;
}
.pdpa,.cookie_setting{
  padding:20px;
  background-color:rgba(18,18,67,0.9);color:white;
  
}

div.addon.hideTrash i.fa-trash{display:none;}
.result-photo{max-width:200px;}
div.packs-info div.pack{font-size:20pt;font-weight: bold;font-family: 'City';padding:0.5rem;}
.tb_wall_header__{display:none!important;}
.addonImg{max-width:100%}
.addonName{font-family:'Samson';font-size:32px;line-height: 1;min-height:100px;}
.addonPrice{font-family:'City';font-size:24px;color:#00aeed;}

.valid{color:green;}
.invalid{color:red;}
img.logo1{width:100%;}
img.ext2{width:350px;top:100px;right:0px;}
@media (max-width: 1024px) {
  div.packs-info div.pack{font-size:12pt;padding:0.5rem;}
}
@media (max-width: 820px) {
  div.packs-info div.pack{font-size:12pt;padding:0.5rem;}
}
@media (max-width: 450px) {
  .navbar-collapse{background-color: rgba(255,255,255,0.8);padding:20px;}
  .nav-item{margin:5px 0px;}
  h1{font-size:44px;}
  div.packs-info div.pack{font-size:11pt;padding:0.5rem;}
  .howto{margin:5px;}
  .navbar-brand img{max-height:auto;}
  .result-photo{max-width:120px;}
  .main2{padding-top:50px;}
  .footLogo{margin-top:40px!important;}
  .pdpa .btn{
    padding:0 5px;
    margin:0 5px;
  }
  .btCredit{padding-top:20px;}
  .iconGoTop{left:40%}
  
  img.ext2{width:50%;top:60px;right:0px;}
  img.logo1{width:50%;}
}