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

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

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

/** extra extra extra large ***************************************************************************************************************/
.pix--3xl,
.img--3xl{
	width: 382px;
	height: 382px;
}

/** extra extra large *********************************************************************************************************************/
.pix--2xl,
.img--2xl{
	width: 256px;
	height: 256px;
}

/** extra large **************************************************************************************************************************/
.pix--xl,
.img--xl{
	width: 192px;
	height: 192px;
}

/** large ********************************************************************************************************************************/
.pix--l,
.img--l{
	width: 128px;
	height: 128px;
}
/** medium *******************************************************************************************************************************/
.pix--m,
.img--m{
	width: 96px;
	height: 96px;
}
/** small ********************************************************************************************************************************/
.pix--s,
.img--s{
	width: 64px;
	height: 64px;
}
/** extra small **************************************************************************************************************************/
.pix--xs,
.img--xs{
	width: 48px;
	height: 48px;
}
/** extra extra small *********************************************************************************************************************/
.pix--2xs,
.img--2xs{
	width: 32px;
	height: 32px;
}
/** extra extra extra small ***************************************************************************************************************/
.pix--3xs,
.img--3xs{
	width: 24px;
	height: 24px;
}


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

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

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

/** LINK : PIX *********************************************************************************************************************
************************************************************************************************************************************/

a.pix::after,
a.pix .pix__bg{
	transition: all .25s ease-in-out;
}
a.pix:hover::after{
	box-shadow: 0 0 30px 0 rgba(0,0,0,.3);
}
a.pix:hover .pix__bg{
	-webkit-filter: drop-shadow( 0 0 15px rgba(0,0,0,.3) ); 
            filter: drop-shadow( 0 0 15px rgba(0,0,0,.3) );
}

/** BLOCK : PIX ********************************************************************************************************************
************************************************************************************************************************************/
a.pix,
span.pix{
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	line-height: 0;
	text-align: center;
	white-space: normal;
}

/** ELEMENT : IMG ******************************************************************************************************************
************************************************************************************************************************************/
.pix__content{
	position: relative;
	z-index: 1;
}

/** ELEMENT : BACKGROUND ***********************************************************************************************************
************************************************************************************************************************************/

.pix__bg{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/** ELEMENT : QUANTITY *************************************************************************************************************
************************************************************************************************************************************/

.pix__quantity{
	display: inline-block;
	position: relative;
	z-index: 1;
}
.pix__quantity__value{
	background: #FDFFF0;
	border-radius: 8px;
	border: 2px solid #F2EFCF;
	color: #3d251b;
	display: inline-block;
	font-weight: bold;
	white-space: nowrap;
}
.pix__quantity__value > img {
	width: 32px;
	height: 32px;
	margin: -6px -10px -6px 5px;
}

/** ELEMENT : BADGE ****************************************************************************************************************
************************************************************************************************************************************/

.pix__badge{
	background: #DCD4BC;
	color: #82685B;
	display: block;
	font-weight: bold;
	position: absolute;
	text-align: center;
	top: 0;
	white-space: nowrap;
	z-index: 1;
}

/** ELEMENT : STRUT ****************************************************************************************************************
************************************************************************************************************************************/

.pix__badge__strut{
	padding: 0 2px;
}

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

.pix__svg{
	display: block;
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 50%;
}
.pix__svg svg{
	display: block;
}

/** MODIFIER : MULTIPLIER **********************************************************************************************************
************************************************************************************************************************************/

.pix--multiplier .pix__badge{
	background: #EEC213;
	color: #3d251b;
}


/** MODIFIER : SIZES ***************************************************************************************************************
************************************************************************************************************************************/

.pix__content.svg{
	display: block;
}

/** extra large ********************************************************************************************************************/
.pix--xl .pix__quantity{
	bottom: 20px;
	left: 0;
	width: 128px;
}
.pix--xl .pix__quantity__value{
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	padding: 0 15px;
}
.pix--xl .pix__content:not(.svg){
	height: 128px;
	width: 128px;
	padding: 32px;
}
.pix--xl .pix__content.svg{
	height: 96px;
	width: 96px;
	padding: 48px;
}
.pix--xl .pix__badge{
	border-radius: 24px;
	font-size: 16px;
	height: 48px;
	line-height: 48px;
	min-width: 48px;
	right: 144px;
}
.pix--xl .pix__svg {
	height: 48px;
	width: 48px;
	padding: 12px;
	right: 0;
	top: 0;
}

/** large *************************************************************************************************************************/
.pix--l .pix__quantity{
	bottom: 12px;
	left: 0;
	width: 128px;
}
.pix--l .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--l .pix__content:not(.svg){
	height: 96px;
	width: 96px;
	padding: 16px;
}
.pix--l .pix__content.svg{
	height: 64px;
	width: 64px;
	padding: 32px;
}
.pix--l .pix__badge{
	border-radius: 16px;
	font-size: 13px;
	height: 32px;
	line-height: 32px;
	min-width: 32px;
	right: 96px;
}
.pix--l .pix__svg {
	height: 32px;
	width: 32px;
	padding: 7px;
	right: 0;
	top: 0;
}

/** medium *************************************************************************************************************************/
.pix--m .pix__quantity{
	bottom: 12px;
	left: 0;
	width: 96px;
}
.pix--m .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--m .pix__content:not(.svg){
	width: 64px;
	height: 64px;
	padding: 16px;
}
.pix--m .pix__content.svg{
	height: 48px;
	width: 48px;
	padding: 24px;
}
.pix--m .pix__badge{
	border-radius: 16px;
	font-size: 13px;
	height: 32px;
	line-height: 32px;
	min-width: 32px;
	right: 64px;
}
.pix--m .pix__svg {
	height: 24px;
	width: 24px;
	padding: 6px;
	right: 0;
	top: 0;
}

/** small *************************************************************************************************************************/
.pix--s .pix__quantity{
	bottom: 12px;
	left: -16px;
	width: 96px;
}
.body--rtl .pix--s .pix__quantity{
	right: -16px;
}
.pix--s .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--s .pix__content:not(.svg){
	width: 48px;
	height: 48px;
	padding: 8px;
}
.pix--s .pix__content.svg{
	height: 32px;
	width: 32px;
	padding: 16px;
}
.pix--s .pix__badge{
	border-radius: 12px;
	font-size: 10px;
	height: 24px;
	line-height: 24px;
	min-width: 24px;
	right: 46px;
	top: -6px;
}
.pix--s .pix__svg {
	height: 24px;
	width: 24px;
	padding: 6px;
	right: -6px;
	top: -6px;
}

/** extra small ********************************************************************************************************************/
.pix--xs .pix__quantity{
	bottom: 12px;
	left: -24px;
	width: 96px;
}
.body--rtl .pix--xs .pix__quantity{
	right: -24px;
}
.pix--xs .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--xs .pix__content:not(.svg){
	width: 32px;
	height: 32px;
	padding: 8px;
}
.pix--xs .pix__content.svg{
	height: 24px;
	width: 24px;
	padding: 12px;
}
.pix--xs .pix__badge{
	border-radius: 12px;
	font-size: 10px;
	height: 24px;
	line-height: 24px;
	min-width: 24px;
	right: 30px;
	top: -6px;
}
.pix--xs .pix__svg {
	height: 24px;
	width: 24px;
	padding: 6px;
	right: -6px;
	bottom: -6px;
	top: -6px;
}

/** extra extra small ***************************************************************************************************************/
.pix--2xs .pix__quantity{
	bottom: 6px;
	left: -32px;
	width: 96px;
}
.body--rtl .pix--2xs .pix__quantity{
	right: -24px;
}
.pix--2xs .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--2xs .pix__content:not(.svg){
	width: 24px;
	height: 24px;
	padding: 4px;
}
.pix--2xs .pix__content.svg{
	height: 18px;
	width: 18px;
	padding: 7px;
}
.pix--2xs .pix__badge{
	border-radius: 12px;
	font-size: 10px;
	height: 24px;
	line-height: 24px;
	min-width: 24px;
	right: 18px;
}
.pix--2xs .pix__svg {
	height: 18px;
	width: 18px;
	padding: 6px;
	right: -6px;
	bottom: -6px;
	top: -6px;
}

/** extra extra extra small ***************************************************************************************************************/
.pix--3xs .pix__quantity{
	bottom: 6px;
	left: -36px;
	width: 96px;
}
.body--rtl .pix--3xs .pix__quantity{
	right: -24px;
}
.pix--3xs .pix__quantity__value{
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
}
.pix--3xs .pix__content:not(.svg){
	width: 18px;
	height: 18px;
	padding: 3px;
}
.pix--3xs .pix__content.svg{
	height: 12px;
	width: 12px;
	padding: 6px;
}
.pix--3xs .pix__badge{
	border-radius: 12px;
	font-size: 10px;
	height: 24px;
	line-height: 24px;
	min-width: 24px;
	right: 10px;
}
.pix--3xs .pix__svg {
	height: 18px;
	width: 18px;
	padding: 6px;
	right: -6px;
	bottom: -6px;
	top: -6px;
}

/** MODIFIER : ROUNDED *************************************************************************************************************
************************************************************************************************************************************/

.pix--rounded::after{
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	top: 0;
	left: 0;
}

/** MODIFIER : DISABLED ************************************************************************************************************
************************************************************************************************************************************/

.pix--disabled .pix__content:not(.svg){
	filter : grayscale(1);
	opacity: .5;
}

/** MODIFIER : SVG ******************************************************************************************************************
************************************************************************************************************************************/

.pix__svg--checked{
	background: #849644;
	fill: #fff;
}
.pix__svg--locked{
	background: #d0d0d0;
	fill: #949494;
}

/** MODIFIER : NOTIFICATION ********************************************************************************************************
************************************************************************************************************************************/

.pix--notification .pix__badge.pix__badge{
	background: #C93A3A;
	border: 2px solid #fdfff0;
	font-size: 0;
	height: 10px;
	min-width: inherit;
	top: -2px;
	width: 10px;
}
.ui-mobile-viewport .pix--notification .pix__badge,
.body--ltr .pix--notification .pix__badge{
    right: 24px;
}
.body--rtl .pix--notification .pix__badge{
    left: 24px;
}


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

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

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

.pixradio{
	display: inline-block;
}

/** ELEMENT : INPUT ****************************************************************************************************************
************************************************************************************************************************************/

.pixradio__input{
	position: absolute;
	transform: scale(0);
}

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

.pixradio__label{
	cursor: pointer;
}
.pixradio__label:hover .pixradio__label__pix::after{
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 4px rgba(0,0,0,0.10);
}

/** ELEMENT : PIX ******************************************************************************************************************
************************************************************************************************************************************/

.pixradio__label__pix::after{
	border: 1px solid #AF9C8C;
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
	box-sizing: border-box;
	transition: box-shadow .15s;
}

/** MODIFIER : CHECKED *************************************************************************************************************
************************************************************************************************************************************/

.pixradio__input:checked + .pixradio__label{
	cursor: default;
}
.pixradio__input:checked + .pixradio__label .pix__quantity__value,
.pixradio__input:checked + .pixradio__label .pixradio__label__pix::after{
	border: 2px solid #37659A;
}
.pixradio__input:checked + .pixradio__label .pixradio__label__pix::after{
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
}
.pixradio__input:checked  + .pixradio__label .pix__quantity__value{
	background: #37659A;
	color: #fff;
}

/** MODIFIER : DISABLED ************************************************************************************************************
************************************************************************************************************************************/

.pixradio__input[disabled] + .pixradio__label{
	cursor: default;
}
.pixradio__input[disabled] + .pixradio__label .pix__content{
	opacity: .5;
}
.pixradio__input[disabled] + .pixradio__label .pix__quantity__value{
	color: rgba(0,0,0,.30);
}
.pixradio__input[disabled] + .pixradio__label .pixradio__label__pix::after{
	border: none;
	box-shadow: none;
}