button {
	outline: none !important;
}

button a {
	text-decoration: none;
}

.buttonset {
  margin: 0px .5em !important;
}

.btn { 
	text-decoration: none !important; 
	margin-bottom: 5px; 
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
	margin-left: 0px; 
}

.btn-square {
  border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
}

.btn-radius3, .btn-radius-3 {
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
}

.btn-radius5, .btn-radius-5 {
  border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
}

.btn-radius10, .btn-radius-10 {
  border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
}

.btn-lg, .btn-large {
	font-size: 1.5rem !important;
}

.btn-jumbo { 
	font-size: 2rem !important;
}

.btn-giant {
	font-size: 3rem;
}

.button-container {
  display: flex;
  justify-content: center;
}

.btn-center {
  display: table;
  text-align: center;
  width: auto;
	margin: 20px auto;
}

.btn-normal {
  display: table;
  text-align: center;
  margin: 0 auto;
  width: auto;
}

.btn-block {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 90%;
}

.btn-margin-5 {
	margin: 5px;
}

.btn-margin-right-10 {
	margin: 10px;
}

.btn-margin-10 {
	margin: 10px;
}

.btn-margin-20 {
	margin: 20px;
}

/* COLOR STYLES */

/* TRANSPARENT BACKGROUND COLORED BORDER  ******************************* */

.btn-transparent-white { /* mark */
  border: 1px solid white !important;
  color: white !important;
  background: transparent !important;
}

.btn-transparent-white:hover {
  color: black !important;
  background: white !important;
}

.btn-transparent-black { /* mark */
  background: transparent !important;
  color: black !important;
  border: 1px solid black !important;
}

.btn-transparent-black:hover  {
  color: white !important;
  background: black !important;
}

.btn-transparent-red { /* mark */
  background: transparent !important;
  color: red !important;
  border: 1px solid red !important;
}

.btn-transparent-red:hover {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-transparent-maroon { /* mark */
  background: transparent;
  color: maroon !important;
  border: 1px solid maroon !important;
}

.btn-transparent-maroon:hover {
  background: maroon !important;
  color: white !important;
  border: 1px solid maroon !important;
}

.btn-transparent-teal { /* mark */
  background: tranparent !important;
  color: teal !important;
  border: 1px solid teal !important;
}

.btn-transparent-teal:hover {
  background: teal !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-transparent-blue { /* mark */
  background: tranparent !important;
  color: blue !important;
  border: 1px solid blue !important;
}

.btn-transparent-blue:hover {
  background: blue !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-teal-transparent { /* mark */
 	background: transparent !important;
 	color: teal !important;
 	border: 1px solid teal;
}

.btn-teal-transparent:hover { 
 	background: teal !important;
 	color: #fff !important;
}

.btn-blue-transparent { /* mark */
 	background: transparent;
 	color: blue !important;
 	border: 1px solid blue;
}

.btn-blue-transparent:hover { 
 	background: blue;
 	color: white !important;
}


/* COLORED TEXT, WHITE BORDER  ******************************* */

/* BLACK */

.btn-black { /* mark */
  background: black !important;
  color: white !important;
  border: 0px solid black !important;
}

.btn-black:hover {
  background: #333 !important;
  color: #fff !important;
}

.btn-black-white { /* mark */
  background: black !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-black-white:hover {
  background: white !important;
  color: black !important;
  border: 1px solid black !important;
}

.btn-white-black { /* mark */
	text-align: center;
	width: auto;
	color: black !important;
  background: white !important;
  border: 1px solid black !important;
}

.btn-white-black:hover {
  color: black !important;
  background: white !important;
  border: 1px solid white !important;
}

.btn-white-black-white-border { /* mark */
	text-align: center;
	width: auto;
	background: white !important;
  color: black !important;
  border: 1px solid white !important;
}

.btn-white-black-white-border:hover {
  background: black !important;
  color: white !important;
  border: 1px solid white !important;
}

/* RED */

.btn-red { /* mark */
 	background: red;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-red:hover {
 	background: #cc0000;
 	color: #fff;
 	border: 0px solid #555;
}

.btn-red-white { /* mark */
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-red-white:hover {
  background: white !important;
  color: red !important;
  border: 1px solid red !important;
}

.btn-white-red { /* mark */
	text-align: center;
	width: auto;
	color: red !important;
  background: white !important;
  border: 1px solid red !important;
}

.btn-white-red:hover {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-white-red-white-border { /* mark */
	text-align: center;
	width: auto;
	color: red !important;
  background: white !important;
  border: 1px solid white !important;
}

.btn-white-red-white-border:hover {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

/* BURGUNDY */

.btn-burgundy { /* mark */
  background: burgundy !important;
  background: #800020 !important;
  background: #ad002b !important;
  color: white !important;
  border: 1px solid burgundy !important;
}

.btn-burgundy:hover {
  background: #6c0020 !important;
  color: #fff !important;
  border: 1px solid #6c0020 !important;
}

/* MAROON */

.btn-maroon { /* mark */
  background: maroon !important;
  color: white !important;
  border: 1px solid maroon !important;
}

.btn-maroon:hover {
  background: white !important;
  color: maroon !important;
  border: 1px solid maroon !important;
}

/* TEAL */

.btn-teal { /* mark */
  background: teal !important;
  color: white !important;
  border: 0px solid white !important;
}

.btn-teal:hover {
  background: #006a6a !important;
  color: white !important;
  border: 0px solid #006a6a !important;
}

.btn-white-teal { /* mark */
  background: white !important;
  color: teal !important;
  border: 1px solid teal !important;
}

.btn-white-teal:hover {
  background: teal !important;
  color: white !important;
  border: 1px solid teal !important;
}

.btn-white-teal-white-border { /* mark */
  background: white !important;
  color: teal !important;
  border: 1px solid white !important;
}

.btn-white-teal-white-border:hover {
  background: teal !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-teal-white { /* mark */
  background: teal !important;
  color: white !important;
  border: 1px solid teal !important;
}

.btn-teal-white:hover {
  background: white !important;
  color: teal !important;
  border: 1px solid teal !important;
}

/* GREEN */

.btn-green { /* mark */
  background: green !important;
  color: white !important;
  border: 1px solid green !important;
}

.btn-green:hover {
  background: darkgreen !important;
  color: white !important;
  border: 1px solid green !important;
}

.btn-indigo { /* mark */
 	background: indigo !important;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-indigo:hover { 
 	background: #300153 !important;
 	color: #fff;
}

.btn-jade-green { /* mark */
 	background: #00a86b !important;
 	color: white !important;
 	border: 0px solid #00a86b;
}

.btn-jade-green:hover { 
 	background: #00756b !important;
 	color: #fff;
}

.btn-avocado-green { /* mark */
 	background: #568203 !important;
 	color: white !important;
 	border: 0px solid #00a86b;
}

.btn-avocado-green:hover { 
 	color: #fff;
 	background: #4a6f04 !important;
}

/* NAVBAR ************************************************************** */

/* bob */

.btn-orange { /* mark */
 	background: orange;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-orange:hover {
 	background: darkorange;
 	color: #fff;
}

.btn-orangered { /* mark */
 	background: orangered;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-orangered:hover {
 	background: red;
 	color: #fff;
}

/* https://codepen.io/RazorXio/pen/gMaoOW */

.slide-right-orange:hover {
  box-shadow: inset 320px 0 0 0 var(--darkorange);
}

.slide-down:hover {
  box-shadow: inset 0 100px 0 0 var(--darkorange);
}

.slide-left:hover {
  box-shadow: inset 0 0 0 50px var(--darkorange);
}

.slide-diagonal:hover {
  box-shadow: inset 320px 50px 0 0 var(--darkorange);
}

.btn-darkorange { /* mark */
 	background: darkorange !important;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-darkorange:hover {
 	color: #fff;
 	background: orangered !important;
}

.btn-blue { /* mark */
 	background: blue !important;
	color: white !important;
 	border: 0px solid #555;
}

.btn-blue:hover {
 	background: #0000cc !important;
 	color: #fff;
}

.btn-blue-white { /* mark */
 	background: blue !important;
	color: white !important;
 	border: 1px solid #fff;
}

.btn-blue-white:hover {
 	background: white !important;
 	color: blue !important;
 	border: 1px solid blue;
}

.btn-white-blue { /* mark */
 	background: white !important;
	color: blue !important;
 	border: 1px solid blue;
}

.btn-white-blue:hover { 
 	background: blue !important;
 	color: white !important;
 	border: 1px solid white;
}

.btn-pleasant-blue,
.btn-softblue { /* mark */
	text-align: center;
	width: auto;
	color: white !important;
  background:	#0c62a6 !important;
  border: 1px solid #fff !important;
}

.btn-pleasant-blue:hover,
.btn-softblue:hover {
  background: #0c4776 !important;
  color: white !important;
  border: 1px solid white !important;
}

.btn-white-softblue { /* mark */
	text-align: center;
	width: auto;
	background: white !important;
  color:	#0c62a6 !important;
  border: 1px solid #fff !important;
}

.btn-white-softblue:hover {
  color: #0c4776 !important;
  background: white !important;
  border: 1px solid white !important;
}

.btn-navy { /* mark */
 	background: navy !important;
	color: white !important;
 	border: 0px solid #555;
}

.btn-navy:hover { 
 	background: black !important;
 	color: #fff;
}

.btn-deeppink { /* mark */
 	background: deeppink !important;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-deeppink:hover {
 	background: #d10372 !important;
 	color: #fff;
}

.btn-msi { /* mark */
 	border: 0px solid #555;
 	color: white !important;
 	background: #8c724f;
}

.btn-msi:hover {
 	background: #635036;
 	background: #705b40;
 	color: #fff;
}

.btn-violin { /* mark */
 	border: 0px solid #555;
 	color: white !important;
 	background: #793705;
}

.btn-violin:hover {
 	background: #582500;
 	color: #fff;
}

.btn-royalblue { /* mark */
 	background:	#4169e1;
 	background:	royalblue;
 	color: white !important;
 	border: 0px solid #555;
}

.btn-royalblue:hover {
 	background: #4143e1;
 	color: #fff;
}

/* See: https://www.color-meanings.com/shades-of-green-color-names-html-hex-rgb-codes/ */

.btn-search { margin-left: 5px; margin-right: 5px; } /* built into navbar */

/* NAVBAR SEARCH BUTTON  ******************************* */
.btn-navbar {
  color: white !important;
  background: #222 !important;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-navbar:hover {
	border: 1px solid rgba(255, 255, 255, 0.9);
  color: white !important;
  background: #333 !important;
}

.btn-neutral {
 	border: 0px solid #555;
 	color: white !important;
 	background: #555;
	border: 2px solid #555;
}

.btn-neutral.active {
 	color: #fff !important;
 	background: #000 !important;
	border: 2px solid #000 !important;
}

.btn-neutral.hover {
	background: #222 !important;
	border: 2px solid #222 !important;
}