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

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

*******************************************************************************************************************************************
**************************** 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;
	outline: transparent;
	padding: 0 15px;
	text-align: center;
	white-space: nowrap;
	min-width: 70px;
}
.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__label{
	display: table;
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 2;
}
.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;
}

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

/* IMAGE INSIDE BTN ***********************************************************************************************************************
 ******************************************************************************************************************************************/

.btn img{
	position: relative;
	z-index: 1;
}
.btn:not(.btn--s) img{
	width: 48px;
	height: 48px;
	margin-top: -6px;
	margin-bottom: -6px;
}
.body--ltr .btn:not(.btn--s) img{
	margin-left: 5px;
	margin-right: -20px;
}
.body--rtl .btn:not(.btn--s) img{
	margin-left: -20px;
	margin-right: 5px;
}
.btn--s img{
	width: 32px;
	height: 32px;
	margin-top: -2px;
	margin-bottom: -2px;
}
.body--ltr .btn--s img{
	margin-left: 5px;
	margin-right: -20px;
}
.body--rtl .btn--s img{
	margin-left: -20px;
	margin-right: 5px;
}

/* 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:not(.btn--outline):not(.btn--disabled){
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
}
.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;
}

/* PRIMARY ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--primary,
.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;
}

/* SECONDARY ******************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--secondary,
.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;
}

/* WHITE **********************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--white:not(.btn--outline),
.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--outline{
	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;
}


/* 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;
	color: #3D251B;
}

/* DISABLED *******************************************************************************************************************************
 ******************************************************************************************************************************************/

.btn--disabled,
.btn[disabled]{
	background: #fdfff0;
	color: #949494;
}
.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 svg{
	fill: #949494;
}
@media all and (-ms-high-contrast:none){ /* hack for IE10 & IE11 */
	.btn--disabled img{
		opacity: .5;
	}
}