.button {
	color: #333;
	background-color: #f4f4f4;
	border-color: #eeeeee;
	font-weight: 300;
	font-size: 16px;
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	height: 40px;
	padding: 0 40px;
	margin: 0;
	display: inline-block;
	appearance: none;
	cursor: pointer;
	border: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	border:1px solid #aaa;
}

.button:visited {
    color: #666666; 
}

.button:hover, .button:focus {
	background-color: #f6f6f6;
	text-decoration: none;
	outline: none;
}

.button:active, .button.active, .button.is-active {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	text-decoration: none;
	background-color: #eeeeee;
	border-color: #cfcfcf;
	color: #d4d4d4;
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.button.disabled, .button.is-disabled, .button:disabled {
	top: 0 !important;
	background: #EEE !important;
	border: 1px solid #DDD !important;
	text-shadow: 0 1px 1px white !important;
	color: #ccc !important;
	cursor: default !important;
	appearance: none !important;
}

.button.disabled else, .button.is-disabled else, .button:disabled else {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	opacity: .8 !important;
}


.button-width-small {
  padding: 0 10px !important;
}

/*
* Base Colors
*
* Create colors for buttons
* (.button-primary, .button-secondary, etc.)
*/
.button-primary,
.button-primary-flat {
  background-color: #1b9af7;
  border-color: #1b9af7;
  color: white; }
  .button-primary:visited,
  .button-primary-flat:visited {
    color: white; }
  .button-primary:hover, .button-primary:focus,
  .button-primary-flat:hover,
  .button-primary-flat:focus {
    background-color: #4cb0f9;
    border-color: #4cb0f9;
    color: white; }
  .button-primary:active, .button-primary.active, .button-primary.is-active,
  .button-primary-flat:active,
  .button-primary-flat.active,
  .button-primary-flat.is-active {
    background-color: #2798eb;
    border-color: #2798eb;
    color: #0880d7; }

.button-plain,
.button-plain-flat {
  background-color: white;
  border-color: white;
  color: #1b9af7; }
  .button-plain:visited,
  .button-plain-flat:visited {
    color: #1b9af7; }
  .button-plain:hover, .button-plain:focus,
  .button-plain-flat:hover,
  .button-plain-flat:focus {
    background-color: white;
    border-color: white;
    color: #1b9af7; }
  .button-plain:active, .button-plain.active, .button-plain.is-active,
  .button-plain-flat:active,
  .button-plain-flat.active,
  .button-plain-flat.is-active {
    background-color: white;
    border-color: white;
    color: #e6e6e6; }

.button-inverse,
.button-inverse-flat {
  background-color: #222222;
  border-color: #222222;
  color: #eeeeee; }
  .button-inverse:visited,
  .button-inverse-flat:visited {
    color: #eeeeee; }
  .button-inverse:hover, .button-inverse:focus,
  .button-inverse-flat:hover,
  .button-inverse-flat:focus {
    background-color: #3c3c3c;
    border-color: #3c3c3c;
    color: #eeeeee; }
  .button-inverse:active, .button-inverse.active, .button-inverse.is-active,
  .button-inverse-flat:active,
  .button-inverse-flat.active,
  .button-inverse-flat.is-active {
    background-color: #222222;
    border-color: #222222;
    color: #090909; }

.button-action,
.button-action-flat {
  background-color: #a5de37;
  border-color: #a5de37;
  color: white; }
  .button-action:visited,
  .button-action-flat:visited {
    color: white; }
  .button-action:hover, .button-action:focus,
  .button-action-flat:hover,
  .button-action-flat:focus {
    background-color: #b9e563;
    border-color: #b9e563;
    color: white; }
  .button-action:active, .button-action.active, .button-action.is-active,
  .button-action-flat:active,
  .button-action-flat.active,
  .button-action-flat.is-active {
    background-color: #a1d243;
    border-color: #a1d243;
    color: #8bc220; }

.button-highlight,
.button-highlight-flat {
  background-color: #feae1b;
  border-color: #feae1b;
  color: white; }
  .button-highlight:visited,
  .button-highlight-flat:visited {
    color: white; }
  .button-highlight:hover, .button-highlight:focus,
  .button-highlight-flat:hover,
  .button-highlight-flat:focus {
    background-color: #fec04e;
    border-color: #fec04e;
    color: white; }
  .button-highlight:active, .button-highlight.active, .button-highlight.is-active,
  .button-highlight-flat:active,
  .button-highlight-flat.active,
  .button-highlight-flat.is-active {
    background-color: #f3ab26;
    border-color: #f3ab26;
    color: #e59501; }

.button-caution,
.button-caution-flat {
  background-color: #ff4351;
  border-color: #ff4351;
  color: white; }
  .button-caution:visited,
  .button-caution-flat:visited {
    color: white; }
  .button-caution:hover, .button-caution:focus,
  .button-caution-flat:hover,
  .button-caution-flat:focus {
    background-color: #ff7680;
    border-color: #ff7680;
    color: white; }
  .button-caution:active, .button-caution.active, .button-caution.is-active,
  .button-caution-flat:active,
  .button-caution-flat.active,
  .button-caution-flat.is-active {
    background-color: #f64c59;
    border-color: #f64c59;
    color: #ff1022; }

.button-royal,
.button-royal-flat {
  background-color: #7b72e9;
  border-color: #7b72e9;
  color: white; }
  .button-royal:visited,
  .button-royal-flat:visited {
    color: white; }
  .button-royal:hover, .button-royal:focus,
  .button-royal-flat:hover,
  .button-royal-flat:focus {
    background-color: #a49ef0;
    border-color: #a49ef0;
    color: white; }
  .button-royal:active, .button-royal.active, .button-royal.is-active,
  .button-royal-flat:active,
  .button-royal-flat.active,
  .button-royal-flat.is-active {
    background-color: #827ae1;
    border-color: #827ae1;
    color: #5246e2; }



/*
* Button Shapes
*
* This file creates the various button shapes
* (ex. Circle, Rounded, Pill)
*/
.button-square {
  border-radius: 0; }

.button-box {
  border-radius: 10px; }

.button-rounded {
  border-radius: 4px; }

.button-pill {
  border-radius: 200px; }

.button-circle {
  border-radius: 100%; }


.button-giant {
  font-size: 28px;
  height: 70px;
  line-height: 70px;
  padding: 0 70px; }

.button-jumbo {
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  padding: 0 60px; }

.button-large {
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  padding: 0 50px; }

.button-normal {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding: 0 40px; }

.button-small {
	font-size: 12px;
	height: 30px;
	line-height: 30px;
	padding: 0 20px;
}

.button-tiny {
  font-size: 9.6px;
  height: 24px;
  line-height: 24px;
  padding: 0 24px; }