@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after {
  box-sizing: border-box;
}

.col-my-box {
  padding: 1rem;
}
@media (min-width: 650px) {
  .col-my-box {
    width: 50%;
    float: left;
  }
  .col-my-box:nth-of-type(2n+1) {
    clear: left;
  }
}

.card-my-box {
  display: block;
  text-align: center;
  color: black;
}
.card-my-box .content-my-box {
  padding: 4rem 1rem;
}
.card-my-box .title-my-box {
  font-size: 1.25rem;
  background-color: gray;
  border-radius: 3px;
  padding: 0.5rem;
}

.card-1 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-1:before, .card-1:after {
  border-radius: 5px;
}
.card-1:before {
  background-color: #eef4f7 !important;
}
.card-1 .title, .card-1:after {
  background-color: #bad2df !important;
}

.card-2 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-2:before, .card-2:after {
  border-radius: 5px;
}
.card-2:before {
  background-color: #eef4f7 !important;
}
.card-2 .title, .card-2:after {
  background-color: #bad2df !important;
}

.card-3 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-3:before, .card-3:after {
  border-radius: 5px;
}
.card-3:before {
  background-color: #eef4f7 !important;
}
.card-3 .title, .card-3:after {
  background-color: #bad2df !important;
}

.card-4 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-4:before, .card-4:after {
  border-radius: 5px;
}
.card-4:before {
  background-color: #eef4f7 !important;
}
.card-4 .title, .card-4:after {
  background-color: #bad2df !important;
}

.card-5 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-5:before, .card-5:after {
  border-radius: 5px;
}
.card-5:before {
  background-color: #eef4f7 !important;
}
.card-5 .title, .card-5:after {
  background-color: #bad2df !important;
}

.card-6 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-6:before, .card-6:after {
  border-radius: 5px;
}
.card-6:before {
  background-color: #eef4f7 !important;
}
.card-6 .title, .card-6:after {
  background-color: #bad2df !important;
}

.card-7 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-7:before, .card-7:after {
  border-radius: 5px;
}
.card-7:before {
  background-color: #eef4f7 !important;
}
.card-7 .title, .card-7:after {
  background-color: #bad2df !important;
}

.card-8 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-8:before, .card-8:after {
  border-radius: 5px;
}
.card-8:before {
  background-color: #eef4f7 !important;
}
.card-8 .title, .card-8:after {
  background-color: #bad2df !important;
}

.card-9 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-9:before, .card-9:after {
  border-radius: 5px;
}
.card-9:before {
  background-color: #eef4f7 !important;
}
.card-9 .title, .card-9:after {
  background-color: #bad2df !important;
}

.card-10 .content-my-box {
  background-color: white !important;
  border-radius: 5px;
}
.card-10:before, .card-10:after {
  border-radius: 5px;
}
.card-10:before {
  background-color: #eef4f7 !important;
}
.card-10 .title, .card-10:after {
  background-color: #bad2df !important;
}

[class*=stacked--] {
  position: relative;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
[class*=stacked--]:before, [class*=stacked--]:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
[class*=stacked--]:before {
  z-index: -1;
}
[class*=stacked--]:after {
  z-index: -2;
}

.stacked--left:before, .stacked--left:after {
  transform-origin: right center;
}
.stacked--left:hover {
  transform: translate(-5px, 0);
}
.stacked--left:hover:before {
  transform: translate(5px, 0) scale(0.95);
}
.stacked--left:hover:after {
  transform: translate(10px, 0) scale(0.9);
}

.stacked--right:before, .stacked--right:after {
  transform-origin: left center;
}
.stacked--right:hover {
  transform: translate(5px, 0);
}
.stacked--right:hover:before {
  transform: translate(-5px, 0) scale(0.95);
}
.stacked--right:hover:after {
  transform: translate(-10px, 0) scale(0.9);
}

.stacked--up:before, .stacked--up:after {
  transform-origin: center bottom;
}
.stacked--up:hover {
  transform: translate(0, -5px);
}
.stacked--up:hover:before {
  transform: translate(0, 5px) scale(0.95);
}
.stacked--up:hover:after {
  transform: translate(0, 10px) scale(0.9);
}

.stacked--down:before, .stacked--down:after {
  transform-origin: center top;
}
.stacked--down:hover {
  transform: translate(0, 5px);
}
.stacked--down:hover:before {
  transform: translate(0, -5px) scale(0.95);
}
.stacked--down:hover:after {
  transform: translate(0, -10px) scale(0.9);
}

.stacked--up-left:hover {
  transform: translate(-5px, -5px);
}
.stacked--up-left:hover:before {
  transform: translate(5px, 5px);
}
.stacked--up-left:hover:after {
  transform: translate(10px, 10px);
}

.stacked--up-right:hover {
  transform: translate(5px, -5px);
}
.stacked--up-right:hover:before {
  transform: translate(-5px, 5px);
}
.stacked--up-right:hover:after {
  transform: translate(-10px, 10px);
}

.stacked--down-left:hover {
  transform: translate(-5px, 5px);
}
.stacked--down-left:hover:before {
  transform: translate(5px, -5px);
}
.stacked--down-left:hover:after {
  transform: translate(10px, -10px);
}

.stacked--down-right:hover {
  transform: translate(5px, 5px);
}
.stacked--down-right:hover:before {
  transform: translate(-5px, -5px);
}
.stacked--down-right:hover:after {
  transform: translate(-10px, -10px);
}

.stacked--fan-left {
  transform-origin: center bottom;
}
.stacked--fan-left:before, .stacked--fan-left:after {
  transform-origin: center bottom;
}
.stacked--fan-left:hover {
  transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-left:hover:before {
  transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-left:hover:after {
  transform: translate(5px, 0) rotate(5deg);
}

.stacked--fan-right {
  transform-origin: center bottom;
}
.stacked--fan-right:before, .stacked--fan-right:after {
  transform-origin: 50% 100%;
}
.stacked--fan-right:hover {
  transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-right:hover:before {
  transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-right:hover:after {
  transform: translate(-5px, 0) rotate(-5deg);
}