.card{
  background:white;
  display:inline-block;
  position:relative;
  margin:20px 5%;
  width:90%;
  top:0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card:last-child {
  /* Fixes the odd flickering bug */
  margin-bottom:0px;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  top:-3px;
}

.card h3{
  font-family:'Cormorant Infant', serif;
  font-weight:600;
  font-size:22px;
  border-bottom:solid 1px black;
  text-align:center;
  margin:5px;
}


.card h3{
  border-bottom:none;
}
.card h3 a{
  color:inherit;
  text-decoration:none;
  border-bottom:solid 1px black;
}

.card a:hover{
  color: #760c88;
  border-color: #760c88;
  transition: .2s ease-in-out;
  transition-property: color, border-color;
}

.card .card-text {
  margin:0;
  left: 40%;
  top: 34px;
}

.card .card-text p:first-child{
  margin-top:0px;
}

.card .card-text{
  padding:10px;
}

.card .card-text:after{
  content:'';
  display:block;
  clear:both;
}

.card .card-image{
  width: 40%;
  padding: 10px;
  position:relative;
  float:left;
}

.card img{
  width:80%;
  padding:10px;
  background: #d4d4fb;
  border: solid 1px #dec8e2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card p, .card a{
  color:black;
  opacity:.87;
}

.card .card-details{
  font-family: 'Cormorant SC', serif;
  list-style:none;
  text-align:center;
  margin-top:0px;
  padding:0;
}

.card .card-details.out-of-stock{
  opacity:.54;
}

.card .card-details li a.disabled{
  opacity:.54;
  text-decoration:none;
}

.card .card-details.out-of-stock li.numberInStock{
  color:#5d0000
}

.card .card-details li{
  display:inline-block;
  margin-right:20px;
}

.card .card-details .numberInStock{
  font-weight:600;
}

.card .card-details li:last-child{
  margin-right:0;
}
.catalogue{
  max-width:2000px;
  column-count: 3;
}

@media (max-width:400px){
  .card .card-image{
    width:100%;
    float:none;
    padding:0;
    display: block;
    margin: 10px auto;
    text-align: center;
  }
  .card .card-image img{
    margin: 10px;
  }
}