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

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

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

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

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

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

/** large ********************************************************************************************************************************/
.pix--l,
.img--l{
	width: 128px;
	max-height: 128px;
}
/** medium *******************************************************************************************************************************/
.pix--m,
.img--m{
	width: 96px;
	max-height: 96px;
}
/** small ********************************************************************************************************************************/
.pix--s,
.img--s{
	width: 64px;
	max-height: 64px;
}
/** extra small **************************************************************************************************************************/
.pix--xs,
.img--xs{
	width: 48px;
	max-height: 48px;
}
/** extra extra small *********************************************************************************************************************/
.pix--2xs,
.img--2xs{
	width: 32px;
	max-height: 32px;
}
/** extra extra extra small ***************************************************************************************************************/
.pix--3xs,
.img--3xs{
	width: 24px;
	max-height: 24px;
}
/** for anchor (aide/manuel) only  ********************************************************************************************************/
.pix--4xs,
.img--4xs{
	width: 16px;
	max-height: 16px;
}

/** mirror class *******************************************************************************************************************/
.pix--mirror,
.img--mirror{
	transform: scaleX(-1);
}

/** card (collections, rowgue) *******************************************************************************************************/
.card--170{
	width: 170px;
	border-radius: 4px;
}

/** INSIDE PIX ********************************************************************************************************************
***********************************************************************************************************************************/

.pix--xs .pix__content.horsesprite{
	background-size: 32px;
	background-position: 8px 8px;
}
.pix--s .pix__content.horsesprite{
	background-size: 48px;
	background-position: 8px 8px;
}
.pix--m .pix__content.horsesprite{
	background-size: 64px;
	background-position: 16px 16px;
}
.pix--l .pix__content.horsesprite{
	background-size: 96px;
	background-position: 16px 16px;
}
.pix--xl .pix__content.horsesprite{
	background-size: 192px;
	background-position: 32px 32px;
}
.pix--2xl .pix__content.horsesprite{
	background-size: 384px;
	background-position: 64px 64px;
}
.pix--3xl .pix__content.horsesprite{
	background-size: 256px;
	background-position: 64px 64px;
}

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

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

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

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

a.pix::after,
a.pix .pix__bg,
button.pix::after,
button.pix .pix__bg{
	transition: all .25s ease-in-out;
}
a.pix:hover::after,
button.pix:hover::after{
	box-shadow: 0 0 30px 0 rgba(0,0,0,.3);
}
a.pix:hover .pix__bg,
button.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,
button.pix{
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	line-height: 0;
	text-align: center;
	white-space: normal;
}
button.pix{
	cursor: pointer;
	background: none;
	border-color: transparent;
}

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

/** ELEMENT : FIGURE TAG ***********************************************************************************************************
************************************************************************************************************************************/

.pix > .horsesprite {
	background-size: cover;
}
.pix > .horsesprite,
.pix > .cheval-icone {
	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,
.pix__svg--badge{
	display: block;
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 50%;
}
.pix__svg svg,
.pix__svg--badge svg{
	display: block;
}

/** ELEMENT : IFRAME (horse animation) *********************************************************************************************
************************************************************************************************************************************/

.pix iframe{
	position: relative;
	pointer-events: none;
	z-index: 1;
}
.pix__iframe{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/* MODIFIER : PIX--SELECTABLE **********************************************************************************************************/
/***************************************************************************************************************************************/

.pix.js-pix--selectable::after{
    border: 1px solid #AF9C8C;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: none;
}
.pix.js-pix--selectable:hover::after{
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 4px rgba(0,0,0,0.1);
}

/* MODIFIER : PIX--SELECTED ************************************************************************************************************/
/***************************************************************************************************************************************/

.pix.js-pix--selected{
    cursor: default;
}
.pix.js-pix--selected::after{
    border-width: 2px;
    border-style: solid;
    border-color: #37659A;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: none;
}
.pix.js-pix--selected:hover::after{
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
}

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

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


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

.pix__content.svg{
	display: block;
}
/** extra large 2xl ********************************************************************************************************************/
.pix--3xl .pix__quantity{
	bottom: 20px;
	left: 0;
	width: 128px;
}
.pix--3xl .pix__quantity__value{
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	padding: 0 15px;
}
.pix--3xl > .horsesprite,
.pix--3xl > .cheval-icone,
.pix--3xl .pix__content:not(.svg){
	height: 256px;
	width: 256px;
}
.pix--3xl .pix__content:not(.svg){
	padding: 64px;
}
.pix--3xl > .horsesprite,
.pix--3xl > .cheval-icone{
	margin: 32px;
}
.pix--3xl .pix__content.svg{
	height: 96px;
	width: 96px;
	padding: 48px;
}
.pix--3xl .pix__badge{
	border-radius: 24px;
	font-size: 16px;
	height: 48px;
	line-height: 48px;
	min-width: 48px;
	right: 144px;
}
.pix--3xl .pix__svg{
	right: 0;
}
.pix--3xl .pix__svg--badge{
	left: 0;
}
.pix--3xl .pix__svg,
.pix--3xl .pix__svg--badge{
	height: 48px;
	width: 48px;
	padding: 12px;
	top: 0;
}
/** extra large 2xl ********************************************************************************************************************/
.pix--2xl .pix__quantity{
	bottom: 20px;
	left: 0;
	width: 128px;
}
.pix--2xl .pix__quantity__value{
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	padding: 0 15px;
}
.pix--2xl > .horsesprite,
.pix--2xl > .cheval-icone,
.pix--2xl .pix__content:not(.svg){
	height: 192px;
	width: 192px;
}
.pix--2xl .pix__content:not(.svg){
	padding: 32px;
}
.pix--2xl > .horsesprite,
.pix--2xl > .cheval-icone{
	margin: 32px;
}
.pix--2xl .pix__content.svg{
	height: 96px;
	width: 96px;
	padding: 48px;
}
.pix--2xl .pix__badge{
	border-radius: 24px;
	font-size: 16px;
	height: 48px;
	line-height: 48px;
	min-width: 48px;
	right: 144px;
}
.pix--2xl .pix__svg{
	right: 20px;
}
.pix--2xl .pix__svg--badge{
	left: 0;
}
.pix--2xl .pix__svg,
.pix--2xl .pix__svg--badge{
	height: 48px;
	width: 48px;
	padding: 12px;
	top: 0;
}

/** 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 > .horsesprite,
.pix--xl > .cheval-icone,
.pix--xl .pix__content:not(.svg){
	height: 128px;
	width: 128px;
}
.pix--xl .pix__content:not(.svg){
	padding: 32px;
}
.pix--xl > .horsesprite,
.pix--xl > .cheval-icone{
	margin: 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{
	right: 0;
}
.pix--xl .pix__svg--badge{
	left: 0;
}
.pix--xl .pix__svg,
.pix--xl .pix__svg--badge{
	height: 48px;
	width: 48px;
	padding: 12px;
	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 > .horsesprite,
.pix--l > .cheval-icone,
.pix--l .pix__content:not(.svg){
	height: 96px;
	width: 96px;
}
.pix--l .pix__content:not(.svg){
	padding: 16px;
}
.pix--l > .horsesprite,
.pix--l > .cheval-icone{
	margin: 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{
	right: 0;
}
.pix--l .pix__svg--badge{
	left: 0;
}
.pix--l .pix__svg,
.pix--l .pix__svg--badge{
	height: 32px;
	width: 32px;
	padding: 7px;
	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 > .horsesprite,
.pix--m > .cheval-icone,
.pix--m .pix__content:not(.svg){
	width: 64px;
	height: 64px;
}
.pix--m .pix__content:not(.svg){
	padding: 16px;
}
.pix--m > .horsesprite,
.pix--m > .cheval-icone{
	margin: 16px;
}
.pix--m .pix__content.svg{
	height: 48px;
	width: 48px;
	padding: 24px;
}
.pix--m .pix__badge{
	border-radius: 12px;
    font-size: 10px;
    height: 24px;
    line-height: 24px;
    min-width: 24px;
	left: 0;
}
.pix--m .pix__svg{
	right: 0;
}
.pix--m .pix__svg--badge{
	left: 0;
}
.pix--m .pix__svg,
.pix--m .pix__svg--badge{
	height: 24px;
	width: 24px;
	padding: 6px;
	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 > .horsesprite,
.pix--s > .cheval-icone,
.pix--s .pix__content:not(.svg){
	width: 48px;
	height: 48px;
}
.pix--s .pix__content:not(.svg){
	padding: 8px;
}
.pix--s > .horsesprite,
.pix--s > .cheval-icone{
	margin: 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{
	right: -6px;
}
.pix--s .pix__svg--badge{
	left: -6px;
}
.pix--s .pix__svg,
.pix--s .pix__svg--badge{
	height: 24px;
	width: 24px;
	padding: 6px;
	top: -6px;
}

/** extra small ********************************************************************************************************************/
.pix--xs .pix__quantity{
	left: -24px;
	margin-top: -12px;
	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 > .horsesprite,
.pix--xs > .cheval-icone,
.pix--xs .pix__content:not(.svg){
	width: 32px;
	height: 32px;
}
.pix--xs .pix__content:not(.svg){
	padding: 8px;
}
.pix--xs > .horsesprite,
.pix--xs > .cheval-icone{
	margin: 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{
	right: -6px;
}
.pix--xs .pix__svg--badge{
	left: -6px;
}
.pix--xs .pix__svg,
.pix--xs .pix__svg--badge{
	height: 24px;
	width: 24px;
	padding: 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: 10px;
	height: 16px;
	line-height: 16px;
	padding: 0 10px;
}
.pix--2xs > .horsesprite,
.pix--2xs > .cheval-icone,
.pix--2xs .pix__content:not(.svg){
	width: 24px;
	height: 24px;
}
.pix--2xs .pix__content:not(.svg){
	padding: 4px;
}
.pix--2xs > .horsesprite,
.pix--2xs > .cheval-icone{
	margin: 4px;
}
.pix--2xs .pix__content.svg{
	height: 18px;
	width: 18px;
	padding: 7px;
}
.pix--2xs .pix__badge{
	border-radius: 9px;
	font-size: 10px;
	height: 18px;
	line-height: 18px;
	min-width: 18px;
	right: 20px;
	top: -6px;
}
.pix--2xs .pix__svg{
	right: -6px;
}
.pix--2xs .pix__svg--badge{
	left: -6px;
	top: -6px;
}
.pix--2xs .pix__svg,
.pix--2xs .pix__svg--badge{
	height: 18px;
	width: 18px;
	padding: 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 > .horsesprite,
.pix--3xs > .cheval-icone,
.pix--3xs .pix__content:not(.svg){
	width: 18px;
	height: 18px;
}
.pix--3xs .pix__content:not(.svg){
	padding: 3px;
}
.pix--3xs > .horsesprite,
.pix--3xs > .cheval-icone{
	margin: 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{
	right: -6px;
}
.pix--3xs .pix__svg--badge{
	left: -6px;
}
.pix--3xs .pix__svg,
.pix--3xs .pix__svg--badge{
	height: 18px;
	width: 18px;
	padding: 6px;
	top: -6px;
}

/** 4xs small ***************************************************************************************************************/
.pix--4xs .pix__badge,
.pix--4xs > .horsesprite,
.pix--4xs .pix__quantity{
	display: none;
}
.pix--4xs .pix__content:not(.svg){
	padding: 3px;
}
.pix--4xs .pix__content.svg{
	height: 12px;
	width: 12px;
	padding: 2px;
}
.pix--4xs .pix__svg{
	right: -6px;
}
.pix--4xs .pix__svg{
	height: 18px;
	width: 18px;
	padding: 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 > .horsesprite,
.pix--disabled .pix__content:not(.svg){
	filter : grayscale(1);
	opacity: .5;
}
.pix--disabled .pix__quantity__value{
	color: #949494;
}

/** 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;
}

/** MODIFIER : PRIMARY ********************************************************************************************************
************************************************************************************************************************************/

.pix--primary::after{
	background: #AD5B50;
}
.pix--primary.pix--outline::after{
	background: #fff;
	border: 2px solid #AD5B50;
	height: calc(100% - 4px);
	width: calc(100% - 4px);
}
.pix--primary svg{
	fill: #fff;
}
.pix--primary.pix--outline svg{
	fill: #AD5B50;
}
/** MODIFIER : SECONDARY ********************************************************************************************************
************************************************************************************************************************************/

.pix--secondary::after{
	background: #37659A;
}
.pix--secondary.pix--outline::after{
	background: #fff;
	border: 2px solid #37659A;
	height: calc(100% - 4px);
	width: calc(100% - 4px);
}
.pix--secondary svg{
	fill: #fff;
}
/** MODIFIER : IMPORTANT ********************************************************************************************************
************************************************************************************************************************************/

.pix--important::after{
	background: #EEC213;
}
.pix--important.pix--outline::after{
	background: #fdfff0;
	border: 2px solid #EEC213;
	height: calc(100% - 4px);
	width: calc(100% - 4px);
}
.pix--important svg{
	fill: #3D251B;
}

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

.pix--disabled::after{
	background: #d0d0d0;
}
.pix--disabled svg{
	fill: #949494;
}

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

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

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

/** extra extra large *********************************************************************************************************************/
.pix--3xl.pix--animated{
	height: 320px;
}
.pix--3xl iframe {
	transform: scale3d(.64, .64, .64);
	transform-origin: 86px 86px;
}
/** extra extra large *********************************************************************************************************************/
.pix--2xl.pix--animated{
	height: 256px;
}
.pix--2xl iframe {
	transform: scale3d(.64, .64, .64);
	transform-origin: 86px 86px;
}
/** extra large **************************************************************************************************************************/
.pix--xl.pix--animated{
	height: 192px;
}
.pix--xl iframe {
	transform: scale3d(.427, .427, .427);
	transform-origin: 48px 48px;
}
/** large ********************************************************************************************************************************/
.pix--l.pix--animated{
	height: 128px;
}
.pix--l iframe {
	transform: scale3d(.32, .32, .32);
	transform-origin: 24px 24px;
}
/** medium *******************************************************************************************************************************/
.pix--m.pix--animated{
	height: 96px;
}
.pix--m iframe {
	transform: scale3d(.24, .24, .24);
	transform-origin: 16px 16px;
}
/** small ********************************************************************************************************************************/
.pix--s.pix--animated{
	height: 64px;
}
.pix--s iframe {
	transform: scale3d(.16, .16, .16);
	transform-origin: 12px 12px;
}


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

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

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

.pixradio{
	display: inline-block;
	position: relative;
}

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

.pixradio__input{
	cursor: pointer;
	height: 64px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 64px;
	z-index: 2;
}
.pixradio__input:checked{
	cursor: default;
}

/** 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;
}

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

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

************************************************************************************************************************************
** FOR ANIMATED HTML5 COMPAGNON ****************************************************************************************************
************************************************************************************************************************************
************************************************************************************************************************************/

.animatedcompanion {
	box-sizing: border-box;
	transform-origin: 0 0;
}
.animatedcompanion--3xl {
	height: 512px;
	transform: scale3d(1, 1, 1); /*512x512*/
	width: 512px;
}
.animatedcompanion--2xl {
	height: 256px;
	transform: scale3d(0.5, 0.5, 1); /*256x256*/
	width: 256px;
}
.animatedcompanion--xl{
	height: 192px;
	transform: scale3d(0.375,0.375,1); /*192x192*/
	width: 192px;
}
.animatedcompanion--l {
	height: 128x;
	transform: scale3d(0.25, 0.25, 1); /*128x128*/
	width: 128px;
}
.animatedcompanion--m {
	height: 96px;
	transform: scale3d(0.1875, 0.1875, 1); /*96x96*/
	width: 96px;
}
.animatedcompanion--s {
	height: 64px;
	transform: scale3d(0.125, 0.125, 1); /*64*/
	width: 64px;
}