.wave-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:220px 0;
}

.wave-marquee svg{
    width:160%;
    min-width:2200px;
    display:block;
    will-change:transform;
}

.wave-marquee text{
    font-size:var(--wave-font-size,170px);
    fill:var(--wave-text-color,#000000);
    letter-spacing:1px;
    font-family:Italiana, serif;
    text-transform:uppercase;
}

/* BUTTON WRAPPER */
.wavebuttonbox{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%, -50%);
    z-index:10;
}

/* BUTTON */
.wave-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:120px;
    height:120px;
    border-radius:50%;
    background:var(--wave-btn-bg,#fff);
    border:1px solid var(--wave-btn-border,#000000);

    color:var(--wave-btn-text-color,#000);

    text-decoration:none;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;

    transition:
        transform .35s ease,
        color .25s ease;
}

/* DOT */
.wave-btn::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;

    width:8px;
    height:8px;

    background:var(--wave-dot-color,#000);
    border-radius:50%;

    transform:rotate(-35deg) translate(-50%,-50%);
    transform-origin:60px 0;

    transition:
        transform .9s cubic-bezier(.47,.68,.14,.96);
}

/* DOT HOVER */
.wave-btn:hover::before{
    transform:rotate(90deg) translate(-50%,-50%);
}

/* TEXT */
.wave-btn span{
    position:relative;
    z-index:2;
    transition:
        transform .4s ease,
        color .25s ease;
	font-family: Georgia, Serif;
}

/* HOVER TEXT COLOR */
.wave-btn:hover span{
    transform:rotate(10deg);
    color: var(--wave-btn-hover-color, #000);
}

/* SCALE */
.wave-btn:hover{
    transform:scale(1.04);
}

/* MOBILE */
@media(max-width:768px){

    .wave-marquee{
        padding:140px 0;
    }

    .wave-marquee svg{
        width:260%;
        min-width:1800px;
    }

    .wave-marquee text{
        font-size:95px;
    }
}