:root {
    --btn-primary-color: #fff;
    --btn-primary-color-hover: #fff;
    --btn-primary-bg: var(--color-primary, var(--color-link), #000);
    --btn-primary-bg-hover: var(--color-link-hover, var(--color-primary));

    --btn-outline-primary-color: var(--color-primary, var(--color-link), #000);
    --btn-outline-secondary-color: var(--color-secondary, var(--color-link), #000);
    --btn-outline-tertiary-color: var(--color-tertiary, var(--color-link), #000);

    --btn-secondary-color: #fff;
    --btn-secondary-color-hover: #fff;
    --btn-secondary-bg: var(--color-secondary, var(--color-link), #000);
    --btn-secondary-bg-hover: var(--color-primary);

    --btn-tertiary-color: #fff;
    --btn-tertiary-color-hover: #fff;
    --btn-tertiary-bg: var(--color-tertiary, var(--color-link), #000);
    --btn-tertiary-bg-hover: var(--color-tertiary);

    --btn-light-color: var(--body-color);
    --btn-light-color-hover: #fff;
    --btn-light-bg: #fff;
    --btn-light-bg-hover: var(--color-primary);
}

[class*=btn] {
    /*font-family: var(--heading-font);*/
    border-radius: var(--button-radius, 0);
    font-weight: 500;
    border-width: 2px;
    overflow: hidden;
}
.btn:not(.btn-lg) {
    padding-left:1em;
    padding-right:1em;
}
.btn-lg {
    font-size:1rem;
    padding:.75rem 2rem;
}
.btn-primary {
    color:var(--btn-primary-color);
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.bg-primary {
    color:var(--btn-primary-color-hover);
    background-color: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
}

.btn-secondary {
    color:var(--btn-secondary-color);
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    color:var(--btn-secondary-color-hover);
    background-color: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-bg-hover);
}

.btn-tertiary {
    color:var(--btn-tertiary-color);
    background-color: var(--btn-tertiary-bg);
    border-color: var(--btn-tertiary-bg);
}

.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary:focus {
    color:var(--btn-tertiary-color-hover);
    background-color: var(--btn-tertiary-bg-hover);
    border-color: var(--btn-tertiary-bg-hover);
}

.btn-outline-primary {
    color: var(--btn-outline-primary-color);
    border-color: var(--btn-primary-bg);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus{
    color:var(--btn-primary-color-hover);
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

.btn-outline-secondary {
    color: var(--btn-outline-secondary-color);
    border-color: var(--btn-secondary-bg);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus{
    color:var(--btn-secondary-color-hover);
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
}

.btn-outline-tertiary {
    color: var(--btn-outline-tertiary-color);
    border-color: var(--btn-tertiary-bg);
}

.btn-outline-tertiary:hover,
.btn-outline-tertiary:active,
.btn-outline-tertiary:focus{
    color:var(--btn-tertiary-color-hover);
    background-color: var(--btn-tertiary-bg);
    border-color: var(--btn-tertiary-bg);
}

.btn-light {
    color:var(--btn-light-color);
    background-color: var(--btn-light-bg);
    border-color: var(--btn-light-bg);
}
.btn-light:hover,
.btn-light:active,
.btn-light:focus{
    color:var(--btn-light-color-hover);
    background-color: var(--btn-light-bg-hover);
    border-color: var(--btn-light-bg-hover);
}

.btn {
    position: relative;
}


.btn.special {
    border-color:transparent !important;
    overflow: hidden;
}
.btn.special:hover {
    background-color:transparent !important;
    color: inherit;
}
.btn.special::before,
.btn.special::after {
    content:'';
    display: block;
    position: absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    border-style:solid;
    border-width:2px;
    transition: all .3s ease;
}
.btn.special::before {
    border-bottom:none;
}
.btn.special::after {
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
}
.btn.special:hover::before {
    height:0;
    transform: translateY(-100%);
}
.btn.special:hover::after {
    width:25px;
    left:50%;
    transform: translateX(-50%);
    border-bottom-width: 3px;

}

.btn.btn-primary.special::before,
.btn.btn-primary.special::after,
.btn.btn-outline-primary.special::before,
.btn.btn-outline-primary.special::after {
    border-color: var(--color-primary);
}


/**************************************************
                Buttons with arrows
***************************************************/
/* learn more - simple */
.ndm-learn-more {
    display: inline-flex;
    align-items: center;
}
.ndm-learn-more::after {
    content: "\e5c8";
    font-family: 'Material Symbols Outlined' !important;
    font-weight: 900;
    display: inline-block;
    margin-left: .75em;
    transition: all var(--transition-timing) ease;
    z-index:1;
}
.ndm-learn-more:hover::after {
    transform: translateX(.25em);
}


/*****************************************************
         hover fill left to right buttons
 *****************************************************/
[class*='btn'].ndm-hover-fill::before {
    content:"";
    width:0;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
    background-color: #f8f9fa;
    transition: width var(--transition-timing) ease;
    z-index:0;
}
[class*='btn'].ndm-hover-fill * {
    z-index:1;
}
[class*='btn-outline'].ndm-hover-fill {
    background-color: transparent;
}
[class*='btn'].ndm-hover-fill:hover::before,
[class*='btn'].ndm-hover-fill:focus::before,
[class*='btn'].ndm-hover-fill:active::before {
    width:100%;
}

[class*='btn'].btn-outline-primary.ndm-hover-fill::before {
    background-color: var(--btn-primary-bg);
}
[class*='btn'].btn-outline-secondary.ndm-hover-fill::before {
    background-color: var(--btn-secondary-bg);
}
[class*='btn'].btn-outline-tertiary.ndm-hover-fill::before {
    background-color: var(--btn-tertiary-bg);
}
[class*='btn'].btn-outline-light.ndm-hover-fill:focus {
    color:#000;
}
.btn-light.ndm-hover-fill:hover, .btn-light.ndm-hover-fill:active, .btn-light.ndm-hover-fill:focus {
    background-color: var(--btn-light-bg);
    border-color:transparent;
}
[class*='btn'].btn-light.ndm-hover-fill::before {
    background-color: var(--btn-light-bg-hover);
}
[class*='btn'].btn-primary.ndm-hover-fill:active,
[class*='btn'].btn-primary.ndm-hover-fill:focus,
[class*='btn'].btn-primary.ndm-hover-fill:hover {
    color:var(--btn-primary-bg);
}
[class*='btn'].btn-secondary.ndm-hover-fill:active,
[class*='btn'].btn-secondary.ndm-hover-fill:focus,
[class*='btn'].btn-secondary.ndm-hover-fill:hover {
    color:var(--btn-secondary-bg);
}
[class*='btn'].btn-tertiary.ndm-hover-fill:active,
[class*='btn'].btn-tertiary.ndm-hover-fill:focus,
[class*='btn'].btn-tertiary.ndm-hover-fill:hover {
    color:var(--btn-tertiary-bg);
}

/*************************************************
            Galaxy Buttons
**************************************************/
/*
<a href="#" class="btn-galaxy-arrow-down">Read More<span></span></a>
*/
[class*='btn-galaxy'] {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left:1em;
    overflow: hidden;
    color: var(--body-color);
    border-radius: 3em;
}
[class*='btn-galaxy']::before {
    content:'';
    display: block;
    position: absolute;
    top:0;
    right:-100%;
    width: 100%;
    height:100%;
    border-radius: 3em;
    border: 1px solid var(--color-primary);
    transition: all var(--transition-timing) ease;
}
[class*='btn-galaxy'][class*='no-border'] {
    padding-left:0;
}
[class*='btn-galaxy'][class*='no-border']::before {
    display: none;
}
[class*='btn-galaxy'][class*='-light']::before {
    border: 1px solid #868686;
}
[class*='btn-galaxy'][class*='-white']::before {
    border: 1px solid #fff;
}
[class*='btn-galaxy'][class*='-black']::before {
    border: 1px solid var(--color-black, #000);
}
[class*='btn-galaxy']:hover::before {
    right:0;
}


[class*='btn-galaxy'] > span {
    content:'';
    display: block;
    width:2.25em;
    height:2.25em;
    background: var(--color-primary);
    border-radius: 50%;
    position: relative;
    margin-left:.75em;
}
[class*='btn-galaxy'][class*='-light'] > span {
    background: #868686;
}
[class*='btn-galaxy'][class*='-white'] > span {
    background: #fff;
}
[class*='btn-galaxy'][class*='-black'] > span {
    background: var(--color-black, #000);
}
[class*='btn-galaxy'][class*='-black']:hover {
    color:var(--color-black, #000);
}
[class*='btn-galaxy'][class*='-white'] > span::after {
    color:var(--color-primary);
}
[class*='btn-galaxy'] > span::after {
    display: block;
    color:#fff;
    text-align: center;
    overflow: hidden;
    text-align: center;
    font-family: 'Material Symbols Outlined' !important;
    font-size:1.25em;
    position: absolute;
    right:50%;
    top:50%;
    transform: translateX(50%) translateY(-50%);
    transform-origin: center;
    transition: all var(--transition-timing) ease;
}
[class*='btn-galaxy']:hover > span::after,
[class*='btn-galaxy']:active > span::after,
[class*='btn-galaxy']:focus > span::after {
    transform: translateX(50%) translateY(-50%) rotate(-90deg);
}
[class*='btn-galaxy'][class*='-plus'] > span::after {
    content:'\e145';
}
[class*='btn-galaxy'][class*='-arrow-right'] > span::after {
    content:'\e5c8';
}
[class*='btn-galaxy'][class*='-arrow-down'] > span::after {
    content:'\e5db';
}