.wrapper {
	width:100%;
	margin:0 auto;
	}

.wrapper p {
  padding: 12px;
  width: 100%;
  max-width: 840px;
  line-height: 1.4;
	font-size:24px;
}
.wrapper a {
  display: inline-block;
  position: relative;
  color: #343434;
  text-decoration: none;
  padding: 0 6px;
}
.wrapper a:before, a:after {
  will-change: transform;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
.wrapper a:before {
  -webkit-transition: 100ms ease-out 50ms;
  transition: 100ms ease-out 50ms;
  -webkit-transform-origin: 0 24px;
          transform-origin: 0 24px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cfdfff;
}
.wrapper a:after {
  -webkit-transition: 50ms ease-out;
  transition: 50ms ease-out;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  bottom: 2px;
  right: -12px;
  border: 8px solid transparent;
  border-left-color: #c7e;
}
.wrapper a:hover:before {
  -webkit-transition: 100ms ease-out;
  transition: 100ms ease-out;
  -webkit-transform: scaleY(0.18);
          transform: scaleY(0.18);
  background: #c7e;
}
.wrapper a:hover:after {
  -webkit-transition: 50ms ease-out 100ms;
  transition: 50ms ease-out 100ms;
  -webkit-transform: none;
          transform: none;
}
.wrapper a:active:before {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  background: deeppink;
}
.wrapper a:active:after {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  border-left-color: deeppink;
}