.btn-311.btn-arrow,
.btn-311.btn-arrow svg path,
.btn-311.btn-arrow-2 svg,
.btn-311.btn-arrow-2 svg path{
    transition: 0.3s;
}

.btn-311.btn-arrow,
.btn-311.btn-arrow-2 svg{
    display: inline-block;
    transform: rotate(315deg);
}
.btn-311.btn-arrow:hover,
.btn-311.btn-arrow-2:hover svg{
    transform: rotate(360deg);
}

.btn-311.btn-arrow:hover svg path {
    fill: var(--color-3);
}

/* btn-arrow 2 */

.btn-311.btn-arrow-2 svg path {
    fill: var(--color-3);
}

.btn-311.btn-arrow-2:hover svg path {
    fill: var(--color-2);
}

/* btn-arrow 2 alternative version with inverted colors */

.btn-311.btn-arrow-2.btn-arrow-2--alt svg path {
    fill: var(--color-2);
}

.btn-311.btn-arrow-2.btn-arrow-2--alt:hover svg path {
    fill: var(--color-3);
}

/* btn arrow 3 effect for SP */

.btn-311 .btn-arrow-3 {
    padding-left: 1em;
    transition: .2s;
}

.btn-311.btn-arrow-3__wrapper {
    transition: .2s;
    transform: translateX(-10%);
}

.btn-311 .btn-arrow-3::before,
.btn-311 .btn-arrow-3::after {
    content: "";
    position: absolute;
    top: 50%;
    transition: all .2s ease;
}

.btn-311 .btn-arrow-3::after {
    left: 8%;
    width: 0;
    height: 2px;
    background: var(--color-4);
    transform: translateY(-50%) translateX(-0.5rem);
    transform-origin: right;
}

.btn-311 .btn-arrow-3::after  {
    left: 6%;
}

.btn-311 .btn-arrow-3::before {
    left: 0;
    width: .5em;
    height: .5em;
    border-top: 2px solid var(--color-4);
    border-right: 2px solid var(--color-4);
    transform: translateY(-50%) rotate(45deg);
}

.btn-311.btn-arrow-3__wrapper:hover .btn-arrow-3 {
    padding-left: 1.6em;
}

.btn-311.btn-arrow-3__wrapper:hover .btn-arrow-3::after {
    width: 1em;
    background: var(--color-3);
}

.btn-311.btn-arrow-3__wrapper:hover .btn-arrow-3::before {
    transform: translateY(-50%) translateX(0.5em) rotate(45deg);
    border-color: var(--color-3);
}

@media ( min-width: 991.92px ) {

    .btn-311.btn-arrow-3__wrapper:hover {
        transform: translateX(0%);
    }
}

/* svg fill color-3 on hover */

.btn-311.svg-color-hov-3 svg path {
    transition: 0.3s;
}

.btn-311.svg-color-hov-3:hover svg path {
    fill: var(--color-3);
}

/* focus color inherit */

.btn-311.color-focus-inherit:focus {
    color: inherit !important;
}

/*Arrow effect My Trip*/

.btn-311.disappearing-arrow {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.btn-311.disappearing-arrow::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    color: var(--color-3);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-311.disappearing-arrow:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.btn-311.disappearing-arrow {
    padding-right: 10px;
    transition: padding-right 0.4s ease;
}

.btn-311.disappearing-arrow:hover {
    padding-right: 25px;
    background: transparent;
    font-weight: 600;
    border-width: 2px;
}

.btn-311.disappearing-arrow.disappearing-alt::after {
    color: var(--color-3);
}

.btn-311.disappearing-arrow.disappearing-alt:hover {
    color: var(--color-3);
    background: white;
}

/* LDG arrow on hover*/
.btn-311.btn-arrow-4 {
    position: relative;
    padding-left: 1em;
    transition: .2s;
    display: inline-block;
}

.btn-311.btn-arrow-4::before,
.btn-311.btn-arrow-4::after {
    content: "";
    position: absolute;
    top: 50%;
    transition: all .2s ease;
}

.btn-311.btn-arrow-4::after {
    left: 5%;
    width: 0;
    height: 2px;
    background: var(--color-3);
    transform: translateY(-50%) translateX(-0.5rem);
    transform-origin: right;
}

.btn-311.btn-arrow-4::before {
    left: 0;
    width: .5em;
    height: .5em;
    border-top: 2px solid var(--color-1);
    border-right: 2px solid var(--color-1);
    transform: translateY(-50%) rotate(45deg);
}

.btn-311.btn-arrow-4:hover {
    padding-left: 1.6em;
}

.btn-311.btn-arrow-4:hover::after {
    width: 1em;
}

.btn-311.btn-arrow-4:hover::before {
    transform: translateY(-50%) translateX(0.5em) rotate(45deg);
    border-color: var(--color-3); 
}