:root {
    --white: #ffffff;
    --green1: #1a4621;
    --green2: #277833;
    --green3: #3b953e;
    --green4: #8fbf40;
    --green5: #ccd636;
    --yellow: #ffed00;
    --orange: #659629;
    --red: #e30613;
}

.triggerButton {
    display: flex;
    position: fixed; bottom: 0;
    z-index: 9997;
    transition: all .125s ease-in-out;
}
.triggerButton.d-none { display: none !important; }
@media (min-width: 816px) {
    .triggerButton:hover {
        cursor: pointer;
        transform: scale(1.05);
    }
}
.triggerButton.position-1 {
    left: 0;
    padding: 40px 120px 20px 30px;
}
@media (max-width: 815px) {
    .triggerButton.position-1 { left: 25px; padding-right: 30px !important;}
}
.triggerButton.position-2 {
    right: 0;
    padding: 40px 30px 20px 120px;
}
@media (max-width: 815px) {
    .triggerButton.position-2 { right: 25px; padding-left: 30px !important; }
}
.triggerButton.position-1.fadeOut {
    animation: fadeOut-left .5s ease-in-out forwards;
}
.triggerButton.position-2.fadeOut {
    animation: fadeOut-right .5s ease-in-out forwards;
}
@media (max-width: 1159px) {
    .triggerButton {
        bottom: 52px;
        align-content: center; gap: 25px;
        padding: 30px 20px !important;
    }
    .triggerButton.position-1 {
        flex-direction: row-reverse;
    }
}
@media (max-width: 815px) {
    .triggerButton {
        padding: 7px !important;
        bottom: 75px;
    }
    .triggerButton.position-1 { flex-direction: row !important; }
    .triggerButton.position-2 { flex-direction: row-reverse !important; }
}


/* ---- BACKGROUND ---- */
.triggerButton .--background {
    z-index: -1;
    width: 100%; height: 100%;
    position: absolute; bottom: 0;
    background: var(--green2);
}
@media (max-width: 1159px) {
    .triggerButton .--background {
        clip-path: none !important;
    }
    .triggerButton.position-1 .--background { border-radius: 0 15px 0 0 !important; }
    .triggerButton.position-2 .--background { border-radius: 15px 0 0 0 !important; }
}
@media (max-width: 815px) {
    .triggerButton.position-1 .--background { border-radius: 0 5px 5px 0 !important; }
    .triggerButton.position-2 .--background { border-radius: 5px 0 0 5px !important; }
}
.triggerButton.position-1 .--background {
    -webkit-clip-path: ellipse(100% 100% at 0 100%); clip-path: ellipse(100% 100% at 0 100%);
    left: 0;
}
.triggerButton.position-2 .--background {
    -webkit-clip-path: ellipse(100% 100% at 100% 100%); clip-path: ellipse(100% 100% at 100% 100%);
    right: 0;
}
/* ---- END BACKGROUND ---- */


/* ---- TEXT ---- */
.triggerButton h4 {
    font-size: 2.25rem; line-height: 1.4; font-weight: 700;
    color: var(--white);
    max-width: 210px; margin-bottom: 0 !important;
}
@media (max-width: 815px) {
    .triggerButton h4 {
        font-size: .75rem !important; font-weight: 600 !important;
        display: flex; align-items: center;
    }
}

.triggerButton.position-2 {
    text-align: right;
}
/* ---- END TEXT ---- */


/* ---- ICON ---- */
.triggerButton .--icon {
    display: flex; align-items: center; justify-content: center;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: var(--orange);
    position: absolute; top: 15px;
    transition: all .125s ease-in-out;
}

.triggerButton .--icon img { width: 60px; }
.triggerButton.position-1 .--icon { right: 15px; transform: rotate(20deg) }
.triggerButton.position-2 .--icon { left: 15px; transform: rotate(-20deg) }
@media (max-width: 1159px) {
    .triggerButton .--icon { position: initial; }
    .triggerButton.position-1 .--icon { position: initial; margin-right: -70px; }
    .triggerButton.position-2 .--icon { position: initial; margin-left: -70px; }
}
@media (min-width: 816px) {
    .triggerButton.position-1:hover .--icon { transform: rotate(30deg) }
    .triggerButton.position-2:hover .--icon { transform: rotate(-30deg) }
}
@media (max-width: 815px) {
    .triggerButton .--icon {
        width: 30px; height: 30px;
        position: relative;
        transform: scale(2) !important;
        margin: 0 !important;
    }
    .triggerButton .--icon img { width: 22px; }
}

.triggerButton.pulse .--icon { animation: pulse-animation 5s ease-in-out infinite; }


/* ---- END ICON ---- */

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    25% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

/* Close button */
#closeTriggerButton {
    position: fixed; padding: 2px; width: 24px; height: 24px;
    transition: all .15s ease-in-out;
    border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.2);
    background: #fff; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
}
#closeTriggerButton.position-1 { left: 10px; }
#closeTriggerButton.position-2 { right: 10px; }
#closeTriggerButton img {
    width: 18px;
}
#closeTriggerButton:hover {
    cursor: pointer;
}
#closeTriggerButton.d-none { display: none; }
@media (max-width: 1159px) {
    #closeTriggerButton {
        transform: translateY(-64px);
    }
}
@media (max-width: 815px) {
    #closeTriggerButton.position-1 {
        left: 40px;
        transform: translatex(var(--width));
    }
    #closeTriggerButton.position-2 {
        right: 40px;
        transform: translatex(var(--minwidth));
    }
}


/* End close button */


@keyframes fadeOut-left {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-100% + 30px));
    }
}
@keyframes fadeOut-right {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100% - 30px));
    }
}