.box {
  border-radius: 4px;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0.1);
}

.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child {
  margin-bottom: 0;
}

.box.alt {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.box2 {
  background-color: #fff;
  margin-bottom: 2em;
  padding: 1.5em;
}

.box3 {
  background-color: rgba(227,213,198,0.4);
  color: #2d2d2d;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-bottom: 2em;
  padding: 5% 15%;
}

.box4 {
  background-color: #fff;
  color: #000;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-bottom: 2em;
  padding: 5% 15%;
}

@media screen and (max-width: 736px) {

  .box3, .box4 {
    padding: 6%;
  }

}

/* Position the front and back side */
.box-front, .box-back {
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.box-front {
  position: absolute;
  padding: 10% 10%;
}

/* Style the back side */
.box-back {
  background-color: #fff;
  padding: 19% 10% 1%;
  transform: rotateY(180deg);
}

@media screen and (max-width: 736px) {

  .box-front {
    padding: 5% 10%;
  }

  .box-back {
    padding: 20% 10% 10%;
  }

}

.wsbox {
  background-color: #fff;
}

.wsboxfront, .wsboxback {
  transition: 0.5s;
}

.wsboxback {
  position: relative;
  background-color: #fff;
  margin-top: auto;
  margin-bottom: auto;
  padding: 180px 40px 120px;
  display: none;
}

.wsbox:hover .wsboxfront {
  display: none;
}

.wsbox:hover .wsboxback {
  display: block;
}

@media screen and (max-width: 960px) {

  .wsboxback {
    padding: 140px 40px 100px;
  }

}

@media screen and (max-width: 480px) {

  .wsboxback {
    padding: 72px 30px 48px;
  }

}