button { cursor: pointer; }

.button_base,
a.button_base, a.button_base:visited {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 600;
	letter-spacing: -.5px;
	text-decoration: none;
	text-transform: uppercase;

	color: #ffffff;
	background-color: var(--global-color-gray1);
	border: 1px solid #ffffff;

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

	font-size: 1.250rem;
	padding: 0.5rem 0.875rem;
	max-width: 16rem;

	-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: #000000; color: #ffffff; }
.button_base:active, a.button_base:active, button.button_base:active { background-color: #ff0000; }

.button_base .labelright { padding-right: 6px; }
.button_base .labelleft  { padding-left: 6px; }

.button_base i.fas { color: #ffffff; font-size: 1rem; vertical-align: middle; }
.button_base i.fas.mright { margin-right: 0.5rem; margin-top: -2px; }

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

.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.bleu, .button_base.bleu:visited { background-color: #22407e; }
.button_base.bleu:hover { background-color: #2d518b; }
.button_base.bleu:active { background-color: #717171; }

.button_base.vert, .button_base.vert:visited { background-color: #8bb13f; }
.button_base.vert:hover { background-color: #6d8f29; }
.button_base.vert:active { background-color: #717171; }

.button_base.noir, .button_base.noir:visited { background-color: #000000; }
.button_base.noir:hover { background-color: #535353; }
.button_base.noir:active { background-color: #ff0000; }

.button_base.gris1, .button_base.gris1:visited { background-color: #535353; }
.button_base.gris1:hover { background-color: #000; }
.button_base.gris1:active { background-color: #717171; }

.button_base.rouge, .button_base.rouge:visited { background-color: var(--global-color-red1); }
.button_base.rouge:hover { background-color: #B80B0B; }
.button_base.rouge:active { background-color: #717171; }


.button_content .labelright { padding-left: 10px; }
.button_content .labelleft  { padding-right: 10px; }
.button_content span  { float: none !important; }

.button_content, .button_content:visited,
button.button_content, button.button_content:visited,
a.button_content, a.button_content:visited {
	cursor: pointer;
	text-decoration: none;

	font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
	color: #444444;

	line-height: 1.6rem;
	height: 2rem;
	text-align: center;
	vertical-align: middle;

	background-color: #dddddd;

	border: 0;
	display: inline-block;

	-webkit-border-radius: 4px;
	        border-radius: 4px;

	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;

	padding: 0.1rem 1.250rem 0.2rem 1.250rem;
	border: 1px solid #000000;

	min-width: 150px;
	width: auto;

	-webkit-font-smoothing: antialiased;
}
.button_content i.fas { font-size: 1rem; vertical-align: baseline; }
.button_content:hover, a.button_content:hover { background-color: #bbbbbb; color: #444444; }
.button_content:active, a.button_content:active { background-color: #ff0000; }

.button_content.save, .button_content.save:visited,
a.button_content.save, a.button_content.save:visited {
	cursor: pointer;
	text-decoration: none;

  font-weight: 600;
  text-transform: uppercase;
	color: #ffffff;

	background-color: var(--global-color-vw3-red);

	border: 0;
	display: inline-block;

	width: auto;
	border: 1px solid #b3b3b3;

	-webkit-font-smoothing: antialiased;
}
.button_content.save:hover { background-color: #940D27; color: #ffffff; }
.button_content.save:active { background-color: #ff0000; }

.button_content.back, .button_content.back:visited,
a.button_content.back, a.button_content.back:visited {
	cursor: pointer;
	text-decoration: none;

  font-weight: 600;
  text-transform: uppercase;
	color: #ffffff;

	background-color: #000000;

	border: 0;
	display: inline-block;

	width: auto;
	border: 1px solid #b3b3b3;

	-webkit-font-smoothing: antialiased;
}
.button_content.back:hover, a.button_content.back:hover { background-color: #333333; color: #ffffff; }
.button_content.back:active { background-color: #ff0000; }

.button_content.black, .button_content.black:visited,
a.button_content.black, a.button_content.black:visited {
	cursor: pointer;
	text-decoration: none;

  font-weight: 600;
  text-transform: uppercase;
	color: #ffffff;

	background-color: #000000;

	border: 0;
	display: inline-block;

	width: auto;
	border: 1px solid #b3b3b3;

	-webkit-font-smoothing: antialiased;
}
.button_content.black:hover, a.button_content.black:hover { background-color: #bbbbbb; color: #444444; }
.button_content.black:active { background-color: #ff0000; }


/* #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) {

}