/* Button Hover - SCALE */
/*------------------------------------*/

.btn-hover-scale {
    /* works in ie */
    -webkit-transition: transform 0.25s ease-in !important;
    transition:         transform 0.25s ease-in !important;

    /*--scale-time: 0.25s;*/
    /*-webkit-transition: transform var(--scale-time) ease-in !important;*/
    /*transition:         transform var(--scale-time) ease-in !important;*/
}
.btn-hover-scale:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 10;
}




/* Button Click - RIPPLE (inner) */
/*------------------------------------*/

.ripple-btn.btn,
.ripple-btn {
    --animation-duration: 1s;

    position: relative;
    cursor: pointer;
    /*color: var(--color);*/
    overflow: hidden;
    margin: 0;
}
.ripple-btn span {
    position: relative;
    z-index: 4;
}
.ripple-btn .circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(0,0,0,0.4);
    /*background-image: radial-gradient(circle closest-side, white, #f37169);*/
    width: 1px;
    height: 1px;
    z-index: 3;
    opacity: 0;

    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: var(--animation-duration);
    animation-duration: var(--animation-duration);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
/* Ripple animation */
@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(450, 450);
        transform: scale(450, 450);
        opacity: 0.75;
    }
    100% {
        -webkit-transform: scale(700, 700);
        transform: scale(700, 700);
        opacity: 0;
    }
}
@keyframes ripple {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(450, 450);
        transform: scale(450, 450);
        opacity: 0.75;
    }
    100% {
        -webkit-transform: scale(700, 700);
        transform: scale(700, 700);
        opacity: 0;
    }
}




/* DRAW btn BORDER */
/*------------------------------------*/

/* Draw-Border DEFAULTS (for legacy browsers) */
.draw-btn-border {
    background: #ddd;
    padding: 2px;
}
.draw-btn-border > .btn {
    color: #444;
    background-color: #fff;
}
.draw-btn-border::before,
.draw-btn-border::after {
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.draw-btn-border:hover::before,
.draw-btn-border:hover::after {
    background: #777;
    width: 100%;
    height: 100%;
}
/* Draw-Border Button BASE */
.draw-btn-border {
    --anim-time: 0.25s;
    --border-width: 6px;
    --draw-delay:  calc( var(--anim-time)/2 );
    --draw-delay2: calc( var(--anim-time)  );

    /*background: var(--color-2);*/
    padding: var(--border-width);

    display: inline-block;
    position: relative;
    overflow: hidden;
}
.draw-btn-border > .btn {
    border: none;
    position: relative;
    z-index: 3;
}
.draw-btn-border::before,
.draw-btn-border::after {
    border: 0 solid transparent;
    background-color: transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    /*border-radius: 45px;*/
    top: 0;
    left: 0;


    -webkit-transition: background-color var(--anim-time), width var(--anim-time), height var(--anim-time);
    transition: background-color var(--anim-time), width var(--anim-time), height var(--anim-time);
}
.draw-btn-border:hover {
    /*z-index: 10;*/
}
/* Draw animation */
.draw-btn-border:hover::before,
.draw-btn-border:hover::after {
    /*background-color: var(--color);*/
    width: 100%;
    height: 100%;
}
.draw-btn-border:hover::before {
    -webkit-transition-delay:   var(--draw-delay), var(--draw-delay), var(--draw-delay2);
    transition-delay:           var(--draw-delay), var(--draw-delay), var(--draw-delay2);
}
.draw-btn-border:hover::after {
    -webkit-transition-delay:   var(--draw-delay), var(--draw-delay2), var(--draw-delay);
    transition-delay:           var(--draw-delay), var(--draw-delay2), var(--draw-delay);
}
/* -adjust for height imperfections */
.draw-btn-border .btn-sm {
    /*padding: calc(0.25rem + 0.01rem) 0.75rem;*/
}

/* -elementor mods <-- todo */
/* --- .elementor-draw-btn-border */
/* --- wrap .elementor-draw-btn-border > .btn via js, with .draw-btn-border */
/* --- customize colors in mod theme via:
      .elementor-draw-btn-border.draw-b-thin  .draw-b-thin */



/* DRAW btn BACKGROUND */
/*------------------------------------*/

.draw-btn-bg {
    --anim-time: 0.5s;
    --draw-delay:  0.5s;

    /*--color-primary: #f37169;*/
    /*--color-primary-l3: #ffd3d3;*/
    /*--color: var(--color-primary);*/
    /*--color-2: var(--color-primary-l3);*/

    /*background: var(--color-2);*/

    display: inline-block;
    position: relative;
    overflow: hidden;
}
.draw-btn-bg::before {
    border: 0 solid transparent;
    opacity: 0;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 2;
    /*box-shadow: 0 0 30px transparent;*/
    width: 1px;
    height: 1px;
    border-radius: 50%;
    top: 10px;
    left: 20px;

    background-color: rgba(0,0,0,0.3);

    -webkit-transition: opacity 0.25s, border-radius var(--anim-time), all var(--anim-time);
    transition:         opacity 0.25s, border-radius var(--anim-time), all var(--anim-time);
}
.draw-btn-bg:hover {
    /*z-index: 10;*/
}
/* Draw animation */
.draw-btn-bg:hover::before {
    opacity: 1;
    width: 400px;
    height: 400px;
    top: -170px;
    left: -170px;
    /*-webkit-transform: scale(400);*/
    /*transform: scale(400);*/
    -webkit-transition-delay:   0, var(--draw-delay), 0;
    transition-delay:           0, var(--draw-delay), 0;
}

/* -elementor mods <-- todo */
/* --- .elementor-draw-btn-bg .btn */