body {
  background-color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  overflow: auto;
  padding-top: 32px;
}
/* page title 16px */
h1 {
  font-size: 1.23em;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
/* price 15px */
h2 {
  font-size: 1.15em;
}
/* paragraph 14px */
h3 {
  font-size: 1.08em;
  color: #191C20;
  line-height: 1.75em;
  letter-spacing: 0.02em;
}
p {
  font-size: 1em;
}
/* labels 11px */
h5 {
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* item description 11px */
h6 {
  font-size: 0.9em;
}
a {
 font-size: 1em;
 color: #008BE2;
}
a:hover, a:active, a:visited {
  color: #008BE2;
  text-decoration: underline;
}
.alert-red {
  color: #CB2626;
}
.color-main {
  color: #393939; /*darkgrey*/
}
.color-sub {
  color: #525252; /*midgrey*/
}
.padded-top {
  margin-top: 24px;
}
div[class^="btn"] {
  font-size: 1em;
  text-align: center;
  padding: 25px 14px;
  text-transform: uppercase;
  position: relative;
  border-radius: 4px;
}
.btn-primary {
  color: #fff;
  background-color: #008BE2;
  border-radius: 4px;
  padding: 12px 24px;
  border: none;
  outline: 0;
  font-weight: 600;
}
#checkout2 .btn-primary {
  margin-top: 24px;
  width: 100%;
}
.balance-checkout .btn-primary {
  margin-top: 24px;
  width: 100%;
}

.btn-primary:disabled {
  background-color: #888888;
}
.btn-primary:hover, .btn-primary:active {
  background-color: #0077C1;
}
.btn-primary:hover, .btn-primary:disabled {
  background-color: #888888;
}
.btn-secondary {
  width: auto;
  min-width: 300px;
  margin-top: 24px;
  color: #008BE2;
  background-color: transparent;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #008BE2;
  display: inline-block;
}
.btn-secondary:hover, .btn-secondary:active {
  color: #fff;
  background-color: #008BE2;
}
.only-mobile {
  display: none;
}
/* input */
/**
* Make the field a flex-container, reverse the order so label is on top.
*/
.field {
  display: flex;
  flex-flow: column-reverse;
  margin-top: -16px;
}
/**
* Add a transition to the label and input.
*/
label, input, select {
  transition: all 0.2s;
  touch-action: manipulation;
}
input, select {
  height: 42px;
  padding: 16px 8px 2px 8px;
  box-sizing: border-box;
  font-weight: 600;
  border: 1px solid #BEBEBE;
  border-radius: 4px;
  position: relative;
  background-color: transparent;
}
/**
* Change input border on focus.
*/

.form-control::placeholder{
  color: #959595;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 18px;
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
}

.form-control {
  border-color: #BEBEBE;
}

input:not(:placeholder-shown) + label,
input:focus + label,
select:not(:placeholder-shown) + label,
select:focus + label {
  color: #959595;
  font-size: 10px;
  transform: translate(8px, 2.05rem) scale(1);
  cursor: pointer;
  height: 21px;
  pointer-events: none;
}
.input-error input{
  border: 1px solid #CB2626 !important;
}
.input-error label {
  color: #CB2626 !important;
}
/* header */
.header {
  text-align: center;
  max-width: 950px;
  margin: auto;
}
.header .logo {
  width: 140px;
  margin: 0px auto 16px auto;
}
.logo img {
  width: 100%;
}
.header ul.progress-tracker {
  background-color: #fff;
  text-transform: uppercase;
}

.header ul.progress-tracker h5 {
  color: #A3A3A3;
}
.header ul.progress-tracker li.current h5 {
  color: #191C20 !important;
}
.header ul.progress-tracker li {
  display: inline-block;
  list-style: none;
}
.header ul.progress-tracker li>* {
  margin-bottom: 0 !important;
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1em;
  letter-spacing: 0.05em;
}
.header ul.progress-tracker li:last-child h5:nth-child(2) {
  display: none;
}
.header ul.progress-tracker li:not(:last-child)>*::after {
  content: url("../assets/caret-left.2a9a29b4b2cd.svg");
  display: inline-block;
  position: relative;
  width: 12px;
  height: auto;
  margin: 0 8px;
}
/*page content*/
.page-content {
  width: 950px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.page-content>div {
  width: 50%;
  box-sizing: border-box;
}
.page-content .left {
  padding-right: 24px;
}
.page-content .right {
  padding-left: 24px;

}
#checkout1 ul {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 0;
  position: relative;
  margin-bottom: 0;
}
#checkout1 ul li {
  list-style: none;
  box-sizing: border-box;
}
#checkout1 ul li:not(:last-child) {
  margin-right: 8px;
}
#checkout1 ul#region li {
  width: calc((100% - 16px)/3);
}
#checkout1 ul.phone li:first-child {
  width: calc((100% - 16px)/3);
}
#checkout1 ul.phone li:last-child {
  width: calc((100% - 4px)/3*2);
}
#checkout1 .price-info {
  margin: 16px 0 8px 0;
  padding: 16px 0 8px 0;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}
#checkout1 .shipping-terms>* {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
#checkout1 .shipping-terms input {
  zoom: 1.4;
}
#checkout1 .shipping-terms span {
  display: inline-block;
  padding-left: 16px;
  padding-bottom: 0;
}
.shipping-cta a {
  font-weight: 600;
}

.page-content p.alert-red {
  text-align: center;
  padding-bottom: 0;
  padding-top: 24px;
  margin-bottom: 0;
}
/* count down */
.countdown {
  border-radius: 4px;
  background-color: #DEF0FC;
  width: 100%;
  text-align: center;
  height: 42px;
  padding-top: 12px;
  margin: 12px auto;
}
.countdown span {
  font-size: 1.3em;
  font-weight: 800;
}
.item {
  margin-top: 24px;
  position: relative;
}
.item > p {
  font-weight: 800;
  margin-bottom: 8px;
}
.item p:first-child {
  max-width: 100%;
}
.item span.price {
  position: absolute;
  right: 0;
  top: 0;
}
.item h6:not(.c1-deposit-paid) {
  color: #525252;
  line-height: 1.6em;
  width: 80%;
}

/* checkout 2*/
#checkout2 .price-info {
  margin: 16px 0 8px 0;
  padding: 16px 0 8px 0;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}
#checkout2 .total {
  margin-bottom: 0;
}

#checkout2 .terms>* {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
#checkout2 .terms input {
  zoom: 1.4;
}
#checkout2 .terms span {
  display: inline-block;
  padding-left: 16px;
  padding-bottom: 0;
}
#checkout2 h6.note {
  margin-top: 16px;
  line-height: 1.5em;
  letter-spacing: 0.01em;
  text-align: center;
  color: #4A4B4D;
}

#checkout2 ul.phone li:not(:last-child) {
  margin-right: 8px;
}
#checkout2 ul:not(#id_is_same_as_shipping) {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 0;
  position: relative;
  margin-bottom: 0;
  list-style: none;
  box-sizing: border-box;
}

#checkout2 ul.expdate-and-cvv li:not(:last-child) {
  margin-right: 8px;
}
#checkout2 ul.expdate-and-cvv li:first-child {
  width: calc((100% - 16px)/3*2);
}
#checkout2 ul.expdate-and-cvv li:last-child {
  width: calc((100% - 4px)/3);
}
.card-number-frame, .expiry-date-frame, .cvv-frame {
  height: calc(1.5em + 0.75rem + 8px);
}

#checkout2 ul#region li {
  width: calc((100% - 16px)/3);
}
#checkout2 ul.phone li:first-child {
  width: calc((100% - 16px)/3);
}
#checkout2 ul.phone li:last-child {
  width: calc((100% - 4px)/3*2);
}
#checkout2 #id_is_same_as_shipping {
  list-style-type: none;
  padding: 0;
}
#checkout2 input[type="radio"] {
  height: inherit;
  margin: 8px;
}

.customer-details {
  border-radius: 4px;
  border: 1px solid #DDDDDD;
  margin-top: 12px;
}
.customer-details>div {
  padding: 16px 16px 8px 16px;
}
.customer-details h5 {
  color: #525252 !important;
}
.customer-details p {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 1.1em;
}
.customer-details>div:first-child {
  border-bottom: 1px solid #DDDDDD;
}
.customer-details ul {
  padding: 0;
  display: flex;
  position: relative;
  margin-top: 8px;
  margin-bottom: 0;
}
.customer-details ul li {
  list-style: none;
}

.summary-payment-header svg {
  margin-left: 11px;
}

/* confirmation */
#confirmation {
  width: 440px;
  margin: auto;
  text-align: center;
}
#confirmation>div:nth-child(-n+3), #confirmation>div.price-info:nth-child(4){
  border-bottom: 1px solid #DDDDDD;
  margin-bottom: 8px;
}
#confirmation .header {
  margin-top: 6vh;
}
#confirmation .header img {
  width: 52px;
  margin-bottom: 8px;
}
#confirmation .header>* {
  letter-spacing: 0.03em;
}
#confirmation .header h1 {
  margin-bottom: 8px;
  font-size: 1.46em;
}
#confirmation .product-info .logo {
  width: 84px;
  margin: auto auto 8px auto;
}
#confirmation .deposit-product-info .logo {
  width: 84px;
  margin: 12px auto 6px 0px;
}
#confirmation .deposit-product-info {
  text-align: left;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
#confirmation .deposit-product-info span{
  float: right;
  font-weight: 600;
  font-size: 1.15em;
}
.product-info p {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.price-info h6, .c1-deposit-paid {
  text-align: left;
  line-height: 1.5em;
  width: 100%;
}
.price-info span, .c1-deposit-paid span {
  float: right;
  font-weight: 600;
  font-size: 1.15em;
}
.info-content .price-info span {
  text-align: end;
  max-width: 60%;
}
.info-content .price-info {
  display: flex;
  flex-direction: column;
}
.total {
  position: relative;
  text-align: left;
  margin-bottom: 16px;
}
.total>* {
  display: inline-block;
  font-weight: 800;
  font-size: 1.1em;
}
.total span {
  font-size: 1.26em;
}
.total p:first-child {
  position: relative;
  left: 0;
}
.total p:last-child {
  position: absolute;
  right: 0;
}
.deposit-info h6:first-child {
  font-weight: 800;
  font-size: 1.26em;
}
.deposit-info h6:first-child > span {
  font-weight: 800;
  font-size: 1.26em;
}
#confirmation h6.note {
  line-height: 1.7em;
  letter-spacing: 0.05em;
  color: #4A4B4D;
  margin-bottom: 0;
}
/* info pages */
.info-pages {
  padding-top: 15vh;
  padding-bottom: 24px;
}
.info-content {
  max-width: 564px;
  text-align: center;
  margin: auto;
}

.balance-payment-header h1 {
  text-transform: unset;
}

#tnc, #shipping-tnc {
  height: 22px;
  width: 22px;
}

span.usd-approx-amount {
  font-size: 11px;
  font-weight: bold;
}

/* apple pay */
@supports (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button-with-text {
      display: inline-block;
      -webkit-appearance: -apple-pay-button;
      -apple-pay-button-type: buy;
      width: 100%;
      padding: 12px;
      height: 43px;
  }
  .apple-pay-button-with-text > * {
      display: none;
  }
  .apple-pay-button-black-with-text {
      -apple-pay-button-style: black;
  }
  .apple-pay-button-white-with-text {
      -apple-pay-button-style: white;
  }
  .apple-pay-button-white-with-line-with-text {
      -apple-pay-button-style: white-outline;
  }
}

@supports not (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button-with-text {
      --apple-pay-scale: 1; /* (height / 32) */
      display: inline-flex;
      justify-content: center;
      font-size: 12px;
      border-radius: 5px;
      padding: 12px;
      box-sizing: border-box;
      min-width: 200px;
      min-height: 32px;
      max-height: 64px;
      width: 100%;
      height: 43px;
  }
  .apple-pay-button-black-with-text {
      background-color: black;
      color: white;
  }
  .apple-pay-button-white-with-text {
      background-color: white;
      color: black;
  }
  .apple-pay-button-white-with-line-with-text {
      background-color: white;
      color: black;
      border: .5px solid black;
  }
  .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
      background-image: -webkit-named-image(apple-pay-logo-white);
      background-color: black;
  }
  .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
      background-image: -webkit-named-image(apple-pay-logo-black);
      background-color: white;
  }
  .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
      background-image: -webkit-named-image(apple-pay-logo-black);
      background-color: white;
  }
  .apple-pay-button-with-text > .text {
      font-family: -apple-system;
      font-size: calc(1em * var(--apple-pay-scale));
      font-weight: 300;
      align-self: center;
      margin-right: calc(2px * var(--apple-pay-scale));
  }
  .apple-pay-button-with-text > .logo {
      width: calc(35px * var(--scale));
      height: 100%;
      background-size: 100% 60%;
      background-repeat: no-repeat;
      background-position: 0 50%;
      margin-left: calc(2px * var(--apple-pay-scale));
      border: none;
  }
}

/* mobile version starts from tablet portrait */
@media screen and (max-width: 768px) {
  body {
    padding: 0 16px;
  }
  .only-mobile {
    display: block;
  }
  .padded-top {
    margin-top: 12px;
  }
  .btn-secondary {
    min-width: 60vw;
  }
  /* header */
  .header {
    text-align: center;
    max-width: 400px;
    margin: 12px auto 0 auto;
  }
  .header .logo {
    width: 120px;
    margin-bottom: 12px;
  }
  .header ul.progress-tracker {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
    line-height: 15px;
  }
  .header ul.progress-tracker li:not(:last-child) {
    width: 27%;
    text-align: center;
    position: relative;
  }
  .header ul.progress-tracker li:last-child {
    width: 19%;
  }
  .header ul.progress-tracker li:not(:last-child) {
    padding-right: 20px;
  }
  .header ul.progress-tracker li>* {
    margin-bottom: 0 !important;
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.5em;
    vertical-align: text-top;
  }
  .header ul.progress-tracker li:last-child h5:nth-child(1) {
    display: none;
  }
  .header ul.progress-tracker li:last-child h5:nth-child(2) {
    display: block;
  }
  .header ul.progress-tracker li:not(:last-child)>*::after {
    position: absolute;
    right: 0;
    top: 12px;
    margin-right: 0;
  }
  .header ul.progress-tracker li:nth-last-child(-n+2) {
    padding-top: 13px;

  }

  /* page content */
  .page-content {
    width: 100%;
    margin-top: 8px;
    max-width: 600px;
  }

  .page-content>div {
    width: 100%;
    padding: 0 !important;
  }
  .page-content h5 {
    text-align: center;
  }
  .countdown {
    margin: 8px auto;
  }
  .item {
    padding-bottom: 12px;
    margin-bottom: 12px;
    margin-top: 12px;
  }
  .item p {
    margin-bottom: 4px;
  }
  .item h6 {
    width: 100% !important;
    text-align: center;
    margin-bottom: 0;
  }
  .field {
    margin-top: -20px;
  }
  #checkout1{
    flex-direction: column-reverse;
  }
  #checkout1 ul#region {
    flex-wrap: wrap;
  }
  #checkout1 ul#region li:last-child {
    width: 100%;
  }
  #checkout1 ul#region li:nth-child(2) {
    width: calc((100% - 4px)/3*2);
    margin-right: 0;
  }
  /*checkout 2 */
  #checkout2 .right{
    display: none;
  }
  .customer-details {
    border-radius: 0;
    border: none;
    margin-top: 8px;
  }
  .customer-details>div {
    padding: 16px 0 0 0;
  }
  .customer-details p {
    font-size: 1.05em;
  }
  .customer-details h5 {
    text-align: left !important;
  }
  .customer-details>div:first-child {
    border-bottom: none;
  }
  #checkout2 .price-info span {
    font-size: 1.05em !important;
  }
  .summary-payment-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
  }
  .summary-payment-header h5 {
    grid-column-start: 2;
  }


  /*confirmation */
  #confirmation {
    width: 100%;
    max-width: 600px;
  }
  #confirmation>div:nth-child(-n+3){
    margin-bottom: 12px;
  }
  #confirmation .header {
    margin-top: 16px;
    padding-bottom: 12px;
  }
  #confirmation .header>* {
    letter-spacing: 0.03em;
  }
  #confirmation .header h3 {
    font-size: 1em;
    margin-bottom: 4px;
  }
  #confirmation .header h1 {
    margin-bottom: 2px;
    font-size: 1.26em;
  }
  .price-info h6 {
    font-size: 1.05em;
  }
  #confirmation .total {
    margin-bottom: 4px;
  }
  /*info pages */
  .info-pages {
    padding-top: 12vh;
  }
  .info-content {
    max-width: 100%;
    margin: auto;
  }

}