/*
  Theme Name:     Kamellebud
  Theme URI:      http://kamellebud.de
  Description:    Child Theme for Divi.
  Author:         Druckservice.koeln
  Author URI:     http://druckservice.koeln
  Text Domain:    indiku
  Template:       Divi
  Version:        1.0.0
*/

#left-area .product-catalog {}

  #left-area .product-catalog ul {
    margin: 0;
    padding: 0;
    line-height: 1;
    margin: 20px -10px; }

    #left-area .product-catalog ul::after {
      content: '';
      display: table;
      clear: both; }

  #left-area .product-catalog li {
    list-style: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    padding: 10px; }

    #left-area .product-catalog li:nth-child(3n+4) {
      clear: left; }

    #left-area .product-catalog li .product-container {
      border: 3px solid #e30613; 
      padding: 10px;
      position: relative;
      border-radius: 2px; }

    #left-area .product-catalog li .product-title {
      color: #333;
      font-weight: bold;
      font-size: 16px; }

    #left-area .product-catalog li .product-article-number {
      background: #e30613;
      color: white;
      font-weight: bold;
      font-size: 12px;
      line-height: 14px;
      position: absolute;
      top: 0;
      right: 0;
      padding: 13px 10px 14px 11px;
      border-bottom-left-radius: 2px; }

    #left-area .product-catalog li .product-information {
      font-size: 12px;
      font-weight: bold;
      margin-top: 5px;
      min-height: 12px; }

    #left-area .product-catalog li .product-image {
      margin: 10px 0;
      position: relative;
      overflow: hidden; }

      #left-area .product-catalog li .product-image img.background-image {
        display: block;
        width: 100%;
        height: auto; }

      #left-area .product-catalog li .product-image a.lightbox {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center; }

      #left-area .product-catalog li .product-image img.foreground-image {
        width: auto;
        height: 100%;
        display: block;
        margin: 0 auto; }

    #left-area .product-catalog li .product-package-units {
      font-size: 12px;
      font-weight: bold;
      color: white;
      background: #333;
      position: absolute;
      bottom: 10px;
      left: 10px;
      padding: 6px 5px;
      border-radius: 2px; }

    #left-area .product-catalog li .product-availability-status {
      text-align: right;
      font-weight: bold;
      color: #e30613;
      margin: 10px 0 0;
      line-height: 24px;
      min-height: 24px; }

    #left-area .product-catalog li .product-price {
      background: url(assets/tag.svg) no-repeat 0 0;
      background-size: 90px 50px;
      font-size: 11px;
      font-weight: bold;
      color: black;
      position: absolute;
      right: 13px;
      bottom: 13px;
      width: 90px;
      height: 50px;
      text-align: center;
      line-height: 1;
      padding-top: 6px;
      box-sizing: border-box;
      -moz-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg); }

      #left-area .product-catalog li .product-price b {
        color: #e30613;
        display: block;
        font-size: 22px;
        margin-bottom: 2px;
        text-shadow: -2px 0 1px white, 2px 0 1px white, 0 -2px 1px white, 0 2px 1px white; }

    #left-area .product-catalog li .product-gross-price {
      font-weight: bold;
      line-height: 24px;
      margin-top: 10px;
      text-align: right; }

    #left-area .product-catalog .product-catalog-download {
      display: block;
      background: #e30613;
      width: 100%;
      max-width: 347px;
      margin: 0 auto 30px;
      text-align: center;
      font-weight: bold;
      color: white;
      font-size: 14px;
      line-height: 18px;
      padding: 11px 10px;
      border-radius: 2px; }

      #left-area .product-catalog .product-catalog-download:hover {
        background: #333; }

      #left-area .product-catalog .product-catalog-download:active {
        padding: 12px 10px 10px; }

@media only screen and (max-width : 980px) {

  #left-area .product-catalog li {
    width: 50%; }

    #left-area .product-catalog li:nth-child(3n+4) {
      clear: none; }

    #left-area .product-catalog li:nth-child(2n+3) {
      clear: left; }

}

@media only screen and (max-width : 640px) {

  #left-area .product-catalog li {
    width: 100%; }

  #left-area .product-catalog li:nth-child(2n+3) {
    clear: none; }

}

@media only screen and (max-width : 640px) {

  #left-area .product-catalog li .product-title, #left-area .product-catalog li .product-information {
    text-align: center; }

  #left-area .product-catalog li .product-article-number {
    left: auto;
    right: auto;
    position: relative;
    border-radius: 2px;
    padding: 6px 5px;
    margin-top: 5px;
    text-align: center; }

}