/*--- standard variables ---*/
/* Orange */
/* Black */
/* Light grey */
/* Medium grey */
/*--- product item ratio (thumb + content) ---*/
/* 1.77*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/*--- media queries. When using responsive: only mobile & desktop ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 480px)";
@breakPointTablet:		~"only screen and (min-width: 999999999px)";
@breakPointTabletLand:	~"only screen and (min-width: 768px)";
@breakPointDesktop:		~"only screen and (min-width: 768px)";

@breakPointUpToTablet:	~"only screen and (max-width: 767px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 767px)";
*/
/*--- media queries. When not using responsive ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 1px)";
@breakPointTablet:		~"only screen and (min-width: 1px)";
@breakPointTabletLand:	~"only screen and (min-width: 1px)";
@breakPointDesktop:		~"only screen and (min-width: 1px)";

@breakPointUpToTablet:	~"only screen and (max-width: 1px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 1px)";
*/
/*--- custom class functions ---*/
/*----- LESS functions -----*/
/*wordt vervangen door .border-radius
.rounded(@radius: 3px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:		@radius;
	border-radius:			@radius;
}*/
/*----- CSS3 Animation functions -----*/
/*wordt vervangen door .box-shadow
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
	-webkit-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	box-shadow:			inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
.cart,
.invoice {
  position: relative;
}
.cart #productsWrapper,
.invoice #productsWrapper {
  margin-bottom: 15px;
}
.cart table tr,
.invoice table tr {
  position: relative;
}
.cart table tr th,
.invoice table tr th,
.cart table tr td,
.invoice table tr td {
  padding: 0 1%;
  display: block;
  float: left;
}
.cart table tr th.price,
.invoice table tr th.price,
.cart table tr td.price,
.invoice table tr td.price,
.cart table tr th.link,
.invoice table tr th.link,
.cart table tr td.link,
.invoice table tr td.link {
  text-align: right;
}
.cart table tr th,
.invoice table tr th {
  text-transform: uppercase;
}
.cart table tr td,
.invoice table tr td {
  padding: 8px 3%;
}
.cart table tr td.price,
.invoice table tr td.price,
.cart table tr td .price,
.invoice table tr td .price {
  font-weight: bold;
  font-size: 16px;
}
.cart table tr td .header,
.invoice table tr td .header {
  color: black;
}
.cart table tr td .articleNumber,
.invoice table tr td .articleNumber {
  color: #999999;
}
.cart table tbody td.deliveryOptionsWrapper,
.invoice table tbody td.deliveryOptionsWrapper {
  float: none;
}
.cart table tbody td.image,
.invoice table tbody td.image {
  float: left;
  width: 100px;
}
.cart table tbody td.image > a,
.invoice table tbody td.image > a {
  height: inherit;
  display: block;
}
.cart table tbody td.image > a img,
.invoice table tbody td.image > a img {
  display: block;
}
.cart table tbody td.product,
.invoice table tbody td.product {
  padding: 8px 0 0;
}
.cart table tbody td.totalPrice,
.invoice table tbody td.totalPrice {
  font-weight: bold;
  padding: 8px 3% 0 3%;
  float: right;
}
.cart table tbody td.deleteTd,
.invoice table tbody td.deleteTd {
  position: relative;
  float: none;
}
.cart table tbody td.deleteTd .deleteButton,
.invoice table tbody td.deleteTd .deleteButton {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
.cart table tfoot tr.discountCode a,
.invoice table tfoot tr.discountCode a {
  color: #666666;
}
.cart table tfoot td,
.invoice table tfoot td {
  width: 44%;
  float: left;
  border-bottom: 1px solid #dedede;
  text-transform: none;
}
.cart table tfoot td.empty,
.invoice table tfoot td.empty {
  border: 0 none;
}
.cart table tfoot td .deleteButton,
.invoice table tfoot td .deleteButton {
  float: left;
  margin-right: 5px;
}
.cart table tfoot td .discount,
.invoice table tfoot td .discount {
  float: right;
}
@media only screen and (max-width: 767px) {
  .cart table tfoot tr.subTotal .checkoutUSP,
  .invoice table tfoot tr.subTotal .checkoutUSP {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .cart table tr th,
  .invoice table tr th,
  .cart table tr td,
  .invoice table tr td {
    display: table-cell;
    float: none;
    padding: 20px .5%;
  }
  .cart table tr th.price,
  .invoice table tr th.price,
  .cart table tr td.price,
  .invoice table tr td.price {
    float: none;
  }
  .cart table tr th,
  .invoice table tr th {
    border-bottom: 1px solid #dedede;
    min-width: 70px;
    padding: 1% .5%;
    width: 12%;
  }
  .cart table tr th.image,
  .invoice table tr th.image,
  .cart table tr th.product,
  .invoice table tr th.product {
    width: auto;
  }
  .cart table thead .delete,
  .invoice table thead .delete {
    width: 2%;
    min-width: 0;
  }
  .cart table tbody tr,
  .invoice table tbody tr {
    border-top: 1px solid #dedede;
  }
  .cart table tbody td.deliveryOptionsWrapper,
  .invoice table tbody td.deliveryOptionsWrapper {
    /*    position:absolute;
                          left:0;
                          bottom:0;
                          width:50%;
                          display:block;
                          padding:0;*/
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
  }
  .cart table tbody td.image,
  .invoice table tbody td.image {
    float: none;
  }
  .cart table tbody td.product,
  .invoice table tbody td.product {
    padding: 20px .5%;
  }
  .cart table tbody td.size:before,
  .invoice table tbody td.size:before,
  .cart table tbody td.amount:before,
  .invoice table tbody td.amount:before {
    display: none;
  }
  .cart table tbody td.totalPrice,
  .invoice table tbody td.totalPrice {
    margin: 0;
    padding: 20px .5%;
    float: none;
    text-align: right;
  }
  .cart table tbody td.deleteTd .deleteButton,
  .invoice table tbody td.deleteTd .deleteButton {
    position: relative;
    left: auto;
    top: auto;
    float: right;
    margin: 2px;
    margin-left: 5px;
  }
  .cart table tfoot td,
  .invoice table tfoot td {
    float: none;
    width: auto;
    padding: 5px .5%;
  }
  .cart table tfoot tr.subTotal td,
  .invoice table tfoot tr.subTotal td {
    padding-top: 40px;
  }
  .cart table tfoot tr.subTotal .checkoutUSP,
  .invoice table tfoot tr.subTotal .checkoutUSP {
    background-color: whitesmoke;
    padding: 15px;
  }
}
@media only screen and (min-width: 1280px) {
  .cart table tr td.price,
  .invoice table tr td.price,
  .cart table tr td .price,
  .invoice table tr td .price {
    font-size: 12px;
    font-weight: normal;
  }
  .cart table tr td.price.finalPrice,
  .invoice table tr td.price.finalPrice,
  .cart table tr td .price.finalPrice,
  .invoice table tr td .price.finalPrice {
    font-size: 16px;
    font-weight: bold;
  }
}