/* Global settings */
/* Global "table" column settings */
.login-box {
    position: absolute;
    top: -50px;
    right: 30px
}
.login-box .login-btn {
    position: absolute;
    font-size: 12px;
    right: 0;
    top: 100px;
    width: max-content;
    border-radius: 3px;
    border: 0;
    padding: 4px 8px;
    color: #fff;
    background-color: #105df8;
    font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}

.product-image {
  float: left;
  width: 20%;
}

.product-details {
  float: left;
  width: 37%;
}

.product-price {
  float: left;
  width: 12%;
}

.product-quantity {
  float: left;
  width: 10%;
}

.product-removal {
  float: left;
  width: 9%;
}

.product-line-price {
  float: left;
  width: 12%;
  text-align: right;
}

/* This is used as the traditional .clearfix class */
.group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
  content: '';
  display: table;
}

.group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after {
  clear: both;
}

.group, .shopping-cart, .column-labels, .product, .totals-item {
  zoom: 1;
}

/* Apply clearfix in a few places */
/* Apply dollar signs */
.product .product-price:before, .product .product-line-price:before, .totals-value:before {
  content: '$';
}

#logo-header {
  display: block;
  position: absolute;

  text-align: center;
  width: 203px;
  height: 197px;
  top: -1px;
  margin-left: 30px;
  z-index: 100;
  background: url("../img/ribbon-header-lg.png") top center no-repeat;
}

/* Body/Header stuff */
body {
  padding: 0px 30px 30px 20px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  border-top: 22px solid #fcb65a;

}

h1 {
  text-align: center;
  font-weight: 100;
}

label {
  color: #aaa;
}

.shopping-cart {
  margin-top: 145px;
}

/* Column headers */
.column-labels label {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.column-labels .product-image, .column-labels .product-details, .column-labels .product-removal {
  text-indent: -9999px;
}

/* Product entries */
.product {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.product .product-image {
  text-align: center;
}
.product .product-image img {
  width: 100px;
}
.product .product-details .product-title {
  margin-right: 20px;
  font-size:26px;
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}
.product .product-details .product-description {
  margin: 15px 20px 5px 0;
  line-height: 1.4em;
}
.product .product-quantity input {
  width: 40px;
}
.product .remove-product {
  border: 0;
  padding: 4px 8px;
  background-color: #c66;
  color: #fff;
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
  font-size: 12px;
  border-radius: 3px;
}
.product .remove-product:hover {
  background-color: #a44;
}

/* Totals section */
.totals .totals-item {
  float: right;
  clear: both;
  width: 100%;
  margin-bottom: 10px;
}
.totals .totals-item label {
  float: left;
  clear: both;
  width: 79%;
  text-align: right;
}
.totals .totals-item .totals-value {
  float: right;
  width: 21%;
  text-align: right;
}
.totals .totals-item-total {
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}

.payway {
  width: 100%;
  clear: both;
  float: right;
}
.payway button{
  float: right;
  border: 0;
  width: 340px;
  height: 70px;
  color: #fff;
  box-shadow: 10px 10px  10px  #E6E9F0;
  margin-top: 20px;
  margin-left: 5px;
  cursor: pointer;
}
.checkoutBtn {
  font-size: 20px;
  /*border-radius: 15px;*/
  background: #105df8;
  box-shadow: none !important;
  width: 250px !important;
  height: 50px !important;
}
}
.checkoutAlipay {
  background-image: url(../img/alipay.png);
}
.checkoutWechat {
  background-image: url(../img/wechat.png);
}
.checkoutCC {
  background-image: url(../img/cc.png);
}
.checkoutUPOP {
  background-image: url(../img/upop.png);
}
.checkoutTossCard {
  background-image: url(../img/korean-card2.png);
}
.checkoutTossBanktransfer {
  background-image: url(../img/korean-banktransfer2.png);
}
.checkoutToss {
  background-image: url(../img/toss-tosspay.png);
}
.checkoutTossLpay {
     background-image: url(../img/toss-lpay.png);
}
.checkoutTossLgpay {
  background-image: url(../img/toss-lgpay.png);
}
.checkoutTossSamsungpay {
  background-image: url(../img/toss-samsungpay.png);
}
.checkoutDANA {
  background-image: url(../img/DANA.png);
}
.checkoutKAKAOPAY {
  background-image: url(../img/kakaopay.png);
}
.checkoutGCASH {
  background-image: url(../img/GCash.png);
}
.checkoutAlipayHK {
  background-image: url(../img/alipay-hk.png);
}
.checkoutKCPCard {
  background-image: url(../img/korean-card1.png);
}
.checkoutKCPBank {
  background-image: url(../img/korean-banktransfer1.png);
}
.checkoutKCPNaverpay {
  background-image: url(../img/kcp-naver.png);
}
.checkoutKCPPayco {
  background-image: url(../img/kcp-payco.png);
}

.checkoutSBPSCard {
  background-image: url(../img/sbps-card.png);
}
.checkoutSBPSUnionPay {
  background-image: url(../img/sbps-unionpay.png);
}
.checkoutSBPSAlipay {
  background-image: url(../img/sbps-alipay.png);
}
.checkoutSBPSLinePay {
  background-image: url(../img/sbps-linepay.png);
}
.checkoutSBPSPayPay {
  background-image: url(../img/sbps-paypay.png);
}
.checkoutSBPSRakuten {
  background-image: url(../img/sbps-rakuten.png);
}
.checkoutKlarna {
  background-image: url(../img/klarna.png);
}

.checkoutEbanxMercado {
  background-image: url(../img/ebanx-mercado.png);
}
.checkoutEbanxOxxo {
  background-image: url(../img/ebanx-oxxo.png);
}
.checkoutEbanxSpei {
  background-image: url(../img/ebanx-spei.png);
}
.checkoutJkopay {
  background-image: url(../img/jkopay.png);
}
.checkoutFOMOCard {
  background-image: url(../img/fomo-card.png);
}
.checkoutFOMOGrabpay {
  background-image: url(../img/fomo-grab.png);
}
.checkoutFOMOShopeepay {
  background-image: url(../img/fomo-shopeepay.png);
}
.checkoutFOMOAlipay {
  background-image: url(../img/fomo-alipay.png);
}
.checkoutFOMOUpop {
  background-image: url(../img/fomo-unionpay.png);
}
.checkoutFOMOWechatpay {
  background-image: url(../img/fomo-wechatpay.png);
}
.checkoutFOMOAtome {
  background-image: url(../img/fomo-atome.png);
}

.checkoutFOMOPaynow {
  background-image: url(../img/fomo-paynow.png);
}
.checkoutFOMONetspay {
  background-image: url(../img/fomo-netspay.png);
}
.checkoutFOMOPaypal {
  background-image: url(../img/fomo-paypal.png);
}
.checkoutAPSUSD {
  background-image: url(../img/aps-usd.png);
}
.checkoutAPSHKD {
  background-image: url(../img/aps-hkd.png);
}
.checkoutAPSIDR {
  background-image: url(../img/aps-idr.png);
}
.checkoutAPSKRW {
  background-image: url(../img/aps-krw.png);
}
.checkoutAPSMYR {
  background-image: url(../img/aps-myr.png);
}
.checkoutAPSPHP {
  background-image: url(../img/aps-php.png);
}
.checkoutAPSTHB {
  background-image: url(../img/aps-thb.png);
}
.checkoutXenditCard{
  background-image: url(../img/xendit-card.png);
}
.checkoutXenditUbp{
  background-image: url(../img/xendit-ubp.png);
}
.checkoutXenditBpi{
  background-image: url(../img/xendit-bpi.png);
}
.checkoutXenditShopeepay{
  background-image: url(../img/xendit-shopeepay.png);
}
.checkoutXenditGcash{
  background-image: url(../img/xendit-gcash.png);
}
.checkoutXenditPaymaya{
  background-image: url(../img/xendit-paymaya.png);
}
.checkoutXenditGrabpay{
  background-image: url(../img/xendit-grabpay.png);
}
.checkoutXenditBillease{
  background-image: url(../img/xendit-billease.png);
}
.checkoutXenditCashalo{
  background-image: url(../img/xendit-cashalo.png);
}
.checkoutXendit7eleven{
  background-image: url(../img/xendit-7eleven.png);
}
.checkoutXenditCvm{
  background-image: url(../img/xendit-cvm.png);
}
.checkoutXenditRdpawnshop{
  background-image: url(../img/xendit-rdpawnshop.png);
}
.checkoutXenditEcpayloan{
  background-image: url(../img/xendit-ecpayloan.png);
}
.checkoutXenditMlhuillier{
  background-image: url(../img/xendit-mlhuillier.png);
}
.checkoutXenditPalawan{
  background-image: url(../img/xendit-palawan.png);
}
.checkoutXenditLbc{
  background-image: url(../img/xendit-lbc.png);
}
.checkoutXenditEcpay{
  background-image: url(../img/xendit-ecpay.png);
}
.checkoutXenditCebuana{
  background-image: url(../img/xendit-cebuana.png);
}
/*ppcp css classes*/
.checkoutPPCPPaypal{
  background-image: url(../img/ppcp-paypal.png);
}
.checkoutPPCPVenmo{
  background-image: url(../img/ppcp-venmo.png);
}

/* Make adjustments for tablet */
@media screen and (max-width: 850px) {
  #logo-header {
    margin: auto;
    position: relative;
  }


  .shopping-cart {
    margin-top: 0px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }

  .column-labels {
    display: none;
  }

  .product-image {
    float: right;
    width: auto;
  }
  .product-image img {
    margin: 0 0 10px 10px;
  }

  .product-details {
    float: none;
    margin-bottom: 10px;
    width: auto;
  }

  .product-price {
    clear: both;
    width: 70px;
  }

  .product-quantity {
    width: 100px;
  }
  .product-quantity input {
    margin-left: 20px;
  }

  .product-quantity:before {
    content: 'x';
  }

  .product-removal {
    width: auto;
  }

  .product-line-price {
    float: right;
    width: 70px;
  }
  .paymethod{
    display:inline-block;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
  }
  .payway {
    width: 100%;
    clear: both;
    float: right;
  }
}
/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
  .product-removal {
    float: right;
  }

  .product-line-price {
    float: right;
    clear: left;
    width: auto;
    margin-top: 10px;
  }

  .product .product-line-price:before {
    content: 'Item Total: $';
  }

  .totals .totals-item label {
    width: 60%;
  }
  .totals .totals-item .totals-value {
    width: 40%;
  }
  .payway {
    width: 100%;
    clear: both;
    float: right;
  }
}