.main-arrow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.main-arrow:hover {
    transform: translateX(25px);
}
.the-arrow {
    width: 60px;
    display: inline-block;
    margin-right: 20px;
    transition: all 0.2s;
}
.the-arrow > .shaft {
    background-color: #999;
    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: #999;
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    transition-delay: 0.3s;
    transition: all 0.5s;
}
.the-arrow > .shaft:before {
    transform: rotate(40deg);
    transform-origin: top right;
}
.the-arrow > .shaft:after {
    transform: rotate(-40deg);
    transform-origin: bottom right;
}
.swp-cta {
	font-weight: 700;
	text-decoration: none;
}
a.swp-cta-orange, a.swp-cta-orange:hover, a.swp-cta-orange:active, a.swp-cta-orange:focus {
	color: var(--swp-orange);
}
a.swp-cta-blue-light, a.swp-cta-blue-light:hover, a.swp-cta-blue-light:active, a.swp-cta-blue-light:focus {
	color: var(--swp-blue-light);
}
a.swp-cta-blue-dark, a.swp-cta-blue-dark:hover, a.swp-cta-blue-dark:active, a.swp-cta-blue-dark:focus {
	color: var(--swp-blue-dark);
}
a.swp-cta-white, a.swp-cta-white:hover, a.swp-cta-white:active, a.swp-cta-white:focus {
	color: var(--swp-white);
}
a.swp-cta-black, a.swp-cta-black:hover, a.swp-cta-black:active, a.swp-cta-black:focus {
	color: var(--swp-black);
}

.the-arrow.orange > .shaft, .the-arrow.orange > .shaft:before, .the-arrow.orange > .shaft:after {
    background-color: var(--swp-orange);
}
.the-arrow.blue-light > .shaft, .the-arrow.blue-light > .shaft:before, .the-arrow.blue-light > .shaft:after {
    background-color: var(--swp-blue-light);
}
.the-arrow.blue-dark > .shaft, .the-arrow.blue-dark > .shaft:before, .the-arrow.blue-dark > .shaft:after {
    background-color: var(--swp-blue-dark);
}
.the-arrow.white > .shaft, .the-arrow.white > .shaft:before, .the-arrow.white > .shaft:after {
    background-color: var(--swp-white);
}
.the-arrow.black > .shaft, .the-arrow.black > .shaft:before, .the-arrow.black > .shaft:after {
    background-color: var(--swp-black);
}