.bttn {
    border: none;
    display: inline-block;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.4;
    font-size: 1.25rem;
    padding: 1rem 2rem 1rem;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    color: white;
    background-color: black;
}

    .bttn i,
    .bttn svg {
        margin-left: 0.625rem;
    }

.bttn--primary {
    color: #151515;
    background: #FFCD00;
    border: 1px solid #FFCD00;
}

    .bttn--primary i,
    .bttn--primary svg,
    .bttn--primary span {
        color: #fff;
    }

    .bttn--primary:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 4px;
        background-color: #FFCD00;
        transform-origin: center;
        transform: translate(-50%, 0) scaleX(0);
        transition: transform 0.3s ease-in-out;
    }

    .bttn--primary:focus {
        text-decoration: underline;
    }

        .bttn--primary:hover::after, .bttn--primary:focus::after {
            transform: translate(-50%, 0) scaleX(1);
        }

    .bttn--primary:after {
        background-color: #151515;
    }

.bttn--secondary {
    color: #fff;
    background: #151515;
    border: 1px solid #151515;
}

    .bttn--secondary i,
    .bttn--secondary svg,
    .bttn--secondary span {
        color: #FFCD00;
    }

    .bttn--secondary:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 4px;
        background-color: #FFCD00;
        transform-origin: center;
        transform: translate(-50%, 0) scaleX(0);
        transition: transform 0.3s ease-in-out;
    }

    .bttn--secondary:focus {
        text-decoration: underline;
    }

        .bttn--secondary:hover::after, .bttn--secondary:focus::after {
            transform: translate(-50%, 0) scaleX(1);
        }

.bttn--secondary__light {
    color: #fff;
}

.bttn--tertiary {
    color: #151515;
    background: #fff;
    border: none;
}

    .bttn--tertiary i,
    .bttn--tertiary svg,
    .bttn--tertiary span {
        color: #FFCD00;
    }

    .bttn--tertiary:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 4px;
        background-color: #FFCD00;
        transform-origin: center;
        transform: translate(-50%, 0) scaleX(0);
        transition: transform 0.3s ease-in-out;
    }

    .bttn--tertiary:focus {
        text-decoration: underline;
    }

        .bttn--tertiary:hover::after, .bttn--tertiary:focus::after {
            transform: translate(-50%, 0) scaleX(1);
        }

.bttn--full {
    display: flex;
}

.bttn--outline {
    border: 1px solid #FFCD00;
    border: 1px solid;
}

    .bttn--outline.bttn--tertiary {
        background: none;
    }

[class*=bg--gray] .bttn--outline.bttn--secondary:hover,
[class*=bg--gold] .bttn--outline.bttn--secondary:hover,
.bg-pattern--brain-reversed .bttn--outline.bttn--secondary:hover,
.bg-pattern--brain .bttn--outline.bttn--secondary:hover,
[class*=bg--white] .bttn--outline.bttn--secondary:hover, [class*=bg--gray] .bttn--outline.bttn--secondary:focus,
[class*=bg--gold] .bttn--outline.bttn--secondary:focus,
.bg-pattern--brain-reversed .bttn--outline.bttn--secondary:focus,
.bg-pattern--brain .bttn--outline.bttn--secondary:focus,
[class*=bg--white] .bttn--outline.bttn--secondary:focus {
    background: #151515;
}

[class*=bg--black] [class*=bg--white] .bttn--outline.bttn--secondary:hover,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline.bttn--secondary:hover,
[class*=bg--black] [class*=bg--gray] .bttn--outline.bttn--secondary:hover,
.bg-pattern--brain-black [class*=bg--gray] .bttn--outline.bttn--secondary:hover, [class*=bg--black] [class*=bg--white] .bttn--outline.bttn--secondary:focus,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline.bttn--secondary:focus,
[class*=bg--black] [class*=bg--gray] .bttn--outline.bttn--secondary:focus,
.bg-pattern--brain-black [class*=bg--gray] .bttn--outline.bttn--secondary:focus {
    color: #fff;
}

.bttn--outline:hover, .bttn--outline:focus {
    background: #fff;
    color: #151515;
}

    .bttn--outline:hover:after, .bttn--outline:focus:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 4px;
        background-color: #FFCD00;
        transform-origin: center;
        transform: translate(-50%, 0) scaleX(0);
        transition: transform 0.3s ease-in-out;
    }

    .bttn--outline:hover:focus, .bttn--outline:focus:focus {
        text-decoration: underline;
    }

        .bttn--outline:hover:hover::after, .bttn--outline:hover:focus::after, .bttn--outline:focus:hover::after, .bttn--outline:focus:focus::after {
            transform: translate(-50%, 0) scaleX(1);
        }

[class*=bg--black] .bttn--outline:hover,
.bg-pattern--brain-black .bttn--outline:hover, [class*=bg--black] .bttn--outline:focus,
.bg-pattern--brain-black .bttn--outline:focus {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
}

[class*=bg--black] [class*=bg--white] .bttn--outline:hover,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline:hover, [class*=bg--black] [class*=bg--white] .bttn--outline:focus,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline:focus {
    border: 1px solid #FFCD00;
    color: inherit;
}

[class*=bg--black] [class*=bg--white] .bttn--outline:hover,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline:hover,
[class*=bg--black] [class*=bg--gray] .bttn--outline:hover,
.bg-pattern--brain-black [class*=bg--gray] .bttn--outline:hover,
[class*=bg--black] [class*=bg--gold] .bttn--outline:hover,
.bg-pattern--brain-black .bg--gold .bttn--outline:hover, [class*=bg--black] [class*=bg--white] .bttn--outline:focus,
.bg-pattern--brain-black [class*=bg--white] .bttn--outline:focus,
[class*=bg--black] [class*=bg--gray] .bttn--outline:focus,
.bg-pattern--brain-black [class*=bg--gray] .bttn--outline:focus,
[class*=bg--black] [class*=bg--gold] .bttn--outline:focus,
.bg-pattern--brain-black .bg--gold .bttn--outline:focus {
    border: 1px solid #151515;
    color: #151515;
}

[class*=bg--white] .bttn--outline:hover:after,
[class*=bg--gold] [class*=bg--white] .bttn--outline:hover:after,
.bg-pattern--brain-reversed [class*=bg--white] .bttn--outline:hover:after, [class*=bg--white] .bttn--outline:focus:after,
[class*=bg--gold] [class*=bg--white] .bttn--outline:focus:after,
.bg-pattern--brain-reversed [class*=bg--white] .bttn--outline:focus:after {
    background: #FFCD00;
}

[class*=bg--gold] .bttn--outline:hover:after,
.bg-pattern--brain-reversed .bttn--outline:hover:after, [class*=bg--gold] .bttn--outline:focus:after,
.bg-pattern--brain-reversed .bttn--outline:focus:after {
    background: #fff;
}

.bttn--transparent {
    background: transparent;
}

    .bttn--transparent:hover, .bttn--transparent:focus {
        background: #fff;
        border: 1px solid white;
    }

.bttn--caps {
    text-transform: uppercase;
    font-family: "Antonio", sans-serif;
}

.bttn--sans-serif {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: .9rem;
    letter-spacing: .04rem;
    display: inline-block;
}

    .bttn--sans-serif:focus {
        text-decoration: underline;
    }

    .bttn--sans-serif i,
    .bttn--sans-serif span {
        font-size: .9rem;
    }

.bttn--link {
    color: #000;
}

    .bttn--link:hover, .bttn--link:focus {
        border: none;
        transform: none;
    }

        .bttn--link:hover i,
        .bttn--link:hover svg,
        .bttn--link:hover span, .bttn--link:focus i,
        .bttn--link:focus svg,
        .bttn--link:focus span {
            color: #000;
        }

        .bttn--link:hover:hover::after, .bttn--link:hover:focus::after, .bttn--link:focus:hover::after, .bttn--link:focus:focus::after {
            transform: none;
        }

.bttn__apply {
    margin-top: unset;
    padding: .7rem;
    border: 1px solid #fff;
    font-size: .95rem;
    display: none;
}

@media (min-width: 768px) {
    .bttn__apply {
        display: block;
    }
}

[class*=bg--gray] .bttn--primary,
[class*=bg--white] .bttn--primary,
.bg-pattern--brain .bttn--primary {
    border: none;
}

.bg-pattern--brain-reversed .bttn--primary,
[class*=bg--gold] .bttn--primary {
    background: #151515;
    color: #FFCD00;
}

.bg-pattern--brain-reversed [class*=bg--gray] .bttn--primary,
[class*=bg--gold] [class*=bg--gray] .bttn--primary,
.bg-pattern--brain-reversed [class*=bg--white] .bttn--primary,
[class*=bg--gold] [class*=bg--white] .bttn--primary {
    background: #FFCD00;
    color: #151515;
    border: none;
}

.bg-pattern--brain-black .bttn--primary,
[class*=bg--black] .bttn--primary {
    color: #151515;
}

[class*=bg-] [class*=bg--gray] .bttn--tertiary {
    border-color: #151515;
}

.bg-pattern--brain-black .bttn--tertiary:not([class*="bttn--outline"]),
[class*=bg--black] .bttn--tertiary:not([class*="bttn--outline"]) {
    color: #151515;
}

[class*=bg-] [class*=bg--gray] .bttn--secondary,
[class*=bg-] [class*=bg--white] .bttn--secondary,
[class*=bg-] [class*=bg--gold] .bttn--secondary,
[class*=bg--white] .bttn--secondary,
[class*=bg--gray] .bttn--secondary,
[class*=bg--gold] .bttn--secondary,
.bg-pattern--brain-reversed .bttn--secondary,
.bg-pattern--brain .bttn--secondary {
    color: #fff;
    border: none;
}

.bg-pattern--brain-reversed .bttn--tertiary i,
[class*=bg--gold] .bttn--tertiary i, .bg-pattern--brain-reversed
.bttn--tertiary span,
[class*=bg--gold]
.bttn--tertiary span, .bg-pattern--brain-reversed
.bttn--tertiary svg,
[class*=bg--gold]
.bttn--tertiary svg {
    color: inherit;
}