button {
  margin: 30px 0px 30px;
  border: none;
  font-family: montserrat;
  font-weight: 800;
  font-size: 1em;
  background-color: transparent;
}

.the-arrow {
  width: 64px;
  transition: all 0.2s;
}
.the-arrow.-left {
  position: absolute;
  top: 40%;
  left: 0;
}
.the-arrow.-left > .shaft {
  width: 0;
  background-color: #0056b8;
}
.the-arrow.-left > .shaft:before,
.the-arrow.-left > .shaft:after {
  width: 0;
  background-color: #0056b8;
}
.the-arrow.-left > .shaft:before {
  transform: rotate(0);
}
.the-arrow.-left > .shaft:after {
  transform: rotate(0);
}
.the-arrow.-right {
  top: 0px;
}
.the-arrow.-right > .shaft {
  width: 64px;
  transition-delay: 0s;
}
.the-arrow.-right > .shaft:before,
.the-arrow.-right > .shaft:after {
  width: 6px;
  transition-delay: 0s;
  transition: all 0.2s;
}
.the-arrow.-right > .shaft:before {
  transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
  transform: rotate(-40deg);
}
.the-arrow > .shaft {
  background-color: #0056b8;
  display: block;
  height: 1px;
  position: relative;
  transition: all 0.2s;
  transition-delay: 0;
  will-change: transform;
}
.the-arrow > .shaft:before,
.the-arrow > .shaft:after {
  background-color: #0056b8;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.2s;
  transition-delay: 0;
}
.the-arrow > .shaft:before {
  transform-origin: top right;
}
.the-arrow > .shaft:after {
  transform-origin: bottom right;
}

.animated-arrow {
  display: inline-block;
  color: #0056b8;
  text-decoration: none;
  position: relative;
  transition: all 0.1s;
}
.animated-arrow:hover {
  color: #ffaa00;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
  width: 30px;
  transition-delay: 0s;
  background-color: #ffaa00;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before,
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
  width: 6px;
  transition-delay: 0s;
  background-color: #ffaa00;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
  transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
  transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
  transform: translateX(40px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
  width: 0;
  transform: translateX(200%);
  transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before,
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
  width: 0;
  transition-delay: 0;
  transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
  transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
  transform: rotate(0);
}
.animated-arrow > .main {
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.animated-arrow > .main > .text {
  margin: 0 16px 0 0;
  line-height: 1;
}
.animated-arrow > .main > .the-arrow {
  position: relative;
}

/*on white background*/

.button-white {
  border: none;
  font-family: montserrat;
  font-weight: 600;
  background-color: transparent;
}

.the-arrow-white {
  width: 64px;
  transition: all 0.2s;
}
.the-arrow-white.-left {
  position: absolute;
  top: 40%;
  left: 0;
}
.the-arrow-white.-left > .shaft-white {
  width: 0;
  background-color: white;
}
.the-arrow-white.-left > .shaft-white:before,
.the-arrow-white.-left > .shaft-white:after {
  width: 0;
  background-color: white;
}
.the-arrow-white.-left > .shaft-white:before {
  transform: rotate(0);
}
.the-arrow-white.-left > .shaft-white:after {
  transform: rotate(0);
}
.the-arrow-white.-right {
  top: 0px;
}
.the-arrow-white.-right > .shaft-white {
  width: 64px;
  transition-delay: 0s;
}
.the-arrow-white.-right > .shaft-white:before,
.the-arrow-white.-right > .shaft-white:after {
  width: 6px;
  transition-delay: 0.3s;
  transition: all 0.2s;
}
.the-arrow-white.-right > .shaft-white:before {
  transform: rotate(40deg);
}
.the-arrow-white.-right > .shaft-white:after {
  transform: rotate(-40deg);
}
.the-arrow-white > .shaft-white {
  background-color: white;
  display: block;
  height: 1px;
  position: relative;
  transition: all 0.2s;
  transition-delay: 0;
  will-change: transform;
}
.the-arrow-white > .shaft-white:before,
.the-arrow-white > .shaft-white:after {
  background-color: white;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.2s;
  transition-delay: 0;
}
.the-arrow-white > .shaft-white:before {
  transform-origin: top right;
}
.the-arrow-white > .shaft-white:after {
  transform-origin: bottom right;
}

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

/* RESPONSIVE SMARTPHONE*/

@media only screen and (max-width: 600px) {
  button {
    margin: 10px 0 10px 0;
  }

  .the-arrow.-right > .shaft {
    width: 30px;
  }
}