button {
    all: unset;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

button,
.btn,
.button {
    padding-inline: 20px;
    padding-block: 14px;
    text-transform: uppercase;
    font-family: REM, Arial, sans-serif;
    font-size: var(--button-font-size) !important;
    transition: 0.3s;
    width: 100%;
}

.popup .btn {
    color: var(--off-white);
    background-color: var(--navy);
    width: 200px;
    display: inline-block;
}

header .btn {
    color: var(--off-white);
    border: solid 1px var(--off-white);
    max-width: 100px;
}

header .btn:hover {
    color: var(--navy);
    background-color: var(--off-white);
}

.cta.stylise a {
    border: solid 1px var(--off-white);
    padding-block: 12px;
    padding-inline: 30px;
    transition:0.3s;
	font-family: rem;
	font-style:normal;
	font-size:var(--button-font-size)
}

.cta.stylise a:hover {
    text-decoration: none;
    background: var(--off-white);
    color: var(--navy);


}

.content-block .btn,
.content-block button {
    display: block;
    box-sizing: border-box;
    color: var(--khaki);
    border: solid 1px var(--khaki);
    min-width: 200px;

}

.content-block .btn:hover,
.content-block button:hover {
    color: var(--off-white);
    background-color: var(--khaki);
}

.form input.button {
    background-color: var(--navy);
    border: none !important;
    cursor: pointer;
    color: var(--off-white);
    width: 150px !important;
}

footer .btn {
    background-color: var(--off-white);
    color: var(--khaki);
    min-width: 150px;

}

/*----------------------------------RESPONSIVENESS--------------------------------*/


@media (max-width: 685px) {
    footer .btn {
        max-width: 200px;
        padding-block: 8px;
        box-sizing: border-box;
    }
}

@media (max-width: 475px) {
    footer .btn {
        width: 100%;
        max-width: unset;
    }

    .popup .btn {
        width: 100%;
        box-sizing: border-box;
    }

}