/* Button Send Email */

.btn.send-message {
    --primary: -webkit-linear-gradient( 65.45deg, #511a66 27.67%, #cc3227 235.83%);
    --text: #FFFFFF;
    --text-opacity: 1;
    --success: #b3b3b3;
    --success-scale: .2;
    --success-opacity: 0;
    --border-radius: 50;
    --overflow: hidden;
    --rotate: 0;
    --plane-x: 0;
    --plane-y: 0;
    --plane-opacity: 1;
    --left-wing-background: var(--primary);
    --left-wing-first-x: 0;
    --left-wing-first-y: 0;
    --left-wing-second-x: 50;
    --left-wing-second-y: 0;
    --left-wing-third-x: 0;
    --left-wing-third-y: 100;
    --left-body-background: var(--primary);
    --left-body-first-x: 50;
    --left-body-first-y: 0;
    --left-body-second-x: 50;
    --left-body-second-y: 100;
    --left-body-third-x: 0;
    --left-body-third-y: 100;
    --right-wing-background: var(--primary);
    --right-wing-first-x: 50;
    --right-wing-first-y: 0;
    --right-wing-second-x: 100;
    --right-wing-second-y: 0;
    --right-wing-third-x: 100;
    --right-wing-third-y: 100;
    --right-body-background: var(--primary);
    --right-body-first-x: 50;
    --right-body-first-y: 0;
    --right-body-second-x: 50;
    --right-body-second-y: 100;
    --right-body-third-x: 100;
    --right-body-third-y: 100;
    display: block;
    cursor: pointer;
    position: relative;
    border: 0;
    padding: 13px 26px;
    height: fit-content;
    min-width: auto;
    text-align: center;
    margin: 0;
    line-height: 24px;
    box-shadow: none;
    background: transparent;
    outline: none;
    -webkit-transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0);
    transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.btn.btn-primary.send-message.active {
    --text: white;
    border: none;
}

.btn.send-message .left,
.btn.send-message .right {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: var(--plane-opacity);
    -webkit-transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
    transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
}

.btn.send-message .left:before,
.btn.send-message .left:after,
.btn.send-message .right:before,
.btn.send-message .right:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--border-radius) * 50px);
    -webkit-transform: translate(var(--x, 0.4%), var(--y, 0)) translateZ(0);
    transform: translate(var(--x, 0.4%), var(--y, 0)) translateZ(0);
    z-index: var(--z-index, 2);
    background: var(--background, var(--left-wing-background));
    -webkit-clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
    clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
}

.btn.send-message .left:after {
    --x: 0;
    --z-index: 1;
    --background: var(--left-body-background);
    --first-x: var(--left-body-first-x);
    --first-y: var(--left-body-first-y);
    --second-x: var(--left-body-second-x);
    --second-y: var(--left-body-second-y);
    --third-x: var(--left-body-third-x);
    --third-y: var(--left-body-third-y);
}

.btn.send-message .right:before {
    --x: -.4%;
    --z-index: 2;
    --background: var(--right-wing-background);
    --first-x: var(--right-wing-first-x);
    --first-y: var(--right-wing-first-y);
    --second-x: var(--right-wing-second-x);
    --second-y: var(--right-wing-second-y);
    --third-x: var(--right-wing-third-x);
    --third-y: var(--right-wing-third-y);
}

.btn.send-message .right:after {
    --x: 0;
    --z-index: 1;
    --background: var(--right-body-background);
    --first-x: var(--right-body-first-x);
    --first-y: var(--right-body-first-y);
    --second-x: var(--right-body-second-x);
    --second-y: var(--right-body-second-y);
    --third-x: var(--right-body-third-x);
    --third-y: var(--right-body-third-y);
}

.btn.send-message span {
    display: block;
    position: relative;
    z-index: 4;
    opacity: var(--text-opacity);
}

.btn.send-message span.success {
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    -webkit-transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0);
    transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0);
    opacity: var(--success-opacity);
    color: var(--text);
    background-color: var(--success);
    padding: 8px 0;
    min-width: 100px;
    border-radius: 100px;
    cursor: text;
}

.btn.send-message span.success {
    cursor: text;
}


/* Button Slide to right */

.btn--animated {
    position: relative;
    display: inline-block;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

.btn--animated:focus {
    outline: none;
}

.btn--animated {
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

.btn--animated:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #501a6543;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    z-index: -1;
}

.btn--animated:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
    transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

@-moz-document url-prefix() {
    .btn.send-message{
        padding: 6px 16px;
    }
}