* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.the-arrow {
  width: 64px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }
  .the-arrow.-left {
    position: absolute;
    top: 60%;
    left: 0; }
    .the-arrow.-left > .shaft {
      width: 0;
      background-color: #00bc70; }
      .the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
        width: 0;
        background-color: #00bc70; }
      .the-arrow.-left > .shaft:before {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0); }
      .the-arrow.-left > .shaft:after {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0); }
  .the-arrow.-right {
    top: 3px; }
    .the-arrow.-right > .shaft {
      width: 64px;
      -webkit-transition-delay: 0.2s;
      -o-transition-delay: 0.2s;
      transition-delay: 0.2s; }
      .the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
        width: 8px;
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
      .the-arrow.-right > .shaft:before {
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg); }
      .the-arrow.-right > .shaft:after {
        -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        transform: rotate(-40deg); }
  .the-arrow > .shaft {
    background-color: #00bc70;
    display: block;
    height: 1px;
    position: relative;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    will-change: transform; }
    .the-arrow > .shaft:before, .the-arrow > .shaft:after {
      background-color: #00bc70;
      content: '';
      display: block;
      height: 1px;
      position: absolute;
      top: 0;
      right: 0;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      transition-delay: 0; }
    .the-arrow > .shaft:before {
      -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
      transform-origin: top right; }
    .the-arrow > .shaft:after {
      -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
      transform-origin: bottom right; }

.animated-arrow {
  display: inline-block;
  color: #00bc70;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }
  .animated-arrow:hover {
    color: #00bc70; }
    .animated-arrow:hover > .the-arrow.-left > .shaft {
      width: 64px;
      -webkit-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      transition-delay: 0.1s;
      background-color: #00bc70; }
      .animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
        width: 8px;
        -webkit-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        transition-delay: 0.1s;
        background-color: #00bc70; }
      .animated-arrow:hover > .the-arrow.-left > .shaft:before {
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg); }
      .animated-arrow:hover > .the-arrow.-left > .shaft:after {
        -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        transform: rotate(-40deg); }
    .animated-arrow:hover > .main {
      -webkit-transform: translateX(80px);
      -ms-transform: translateX(80px);
      transform: translateX(80px); }
      .animated-arrow:hover > .main > .the-arrow.-right > .shaft {
        width: 0;
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        -webkit-transition-delay: 0;
        -o-transition-delay: 0;
        transition-delay: 0; }
        .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
          width: 0;
          -webkit-transition-delay: 0;
          -o-transition-delay: 0;
          transition-delay: 0;
          -webkit-transition: all 0.1s;
          -o-transition: all 0.1s;
          transition: all 0.1s; }
        .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0); }
        .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0); }
  .animated-arrow > .main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    .animated-arrow > .main > .text {
      margin: 0 16px 0 0;
      line-height: 1; }
    .animated-arrow > .main > .the-arrow {
      position: relative; }