/**
 * @package         Lartssubscriptions Pro
 * @version         21.10.0
 * 
 * @author          Logical-Arts <info@logical-arts.de>
 * @copyright       Copyright © 2021 Logical-Arts All Rights Reserved
 * @license         GNU GPLv3 <http://www.gnu.org/licenses/gpl.html> or later
 * @link            https://www.logical-arts.de
 */

.larts-tile {
  *display: block;
  *float:left;
  *width: 150px;
  height: 100%;
  border: 3px solid #CCC;
  text-align: center;
  *margin-top: 10px;
  *margin-bottom: 10px;
  *margin: 5px;
  padding: 5px;
}
.larts-tile:hover  {
  background-color: rgb(220,220,220);
  color: black;
}

.larts-tile a:hover {
  background-color: transparent;
  color: black;
}

.larts-category-thumbnail {
  height: 100px;
}
.larts-category-thumbnail:hover {
  background-color: transparent;
}

.larts-list-tile {
  margin-bottom: 20px;
}

.larts-tile-heading {
  text-decoration: none;
  color: black;
  font-size: 1.2em;
  margin-top: 0.5em;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  flex-grow: 1;
}


/*
  Category Tiles - Grid
*/

/*.larts {
  display: block;
  margin: 0;
  padding: 0;
}

.larts .tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 1rem 1rem;
  background-color: none;
}

.larts .tile-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.larts .tiles-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(236, 236, 236);
  border: 1px solid black;
  text-align: center;
}
.larts .tiles-tile:hover {
  background-color: rgb(128,128,128);
}

.larts .tiles-tile >a:hover {
  background-color: rgb(128,128,128);
}*/



/*
  Product Image
*/

.larts .larts-image-container {
  text-align: center;
  max-height: 200px;
}

.larts-sec-div {
  margin: 15px;
  background-color: rgb(220, 220, 220);
  height: 8px;
  border-radius: 3px;
}

.larts .but-order {
  border-radius: 3px;
  color: black;
  background-color: rgb(197, 197, 197);
}

/*
  Product tiles
*/

.larts .product-tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem 1rem;
  background-color: transparent;
}

.larts .product-tile-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 15px;
  margin: 5px;
  margin-top: 10px;
}

.larts .product-tiles-tile {
  display: flex;
  flex-direction: column;
  background-color: rgb(236, 236, 236);
  border: 3px solid rgb(197, 197, 197);
  min-height: 300px;
  margin: 10px;
}
.larts .product-tiles-tile >a:hover {
  background-color: rgb(128,128,128);
}

.larts .product-tile-thumbnail-container {
  width: 80%;
  align-self: center;
  min-height: 220px;
  max-height: 220px;
}
.larts .product-tile-thumbnail {
  width: 100%;
  max-height: 220px;
  *align-self: center;
}

.larts .product-tile-thumbnail-img {
  width: 100%;
  height: auto;
  margin: 0;
}

.larts .product-tile-name {
  font-size: 1.0rem;
  font-weight: 300;
  color: black;
  margin: 10px;
  margin-bottom: 0px;
}

.larts .product-tile-details {
  font-size: 0.8rem;
  color: black;
  margin: 10px;
}

.larts .product-tile-price {
  margin-top:auto;
  margin-bottom: 10px;
  font-size: 1.0rem;
  font-weight: 600;
  *color: red;
  text-align: right;
}

.larts .product-banner-container {
  position: relative;
  margin-top: -10px;
  width: 50%;
  height: 0;
}

.larts .product-banner {
  position: relative;
  width: 6rem;
  height:1.8em;
  margin-top: 2em;
  padding-top: 0.2em;
  top: 0;
  left: -10;
  transform: skewY(-20deg);
  z-index: 20;
  background-color: rgb(255, 104, 104);
}

.larts .product-list-thumbnail {
  max-height: 80px;
  width: auto;
}
.larts .product-list-link {
  text-decoration: none;
  xwidth: 100%;
  xdisplay: flex;
  xflex-direction: column;
  xpadding: 15px;
  xmargin: 5px;
  xmargin-top: 10px;
  color: black;
}
.larts .product-list-link > a:hover {
  xbackground-color: rgb(255,128,128);
  xcolor: black;
}