/* Link */

.link {
  position: relative;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.link.darkgreen {
  color: #273e39;
}

.link.darkgreen .arrow path {
  fill: #273e39;
}

.link.darkgreen:before,
.link.darkgreen:after {
  background: #273e39;
}

.link.lightgreen {
  color: #adc4b4;
}

.link.lightgreen .arrow path {
  fill: #adc4b4;
}

.link.lightgreen:before,
.link.lightgreen:after {
  background: #adc4b4;
}

.link.white {
  color: #ffffff;
}

.link.white .arrow path {
  fill: #ffffff;
}

.link.white:before,
.link.white:after {
  background: #ffffff;
}

.link.black {
  color: #000000;
}

.link.black .arrow path {
  fill: #000000;
}

.link.black:before,
.link.black:after {
  background: #000000;
}

.link.orange {
  color: #fb5900;
}

.link.orange .arrow path {
  fill: #fb5900;
}

.link.orange:before,
.link.orange:after {
  background: #fb5900;
}

.link:hover:before {
  transform: scaleX(0);
}

.link:hover:after {
  transform: scaleX(1);
}

@media (min-width: 900px) {
  .link:hover .arrow {
    opacity: 1;
    transform: translate(40px, -50%);
  }
}

.link::before,
.link::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -2px;
  transition: transform 350ms ease;
  transform-origin: right;
  will-change: transform;
  background: black;
}

.link::after {
  transform: scaleX(0);
  transition-delay: 400ms;
  transform-origin: left;
}

.link .arrow {
  transition: 400ms ease;
  transition-property: opacity, transform;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  opacity: 0;
}

@media (max-width: 900px) {
  .link .arrow {
    max-width: 12px;
    opacity: 1;
    transform: translate(20px, -50%);
  }
}