html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, html {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #DAECF7;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

h1 {
  font-size: 1em;
  font-family: "Montserrat";
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
  color: #b6d0e0;
  position: relative;
  margin-top: -15px;
  line-height: 15px;
}

.center {
  margin: auto;
}

.wrapper {
  width: 700px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: white;
  overflow: hidden;
  height: 364px;
  border-radius: 8px;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.card-wrap {
  width: 260px;
  float: right;
  background: #665aa7;
  padding: 50px;
  -webkit-transform: scale(1.5) rotate(20deg);
          transform: scale(1.5) rotate(20deg);
}

.card {
  -webkit-transform: scale(0.75) rotate(-20deg);
          transform: scale(0.75) rotate(-20deg);
}

svg {
  width: 150%;
  position: relative;
  right: 130px;
  top: 10px;
  overflow: visible;
}
svg:not(:root) {
  overflow: visible;
}

#sunglasses {
  -webkit-transition: -webkit-transform .15s;
  transition: -webkit-transform .15s;
  transition: transform .15s;
  transition: transform .15s, -webkit-transform .15s;
}
.checkout:hover ~ .card-wrap #sunglasses {
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
}

#right_eye_wink {
  display: none;
}
.checkout:active ~ .card-wrap #right_eye {
  display: none;
}
.checkout:active ~ .card-wrap #right_eye_wink {
  display: block;
}

#mouth {
  -webkit-transition: -webkit-transform .15s;
  transition: -webkit-transform .15s;
  transition: transform .15s;
  transition: transform .15s, -webkit-transform .15s;
}
.checkout:hover ~ .card-wrap #mouth {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

#front_hand, #back_hand {
  -webkit-transition: -webkit-transform .03s;
  transition: -webkit-transform .03s;
  transition: transform .03s;
  transition: transform .03s, -webkit-transform .03s;
}
.checkout:active ~ .card-wrap #front_hand, .checkout:active ~ .card-wrap #back_hand {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.checkout {
  outline: none;
  background: #665aa7;
  border: 0;
  color: white;
  position: relative;
  top: 50%;
  left: 15%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 12px 16px;
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 1.1em;
  letter-spacing: .1em;
  border-radius: 4px;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.checkout:hover:not(:active) {
  background: #857bb9;
}