.button_modal_class{
	background: #F4F4F4; 
	border: 1px solid #CCCCCC; 
	padding: 7px 15px; 
	border-radius: 4px; 
	color: #636363; 
	margin: 10px 5px;
    font: 13px Arial, Helvetica, Clean, sans-serif;
}
.button_modal_class:hover{
	background: #F9F9F9;
}

.buttons_modal_da, .button_modal {
    background-color: #ffdc61;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Montserrat-Bold", sans-serif;
    text-transform: uppercase;
    color: #03060a;
}

.buttons_modal_net{
	background: linear-gradient(0deg, #E0E0E0 10%, #FFFFFF 90%); 
	border: 1px solid #CCCCCC; 
	padding: 7px 15px; 
	border-radius: 4px; 
	color: #333333; 
	margin: 10px 5px;
}
.buttons_modal_net:hover{
	background: linear-gradient(0deg, #D3D3D3 10%, #F4F4F4 90%);
	border: 1px solid #BCBCBC; 
}
.buttons_modal_da:hover {
	background: linear-gradient(0deg, #2A6999 0%, #5394C6 120%); 
	border: 1px solid #2C6899; 
}
.button_modal {
    background-color: #ffdc61;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Montserrat-Bold", sans-serif;
    text-transform: uppercase;
    color: #03060a;
    )
}

.buttons_modal::before {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: #959595 0 1px 1px;
    -moz-box-shadow: #959595 0 2px 2px;
    border-radius: 3px;
    box-shadow: #959595 0 2px 5px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    padding: 2px 0 0;
    position: absolute;
    top: 0;
    width: 100%;
}
    
.buttons_modal:active::before { padding: 1px 0 0; }

/**
 * Grey
 */
.buttons_modal {
    background-color: #ffdc61;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Montserrat-Bold", sans-serif;
    text-transform: uppercase;
    color: #03060a;
}
    
.buttons_modal:hover {
    background: #e4e4e4;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
    background: -moz-linear-gradient(#e4e4e4, #ededed);
    background: linear-gradient(#e4e4e4, #ededed);
    border: solid 1px #c2c2c2;   }
    
.buttons_modal:active {
    background: #dfdfdf;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));
    background: -moz-linear-gradient(#dfdfdf, #e3e3e3);
    background: linear-gradient(#dfdfdf, #e3e3e3);
    border: solid 1px #959595; 
    top:2px;}


/**
 * Green
 */
    .buttons_modal.green {
        /*background: #cae285;
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#cae285), to(#a3cd5a));
        background: -moz-linear-gradient(#cae285, #a3cd5a);
        background: linear-gradient(#cae285, #a3cd5a);
        border: solid 1px #aad063;
        color: #f5da15;
        text-shadow: 0 1px 0 #D8EDAA;*/
        background-color: #ffdc61;
        border-radius: 5px;
        cursor: pointer;
        font-family: "Montserrat-Bold", sans-serif;
        text-transform: uppercase;
        color: #03060a;
    }
    
.buttons_modal.green:hover {
    background: #abd164;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#abd164), to(#b9d972));
    background: -moz-linear-gradient(#abd164, #b9d972);
    background: linear-gradient(#abd164, #b9d972);
    border: solid 1px #98b85b;  }
    
.buttons_modal.green:active {
    background: #f5da15;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a4cb5d), to(#9ec45a));
    background: -moz-linear-gradient(#a4cb5d, #9ec45a);
    background: linear-gradient(#a4cb5d, #9ec45a);
    border: solid 1px #6e883f;  }
    
/**
 * Blue Alt
 */
    .buttons_modal.blue_alt {
        /*background: #becbd6;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#becbd6), to(#8da5b7));
    background: -moz-linear-gradient(#becbd6, #8da5b7);
    background: linear-gradient(#becbd6, #8da5b7);
    border: solid 1px #a1aeb7;  
    color: #515f6a;
    text-shadow: 0 1px 0 #c4d0da;*/
        background-color: #ffdc61;
        border-radius: 5px;
        cursor: pointer;
        font-family: "Montserrat-Bold", sans-serif;
        text-transform: uppercase;
        color: #03060a;
    }

    background-color: #ffdc61;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Montserrat-Bold", sans-serif;
  text-transform: uppercase;
  color: #03060a;
    
.buttons_modal.blue_alt:hover {
    background: #97adbd;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#97adbd), to(#a8bac8));
    background: -moz-linear-gradient(#97adbd, #a8bac8);
    background: linear-gradient(#97adbd, #a8bac8);
    border: solid 1px #96a2ab;   }
    
.buttons_modal.blue_alt:active {
    background: #8fa6b6;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8fa6b6), to(#8aa0b0));
    background: -moz-linear-gradient(#8fa6b6, #8aa0b0);
    background: linear-gradient(#8fa6b6, #8aa0b0);
    border: solid 1px #606f7a;  }
	
	
	
	/**
 * Orange
 */
.buttons_modal.orange {
    /*background: #feda71;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#feda71), to(#febe4d));
    background: -moz-linear-gradient(#feda71, #febe4d);
    background: linear-gradient(#feda71, #febe4d);
    border: solid 1px #eab551;  
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;*/
    background-color: #ffdc61;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Montserrat-Bold", sans-serif;
    text-transform: uppercase;
    color: #03060a;
}
    
.buttons_modal.orange:hover {
    background: #fec455;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fec455), to(#fecd61));
    background: -moz-linear-gradient(#fec455, #fecd61);
    background: linear-gradient(#fec455, #fecd61);
    border: solid 1px #e6a93d;   }
    
.buttons_modal.orange:active {
    background: #f9bd4f;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f9bd4f), to(#f0b64d));
    background: -moz-linear-gradient(#f9bd4f, #f0b64d);
    background: linear-gradient(#f9bd4f, #f0b64d);
    border: solid 1px #a77f35;  }
	
	
	
	
	
		/**
 * Red
 */
.buttons_modal.red {
    /*background: #febe4d;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#febe4d), to(#FE9B55));
    background: -moz-linear-gradient(#febe4d, #FE9B55);
    background: linear-gradient(#febe4d, #FE9B55);
    border: solid 1px #eab551;  
    color: #303030;
    text-shadow: 0 1px 0 #fedd9b;*/
    background-color: #ffdc61;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Montserrat-Bold", sans-serif;
    text-transform: uppercase;
    color: #03060a;
}
    
.buttons_modal.red:hover {
    background: #FE9B55;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FE9B55), to(#fecd61));
    background: -moz-linear-gradient(#FE9B55, #fecd61);
    background: linear-gradient(#FE9B55, #fecd61);
    border: solid 1px #e6a93d;   }
    
.buttons_modal.red:active {
    background: #f9bd4f;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f9bd4f), to(#f0b64d));
    background: -moz-linear-gradient(#f9bd4f, #f0b64d);
    background: linear-gradient(#f9bd4f, #f0b64d);
    border: solid 1px #a77f35;  }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) {
  @if $b-hsb == 0 {
    @return hsla(0, 0, 0, $a);
  } @else {
    $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
    $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);
    @return hsla($h-hsb, $s-hsl, $l-hsl, $a);
  }
}

@function hsb-saturate($s, $a) {
  @if $s == 0 {
    @return 0;
  } @else {
    @return $s + $a;
  }
}

@mixin buttonize($h, $s, $b, $light: 0) {

  $color: hsb($h, $s, $b);
  $color-dark: hsb($h, hsb-saturate($s, 10), $b);
  $inset-top: inset 0 1px 0 hsb($h, $s - 20, $b + 10);
  $inset-bottom: inset 0 -1px 0 hsb($h, hsb-saturate($s, 10), $b - 10);
  $inset: inset 0 0 0 1px hsb($h, hsb-saturate($s, - 10), $b);

  background-color: $color;
  background-image: linear-gradient(to bottom, $color, $color-dark);
  border: 1px solid hsb($h, hsb-saturate($s, 20), $b - 20);
  box-shadow: $inset-top,
              $inset-bottom,
              $inset,
              0 2px 4px rgba(black, 0.2);

  @if $light == 1 {
    color: hsb($h, hsb-saturate($s, 40), $b - 40);
    text-shadow: 0 1px 0 rgba(white, 0.5);
  } @else {
    color: white;
    text-shadow: 0 1px 2px rgba(black, 0.3);
  }

  &:hover,
  &:focus {
    background: $color-dark;
    border-color: hsb($h, hsb-saturate($s, 40), $b - 40);
    box-shadow: $inset-top,
                $inset-bottom,
                $inset;
  }

  &:active {
    background: $color-dark;
    box-shadow: inset 0 2px 3px rgba(black, 0.2);
  }

  .fa {
    color: hsb($h, hsb-saturate($s, 20), $b - 20);
    text-shadow: 0 1px 0 rgba(white, 0.3);
  }

}
.button-blue{ @include buttonize(199, 71, 89);}
.button-green{ @include buttonize(97, 42, 80);}
.button-purple{ @include buttonize(249, 34, 73);}
.button-orange{ @include buttonize(26, 77, 96);}
.button-red{ @include buttonize(4, 58, 93);}
.button-yellow{ @include buttonize(49, 54, 99, 1);}
.button .fa{ float: left; font-size: 14px; line-height: 20px; margin: -1px 8px 0 -4px; vertical-align: top;}