.ui-pnotify{top:36px;right:36px;position:absolute;height:auto;z-index:2}body>.ui-pnotify{position:fixed;z-index:100040}.ui-pnotify-modal-overlay{background-color:rgba(0,0,0,.4);top:0;left:0;position:absolute;height:100%;width:100%;z-index:1}body>.ui-pnotify-modal-overlay{position:fixed;z-index:100039}.ui-pnotify.ui-pnotify-in{display:block!important}.ui-pnotify.ui-pnotify-move{transition:left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-slow{transition:opacity .6s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move{transition:opacity .6s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-normal{transition:opacity .4s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move{transition:opacity .4s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-fast{transition:opacity .2s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move{transition:opacity .2s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-in{opacity:1}.ui-pnotify .ui-pnotify-shadow{-webkit-box-shadow:0 6px 28px 0 rgba(0,0,0,.1);-moz-box-shadow:0 6px 28px 0 rgba(0,0,0,.1);box-shadow:0 6px 28px 0 rgba(0,0,0,.1)}.ui-pnotify-container{background-position:0 0;padding:.8em;height:100%;margin:0}.ui-pnotify-container:after{content:" ";visibility:hidden;display:block;height:0;clear:both}.ui-pnotify-container.ui-pnotify-sharp{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui-pnotify-title{display:block;margin-bottom:.4em;margin-top:0}.ui-pnotify-text{display:block}.ui-pnotify-icon,.ui-pnotify-icon span{display:block;float:left;margin-right:.2em}.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-topleft{left:25px;right:auto}.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-bottomright{bottom:25px;top:auto}.ui-pnotify.stack-modal{left:50%;right:auto;margin-left:-150px}.ui-pnotify-closer,.ui-pnotify-sticker{float:right;margin-left:.2em}.ui-pnotify-history-container{position:absolute;top:0;right:18px;width:70px;border-top:none;padding:0;-webkit-border-top-left-radius:0;-moz-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-top-right-radius:0;border-top-right-radius:0;z-index:10000}.ui-pnotify-history-container.ui-pnotify-history-fixed{position:fixed}.ui-pnotify-history-container .ui-pnotify-history-header{padding:2px;text-align:center}.ui-pnotify-history-container button{cursor:pointer;display:block;width:100%}.ui-pnotify-history-container .ui-pnotify-history-pulldown{display:block;margin:0 auto}.ui-pnotify-container{position:relative;left:0}@media (max-width:480px){.ui-pnotify-mobile-able.ui-pnotify{position:fixed;top:0;right:0;left:0;width:auto!important;font-size:1.2em;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased}.ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom-width:5px}.ui-pnotify-mobile-able .ui-pnotify-container{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft,.ui-pnotify-mobile-able.ui-pnotify.stack-topleft{left:0;right:0}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft,.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright{left:0;right:0;bottom:0;top:auto}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft .ui-pnotify-shadow,.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright .ui-pnotify-shadow{border-top-width:5px;border-bottom-width:1px}}
::-ms-reveal,
::-ms-clear {
  display: none !important;
}

.hideShowPassword-toggle {
  background-color: transparent;
  background-image: url('/static/libs/hideshowpassword/images/wink.png?7217ed7eaa21'); /* fallback */
  background-image: url('/static/libs/hideshowpassword/images/wink.svg?7217ed7eaa21'), none;
  background-position: 0 center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 100%;
  height: 44px;
  margin: 0;
  max-height: 100%;
  padding: 0;
  overflow: 'hidden';
  text-indent: -999em;
  width: 46px;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.hideShowPassword-toggle-hide {
  background-position: -44px center;
}

.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
  border-color: #0088cc;
  outline: transparent;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on August 8, 2016 */
@font-face {
  font-family: 'bebas_neue_regular';
  src: url("/static/fonts/bebasneue_regular-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue_regular-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_neuelight';
  src: url("/static/fonts/bebasneue_light-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue_light-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_neuebold';
  src: url("/static/fonts/bebasneue_bold-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue_bold-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_neuethin';
  src: url("/static/fonts/bebasneue_thin-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue_thin-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_neueregular';
  src: url("/static/fonts/bebasneue-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_neuebook';
  src: url("/static/fonts/bebasneue_book-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/bebasneue_book-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'robotoregular';
  src: url("/static/fonts/roboto-regular-webfont.woff2?7217ed7eaa21") format("woff2"), url("/static/fonts/roboto-regular-webfont.woff?7217ed7eaa21") format("woff");
  font-weight: normal;
  font-style: normal; }
body.-en {
  font-family: 'Thonburi', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; }

body.-th {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; }

h1, h2, h3 {
  font-family: 'bebas_neuebold','Helvetica Neue', 'Thonburi', Arial,sans-serif; }

.bebas-bold, .form-group .field-title, .selection.-custom .btn, .btn-submit, .btn-yellow, .info-donation .amount {
  font-family: 'bebas_neuebold','Helvetica Neue', 'Thonburi', Arial,sans-serif; }

.bebas-book, .info-donation .title {
  font-family: 'bebas_neuebook','Helvetica Neue', 'Thonburi', Arial,sans-serif; }

.bebas-light, .donate-box-wrapper .unit {
  font-family: 'bebas_neuelight','Helvetica Neue', 'Thonburi', Arial,sans-serif; }

@font-face {
  font-family: 'thaisansneue_regular';
  src: url("/static/fonts/thaisansneue-regular-webfont.eot?7217ed7eaa21");
  src: url("/static/fonts/thaisansneue-regular-webfont.eot?&7217ed7eaa21#iefix") format("embedded-opentype"), url("/static/fonts/thaisansneue-regular-webfont.woff?7217ed7eaa21") format("woff"), url("/static/fonts/thaisansneue-regular-webfont.ttf?7217ed7eaa21") format("truetype"), url("/static/fonts/thaisansneue-regular-webfont.svg?7217ed7eaa21#thaisans_neueregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'thaisansneue_light';
  src: url("/static/fonts/thaisansneue-light-webfont.eot?7217ed7eaa21");
  src: url("/static/fonts/thaisansneue-light-webfont.eot?&7217ed7eaa21#iefix") format("embedded-opentype"), url("/static/fonts/thaisansneue-light-webfont.woff?7217ed7eaa21") format("woff"), url("/static/fonts/thaisansneue-light-webfont.ttf?7217ed7eaa21") format("truetype"), url("/static/fonts/thaisansneue-light-webfont.svg?7217ed7eaa21#thaisansneue_light") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'thaisansneue_bold';
  src: url("/static/fonts/thaisansneue-bold-webfont.eot?7217ed7eaa21");
  src: url("/static/fonts/thaisansneue-bold-webfont.eot?&7217ed7eaa21#iefix") format("embedded-opentype"), url("/static/fonts/thaisansneue-bold-webfont.woff?7217ed7eaa21") format("woff"), url("/static/fonts/thaisansneue-bold-webfont.ttf?7217ed7eaa21") format("truetype"), url("/static/fonts/thaisansneue-bold-webfont.svg?7217ed7eaa21#thaisansneue_bold") format("svg");
  font-weight: normal;
  font-style: normal; }
body.-th .thaisansneue_regular {
  font-family: 'thaisansneue_regular','Helvetica Neue', 'Thonburi', Arial,sans-serif; }
body.-th .thaisansneue_light {
  font-family: 'thaisansneue_light','Helvetica Neue', 'Thonburi', Arial,sans-serif; }
body.-th .thaisansneue_bold {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif; }
body.-th .panel-heading .page-title {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 3em;
  line-height: 36px; }
body.-th .title-form {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 3em; }
body.-th .btn-submit,
body.-th .btn-yellow {
  font-family: 'thaisansneue_regular','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 2em; }
  @media (min-width: 415px) {
    body.-th .btn-submit,
    body.-th .btn-yellow {
      font-size: 2.5em; } }
@media (min-width: 415px) {
  body.-th .member-thankyou .btn-submit,
  body.-th .donation-thankyou .btn-submit {
    line-height: 45px; } }
body.-th .member-thankyou .btn-submit br,
body.-th .donation-thankyou .btn-submit br {
  display: block; }
  @media (min-width: 415px) {
    body.-th .member-thankyou .btn-submit br,
    body.-th .donation-thankyou .btn-submit br {
      display: none; } }
body.-th .member-type > label {
  font-family: 'thaisansneue_light','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 32px;
  line-height: 20px; }
body.-th .member-type > .type {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 3em; }
body.-th .info-donation .title {
  font-family: 'thaisansneue_light','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 42px;
  line-height: 36px; }
body.-th .info-donation .title > .amount {
  font-family: 'bebas_neuebold','Helvetica Neue', 'Thonburi', Arial,sans-serif; }
body.-th .info-donation .title > .unit {
  font-size: 36px; }
body.-th .thankyou-wrapper .title {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 65px;
  line-height: 50px; }
body.-th .thankyou-wrapper .bebas-light, body.-th .thankyou-wrapper .donate-box-wrapper .unit, .donate-box-wrapper body.-th .thankyou-wrapper .unit {
  font-family: 'thaisansneue_light','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 65px;
  line-height: 65px; }
body.-th .donation-options .title {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 70px; }
body.-th .donation-options .selection.-own_amount .amount {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  line-height: 55px; }
body.-th .modal-header h4 {
  font-family: 'thaisansneue_bold','Helvetica Neue', 'Thonburi', Arial,sans-serif;
  font-size: 28px;
  line-height: 24px; }

.title-form {
  margin-bottom: 30px;
  font-size: 36px; }

.form-control {
  border-radius: 0;
  height: 45px;
  border: 1px solid #e1e1e1; }

textarea {
  height: auto; }

.btn-action-wrapper {
  margin-top: 50px; }

/*----------------------------------
Component : Form
Element : Form-group
Variants :
Helpers : _listnonestyle (remove list style in list that provide by django)
By : Nemo
----------------------------------*/
.form-group .field-title {
  font-size: 36px;
  color: #000; }

.form-text .form-control {
  border-radius: 0;
  height: 45px; }

.form-group {
  margin-bottom: 30px; }
  .form-group label {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 10px; }
  .form-group.-radio-group > .list-select {
    list-style: none;
    padding: 0; }

.expire-right {
  padding: 0 15px 0 0; }

/*----------------------------------
Use in:
- edit credit card
Helper : _formlabel
By : Nattapol
----------------------------------*/
._formlabel {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 10px; }

.creditcard-display > div {
  margin-bottom: 30px; }
.creditcard-display > div > label {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 10px; }
.creditcard-display > div > div {
  height: 45px;
  line-height: 45px;
  font-weight: bold; }

/*----------------------------------
Component : Select Custom
Element : Select Form
Variants :
By : Dew
----------------------------------*/
.selection-wrapper {
  overflow: hidden; }
  .selection-wrapper .list-select > li {
    margin: 0 0 10px;
    display: block; }
    @media (min-width: 520px) {
      .selection-wrapper .list-select > li {
        display: inline-block;
        float: left;
        margin-right: 10px; } }
    .selection-wrapper .list-select > li:last-child {
      margin-right: 0; }
  .selection-wrapper.-amount, .selection-wrapper.-amount > .list-select {
    width: 100%;
    float: left;
    overflow: visible; }

.selection-wrapper.has-error .errorlist {
  float: left;
  width: 100%; }
.selection-wrapper.has-error .list-select {
  margin-bottom: 0; }
@media (min-width: 520px) {
  .selection-wrapper.has-error .list-select > li {
    margin-bottom: 0; } }
@media (min-width: 520px) {
  .selection-wrapper.has-error .list-select > li.-membertype .btn {
    margin-bottom: 0; } }
.selection-wrapper.has-error .list-select > li.-membertype:last-child {
  margin-bottom: 0; }

.member-application form > div {
  width: 100%;
  float: left; }
@media (min-width: 520px) {
  .member-application form > div.selection-wrapper {
    width: auto; } }

.selection .btn {
  background: #FEED01;
  color: #000;
  min-width: 220px; }
.selection input {
  opacity: 0;
  width: 0; }
  .selection input:checked + span:before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 28px;
    margin-right: 3px; }

.form-group.-optional-contribution > .form-group {
  width: 100%;
  float: left; }
  .form-group.-optional-contribution > .form-group.has-error {
    padding-bottom: 40px;
    margin-bottom: 60px; }

.list-select {
  overflow: hidden; }

.selection.-custom .btn {
  font-size: 30px;
  border-radius: 0;
  padding: 8px 20px;
  line-height: 30px;
  width: 100%;
  background: #FEED01;
  color: #000;
  min-width: 220px; }
  .selection.-custom .btn:hover, .selection.-custom .btn:focus, .selection.-custom .btn:active {
    color: #000; }
  @media (min-width: 520px) {
    .selection.-custom .btn {
      height: 45px;
      max-width: initial;
      width: auto; } }
  .selection.-custom .btn.checked {
    color: #fff;
    background-color: #000;
    padding-right: 40px; }

.selection.-own_amount.-animate {
  position: relative; }
  .selection.-own_amount.-animate .btn {
    height: 45px; }
  .selection.-own_amount.-animate .form-text {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%; }
    .selection.-own_amount.-animate .form-text input {
      width: 100%;
      margin: 0; }
  .selection.-own_amount.-animate .checked .fa-check {
    position: absolute;
    left: 20px;
    font-size: 27px; }
  .selection.-own_amount.-animate .checked .form-text {
    padding-left: 66px;
    transition: padding-left 0.1s ease;
    -webkit-transition: padding-left 0.1s ease;
    -moz-transition: padding-left 0.1s ease;
    -ms-transition: padding-left 0.1s ease; }

.selection.-own_amount {
  margin-bottom: 40px; }
  .selection.-own_amount .amount {
    font-size: 55px; }
  .selection.-own_amount .btn {
    min-width: 220px;
    height: auto; }
  .selection.-own_amount .form-text {
    position: static; }
    .selection.-own_amount .form-text input {
      opacity: 1;
      font-size: 20px;
      width: 100%;
      max-width: 300px;
      margin: 20px auto 0;
      text-align: right; }
      @media (max-width: 519px) {
        .selection.-own_amount .form-text input {
          max-width: 100%; } }
  .selection.-own_amount .errorlist {
    position: absolute;
    left: 0;
    font-family: 'Helvetica Neue', 'Thonburi', Arial,sans-serif;
    line-height: 20px;
    width: 220px;
    text-align: left; }
    @media (max-width: 519px) {
      .selection.-own_amount .errorlist {
        width: 100%; } }

.donation-options .selection.-own_amount .form-text {
  position: relative; }
.donation-options .selection.-own_amount .errorlist {
  width: 100%; }
@media (min-width: 520px) {
  .donation-options .list-select.-frequency li {
    margin-bottom: 0; } }
.donation-options .list-select.-frequency li .radio-custom {
  margin-bottom: 0; }
@media (min-width: 520px) {
  .donation-options .errorlist {
    max-width: 440px;
    margin: 0 auto; } }

/*----------------------------------
Component : Radio Button Custom
Element : radio-custom
Variants :
By : Nemo
----------------------------------*/
.radio-custom {
  position: relative;
  padding-left: 26px;
  padding: 9px 30px 9px 42px;
  background-color: #f2f2f2;
  border-radius: 7px;
  cursor: pointer; }
  .radio-custom input[type="radio"] {
    opacity: 0;
    width: 0; }
  .radio-custom .input-detail {
    font-size: 17px;
    font-weight: bold; }
  .radio-custom.-donationtype {
    max-width: 425px;
    width: 100%; }

.img-render {
  position: absolute;
  width: 24px;
  height: 24px;
  display: block;
  top: 8px;
  left: 15px; }
  .img-render:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 12px;
    z-index: 1;
    width: 24px;
    height: 24px;
    background-color: white;
    border: 1px solid #A0A0A0; }

input:checked + .img-render:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -6px;
  display: block;
  border-radius: 6px;
  z-index: 1;
  width: 12px;
  height: 12px;
  background-color: #000; }

.list-select.-frequency {
  text-align: center; }
  .list-select.-frequency .radio-custom {
    text-align: left; }

.list-select.-frequency li {
  width: 100%;
  margin-bottom: 10px; }
  @media (min-width: 520px) {
    .list-select.-frequency li {
      margin-right: 10px;
      display: inline-block;
      width: auto; } }
  .list-select.-frequency li .radio-custom {
    width: 100%; }
    @media (min-width: 520px) {
      .list-select.-frequency li .radio-custom {
        min-width: 210px; } }

.list-select.-gender > li {
  display: inline-block; }
.list-select.-gender .radio-custom {
  padding-right: 20px; }
.list-select.-gender .input-detail {
  font-size: 14px; }

body {
  color: #000; }

a:focus,
.btn:focus {
  outline: none; }

/*----------------------------------
Component : Header
Element : header
Variants :
By : Nemo
----------------------------------*/
header {
  background: #000;
  height: 98px; }
  @media (min-width: 768px) {
    header {
      height: 168px; } }
  header #main-website {
    float: right;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    height: 98px; }
    @media (min-width: 768px) {
      header #main-website {
        height: 154px; } }
    @media (max-width: 767px) {
      header #main-website {
        display: block;
        width: 130px; } }

.container {
  max-width: 1060px; }

#branding {
  height: 98px;
  float: left;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end; }
  @media (min-width: 768px) {
    #branding {
      height: 168px; } }
  #branding img {
    width: 150px;
    height: auto; }
    @media (min-width: 768px) {
      #branding img {
        width: 280px;
        height: 154px; } }

.btn-main-website {
  padding: 8px 12px 8px 12px;
  border-radius: 10px;
  background: #272727;
  font-size: 11px !important;
  color: #a6a6a6; }
  .btn-main-website:hover, .btn-main-website:focus, .btn-main-website:active {
    color: #a6a6a6;
    text-decoration: underline; }
  @media (max-width: 767px) {
    .btn-main-website {
      padding: 5px;
      margin-top: 15px; } }

/*----------------------------------
Component : Footer
Element : Footer
Variants :
By : Nemo
----------------------------------*/
footer {
  background: #000;
  color: #fff;
  padding: 20px 15px; }
  footer .copyright {
    text-align: center;
    font-size: 13px;
    margin: 0 0 15px; }
    @media (min-width: 768px) {
      footer .copyright {
        float: left;
        margin: 0;
        text-align: left; } }
  footer .link-footer {
    list-style-type: none;
    text-align: center;
    margin: 0; }
    footer .link-footer li {
      display: inline-block;
      margin: 0 0 0 20px;
      font-size: 13px; }
      footer .link-footer li:first-child {
        margin-left: 0; }
    @media (min-width: 768px) {
      footer .link-footer {
        float: right;
        text-align: right; } }
  footer .link-footer a {
    color: #fff; }
    footer .link-footer a:hover, footer .link-footer a:focus, footer .link-footer a:active {
      color: #fff;
      text-decoration: underline; }

/*----------------------------------
Component : Button
Element : btn
Variants :
By : Nemo
----------------------------------*/
.btn {
  white-space: initial;
  font-size: 16px; }

.btn-submit {
  background: #000;
  color: #fff;
  border-radius: 0;
  padding: 3px 15px;
  border-bottom: 3px solid #848484;
  font-size: 36px;
  line-height: 35px; }
  @media (min-width: 415px) {
    .btn-submit {
      padding: 3px 40px; } }
  .btn-submit:hover, .btn-submit:focus, .btn-submit:active {
    color: #FEED01; }
  .btn-submit.-normal {
    font-family: 'Thonburi', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px; }
  .btn-submit.-left {
    margin-bottom: 20px; }
    @media (min-width: 992px) {
      .btn-submit.-left {
        margin-bottom: 0; } }
  .btn-submit.-cancel {
    background: #999; }
  .btn-submit br {
    display: none; }

.btn-yellow {
  background: #FEED01;
  font-size: 30px;
  line-height: 30px;
  text-decoration: bold;
  border-radius: 0;
  border-bottom: 4px solid #9A5600;
  padding: 3px 40px 3px 40px; }
  .btn-yellow.-left {
    margin-bottom: 30px; }
    @media (min-width: 992px) {
      .btn-yellow.-left {
        margin-bottom: 0; } }
  .btn-yellow.-cancel {
    background: #999;
    border-bottom: 4px solid #333;
    color: #FFFFFF; }
    .btn-yellow.-cancel:hover {
      background: #737373;
      color: #FEED01; }

/*----------------------------------
Component : Base Background
Element : div.base-bg
Variants :
By : Nemo
----------------------------------*/
.base-bg-wrapper {
  position: relative; }

.base-bg {
  background-image: url('/static/images/bg-donate.png?83c911a9304b');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 445px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; }

/*----------------------------------
Component : Base Class for Website
Element : Anythings
Variants :
By : Nemo
----------------------------------*/
.no-bullet {
  padding: 0;
  list-style: none; }

/*----------------------------------
Component : Base Panel
Element : Panel
Variants :
By : Nemo
----------------------------------*/
.base-bg-wrapper > .container > .panel {
  margin: 5px 0 0;
  min-height: 500px; }
  @media (min-width: 768px) {
    .base-bg-wrapper > .container > .panel {
      margin-top: 50px; } }

.base-bg-wrapper > .container {
  padding: 0 5px; }
  @media (min-width: 768px) {
    .base-bg-wrapper > .container {
      padding: 0 15px; } }

.panel {
  margin-top: 20px;
  border-radius: 0;
  border: none;
  box-shadow: none; }
  .panel .panel-body {
    border-radius: 0;
    padding: 20px; }
    @media (min-width: 768px) {
      .panel .panel-body {
        padding: 40px 50px 100px; } }

.panel .panel-heading {
  border-radius: 0;
  background: #000;
  color: #fff;
  padding: 15px 25px; }

.panel-heading .page-title {
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase; }

/*----------------------------------
Component : Error List
Element : errorlist
Variants :
By : Nemo
----------------------------------*/
.errorlist {
  overflow: hidden;
  padding: 8px 20px;
  margin-top: 5px;
  border-radius: 3px;
  color: #a94442;
  background-color: #f2dede;
  list-style: none;
  font-size: 14px; }
  .errorlist.card-error-message {
    margin-bottom: 5px; }

/*----------------------------------
Component : Share icon
Element : div.ico-social
Variants :
By : Nemo
----------------------------------*/
.social-share {
  text-align: center;
  margin-top: 50px; }
  .social-share .title {
    font-weight: bold;
    margin-bottom: 20px; }

.list-social {
  display: inline-block;
  margin: 0 auto; }
  .list-social li {
    float: left; }

.ico-social {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -999em;
  background: url('/static/images/ico-share.png?7217ed7eaa21') no-repeat 0 0;
  float: left;
  margin: 0 2px; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ico-social {
      background-image: url('/static/images/ico-share@2x.png?7217ed7eaa21');
      background-size: 135px 40px; } }
  .ico-social.-twitter {
    background-position: -48px 0; }
  .ico-social.-gplus {
    background-position: -96px 0; }
  .ico-social:hover {
    cursor: pointer; }

.donate-payment-choices .summary .name {
  color: #444;
  font-size: 16px;
  font-weight: bold; }
.donate-payment-choices .summary .sub {
  color: #777;
  font-size: 13px; }
.donate-payment-choices .summary .amount {
  color: #069;
  font-size: 20px;
  font-weight: bold; }

.donation-options .title {
  font-size: 60px;
  text-decoration: bold;
  margin-bottom: 30px; }
.donation-options .summary-content {
  margin-bottom: 30px;
  line-height: 2; }
  .donation-options .summary-content p {
    margin-bottom: 30px; }

.donation-information .info {
  text-align: left; }
.donation-information .payment {
  text-align: left; }
.donation-information .title {
  font-size: 24px;
  text-decoration: bold;
  text-align: left;
  margin: 30px 0 30px 0; }

/*----------------------------------
Component : Content Donate Page
Element : title, summary-content
Variants :
By : Nemo
----------------------------------*/
.donate-wrapper .panel-body > .title {
  font-size: 65px;
  margin: 0 0 30px; }
.donate-wrapper .panel-body .summary-content {
  max-width: 680px;
  margin: 0 auto 60px; }
  .donate-wrapper .panel-body .summary-content p {
    font-size: 16px;
    margin: 0 0 30px;
    color: #777; }

/*----------------------------------
Component : Donate Box
Element : title, summary-content
Variants :
By : Nemo
----------------------------------*/
.donate-box-wrapper .selection .btn {
  min-width: initial;
  width: 100%;
  border: 0; }
  .donate-box-wrapper .selection .btn:active, .donate-box-wrapper .selection .btn:focus {
    box-shadow: none; }
@media (min-width: 580px) and (max-width: 991px) {
  .donate-box-wrapper .selection:nth-child(3) {
    clear: both; } }

.donate-box-wrapper .amount {
  font-size: 50px;
  margin: 0 0 15px; }
  @media (min-width: 768px) {
    .donate-box-wrapper .amount {
      font-size: 70px;
      line-height: 43px;
      margin-top: 20px; } }
.donate-box-wrapper .unit {
  font-size: 22px; }
.donate-box-wrapper .form-text input {
  border: 3px solid #ccc;
  border-radius: 7px; }

.donate-box-wrapper .selection .btn {
  max-width: 230px;
  padding: 0;
  background: transparent url('/static/images/bg-donate-01.png?7217ed7eaa21') no-repeat 0 0; }
.donate-box-wrapper .selection:nth-child(2) .btn {
  background-image: url('/static/images/bg-donate-02.png?7217ed7eaa21'); }
.donate-box-wrapper .selection:nth-child(3) .btn {
  background-image: url('/static/images/bg-donate-03.png?7217ed7eaa21'); }
.donate-box-wrapper .selection:nth-child(4) .btn {
  background-image: url('/static/images/bg-donate-04.png?7217ed7eaa21'); }

.amount-wrapper {
  padding: 30px 15px 0;
  min-height: 350px; }

.check-wrapper {
  padding: 10px;
  text-align: center;
  background-color: #d1d1d1;
  color: #fff;
  font-size: 26px; }

.btn.checked .check-wrapper {
  background-color: #000; }

.donate-box-wrapper .list-select {
  text-align: center;
  margin: 0 auto;
  max-width: 500px; }
  @media (min-width: 992px) {
    .donate-box-wrapper .list-select {
      max-width: initial; } }
.donate-box-wrapper .selection {
  max-width: 230px;
  display: inline-block;
  float: none;
  margin: 0;
  padding-bottom: 10px; }
  @media (min-width: 768px) {
    .donate-box-wrapper .selection {
      width: 49%;
      padding: 0 0.5% 10px; } }
  @media (min-width: 992px) {
    .donate-box-wrapper .selection {
      width: 24.5%;
      padding: 0 0.5% 10px; } }

/*----------------------------------
Component : Confirmation Page
Element : title, summary-content
Variants :
By : Nemo
----------------------------------*/
.info-donation {
  background-color: #FEED01;
  width: 100%;
  max-width: 385px;
  margin: 0 auto;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  z-index: 1; }
  .info-donation .title {
    margin: 0;
    font-size: 30px; }
  .info-donation .amount {
    font-size: 50px;
    margin: 20px 0 5px;
    display: block;
    line-height: 40px; }
  .info-donation .unit {
    font-size: 22px; }

.donator-information {
  background-color: #f2f2f2;
  max-width: 610px;
  margin: 0 auto;
  padding: 90px 20px;
  font-size: 16px;
  color: #191816;
  position: relative;
  z-index: 0;
  margin-top: -60px; }
  @media (min-width: 520px) {
    .donator-information {
      padding: 90px 50px; } }
  .donator-information .name {
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px; }
  .donator-information .field-detail {
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    word-wrap: break-word; }
    .donator-information .field-detail .fa {
      margin-right: 5px;
      position: absolute;
      left: 2px;
      top: 4px; }
    .donator-information .field-detail .fa-home {
      font-size: 22px;
      left: 0;
      top: 0; }
    .donator-information .field-detail .fa-phone {
      font-size: 19px;
      top: 3px; }

/*----------------------------------
Component : Thankyou Page
Element : title, summary-content
Variants :
By : Nemo
----------------------------------*/
.thankyou-wrapper {
  background-color: #FEED01;
  max-width: 465px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  font-size: 50px;
  position: relative;
  z-index: 1; }
  .thankyou-wrapper .title {
    font-size: 50px; }

.member-application form {
  text-align: left; }
.member-application .help-text {
  font-weight: bold; }

.member-application form > .selection-wrapper {
  float: left; }

/*----------------------------------
Component : Form Member
Element : Form Member Application
Variants : -custom
By : Nemo
----------------------------------*/
.form-group.-optional-contribution .help-text {
  margin: 20px 0 40px; }

/*----------------------------------
yellow result box
Component : result-box
Element : compoent member-type, donation-info
Variants : -
By : Nattapol
----------------------------------*/
.info-donation.-resultbox {
  max-width: 560px;
  width: 100%;
  margin: 0 auto 30px auto;
  padding: 30px 60px;
  background-color: #FEED01; }
  .info-donation.-resultbox > hr {
    border-top: 1px solid #000000; }

.member-type > label {
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 0; }
.member-type > .type {
  font-size: 40px; }

.donator-information.-member {
  padding: 120px 50px 90px 50px; }
  .donator-information.-member > span {
    display: block;
    font-size: 1.2em;
    margin-top: 15px;
    font-weight: bold; }

.language-translation {
  padding-right: 15px;
  margin-left: 15px; }
  .language-translation .navbar-nav {
    margin-top: 3.5px; }
    @media (min-width: 768px) {
      .language-translation .navbar-nav {
        margin: 0; } }
  .language-translation .btn {
    font-size: 11px;
    line-height: 25px;
    padding: 4px 7px;
    background-color: #272727;
    border: none;
    border-radius: 10px;
    color: #a6a6a6;
    text-transform: uppercase; }
  .language-translation .btn:hover {
    text-decoration: underline; }
  .language-translation .btn .flag {
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle; }
  .language-translation .btn.en .flag {
    background: url('/static/images/flag-en.png?7217ed7eaa21') transparent no-repeat center; }
  .language-translation .btn.th .flag {
    background: url('/static/images/flag-th.png?7217ed7eaa21') transparent no-repeat center; }

/*
** Policy Modal
** By: Dew
*/
.policy {
  margin-top: 40px;
  font-size: 14px; }
  .policy li {
    text-align: left;
    margin-bottom: 10px; }

.policy > .modal .modal-header {
  background-color: #000000;
  border-bottom: 8px solid #FEED01; }
  .policy > .modal .modal-header .modal-title {
    color: #FFFFFF;
    font-size: 24px; }
  .policy > .modal .modal-header .close {
    color: #FFFFFF;
    opacity: 0.5; }
  .policy > .modal .modal-header .close:hover {
    opacity: 1; }
.policy > .modal .modal-content {
  border-radius: 0; }
  @media (min-width: 768px) {
    .policy > .modal .modal-content .modal-body {
      padding: 30px 30px 15px 30px; } }
.policy > .modal .modal-footer {
  border-top: none;
  padding-top: 0; }

/*# sourceMappingURL=styles.css.map */