/* ==========================================================
   SOLYLONG BUTTON HOVER
========================================================== */

button,
a[class*="btn"],
a[class*="button"]{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

button::before,
a[class*="btn"]::before,
a[class*="button"]::before{

    content:"";

    position:absolute;

    top:0;
    left:-140%;

    width:60%;
    height:100%;

background:
    linear-gradient(
        120deg,
        transparent,
        rgba(216,191,122,.35),
        rgba(232,217,181,.85),
        rgba(216,191,122,.35),
        transparent
    );
    transform:skewX(-25deg);

    transition:left .7s ease;

    pointer-events:none;

}

button:hover,
a[class*="btn"]:hover,
a[class*="button"]:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 18px 40px rgba(85,100,68,.22);

    filter:saturate(1.05);

}

button:hover::before,
a[class*="btn"]:hover::before,
a[class*="button"]:hover::before{

    left:170%;

}

button:active,
a[class*="btn"]:active,
a[class*="button"]:active{

    transform:
        translateY(-1px)
        scale(.99);

}