a.cta_arrow {
  font-family: var(--pokpok-font-regular);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--pokpok-color-blue);
  display: inline-block;
  position: relative;
  padding-right: 1.7em;
  margin: 6px 0;
}
a.cta_arrow:hover {
  text-decoration: underline;
}
a.cta_arrow:after {
  content: '';
  background-color: var(--pokpok-color-blue);
  height: 1.3em;
  width: 1.3em;
  position: absolute;
  top: calc(50% - .65em);
  right: 0;
  border-radius: 100px;
  background-image: url('../res/img/static/play.svg');
  background-position: center;
  background-size: .9em;
  background-repeat: no-repeat;
}
a.cta_arrow.small {
  padding-right: 1.2em;
}
a.cta_arrow.small:after {
  height: 14px;
  width: 14px;
  top: calc(50% - 5px);
  background-size: .5em;
}

.blue a.cta_arrow {
  color: var(--pokpok-color-white);
}
.blue a.cta_arrow:after {
  background-image: url('../res/img/static/play_blue.svg');
  background-color: var(--pokpok-color-white);
}

a.cta_arrow.alt {
  font-family: var(--pokpok-font-semilight);
  font-size: 1.4em;
  color: var(--pokpok-color-red);
}
a.cta_arrow.alt:after {
  background-color: transparent;
  border-radius: 0;
  background-image: url('../res/img/static/chevron_red.png');
  background-size: .5em;
}

a.cta_arrow.color {
  font-family: var(--pokpok-font-semilight);
  font-size: 1.4em;
  padding-right: 0;
}
a.cta_arrow.color:after {
  content: none;
}
a.cta_arrow.color.red { color: var(--pokpok-color-red); }
a.cta_arrow.color.blue { color: var(--pokpok-color-blue); }
a.cta_arrow.color.green { color: var(--pokpok-color-green); }
a.cta_arrow.color.dark-yellow { color: var(--pokpok-color-dark-yellow); }

@media (max-width: 700px) {
  a.cta_arrow {
    font-size: 1.1em;
  }
  a.cta_arrow.alt {
    font-size: 1.1rem;
  }
}