/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

########  ##     ## ######## ########  #######  ##    ##  ######  
##     ## ##     ##    ##       ##    ##     ## ###   ## ##    ## 
##     ## ##     ##    ##       ##    ##     ## ####  ## ##       
########  ##     ##    ##       ##    ##     ## ## ## ##  ######  
##     ## ##     ##    ##       ##    ##     ## ##  ####       ## 
##     ## ##     ##    ##       ##    ##     ## ##   ### ##    ## 
########   #######     ##       ##     #######  ##    ##  ######  

*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/bow for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn{
	position: relative;
	border-style: none;
	box-sizing: border-box;
	display: inline-block;
	font-weight: bold;
	font-family: Arial;
	line-height: 1;
	outline: transparent;
	text-align: center;
	white-space: nowrap;
}
.btn:not(.btn--s) {
	min-width: 70px;
}
.btn:not(.btn--hassvg) {
	padding: 0 15px;
}
.btn,
.btn:hover, 
[class*="text--"] .btn,
[class*="text--"] .btn:hover{
	text-decoration: none;
}
.btn:not(.btn--disabled) {
	cursor: pointer;
	transition: all .15s ease-in-out;
}
.btn:not(.btn--outline.btn--white):not(.btn--disabled) {
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
}

/* ANIMATONS ******************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn:not(.btn--outline):hover,
a.block:hover .btn:not(.btn--outline) {
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.btn:active,
a.block:active .btn {
	transform: scale(.9);
}

.btn:not(.btn--outline)::after {
	background: linear-gradient(rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.05) 5px, transparent 15px);
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity .15s ease-in-out;
}

a.block:hover .btn:not(.btn--outline)::after,
.btn:hover::after {
	opacity: 1;
}

a.block:active .btn:not(.btn--outline)::after,
.btn:active::after {
	opacity: .25;
}

/* ELEMENT : LABEL ************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn__label{
	display: table;
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* ELEMENT : LABEL TEXT *******************************************************************************************************************
 ******************************************************************************************************************************************/

.btn__label__text{
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.btn__label__text::selection{
	background-color: transparent;
}
.btn__label__text::-moz-selection{
	background-color: transparent;
}
.btn__label__text::-webkit-selection{
	background-color: transparent;
}

/* ELEMENT : LABEL SVG ********************************************************************************************************************
 ******************************************************************************************************************************************/

.btn__label__svg{
	display: table-cell;
	height: 100%;
	padding-right: 5px;
	vertical-align: middle;
}

/* ELEMENT : LABEL IMG ********************************************************************************************************************
 ******************************************************************************************************************************************/
.btn__label__img{
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.btn.btn img.img--btn{
	margin-right: -24px;
	margin-top: -12px;
	top: 6px;
}

/* MODIFIER : IF A SVG IS SET *************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--hassvg{
	padding: 0 15px 0 7px;
}
.btn:not(.btn--s) .svg--btn{
	height: 24px;
	width: 24px;
}
.btn.btn--s .svg--btn{
	height: 18px;
	width: 18px;
}

/* MODIFIER : FORCE DIRECTION *************************************************************************************************************
 ******************************************************************************************************************************************/
 
.btn--ltr{
	direction: ltr;
}
.btn--rtl{
	direction: rtl;
}

/* SIZES **********************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn:not(.btn--s) {	
	border-radius: 20px;
	font-size: 14px;
	height: 40px;
}
.btn--s {
	border-radius: 15px;
	text-transform: uppercase;
	font-size: 12px;
	height: 30px;
}
.btn .svg{
	display: block;
	margin: 0 auto;
}
.btn:not(.btn--s) .svg{
	width: 24px;
	height: 24px;
}
.btn--s .svg{
	width: 16px;
	height: 16px;
}

/* ANIMATONS ******************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn:not(.btn--disabled):not(.btn--outline):hover,
a.block:hover .btn:not(.btn--disabled):not(.btn--outline){
	box-shadow: 0 6px 20px 0 rgba(0,0,0,0.3);
}
.btn:not(.btn--disabled):active,
a.block:active .btn:not(.btn--disabled){
	transform: scale(.9);
}
.btn:not(.btn--outline)::after{
	background: linear-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 100%);
	border-radius: 20px;
	bottom: 0;
	content: "";
	left:0;
	opacity: 0;
	position: absolute;
	right: 0;
	top:0;
	transition: opacity .15s ease-in-out;
	z-index: 1;
}
a.block:not(.btn--disabled):hover .btn:not(.btn--outline)::after,
.btn:not(.btn--disabled):hover::after{
	opacity: 1;
}
a.block:active .btn:not(.btn--disabled):not(.btn--outline)::after,
.btn:not(.btn--disabled):active::after{
	opacity: .25;
}

/* OUTLINE ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--outline.btn--outline{
	background: transparent;
	border-style: solid;
	border-width: 2px;
}
.btn--outline svg{
	fill: #3D251B;
}

/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
########  ########  #### ##     ##    ###    ########  ##    ## 
##     ## ##     ##  ##  ###   ###   ## ##   ##     ##  ##  ##  
##     ## ##     ##  ##  #### ####  ##   ##  ##     ##   ####   
########  ########   ##  ## ### ## ##     ## ########     ##    
##        ##   ##    ##  ##     ## ######### ##   ##      ##    
##        ##    ##   ##  ##     ## ##     ## ##    ##     ##    
##        ##     ## #### ##     ## ##     ## ##     ##    ##    
*******************************************************************************************************************************************
*******************************************************************************************************************************************/


.btn--primary.btn--primary.btn--primary:not(.btn--outline),
.btn--primary.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--primary.btn--outline:not(.btn--disabled){
	color: #fff;		
}
.btn--primary:not(.btn--outline),
.btn--primary.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--primary.btn--outline:not(.btn--disabled){
	background: #AD5B50;
}
.btn--primary.btn--outline{
	background: #fdfff0;
	border-color: #AD5B50;
	color: #3D251B;
}
.btn--primary:not(.btn--disabled):hover svg,
.btn--primary:not(.btn--outline) svg{
	fill: #fff;
}


/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
 ######  ########  ######   #######  ##    ## ########     ###    ########  ##    ## 
##    ## ##       ##    ## ##     ## ###   ## ##     ##   ## ##   ##     ##  ##  ##  
##       ##       ##       ##     ## ####  ## ##     ##  ##   ##  ##     ##   ####   
 ######  ######   ##       ##     ## ## ## ## ##     ## ##     ## ########     ##    
      ## ##       ##       ##     ## ##  #### ##     ## ######### ##   ##      ##    
##    ## ##       ##    ## ##     ## ##   ### ##     ## ##     ## ##    ##     ##    
 ######  ########  ######   #######  ##    ## ########  ##     ## ##     ##    ##    
*******************************************************************************************************************************************
*******************************************************************************************************************************************/


.btn--secondary.btn--secondary.btn--secondary:not(.btn--outline),
.btn--secondary.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--secondary.btn--outline:not(.btn--disabled){
	color: #fff;		
}
.btn--secondary:not(.btn--outline),
.btn--secondary.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--secondary.btn--outline:not(.btn--disabled){
	background: #37659A;
}
.btn--secondary.btn--outline{
	background: #fdfff0;
	border-color: #37659A;
	color: #3D251B;
}
.btn--secondary:not(.btn--disabled):hover svg,
.btn--secondary:not(.btn--outline) svg{
	fill: #fff;
}

/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
##      ## ##     ## #### ######## ######## 
##  ##  ## ##     ##  ##     ##    ##       
##  ##  ## ##     ##  ##     ##    ##       
##  ##  ## #########  ##     ##    ######   
##  ##  ## ##     ##  ##     ##    ##       
##  ##  ## ##     ##  ##     ##    ##       
 ###  ###  ##     ## ####    ##    ######## 
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--white.btn--white.btn--white.btn--white:not(.btn--outline),
.btn--white.btn--white.btn--white.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--white.btn--outline:not(.btn--disabled){
	color: #3D251B;		
}
.btn--white:not(.btn--outline),
.btn--white.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--white.btn--outline:not(.btn--disabled){
	background: #fff;
}
.btn--white.btn--white.btn--white.btn--outline:not(.btn--disabled){
	border-color: #fff;
	color: #fff;
}
.btn--white svg,
.btn--white.btn--outline:not(.btn--disabled):hover svg,
a.block:hover .btn--white.btn--outline:not(.btn--disabled) svg{
	fill: #3D251B;
}
.btn--white.btn--outline:not(.btn--disabled) svg{
	fill: #fff;
}


/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
#### ##     ## ########   #######  ########  ########    ###    ##    ## ######## 
 ##  ###   ### ##     ## ##     ## ##     ##    ##      ## ##   ###   ##    ##    
 ##  #### #### ##     ## ##     ## ##     ##    ##     ##   ##  ####  ##    ##    
 ##  ## ### ## ########  ##     ## ########     ##    ##     ## ## ## ##    ##    
 ##  ##     ## ##        ##     ## ##   ##      ##    ######### ##  ####    ##    
 ##  ##     ## ##        ##     ## ##    ##     ##    ##     ## ##   ###    ##    
#### ##     ## ##         #######  ##     ##    ##    ##     ## ##    ##    ##    
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--important.btn--important.btn--important,
.btn--important.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--important.btn--outline:not(.btn--disabled){
	color: #3D251B;		
}
.btn--important:not(.btn--outline),
.btn--important.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--important.btn--outline:not(.btn--disabled){
	background: #EEC213;
}
.btn--important.btn--outline{
	background: #fdfff0;
	border-color: #EEC213;
}
.btn--important.btn--s{
	font-size: 16px;
}

/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
##     ## #### ##    ##  #######  ########  
###   ###  ##  ###   ## ##     ## ##     ## 
#### ####  ##  ####  ## ##     ## ##     ## 
## ### ##  ##  ## ## ## ##     ## ########  
##     ##  ##  ##  #### ##     ## ##   ##   
##     ##  ##  ##   ### ##     ## ##    ##  
##     ## #### ##    ##  #######  ##     ## 
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--minor,
.btn--minor.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--important.btn--outline:not(.btn--disabled){
	color: #82685B;		
}
.btn--minor:not(.btn--outline),
.btn--minor.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--minor.btn--outline:not(.btn--disabled){
	background: #DCD4BC;
}
.btn--minor.btn--outline{
	background: #fdfff0;
	border-color: #DCD4BC;
	color: #82685B;
}


/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
########  ####  ######     ###    ########  ##       ######## ########  
##     ##  ##  ##    ##   ## ##   ##     ## ##       ##       ##     ## 
##     ##  ##  ##        ##   ##  ##     ## ##       ##       ##     ## 
##     ##  ##   ######  ##     ## ########  ##       ######   ##     ## 
##     ##  ##        ## ######### ##     ## ##       ##       ##     ## 
##     ##  ##  ##    ## ##     ## ##     ## ##       ##       ##     ## 
########  ####  ######  ##     ## ########  ######## ######## ########  
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--disabled.btn--disabled.btn--disabled,
.btn--s.btn--disabled.btn--disabled.btn--disabled,
.btn[disabled]{
	background: #fdfff0;
	color: #949494;
	opacity: 1! important; /* jquery mobile hack :/ */
}
.btn--disabled:not([data-tooltip]),
.btn[disabled]:not([data-tooltip]){
	pointer-events: none;
}
.btn[disabled],
.btn--disabled.btn--disabled.btn--disabled:not(.btn--outline){
	background: #d0d0d0;
}
.btn--disabled.btn--outline{
	border-color: #d0d0d0;
	color: #949494;
}
.btn--disabled img{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.btn[disabled],
.btn--disabled.btn--disabled.btn--disabled.btn--disabled svg{
	fill: #949494;
}
@media all and (-ms-high-contrast:none){ /* hack for IE10 & IE11 */
	.btn--disabled img{
		opacity: .5;
	}
}

/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
########   #######   ######  #### ######## #### ##     ## ######## 
##     ## ##     ## ##    ##  ##     ##     ##  ##     ## ##       
##     ## ##     ## ##        ##     ##     ##  ##     ## ##       
########  ##     ##  ######   ##     ##     ##  ##     ## ######   
##        ##     ##       ##  ##     ##     ##   ##   ##  ##       
##        ##     ## ##    ##  ##     ##     ##    ## ##   ##       
##         #######   ######  ####    ##    ####    ###    ######## 
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--success.btn--success.btn--success:not(.btn--outline),
.btn--success.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--success.btn--outline:not(.btn--disabled){
	color: #fff;		
}
.btn--success:not(.btn--outline),
.btn--success.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--success.btn--outline:not(.btn--disabled){
	background: #849644;
}
.btn--success.btn--outline{
	background: #fdfff0;
	border-color: #849644;
	color: #3D251B;
}
.btn--success:not(.btn--disabled):hover svg,
.btn--success:not(.btn--outline) svg{
	fill: #fff;
}

/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
##    ## ########  ######      ###    ######## #### ##     ## ######## 
###   ## ##       ##    ##    ## ##      ##     ##  ##     ## ##       
####  ## ##       ##         ##   ##     ##     ##  ##     ## ##       
## ## ## ######   ##   #### ##     ##    ##     ##  ##     ## ######   
##  #### ##       ##    ##  #########    ##     ##   ##   ##  ##       
##   ### ##       ##    ##  ##     ##    ##     ##    ## ##   ##       
##    ## ########  ######   ##     ##    ##    ####    ###    ######## 
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.btn--danger.btn--danger.btn--danger:not(.btn--outline),
.btn--danger.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--danger.btn--outline:not(.btn--disabled){
	color: #fff;		
}
.btn--danger:not(.btn--outline),
.btn--danger.btn--outline:not(.btn--disabled):hover,
a.block:hover .btn--danger.btn--outline:not(.btn--disabled){
	background: #C80000;
}
.btn--danger.btn--outline{
	background: #fdfff0;
	border-color: #C80000;
	color: #3D251B;
}
.btn--danger:not(.btn--disabled):hover svg,
.btn--danger:not(.btn--outline) svg{
	fill: #fff;
}