/* ---------------------------------------------- */
/* https://codepen.io/michiel-huiskens/pen/NNgByK */
/* ---------------------------------------------- */

.shadow-1:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
}

.shadow-1:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
}

.shadow-2:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1);
}

.shadow-2:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.shadow-3:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.12);
}

.shadow-3:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.1);
}

.shadow-4:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.11);
}

.shadow-4:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.11);
}

.shadow-5:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.1);
}

.shadow-5:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: inherit;
  height: inherit;
  z-index: -2;
  box-sizing: border-box;
  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.11);
}

.card {
  cursor: pointer;
  position: relative;
  height: 100px;
  background: #fcfcfc;
  margin: 20px 40px;
  transition: 0.4s all;
}

.card.open {
  /* height: 200px; */
  height: auto; /* NEW */
  background: white;
}

@media only screen and (min-width: 600px) {
  .card {
    min-width: 100%; /* NEW */
    /* width: 500px; */
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-device-width: 800px) and (orientation: portrait) {
  .card {
    margin: 12px 10px;
  }
}