body {
  width: 100%;
}
.container {
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  padding: 40px 0;
}
div[class*='card-container-'] {
  float: left;
  width: 30%;
  margin-right: 3%;
  margin-bottom: 30px;
  position: relative;
  height: 200px;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.card h1 {
  font-size: 2em;
  font-weight: 600;
  padding: 1em 0 0 1em;
}
.card-container-1 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-1 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-1 .card:last-of-type {
  z-index: 80;
}
.card-container-1 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-1 .card:first-of-type {
  z-index: 100;
}
.card-container-1:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-1:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-1:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-1:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.card-container-2 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-2 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-2 .card:last-of-type {
  z-index: 80;
}
.card-container-2 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-2 .card:first-of-type {
  z-index: 100;
}
.card-container-2:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-2:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-2:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-2:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.card-container-3 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-3 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-3 .card:last-of-type {
  z-index: 80;
}
.card-container-3 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-3 .card:first-of-type {
  z-index: 100;
}
.card-container-3:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-3:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-3:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-3:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.card-container-4 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-4 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-4 .card:last-of-type {
  z-index: 80;
}
.card-container-4 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-4 .card:first-of-type {
  z-index: 100;
}
.card-container-4:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-4:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-4:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-4:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.card-container-5 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-5 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-5 .card:last-of-type {
  z-index: 80;
}
.card-container-5 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-5 .card:first-of-type {
  z-index: 100;
}
.card-container-5:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-5:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-5:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-5:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.card-container-6 {
  cursor: pointer;
  cursor: hand;
  color: #793c11;
}
.card-container-6 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
  background-color: chocolate;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.card-container-6 .card:last-of-type {
  z-index: 80;
}
.card-container-6 .card:nth-last-of-type(2) {
  z-index: 90;
}
.card-container-6 .card:first-of-type {
  z-index: 100;
}
.card-container-6:hover .card {
  border-bottom-left-radius: 10px;
}
.card-container-6:hover .card:first-of-type {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.card-container-6:hover .card:nth-of-type(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.card-container-6:hover .card:last-of-type {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}