button { cursor: pointer; }

.button_base,
a.button_base, a.button_base:visited {
	font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: -.5px;
	text-decoration: none;

	color: #ffffff;
	background-color: var(--global-color-brun1);

	display: inline-block;
	width: 100%;
	text-align: center;
	vertical-align: middle;

	font-size: 1rem;
	padding: 0.5rem 1rem;
	max-width: 12rem;

	-webkit-box-sizing: border-box;
					box-sizing: border-box;

	-webkit-border-radius: 20px;
					border-radius: 20px;
}
button.button_base { border: 0px; -webkit-font-smoothing: antialiased; }

.button_base:hover, a.button_base:hover, button.button_base:hover { background-color: var(--global-color-brun1-hover); color: #ffffff; }
.button_base:active, a.button_base:active, button.button_base:active { background-color: #ff0000; }

.button_base i.fas { color: #ffffff; font-size: 1rem; vertical-align: baseline; margin-left: 0.375rem; }

.button_base.small {
	font-size: 0.875rem;
	padding: 0.250rem 0.5rem;
	max-width: 7rem;
}
.button_base.full { max-width: none; }
.button_base.flex { width: auto; max-width: none; padding: 0.250rem 1.5rem; }

.button_base.disabled, .button_base.disabled:visited { background-color: #717171; }
.button_base.disabled:hover { background-color: #717171; }
.button_base.disabled:active { background-color: #717171; }

.button_base.light, .button_base.light:visited { background-color: var(--global-color-brun1-light); border: 1px solid white; }
.button_base.light:hover { background-color: var(--global-color-brun1-light-hover); }
.button_base.light:active, a.button_base.light:active, button.button_base.light:active { background-color: #ff0000; }

.button_base.noir, .button_base.noir:visited { background-color: black; border: 1px solid white; }
.button_base.noir:hover { background-color: #535353; }
.button_base.noir:active, a.button_base.noir:active, button.button_base.noir:active { background-color: #ff0000; }

.button_base.blanc, .button_base.blanc:visited { background-color: white; color: black; border: 1px solid var(--global-color-brun1); }
.button_base.blanc:hover { background-color: #eaeaea; color: black; }
.button_base.blanc:active, a.button_base.blanc:active, button.button_base.blanc:active { background-color: #ff0000; }
.button_base.blanc i.fas, .button_base.blanc:visited i.fas { color: black; }
.button_base.blanc:hover i.fas { color: black; }

/* #Base 1008 Grid */
@media only screen and (min-width: 1008px) and (max-width: 1259px) {

}


/* #Base  756 Grid */
@media only screen and (min-width: 756px) and (max-width: 1007px) {

}


/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

}


/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}