/*
Theme Name: Healthy Living
Author: Donjai Media Plus
Author URI: http://donjaimediaplus.com/
Version: 1.0
*/
/* CUSTOM NORMALIZE
---------------------------------------*/
@import url(../../fonts/font-awesome/css/font-awesome.min.css);
html {
  font-family: sans-serif;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

a {
  background: transparent; }

a:active, a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], html input[disabled] {
  cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*::-webkit-input-placeholder, *:-moz-placeholder, *::-moz-placeholder, *:-ms-input-placeholder {
  color: #ccc; }

input:focus, textarea:focus {
  outline: none; }

select[multiple], select[size] {
  height: auto;
  width: 100%; }

a:focus {
  outline: 0 !important;
  text-decoration: none; }

ul, ol, li, p {
  margin: 0;
  padding: 0; }

body {
  text-rendering: optimizeLegibility; }

@-moz-document url-prefix() {
  fieldset {
    display: table-cell; } }
select {
  -webkit-appearance: none; }

/* VARIABLES
---------------------------------------*/
/* MIXINS
---------------------------------------*/
/* FONTS
---------------------------------------*/


@font-face {
  font-family: 'Anuyart';
  src: url("../../fonts/Anuyart-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal; }
@font-face {
    font-family: 'IBMPlexSansThaiLooped-Bold';
    src: url("../../fonts/IBMPlexSansThaiLooped-Bold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-ExtraLight';
    src: url("../../fonts/IBMPlexSansThaiLooped-ExtraLight.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-Light';
    src: url("../../fonts/IBMPlexSansThaiLooped-Light.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-Medium';
    src: url("../../fonts/IBMPlexSansThaiLooped-Medium.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-Regular';
    src: url("../../fonts/IBMPlexSansThaiLooped-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-SemiBold';
    src: url("../../fonts/IBMPlexSansThaiLooped-SemiBold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansThaiLooped-Thin';
    src: url("../../fonts/IBMPlexSansThaiLooped-Thin.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
  font-family: 'sukhumvit_setbold';
  src: url("../../fonts/sukhumvit/sukhumvitset-bold.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-bold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'sukhumvit_setlight';
  src: url("../../fonts/sukhumvit/sukhumvitset-light.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-light.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'sukhumvit_setmedium';
  src: url("../../fonts/sukhumvit/sukhumvitset-medium.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-medium.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'sukhumvit_setsemi_bold';
  src: url("../../fonts/sukhumvit/sukhumvitset-semibold.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'sukhumvit_settext';
  src: url("../../fonts/sukhumvit/sukhumvitset-text.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-text.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'sukhumvit_setthin';
  src: url("../../fonts/sukhumvit/sukhumvitset-thin.woff2") format("woff2"), url("../../fonts/sukhumvit/sukhumvitset-thin.woff") format("woff");
  font-weight: normal;
  font-style: normal; }*/
/* TYPO
---------------------------------------*/
html {
  font-size: 62.5%; }

body {
  font-size: 1.5rem; /*1.4em;*/ }

h1, h2, h3, h4, h5, h6 {
  color: #fff;
  /*font-family: "sukhumvit_setlight", Helvetica, Arial, sans-serif;*/
  line-height: 1.3;
  margin: 0; }

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.7em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.3em; }

h5 {
  font-size: 1.1em; }

h6 {
  font-size: 1em; }

ol, li, p {
  color: #8ab8d6;
  /*font-family: "sukhumvit_setlight", Helvetica, Arial, sans-serif;*/
  line-height: 1.4; }

p, ul {
  margin-bottom: 15px; }

a {
  color: #d4df4d; }
  a:hover, a:focus {
    text-decoration: none; }

hr {
  background-color: none;
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  clear: both;
  height: 1px;
  margin: 0 15px 40px;
  padding-top: 30px; }

.top {
  font-size: 10px;
  font-size: 1rem; }

.header {
  font-size: 14px;
  font-size: 1.4rem; }

.searchbox {
  font-size: 13px;
  font-size: 1.3rem; }

.main-nav {
  font-size: 14px;
  font-size: 1.4rem; }

.mobile-nav {
  font-size: 15px;
  font-size: 1.5rem; }

.main {
  font-size: 15px;
  font-size: 1.5rem; }

.feed {
  font-size: 15px;
  font-size: 1.5rem; }

.privilege-feed {
  font-size: 16px;
  font-size: 1.6rem; }

.detail {
  font-size: 15px;
  font-size: 1.5rem; }

.related {
  font-size: 15px;
  font-size: 1.5rem; }

.footer {
  font-size: 12px;
  font-size: 1.2rem; }

.page {
  font-size: 15px;
  font-size: 1.5rem; }

.register-form {
  font-size: 22px;
  font-size: 2.2rem; }

.modal {
  font-size: 17px;
  font-size: 1.7rem; }

.editor-term {
  font-size: 16px;
  font-size: 1.6rem; }

.page .editor-term {
  font-size: 15px;
  font-size: 1.5rem; }

.page .editor-privacy {
  font-size: 15px;
  font-size: 1.5rem; }

.modal-alert {
  font-size: 20px;
  font-size: 2rem; }

.modal-getpoints {
  font-size: 15px;
  font-size: 1.5rem; }

.modal-confirm {
  font-size: 17px;
  font-size: 1.7rem; }

.modal-redeem {
  font-size: 15px;
  font-size: 1.5rem; }

.help {
  font-size: 15px;
  font-size: 1.5rem; }

.profile {
  font-size: 15px;
  font-size: 1.5rem; }

.purchase {
  font-size: 15px;
  font-size: 1.5rem; }

.accordion {
  font-size: 15px;
  font-size: 1.5rem; }

 
/* TYPO
---------------------------------------*/
html {
  font-size: 62.5%; 
  /*font-size:90%;*/
}

body {
    font-size: 1.4em;
    font-family: "IBMPlexSansThaiLooped-Regular", "Anuyart", 'sukhumvit_settext', 'Arial', sans-serif, arial
}

html, p, a, input, button, li > a, .lang > li > a, .entry .date, .selectric-items ul, .selectric-items li {
    font-family: "IBMPlexSansThaiLooped-Regular","Anuyart", 'sukhumvit_settext', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
    /* bold font */
    font-family: "IBMPlexSansThaiLooped-Regular", "Anuyart", 'sukhumvit_setmedium', Arial, sans-serif !important; font-weight:normal;
    /*letter-spacing:1px !important;*/
}
 
h1 {
  font-size: 1.3em;
}

h2 {
  font-size: 1.2em;
}

h3 {
  font-size: 1.1em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9em;
}

h6 {
  font-size: 0.8em;
}

ol, li, p {
  color: #808080;
  line-height: 1.4;
}

a {
  color: #0062c4;
}
a:hover, a:focus {
  color: #007cf7;
  text-decoration: none;
}
 
.header {
  font-size: 12px;
  font-size: 1.2rem;
}

.mainnav {
  font-size: 15px;
  font-size: 1.5rem;
}

.footer {
  font-size: 13px;
  font-size: 1.3rem;
}
 
/* 5 columns layout with Twitter Bootstrap */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.col-xs-30,
.col-sm-30,
.col-md-30,
.col-lg-30 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-30 {
    width: 35%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-30 {
        width: 35%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-30 {
        width: 35%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-30 {
        width: 35%;
        float: left;
    }
}

/* GENERAL
---------------------------------------*/
 
body.register, body.alert {
  background-image: none; 
}

#pagewrap
{ 
    padding-bottom: 61px;
}


/*bottom */

ul.partner_list li, .bottom_bar li
{
    list-style:none;
    float:left;
    display:block;
}
.footer
{
    position:fixed;
    bottom:0px; 
    padding-top:10px;
    width: 100%;
    z-index: -1;/*100;*/
    padding-bottom: 10px;
}
.content_footer
{
    margin:0 auto;
    width:460px;
}
.power-logo
{
    background:url('../../img/Footer/Powered by@3x.png') no-repeat center center;
    width: 125px;
    height: 40px;
    background-size: 100%;
    text-indent: -9999px;
    margin: 0 auto;
}

.icon_grid
{  
    width: 50px;
    height: 50px;
    background-size: 100%; 
}
.partners
{
    font-size:1.2em;
    float: left;
    padding-right: 30px;
    line-height: 40px;
    
}
.partner_list
{
    float:left;
    margin-bottom: 0px;
}
.partner_list li a div
{ 
    width: 40px;
    height: 40px;
    background-size: 100%;
    text-indent: -9999px;

    margin-right:5px;
}
.enfa
{ 
    background:url(../../img/Footer/partner-mj.png) no-repeat center center;
} 
.ptt
{ 
    background:url(../../img/Footer/partner-ptt.png) no-repeat center center;
} 
.axa
{
    background:url(../../img/Footer/partner-axa.png) no-repeat center center;
}
.k-bank 
{ 
    background:url(../../img/Footer/partner-kbank.png) no-repeat center center;
} 
.galaxy_gift
{
    background:url(../../img/Footer/partner-gift.png) no-repeat center center; 
} 
.galaxy_rewards
{ 
    background:url(../../img/Footer/partner-rewards.png) no-repeat center center;
} 
.sol
{
    background:url(../../img/Footer/partner-sol.png) no-repeat center center; 
}

@media (max-width: 768px) {
    .partner_list li a div {
        width: 25px;
        height: 25px;
    }
    .bzb_logo, .the1card_logo
    {
        width:90px;
    }
    .partner_list
    { 
        padding-top: 7px;
    }
}

@media only screen and (max-device-width: 480px) {

    .partners {
        font-size: 1em;
        float: left;
        padding-right: 10px;
        line-height: 30px;
        padding-left:5px;
    }
    .partner_list li a div
    { 
        width: 20px;
        height: 20px;
    }
    .footer
    {
        padding:5px 0px;
    }
    .partner_list
    { 
        padding-top: 5px;
    }

    .bzb_logo, .the1card_logo
    {
        /*width:75px;
        position: relative;*/
        width: 65px;
        /*position: absolute;
        top: 2px;*/
    }
    
    .content_footer
    {
        margin:0 auto;
        width:440px;
    }
} 

.hidden{
    display:none !important;
}


/* poopup */

.ok_btn
{ 
    background: #f07323;
    color:#fff;
}

.modal-header {
    text-align: center;
    justify-content: center;
}

.modal-error-text
{
    font-size:0.9em;
    text-align:center;
    color: #999999;
}

.modal.in .modal-dialog, .modal.show .modal-dialog {
    -webkit-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    transform: translate(0,50%);
}

#modal-error .modal-footer
{
    text-align:center;
}

#modal-error .ok_btn
{
    margin:0 auto;
}
.modal-body
{ 
    padding: 40px 20px;
}

/* loading */
.backdrop
{
    background:#000;
    opacity:0.5;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 600;
    position:fixed;
    display:none;
}
.bg_loading.alpha_loading
{ 
    background:transparent;
    display:none;
}

.bg_loading.alpha_loading .main_logo
{
    background: url(../../img/Home/logo.png) no-repeat center center;
    background-size:100%;   
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    width: 206px;
    height: 74px;
    padding-top: 100px;
}
.bg_loading.alpha_loading .loading_message
{
    padding:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.bg_loading.alpha_loading .loading_text
{ 
    padding: 20px;
}

.load_wrapper
{
    margin:0 auto;
    margin-top: 15%;
    width: 300px;
    background-color: #fff; 
}
.bg_loading
{
    position:fixed;
    background-color: #333333;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-size: 100%;
    display:block;
}

.main_logo
{
    background:url(../../img/Home/icon_loading.png) no-repeat center center;
    width:250px;
    height:500px;
    background-size: cover; 
    margin:0 auto;
}

@media only screen and (max-width: 767px) {
    
    .main_logo
    {
        margin-top: 40%;
    }
} 


.loading_message
{ 
    width: 300px;
    text-align: center;
    margin: 0 auto;
}
.loading_icons
{ 
    width: 107px;
    text-align: center;
    margin: 0 auto;
}
.loading_icon 
{
    background:url(../../img/loading/load-grey.png) no-repeat center center;
    width:10px;
    height:15px;
    background-size:100%;
    float: left;
    display: inline-block;
    margin-right: 10px;
    -webkit-transition: width 0.3s; /* Safari */
    transition: width 0.3s;
}
.loading_icon.active 
{
    background:url(../../img/loading/load-orange.png) no-repeat center center;
    width:11px;
    height:15px;
    background-size:100%;
    float: left;
    display: inline-block;
    margin-right: 10px;
    -webkit-transition: width 0.3s; /* Safari */
    transition: width 0.3s;
}

.bzbs_logo_wrapper
{ 
    position:absolute;
    margin: 0 auto; 
    width: 100%;
    bottom: 0;
}
.bzbs_logo
{ 
    background:url(../../img/loading/logo-bzbs.png) no-repeat center center;
    width:120px;
    height:53px;
    background-size:100%;
    bottom:10px; 
    position: absolute;
}

.loading_text
{
    font-size:1.4em;    
    color:#b1b1b1;
}

#preloaded-images
{
    display:none;
}

/* popup */
.ok_btn, .btn_close, .confirm_ok_btn, .cancel_btn { 
    
    margin-top: 20px;
    width: 200px;
    display: block;
    padding: 6px;
    /*margin: 0 auto;*/ 
    color: #ffffff;
    font-size: 1.2em;
    /*margin: 5px auto;*/

    background:#f07323 url(../../img/login/btn-inactive.png) no-repeat center center; 
}
.ok_btn:hover, .btn_close:hover  {
    background:#f07323 url(../../img/login/btn-active.png) no-repeat center center; 
}

.modal-header
{ 
    background:#f07323 url(../../img/login/btn-inactive.png) no-repeat center center; 
    width:100%;
    background-size:100%;
    color:#ffffff;
}

.confirm_ok_btn
{
    width:145px;
    float:left;
    font-size: 1.2em;
}
.cancel_btn 
{
    color:#f07323;
    background:#ffffff;
    width:145px;
    float: left;
    margin-right: 10px;
    border:1px solid #ccc;
    font-size: 1.2em;
}

.modal-body
{
    text-align:center;
    justify-content: center !important;
} 

.modal-footer > div
{
    /*width:330px;*/
    margin:0 auto;
    display: flex;
    justify-content:center;
}


#modalRedeem .btn_close, #modalStamp .btn_close, #modalPayment .btn_close, #modalqrCode .btn_close, #modalCheckcode .btn_close
{ 
    margin: 0 auto;
}

.modal-content{
    border-radius: 10px;
    overflow: hidden;
}

.dropdown
{ 
    z-index: 600;
}

/* fix issue */
.footer
{
    height:44px;
    padding-top: 0px;
}
.bzb_logo, .the1card_logo
{
    width: 85px;
}
 
#modalRedeem .modal-dialog, #modalCheckcode .modal-dialog {
    -webkit-transform: translate(0,50%);
    -ms-transform: translate(0,0%);
    -o-transform: translate(0,0%);
    transform: translate(0,50%);
}

.the1card_logo {
    float: left;
    background: #000 url(../../img/Footer/0-ico-partner.png) no-repeat center center;
    width: 40px !important;
    height: 40px;
    background-size: 100%;
    text-indent: -9999px;
    left: 5px;
    position: absolute;
    /*border-radius: 5px;*/
}
.bzb-version {
    position: absolute;
    left: 10px;
    top: 10px;
}

/* fix modal */

@media (max-width: 320px) {

    .modal-footer {
        width: 320px;
    }

    .cancel_btn {
        width: 120px;
    }
}

@media (max-width: 500px) {

    .modal-alert 
    {
        font-size:1em;
    }
    .loading_text
    { 
        font-size:1.1em;
    }
    .bg_loading {
        background-size: auto;
    }
}