@font-face {
  font-family: 'DBHelvethaicaX-55Regular';
  src: url('../fonts/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/DBHelvethaicaX-55Regular.woff') format('woff'), url('../fonts/DBHelvethaicaX-55Regular.ttf')  format('truetype'), url('../fonts/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 20px;

  @media screen and (min-width: 900px) {
    font-size: 20px;
  }

  @media screen and (min-width: 1200px) {
    font-size: 22px;
  }
}


body {
  font-family: "DBHelvethaicaX-55Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #231F20;
  background-color: #f5f3e9;
}


.lightbrown{color: #dabf82;}
.darkbrown{color: #6E4F27;}
.orange{color: #f3b019;}
.lightgreen{color: #B1C565;}
.darkgreen{color: #006241;}
.lightblue{color: #9acae8;}
.blue{color: #009ddb;}
.darkgrey{color: #6D6E71;}
.grey{color: #919296;}
.magenta{color: #c5204b;}
.dark{color: #231F20;}

.lightbrownBG{background-color: #dabf82;}
.orangeBG{background-color: #f3b019;}
.lightgreenBG{background-color: #cbcbcb; color:#393939;}
.darkgreenBG{background-color: #969494; color:#393939;}
.lightblueBG{background-color: #9acae8;}
.blueBG{background-color: #009ddb; color:white;}
.greyBG{color: #919296;}
.BG{background-color: #f5f3e9;}
.magentaBG{background-color: #c5204b; color:white;}


/* -  -  -  -  -  -  -  -  -  -  -  -  -  - Structure -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
  .block-page { width: 960px; margin: auto; }
@media screen and (max-width:1099px) {
  .block-page { width: 100%;}
}

.bar-shadow { box-shadow: -3px 2px 30px 0 rgba(0, 0, 0, .4); height: 10px; position: fixed; width: 100%; top: -10px; z-index: 1031; }

.btn{border-radius: 0; border:0;}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - header -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
  #logo-wrapper{padding-top:10px; height:120px; transition: all 0.3s; 
	background: rgb(190,190,190);
	background: radial-gradient(circle, rgba(190,190,190,1) 0%, rgba(146,146,146,1) 70%, rgba(100,100,100,1) 100%);
}
  #logo-wrapper.animate{padding-top:0; height:60px; }

  #logo{width:180px; height:auto; transform: scale(1);transition: all 0.3s;}
  #logo.animate {transform: scale(0.5); margin-top:-23px; }

  .light-blue.lighten-4 { background-color: #ddd3b2 !important; }
@media screen and (max-width:768px) {
  #logo{width:150px; height:auto}
  .endnav, .nav-category {display:none;}
}

  #position-guide{position: absolute; width: 512px;height: 10px;left: 50%;top: 0;}
  #login-container{position:absolute; top:0; right:0;}
  #login-container #login{
  	border-radius:0; background-color:#f5f3e9; color:#006241; border: solid 1px #006241;
  	display:inline-block; vertical-align: bottom; margin-bottom: 1.6rem; padding: 0rem 0.3rem; transition: all 0.3s;
  }
@media screen and (min-width:767px) {
  #login-container #login.animate{margin-bottom: 2rem;}
}
@media screen and (max-width:768px) {
  #login-container{right:82px; width:126px;}
  #login-container #login{display:none;}
}

  #login-container #register{
    display: inline-block; height: 120px; width: 170px; background-size: contain;
    padding-top: 1rem; padding-left: 0.8rem; margin-top: 0; transition: all 0.3s;
  }
  #login-container #register a{color: #7D5A30;}
@media screen and (min-width:767px) {
   #login-container #register.animate{transform: scale(0.6); margin-top: -1.7rem;}
}
@media screen and (max-width:768px) {
  #login-container #register{margin-top: -0.7rem; width:124px;}
  #login-container #register img{width:100px;}
}

  #navbar-container{ border-top:1px solid #cbcbcb; border-bottom:1px solid #858383;}
  #navbar-container .nav * {}
  #navbar-container .nav .nav-link{padding: .3rem 1rem; color: #6D6E71; font-size: 1.2rem;  transition: all 0.3s;}
  #navbar-container .nav .animate{padding: 0rem 1rem; font-size: 1rem;}
  .m11, .m22, .m33, .m44, .m55{border-bottom:4px solid #006241;}

@media screen and (max-width:768px) {
  #navbar-container .nav * { /* font-size: 14px; */}
}

  .gap{padding-top:170px;}
@media screen and (max-width:768px) {
  .gap{padding-top:50px;}
}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - Footer -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
  #footer-container *:not(.fab):not(.fas) { /* font-size: 14px; */ }
  #footer-container {margin-top:3rem; position: relative; }
  #footer-container #subscribe{margin-top:0.5rem; margin-bottom:0.5rem; color:#404041;}
  #footer-container #subscribe form{padding: 1.5rem 0;}
  #footer-container #social *{color: #231F20;font-weight:bolder;}
  #footer-container #sitemap a{color: #231F20; font-weight:bolder;}

  .show_scrolltoTop { bottom: 18px !important; }
  #scrolltoTop {
      position: fixed; right: 32px; z-index: 1000; bottom: -100px; width: 43px; height: 39px;
      text-align: center; line-height: 27px; font-size: xx-large; background: rgba(220, 105, 0, 0.86);
      color: #FFFFFF; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px;
      cursor: pointer; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;
  }
  .hide_scrolltop{ display:none; }
  .error{color:#FF0000;}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - Customized -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
/* Category Navigation */
  #category-nav{padding:0.9rem 1rem; background:rgba(255,255,255,.8); border-left:1px solid #efece3; margin-top:-0.7rem; position:relative;opacity:1; box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .4);}
  #category-nav .nav-link{font-size:1.4rem; color:#6D6E71; padding: 0.1rem; border-radius:0;}
  #category-nav .active, .B11, .B22, .B33, .B44{background-color:#006241; color:white !important;}
  #category-nav .nav-fill .nav-item {padding: 0 2rem; border-right: solid 1px #B9BBBD;}
@media screen and (max-width:768px) { /* tablet */
  #category-nav .nav-fill .nav-item {border-right: 0}
}
  #category-nav .nav-fill .nav-item:last-child{border-right: 0;}


/* Block Card */
  .card .btn{position: absolute; right: 0; left: 0; width: 6.5rem; margin: 0rem auto; border-radius:0; padding:0 0;}
  .card .btn-primary{background-color: #B1C565; border-color: #B1C565; }
  .card .btn-primary:hover{background-color: #006241; border-color: #006241; }
  .card .btn-primary:focus{background-color: #dabf82; border-color: #dabf82; }

  .card-img-top {border-top-left-radius: 0;  border-top-right-radius: 0;}
  .card-title{min-height:2.4rem; text-align:center;}
  .card{border-radius:0;}
  .card-body{padding:0.7rem;}
  .pin{height:auto; padding-top:3rem;}

/* pageNav */
  .pageNav{margin:3rem auto 0;}
  .pageNav>li {display: inline;}
  .pageNav>li>a{ position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #231F20; text-decoration: none; }
  .pageNav>li>a.active{ font-weight: bold; }

/* TAG */
  #tag-container{background-color: white; border: 1px solid #DDDDDD;}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - vproduct -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
  #product-container{min-height: 600px;position: relative;background-color: rgba(255,255,255,0.8);box-shadow: 4px 3px 6px #666666;border-radius: 3px 3px;}
  #product-container .block-item{min-height: 100px;}
  #product-container .caption div:first-child{margin-bottom:0.1rem;}
@media screen and (min-width:769px) { /* Desktop */
  #product-container{padding: 3rem;}
  .ico-inst{width:75%;}
}
@media screen and (max-width:768px) { /* tablet */
  #product-container{padding: 1rem;}
  .ico-inst{width:140%;}
}
  #productModal .phone{ border: 1px solid green;
      box-shadow: 1px 1px 1px #AAA;
      display: inline-block;
      padding: 5px 6px;
      float: left;
  	position:relative
  	}
  #productModal .phone .label{
  	position: absolute;
      top: -5px;
      font-size: 0.7rem;
      left: 3px;
  	}
  #productModal .line{    width: 125px;
      float: right;}
  #productModal .img-thumbnail{box-shadow:2px 2px 5px #AAA;}
  #productModal .order_wrapper{width:255px; margin:auto; padding-bottom:100px;}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - vstory -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
  .parallax-window{margin-top:-10px;}
  .wrapper{padding-left: 16%; padding-top: 50px;}
  .wfirst{padding-top: 70px;}
@media screen and (max-width:768px) {
  .wrapper{padding-left: 6%;}
}
@media screen and (max-width:480px) {
  .wrapper{padding-top:15px;padding-left: 2%;}
  .wfirst{padding-top: 20px;}
  .h2{font-size:1.4rem;}
  .h4{font-size:1.1rem;}
}

/* -  -  -  -  -  -  -  -  -  -  -  -  -  - register -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
	#frmRegister label{text-align:right;}
	#frmRegister .note{position:absolute;top: 55px;right: 67px;line-height: 1;}
	#frmRegister .bracket{position:absolute; top:50px; right:200px;}
	#frmRegister .note-inline{display:none;}
@media screen and (max-width:768px) {
	#frmRegister .note{top: 50px; right: 20px;}
	#frmRegister .bracket{top: 45px; right: 150px;}
}
@media screen and (max-width:480px) {
	#frmRegister label{text-align:left;}
	#frmRegister .note{display:none;}
	#frmRegister .bracket{display:none;}
	#frmRegister .note-inline{display:block;}
}
/* -  -  -  -  -  -  -  -  -  -  -  -  -  - content -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
/* #content-container a{color: #231F20 !important;} */