.button{
    font-family:'roboto' !important;
    border: 1px solid;
    font-size: 13px !important;
    padding: 14px 12px;
    text-align: center;
    width: auto;
    color: #fff;
    //.borderRadius(3px);

    span{
        padding-left:6px;
    }
}

// green
.bGreen{    
    border-color: #63a62f;
    border-bottom-color: #5b992b;    
    text-shadow: 0 -1px 0 #4c9021;
    .gradient(#7fbf4d,#63a62f);
    .boxShadow(0px,1px,0px,0px,150,202,109,1,inset);     
}
.bGreen:hover{
    cursor: pointer; 
    .gradient(#76b347,#5e9e2e);
    .boxShadow(0px,1px,0px,0px,141,191,103,1,inset)    
}
.bGreen:active{
    border-color: #5b992b;
    border-bottom-color: #538c27;
    .boxShadow(0px,0px,8px,4px,84,140,41,1,inset)
}

// blue
.bBlue{    
    //border-color: #1F5778;
    //border-bottom-color: #28719B;    
    text-shadow: 0 -1px 0 #184661;
    .gradient(#1B86A9,#28719B);
    .boxShadow(0px,1px,0px,0px,21,164,193,1,inset);     
}
.bBlue:hover{
    cursor: pointer; 
    .gradient(#24678E,#205A7D);
    .boxShadow(0px,1px,0px,0px,21,164,193,1,inset)    
}
.bBlue:active{
    //border-color: #28719B;
    //border-bottom-color: #28719B;
    .boxShadow(0px,0px,8px,4px,27,75,105,1,inset)
}

// blue fade
.bBlueFade{    
    .borderRadius(3px);
    background-color: #1B86A9;
    .boxShadow(0px,1px,0px,0px,21,164,193,1,inset);  
    .transition(background-color,0.2s,ease-in,0s);
}
.bBlueFade:hover{
    cursor: pointer; 
    .boxShadow(0px,1px,0px,0px,21,164,193,1,inset);
    background-color: #24678E;
}
.bBlueFade:active{
    .boxShadow(0px,0px,8px,4px,27,75,105,1,inset)
}

// orange fade
.bOrangeFade{    
    border-color: #BA4005;
    text-shadow: 0 -1px 0 #BA4005;
    background-color: #F35407;
    .boxShadow(0px,1px,0px,0px,250,130,71,1,inset);  
    .transition(background-color,0.2s,ease-in,0s);
}
.bOrangeFade:hover{
    cursor: pointer; 
    .boxShadow(0px,1px,0px,0px,250,130,71,1,inset);  
    background-color: #BA4005;
}
.bOrangeFade:active{
    .boxShadow(0px,0px,8px,4px,133,46,3,1,inset)
}

// CONTENT fade
.bContentFade{    
    background-color: #E51D3C;
    .transition(background-color,0.2s,ease-in,0s);
}
.bContentFade:hover{
    cursor: pointer; 
    background-color: #CE1733;
}
.bContentFade:active{
    .boxShadow(0px,0px,8px,4px,174,19,43,1,inset)
}

// SEARCH fade
.bSearchFade{    
    background-color: #39C1CF;
    .transition(background-color,0.2s,ease-in,0s);
}
.bSearchFade:hover{
    cursor: pointer; 
    background-color: #2CA6B4;
}
.bSearchFade:active{
    .boxShadow(0px,0px,8px,4px,37,142,147,74,inset)
}

// PUSH fade
.bPushFade{    
    background-color: #70B966;
    .transition(background-color,0.2s,ease-in,0s);
}
.bPushFade:hover{
    cursor: pointer; 
    background-color: #549E49;
}
.bPushFade:active{
    .boxShadow(0px,0px,8px,4px,65,120,56,1,inset)
}

// EVENTS fade
.bEventsFade{    
    background-color: #904098;
    .transition(background-color,0.2s,ease-in,0s);
}
.bEventsFade:hover{
    cursor: pointer; 
    background-color: #76357D;
}
.bEventsFade:active{
    .boxShadow(0px,0px,8px,4px,98,45,104,1,inset)
}

// SOCIAL fade
.bSocialFade{    
    background-color: #FAA75B;
    .transition(background-color,0.2s,ease-in,0s);
}
.bSocialFade:hover{
    cursor: pointer; 
    background-color: #F9963C;
}
.bSocialFade:active{
    .boxShadow(0px,0px,8px,4px,248,130,22,1,inset)
}

// GRAY fade
.bGrayFade{    
    color:#000 !important;
    border:none;
    background-color: #DBDBDB;
    .transition(background-color,0.2s,ease-in,0s);
}
.bGrayFade:hover{
    cursor: pointer; 
    background-color: #C1C1C1;
}
.bGrayFade:active{
    .boxShadow(0px,0px,8px,4px,167,167,167,1,inset)
}

// MAIN fade
.bMainFade{    
    .borderRadius(4px);
    border:solid 1px #DBDBDB;
    color:#000 !important;
    background-color: #E9E9E9;
    .transition(background-color,0.2s,ease-in,0s);
}
.bMainFade:hover{
    cursor: pointer; 
    background-color: #DBDBDB;
}
.bMainFade:active{
    .boxShadow(0px,0px,8px,4px,193,193,193,1,inset)
}

// LANDING fade
.bLandingFade{    
    .borderRadius(4px);
    border:solid 1px #DBDBDB;
    color:#FFF !important;
    background-color: #F15A24;
    .transition(background-color,0.2s,ease-in,0s);
}
.bLandingFade:hover{
    cursor: pointer; 
    background-color: #E3490F;
}
.bLandingFade:active{
    .boxShadow(0px,0px,8px,4px,198,64,13,1,inset)
}