@import "sourceSansPro/sourceSans+Pro.css";

@base:#dd4b39;
@gray: #eee;

a.navbar-brand {
  background:transparent url('./img/logo_white.png') no-repeat left;
  padding-left:15px;
  background-size:13px 20px;
  height:50px;
}

.aspect-ratio-image {
  position:relative;
  display: inline-block;
  text-align:center;
  border:1px solid #f4f4f4;
  white-space: nowrap;
  padding:0px;
  img { max-width:96%; max-height:96%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
  &.x-mini { height:48px; width:48px; line-height:48px; }
  &.x-small { height:64px; width:64px; line-height:64px; }
  &.x-medium { height:128px; width:128px; line-height:128px; }
  &.x-large { height:256px; width:256px; line-height:256px; }
}

.loading-bar { margin:15px 0px; color:#777;  padding:10px; text-align:center; font-size:1.5em; }
.loading-bar.mini { font-size:1em; border-width:0px; margin:0px; padding:5px; }
.loading-bar.table { border-color:#f4f4f4; border-style:solid; border-width:1px 0px; }


.loading { background:url('./img/loading.svg');
           background-size:1em 1em;
           background-repeat:no-repeat;
           background-position:left center;
           height:100%;
           padding-left:1.5em;
           display:inline-block; }

.signin-social-buttons {
  display:flex;
  justify-content: center;
}
.signin-social-buttons a {
  font-size: 3em;
  margin:2px 10px;
}

.strike {
 display: block;
 text-align: center;
 overflow: hidden;
 white-space: nowrap;
 margin:15px 0px;
}

.strike > span {
 position: relative;
 display: inline-block;
}

.strike > span:before,
.strike > span:after {
 content: "";
 position: absolute;
 top: 50%;
 width: 9999px;
 height: 1px;
 background: @gray;
}

.strike > span:before {
 right: 100%;
 margin-right: 15px;
}

.strike > span:after {
 left: 100%;
 margin-left: 15px;
}
.home {
  .menu {
    display:block;
    width:100%;
    text-align:center;
    ul {
      display:flex;
      justify-content: center;
      li {
        flex:1;
      }
    }
  }
}

.checkout-page {
  .address-empty {
    text-align:center;
    font-size:2em;
    padding:10px;
  }
  .checkout-consignees {
    display:flex;
    flex-wrap:wrap;
    .addresses {
      label {font-weight:normal}
    }
    address {
      cursor:pointer;
      width:197px;
      margin:10px;
      display:inline-block;
      padding:9px;
      background:#f7f7f7;
      border-radius: 5px;
      height:150px;
      border:#f7f7f7 1px solid;
    }
    address.checked {
      border-color: @base;
    }
  }
  .desc { padding:10px; background:#f7f7f7; border-radius:5px; }
  .payments {
    label {
      margin:5px;
      height:66px;
      cursor:pointer;
      img { width:64px;height:64px; }
    }
    label.checked {
      border-bottom:@base 2px solid;
    }
  }
  .logistics {
    label {
      margin:5px;
      cursor:pointer;
      height:66px;
      line-height: 66px;
      span { display:inline-block; padding:0px 5px; color:#888; height:3em; line-height:3em; text-align:center; background:#f7f7f7; border-radius:5px; }
    }
    label.checked {
      border-bottom:@base 2px solid;
      span {
        color:#000;
      }
    }
  }
}


.skin-red-light .main-header .navbar {background-color: rgba(221, 75, 57, 0.9)}
.skin-red-light .content-wrapper, .skin-red-light .main-footer { border-left:0px; }
// .index-carousel { margin-top:-50px; }
// .carousel-indicators li { background-color:#666; }
// .carousel-indicators li.active { border-color:@base; }
.slide-item {
  width:100%;
  height:650px;
  background-position:center center;
  background-repeat:no-repeat;
  margin-top:-20px;
}

.product-options {
  margin:20px 0px;
  .items { display:flex; }
  label {
    flex:1;
    text-align:center;
    margin:5px;
    cursor:pointer;
    span {
      display:block;
      padding:15px;
      border:1px solid @gray;
      font-weight:normal;
      border-radius:5px;
    }
    input:checked + span { border-color: @base; border-width:2px; padding:14px; }
    input:disabled + span { color:@gray; }
  }
}

.buy-button { font-size:2em }
