@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  display: -webkit-box;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-family: Lato, sans-serif;
  background: #ECEFFC;
}

.shadow {
  -webkit-filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
          filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
}

.card {
  -webkit-clip-path: inset(0 0 70% 0);
          clip-path: inset(0 0 70% 0);
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 400px;
  height: 100px;
  font-size: 2em;
  color: white;
  background-color: #2979ff;
  -webkit-clip-path: inset(0 19% 0 19%);
          clip-path: inset(0 19% 0 19%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-body {
  box-sizing: border-box;
  padding: 1.25em;
  width: 400px;
  height: 225px;
  font-size: 1.5em;
  background: white;
  -webkit-clip-path: inset(0 19% 0 19%);
          clip-path: inset(0 19% 0 19%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-body dl {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
}
.card .card-body span {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 0.5s ease-in;
  transition: 0.5s ease-in;
}
.card .card-body span:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.card .card-body span:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.card .card-body span:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.card .card-body span dt,
.card .card-body span dd {
  display: inline;
  margin: 0;
}
.card .card-body span dt svg,
.card .card-body span dd svg {
  margin-right: 0.3em;
}
.card:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.card:hover .card-header,
.card:hover .card-body {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.card:hover span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}