*, *:before, *:after { box-sizing: border-box; }

.debug { border: 1px solid red;}
.debug .debug { border: 1px solid blue; }

.btn-add-to-cart button { 
  padding: 10px 10px; 
  -webkit-appareance: none; text-align: center; white-space: nowrap;  color: white;
  border-radius: 5px; border: none; cursor: pointer;
  background: #2699bf;  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  transition: all 450ms ease-in-out, box-shadow 750ms ease-in-out;
}
.btn-add-to-cart button:hover {
  background: #196e8a; 
  box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
}
.rounded { border-radius: 50%; }

#wrapper { float: left; width: 100%; }
.container { width: 1280px; margin: auto; }

@media screen and (max-width: 1400px){ .container { width: 100%; } }

/* Card */
.card-container {
  background-color: ; 
 float: left; 
 width: 200px; 
 height: 250px; 
 margin-left: 15px; 
 margin-right: 15px; 
}


.cardd { 
  position: relative; 
  z-index: 5;
  display: block;
  float: left; 
  width: 100%;
  background: #FFF;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.45);
}
.card-thumbnail { position: relative; float: left; width: 100%; height: 170px; }
.thumbnail-link {  display: block; position: absolute; top: 0; left: 0; 
  width: 100%; height: 100%;  }
.thumbnail-button { 
  position: absolute;  top: 5px; z-index: 9; 
  display: block; width: auto; height: 40px; 
  padding-top: 5px; padding-left: 5px; padding-right: 5px;    
  color: white; text-align: center;
  border-radius: 20px;  background: #171e23; 
}
.thumbnail-button img { border-radius: 50%; }
.thumbnail-button img, .thumbnail-button .card-trigger-label { display: table-cell; vertical-align: middle;}
.new-button { z-index: 7; width: auto; left: 5px; background: transparent;  }
.card-trigger {  display: table; table-layout: auto; right: 5px; width: 100px; cursor: pointer;  color: #171e23; }


.card-infos { 
  float: left; width: 100%; position: relative; top: 0; z-index: 8; padding-top: 10px; 
  background-color: rgba (255, 44, 0, 0);
  transition: margin-top 450ms ease-in-out;
}

.product-name, .product-bottom {  padding-left: 10px; padding-right: 10px; } 
.product-name {  margin-top: 0;  text-align: center; font-size: 21px; line-height: 36px; font-weight: 300; }
.product-price {  padding-bottom: 10px; font-size: 28px; font-weight: 400; color: black; text-align: center;  background-color: rgba (255, 44, 0, 0);  }

.product-bottom {
  height: 0; overflow: hidden; padding-bottom: 0;
  transition: height 450ms ease-in-out, padding-top 450ms ease-in-out, padding-bottom 450ms ease-in-out;
}
.btn-add-to-cart, .btn-add-to-cart button { width: 100%; padding: 0; transition: padding 650ms ease-in-out;}
.cardd:hover .btn-add-to-cart button { padding: 10px; }
.btn-add-to-cart button { width: 100%; }
.cardd:hover .product-bottom { display: table; width: 100%; padding-top: 10px; padding-bottom: 10px; }

/* Card is-opened */
.cardd:hover .card-infos { 
  margin-top: -58px; 
}
.cardd.is-opened .product-price, .cardd.is-opened .product-bottom { 
  padding-top: 10px; padding-bottom: 10px;
}
.cardd.is-opened .product-price, .cardd.is-opened .product-bottom { 
  display: block !important; height: auto;
}