ul.ctas, .cta { font-size: 17px !important;  line-height: 20px !important; }
ul.cta li {    font-size: inherit;
    line-height: inherit;}
ul.cta li:not(:last-child) { margin-bottom: 16px; }

ul.ctas li { list-style: none !important; font-size: inherit !important; margin: 0 !important; line-height: inherit !important;  max-width:999px !important; }
ul.ctas { margin: 1em 0; display: flex; gap:1em; flex-wrap: wrap}

ul.ctas a,
.cta a,
.cta span {
    box-sizing: content-box;
    background: white;
    color:var(--black);

    font-weight: 600 !important;


    font-size: inherit;
    line-height: inherit;

    vertical-align: top;

    display: inline-block;
    text-shadow: none;

    /*border-radius: 300px;*/ border-radius: calc(1.5em + 1px);
    padding: 14px 22px;


    transition: all 0.2s ease;

    overflow: hidden;
    position: relative;

    border: 1px solid var(--black);

}

#masthead .cta a {
    padding: 16px 22px;
    border-width: 2px   ;
}

/*.cta a::after,
.cta span::after {
    display: block; content:""; transition: all 0.2s ease;
    z-index: 10;
    position: absolute; top: 0; left:0; width: 100%; height: 100%;   pointer-events: none;

}*/


ul.ctas a:hover,
.cta a:hover,
.cta span:hover  {
    border-color: var(--cta-blue);
    background-color: var(--cta-blue);
    color: white;
}


.cta.o a,
.cta.o span  {
    border-color: var(--orange);
    background-color: var(--orange);
    color: black;
}


.cta.o a:hover,
.cta.o span:hover  {
    border-color: var(--cta-blue);
    background-color: var(--cta-blue);
    color: white;

}


input#mc-embedded-subscribe:hover { background: #7f7658; }


.cta a:focus-visible,
.cta span:focus-visible {  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);   }





@media all and (max-width: 599px) {
    .cta a,
    .cta span  {
    }

}