/******************************************************************************* Contact Button **/

.divCone {
    border: 1px solid var(--white);
    color: var(--white);
    display: inline-flex;
    border-radius: 25px;
    height: 50px;
    width: 128px;
    overflow: hidden;
    cursor: pointer;
    will-change: contents;
}

.divCtwo {
    background-color: var(--orange);
    border-radius: 25px;
    height: 50px;
    flex: none;
    position: relative;
    visibility: hidden;
    top: 0px;
    transform: translateX(-150px);
    width: 150px;
    z-index: 100;
    will-change: transform;
}

.nav-orange .divCtwo {
    background-color: var(--blue);
}

.nav-orange.sticky .divCtwo {
    background-color: var(--orange);
}

.divCthree {
    position: relative;
    flex: none;
    left: -127px;
    top: 13px;
    z-index: 200;
    font-size: 16px;
}

.divCone:hover .divCtwo {
    visibility: visible;
    transform: translateX(-22px);
    transition: 0.9s ease;
}

/******************************************************************************* Banner Button **/

.divBone {
    border: 1px solid var(--white);
    color: white;
    display: inline-flex;
    border-radius: 41px;
    height: 82px;
    width: 82px;
    overflow: hidden;
    cursor: pointer;
}

.divBtwo {
    background-color: #FF6600;
    border-radius: 41px;
    height: 82px;
    flex: none;
    position: relative;
    visibility: hidden;
    top: 0px;
    transform: translateX(-82px);
    width: 82px;
    z-index: 100;
}

.divBthree {
    position: relative;
    flex: none;
    /* top: 25px; */
    top: 30px;
    left: -57px;
    z-index: 200;
    font-size: 16px;
    width: 33px;
}

.divBone:hover .divBtwo {
    visibility: visible;
    transform: translateX(0px);
    transition: 0.8s ease;
}

/***************************************************************************************** Load more button **/

.divDone {
    border: 2px solid var(--orange);
    color: var(--orange);
    display: inline-flex;
    border-radius: 100px;
    height: 74px;
    width: 243px;
    overflow: hidden;
    cursor: pointer;
    will-change: contents;
}

.divDtwo {
    background-color: var(--orange);
    border-radius: 100px;
    height: 70px;
    flex: none;
    position: relative;
    visibility: hidden;
    top: 0px;
    transform: translateX(-243px);
    width: 243px;
    z-index: 100;
    will-change: transform;
}

.divDthree {
    position: relative;
    flex: none;
    z-index: 200;
    font-size: 16px;
    width: 100%;
    left: -240px;
    line-height: 75px;
}

.divDone:hover .divDtwo {
    visibility: visible;
    transform: translateX(0px);
    transition: 0.9s ease;
}

.divDone:hover .divDthree {
    color: #ffffff;
}

/***************************************************************************************** Mobile button **/

.mobilebutton {
    background-color: var(--orange);
    display: inline-flex;
    color: var(--white);
    border-radius: 30px;
    font-size: 16px;
    line-height: 16px;
    height: 60px;
    padding-top: 22px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    cursor: pointer;
}

.mobilebutton img {
    width: 40px;
    height: 16px;
}

.rounded-arrow-btn-original {
    background-image: url("../img/svg_s/ShortOrange.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid #FF6600;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    background-position: center;
    transition: all 0.9s;
}

.rounded-arrow-btn-original-2 {
    content: url("../img/svg_s/ShortOrange.svg");
    object-fit: scale-down;
    border: 1px solid #FF6600;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    transition: all 0.9s;
    background: linear-gradient(to right, var(--orange) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.rounded-arrow-btn-original-2:hover {
    content: url("../img/svg_s/ShortWhite.svg");
    cursor: pointer;
    background-position: left bottom;
}

.rounded-arrow-btn-original-down {
    content: url("../img/svg_s/ShortOrangeDown.svg");
    object-fit: scale-down;
    border: 1px solid #FF6600;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    transition: all 0.9s;
    background: linear-gradient(to right, var(--orange) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.rounded-arrow-btn-original-down:hover {
    content: url("../img/svg_s/ShortWhiteDown.svg");
    cursor: pointer;
    background-position: left bottom;
}

.rounded-arrow-btn-original-clear-white {
    content: url("../img/svg_s/ShortWhite.svg");
    object-fit: scale-down;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    background-position: center;
    transition: all 0.9s;
    background: linear-gradient(to right, var(--orange) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.rounded-arrow-btn-original-clear-white:hover {
    /*content: url("../img/svg_s/ShortWhite.svg");*/
    /*background-color: var(--orange);*/
    background-position: left bottom;
}

.rounded-arrow-btn-original-clear-white-84 {
    content: url("../img/svg_s/MediumWhite.svg");
    object-fit: scale-down;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 100px;
    width: 84px;
    height: 84px;
    background-position: center;
    transition: all 0.9s;
}

.rounded-arrow-btn-original-clear-white-84:hover {
    /*content: url("../img/svg_s/ShortWhite.svg");*/
    background-color: var(--orange);
}

.rounded-arrow-btn-original-white {
    content: url("../img/svg_s/ShortOrange.svg");
    object-fit: scale-down;
    background-repeat: no-repeat;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    background-position: center;
    background-color: #FFFFFF;
    background: linear-gradient(to right, var(--orange) 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.rounded-arrow-btn-original-white:hover {
    content: url("/assets/img/svg_s/ShortWhite.svg");
    background-position: left bottom;
    border-color: var(--orange);
}

.rounded-arrow-btn-hover-purple:hover {
    content: url("../img/svg_s/ShortWhite.svg");
    background-color: var(--blue);
}

.arrow-right-btn-original:hover {
    content: url("../img/svg_s/ShortWhite.svg");
    background-color: var(--orange);
}

.carousel-item-border-button {
    border: solid 1px white;
    /* padding: 20px; */
    border-radius: 40px;
    cursor: pointer;
    background-color: transparent;
}

.carousel-item-border-button a {
    border-radius: 40px;
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    background-color: transparent;
    background: linear-gradient(to right, var(--orange) 50%, transparent 50%);
    background-size: 300% 300%;
    background-position: right center;
    transition: all 1s ease-out;
    font-family: 'AvenirNext LT Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.05em;
    color: white;
    text-decoration: none;
}

.carousel-item-border-button span {
    font-family: 'AvenirNext LT Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.05em;
    color: white;
    text-decoration: none;
}

.carousel-item-border-button a:hover {
    background-position: left center;
}

.carousel-item-border-button .purple-arrow {
    display: none;
}

.carousel-item-border-button.purple-hover-state {
    border: solid 1px white;
    padding: 20px;
    border-radius: 40px;
    cursor: pointer;
    background-color: var(--white);
    background: linear-gradient(to right, var(--blue) 50%, var(--white) 50%);
    background-size: 300% 300%;
    background-position: right center;
    transition: all 1s ease-out;
}

.carousel-item-border-button.purple-hover-state a,
.carousel-item-border-button.purple-hover-state span {
    color: var(--blue);
}

.carousel-item-border-button.purple-hover-state:hover,
.carousel-item-border-button.purple-hover-state:hover a,
.carousel-item-border-button.purple-hover-state:hover span {
    background-position: left center;
    color: var(--white);
}

.carousel-item-border-button.purple-hover-state .white-arrow {
    display: none;
}

.carousel-item-border-button.purple-hover-state:hover .white-arrow {
    display: inline-block;
}

.carousel-item-border-button.purple-hover-state .purple-arrow {
    display: inline-block;
}

.carousel-item-border-button.purple-hover-state:hover .purple-arrow {
    display: none;
}

.rounded-arrow-btn-original-orange {
    content: url("../img/svg_s/ShortWhite.svg");
    object-fit: scale-down;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid #FF6600;
    box-sizing: border-box;
    border-radius: 100px;
    width: 54px;
    height: 54px;
    background-color: var(--orange);
    background: linear-gradient(to right, #ffffff 50%, var(--orange) 50%);
    background-size: 300% 300%;
    background-position: right center;
    transition: all .5s ease-out;
}

.rounded-arrow-btn-original-orange:hover {
    cursor: pointer;
    content: url("../img/svg_s/ShortOrange.svg");
    background-position: left center;
}

.down-arrow {
    transform: rotate(90deg);
}

.rotate-btn-open {
    transform: rotate(270deg) !important
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg) !important
}

.white-medium-arrow-mobile {
    content: url("../img/svg_s/MediumWhite.svg");
    width: 36px;
    height: 32px;
    transition: all 0.9s;
}

.orange-text-button {
    text-decoration: none;
    font-family: 'AvenirNext LT Pro';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: 0.05em;
    color: #FF6600;
}

.text-link a {
    text-decoration: none;
    font-family: 'AvenirNext LT Pro';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: 0.05em;
    color: #FF6600;
}

.white-filled-arrow-btn {
    background-color: white;
    border-color: white;
}

@media only screen and (min-width: 992px) {
    .orange-text-button {
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        line-height: 25px;
        /* identical to box height */
        letter-spacing: 0.05em;
        color: #FF6600;
    }
    .text-link a {
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        line-height: 25px;
        /* identical to box height */
        letter-spacing: 0.05em;
        color: #FF6600;
    }
}

.hs_submit {
    max-height: 64px;
}

.hs_submit .hs-button {
    padding: 20px;
}