/***********************************************************************************************************************************/
/************************ 							/!\	AVANT D'EDITER /!\									************************/
/************************ 									VOIR					   						************************/
/************************ 							www.dev.equideow.com/doc								************************/
/************************ 						        	  ET											************************/
/************************ 			dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow			************************/
/***********************************************************************************************************************************/

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

#header {
	position:relative;
	z-index: 2; /* tout le #header est à 110 car blocs du dessous (du menu) entre 0 et 103 */
	margin-bottom:7px;
}
#header::after{
	content: '';
	display:block;
	clear: both;
}
body.nopub:not(.disconnected) #header {
	min-height: 125px; /* hauteur minimale lorsque la pub n'est pas présente */
}
body:not(.nopub):not(.disconnected) #header {
	min-height: 231px; /* hauteur minimale lorsque la pub n'est pas présente */
}

/** header-hud *********************************************************************************************************************/
#header-hud{
	position: relative;
	margin-bottom:10px;
	z-index: 1;
}
body:not(.nopub):not(.disconnected) #header-hud{
	margin-bottom: 118px;
}

/** anchor *************************************************************************************************************************/
[name="header-anchor"]{
    position: absolute;
    top: 70px;
}


/***********************************************************************************************************************************/
/* HEADER - DISCONNECTED ***********************************************************************************************************/
/***********************************************************************************************************************************/

#header.header--disconnected{
	padding: 20px 0 0;
	height: 70px;	
	box-sizing: border-box;
}
body:not(.log-in):not(.landing):not(.inscription):not(.debut):not(.body--maintenance) #header.header--disconnected{
	margin: 0 0 163px; /* horse alignment */
}
body.body--maintenance #header{
	margin: 0 0 20px;
	padding: 30px 0 0;
}

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


body.disconnected #logo-en,
body.disconnected #logo-caballow,
body.disconnected #logo-lowadi,
body.disconnected #logo-howrse,
body.disconnected #logo-equideow{
	bottom:inherit;
	margin:5px 0 0;
}
body:not(.disconnected) .header-logo{ /* fix for alt text image */
	height: 75px;
	overflow: hidden;
}
.header-logo{
	position:relative;
	margin:inherit;
}
.header-logo [class^="header-account-flag"]{
	position: absolute;
	display: block;
	top:28px;
	right: 45px;
	width: 24px;
    height: 24px;
}

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

#nav{
	position:relative;
	font-size:13px;
	font-weight:bold;
}

.hud-marketing,
.header-carousel{
	width: 295px;
}
.hud-marketing,
.hud-marketing,
.hud-equus,
.hud-pass,
.hud-clock,
.hud-message,
.hud-profile,
.hud-notification{
	margin-top: 15px;
}

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


/** header-carousel-button *********************************************************************************************************/
.header-carousel-button{
	position:absolute;
	top:0;
}
.header-carousel-button.previous{
	left:0;
}
.header-carousel-button.next{
	right:0;
}
.header-carousel-button.disabled{
	background:rgba(55,101,154,.7);
	border-radius: 0 22px 22px 0;
}
.header-carousel-button.next.disabled{
	width: 25px;
	right:20px;
}

/** header-carousel-container ******************************************************************************************************/
.header-carousel-container {
	background:rgba(55, 101, 154, 0.7);
	width: 250px;
	height:45px;
	float: left;
	border-radius: 22px 0 0 22px;
}

/** header-carousel-content ********************************************************************************************************/
#marketing-button-top{
	transition: all .15s ease-in-out;
	background-size:cover;
	bottom:-6px;
	left:10px;
	display:block;
	width:60px;
	height:60px;
}
.header-marketing:hover #marketing-button-top{
	-webkit-filter: drop-shadow(0 0 5px rgba(255,255,255,.7));
	filter: drop-shadow(0 0 5px rgba(255,255,255,.7));
}
.header-marketing {
	position:relative;
	display:block;
	height:45px;
	left:-5px;
	color:#fff;
}
.header-marketing,
.header-marketing:hover{
	text-decoration:none;
}
.header-marketing-title{
	font-size:16px;
	line-height:30px;
}
.header-marketing-title,
.header-marketing-endtime{
	display:block;
	height: calc(45px / 2);
	margin-left:80px;
	white-space:nowrap;
	text-overflow: ellipsis;
	width: 180px;
	overflow:hidden;
}
.header-marketing-endtime{
	font-size:11px;
	line-height:19px;
}

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

.header-currency .grid-cell{
	position: relative;
	height:45px;
}
.header-currency .grid-cell:first-child{
	width: 33px;
	border-radius: 22px 0 0 22px;
}
.header-currency .grid-cell:last-child{
	width: 22px;
	border-radius: 0 22px 22px 0;
}
.header-currency .grid-cell:nth-child(2){
	padding-left:5px;
}
.header-currency .grid-cell:first-child,
.header-currency .grid-cell:nth-child(2),
.header-currency .grid-cell:last-child{
	background:rgba(55, 101, 154, 0.5);
}
.header-currency,
.header-currency:hover,
.header-currency-value,
.header-currency-label{
	color:#fff;
    text-decoration:none;
}

/* header-currency-value **********************************************************************************************************/

.header-currency-value{
    display: block;
    min-width: 36px;
    margin: 8px 0 3px;
    font-size: 15px;
    white-space: nowrap;
    line-height:16px;
}

/* header-currency-label **********************************************************************************************************/

.header-currency-label{
	display:block;
	margin-bottom:3px;
	font-size:11px;
}

/* header-currency-pass **********************************************************************************************************/

.header-sprite-pass{
	margin-left:-10px;
}

/* header-currency-equus *********************************************************************************************************/

.header-sprite-equus{
	margin-left:-14px;
}

/* header-currency (hover) ********************************************************************************************************/
.header-currency:hover .grid-cell:first-child,
.header-currency:hover .grid-cell:nth-child(2),
.header-currency:hover .grid-cell:last-child{
	background:#7dd2fe;
}

/* header-currency (disabled) *****************************************************************************************************/
.header-currency.disabled .header__button__disabled{
	top: 12px;
	right: 3px;
}

/* header-currency-equus **********************************************************************************************************/
.header-currency-equus{
	width:130px;
}

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

.header-clock{
	display:block;
	width:45px;
	height:45px;
	font-size:15px;
	text-align:center;
	color:#fff;
}
.header-clock p{
	cursor:default;
	margin:6px 0 0;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
}

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

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

************************************************************************************************************************************/
/** for message and account) *******************************************************************************************************/
/***********************************************************************************************************************************/

.header-button{
	padding: 8.5px; /* for android 4 */
	padding: calc(17px / 2);
}
.header-button,
.header__button,
.js-header__button{
	background:rgba(55, 101, 154, 0.5);
	position:relative;
	border-width:2px;
	border-style:solid;
	border-color:transparent;
	width:45px;
	height:45px;
	border-radius:4px;	
	box-sizing:border-box;
	cursor: pointer;
	display: block;
}
.header__button,
.js-header__button{
	padding: calc(34px / 4);
}

/** header__button : hover state ***************************************************************************************************/

.header-button:hover,
.header__button:hover,
.js-header__button:hover,
.js-header__button--active{
	background:#79d1ff;
	border-color:#79d1ff;
}

/** header__button : hover svg *****************************************************************************************************/

.header__button:hover .svg,
.js-header__button:hover .svg,
.js-header__button--active .svg{
	transform: scale3d(0.95,0.95,0.95);
	transition: transform 0.25s ease;
}

/** header__button : active ********************************************************************************************************/

.js-header__button--active::after{
	background: #fff;
	bottom: -1px;
	content: '';
	display: block;
	height: 10px;
	left: 15px;
	position: absolute;
	transform: rotate(45deg);
	width: 10px;
	z-index: 1;
}

/** header__button : disabled ******************************************************************************************************/

.header__button__disabled{
	fill: rgba(255,255,255,.5);
	position: absolute;
}
.header__button .header__button__disabled,
.js-header__button .header__button__disabled{
	top: -4px;
}
.body--ltr .header__button .header__button__disabled,
.body--ltr .js-header__button .header__button__disabled{
	left: -2px;
}
.body--rtl .header__button .header__button__disabled,
.body--rtl .js-header__button .header__button__disabled{
	right: -2px;
}
.header__button .header__button__disabled::after,
.js-header__button .header__button__disabled::after{
	background-image: url(/media/equideo/image/interface/header/sprite-header.png);
	background-position: -100px -55px;
	background-repeat: no-repeat;
	content: "";
	display: block;
	height: 25px;
	position: absolute;
	top: -7px;
	width: 25px;
}
.body--ltr .header__button .header__button__disabled::after,
.body--ltr .js-header__button .header__button__disabled::after{
	left: -6px;
}
.body--rtl .header__button .header__button__disabled::after,
.body--rtl .js-header__button .header__button__disabled::after{
	transform: scaleX(-1);
	right: -6px;
}

/***********************************************************************************************************************************/
/* HEADER-MESSAGE ******************************************************************************************************************/
/***********************************************************************************************************************************/

.header-message-count{
	top:-11px;
	left:-11px;
}

/* disabled **********************************************************************************************************************/
.header-message.disabled{
	border-radius:0 4px 4px;
	pointer-events:none;
}
.header-message.disabled .header-message-count{
	background-color:transparent;
	left:-8px;
	border-radius:0;
	min-width:24px;
}
.header-message.disabled .header-sprite-message{
	opacity:.5;
}

/***********************************************************************************************************************************/
/* js-header__button--account ******************************************************************************************************/
/***********************************************************************************************************************************/

.header-account-site{
	/*background:rgba(55, 101, 154, 0.4);*//*pour MET */
	position:absolute;
    top:-11px;
    left:-11px;    
    display:block;
    width:24px;
    height:24px;
    border-radius:50%;
}

/** flags *************************************************************************************************************************/
.js-header__button--account .flag-item{
	display:inline-block;
	margin:2px 6px;
	padding:5px 9px;
	border-radius:3px;
}
.js-header__button--account .flag-item:hover{
	background:#79d1ff;
}
.js-header__button--account a.level-2 .grid-cell:last-child{
	padding:inherit;
}

/** animation *********************************************************************************************************************/
.header-account:hover .submenu-style-1{
	display: block;
}
.header-account:hover li.level-2{
   visibility:visible;
}

/** submenu ************************************************************************************************************************/
.js-header__button--account .submenu-style-1{
	width:180px;
	left:calc(-165px / 2); /* 165px = largeur du sous-menu (210px + 20px de marge), retranché à 45px de largeur d'icone mon compte */
	left:-82.5px; /* for android 4 */
}

/** submenu :avatar ***************************************************************************************************************/
.header-account-avatar{
	background:#fff;
	display:block;
	width:60px;
	height:60px;
	margin:0 auto 5px;
	border-radius:50%;
	border:1px solid #D0D0D0;
	overflow:hidden;
}
.header-account-avatar img{
	position:relative;
	bottom:0;
	max-width:62px;
	max-height:62px;
}

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

[class^="flag-list"]{
	margin:0 2px;
}
li.header-flags{
	position:relative;
	height:0;
	overflow:hidden;	
	transition:all 0.5s;
}
li.header-flags.active{
	height:210px;
}
li.header-flags.active + li.level-2 a.level-2{
	border-color:transparent;
}
li.header-flags.active + li.level-2::before{
	content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #D0D0D0;
    top: -1px;
    height: 1px;
}
.header-icon{
	transition:transform 0.25s ease;
	transform:rotate(0);
	-webkit-transform:rotate(0);
	-moz-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
}
a.header-flags .header-icon{
	width: 20px;
	height: 18px;
}
a.header-flags.active .header-icon,
li.level-2:hover a.header-flags.active .header-icon{
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
}

/** submenu : specifique aux versions anglophones *********************************************************************************/
.flag-list-en{
	position:relative;
	padding:5px 0;
	border-top:1px solid #D0D0D0;
}
.flag-list-en:hover:after{
	content:"";
    display: block;
    background: #d0d0d0;
	position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
}
li.level-2:hover + li.level-2 .flag-list-en{
	border-color:transparent;
}

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

#header-menu{
	position: relative;
	z-index: 0;
}
#header-menu::after{
     content:'';
     display:block;
     clear:both;
}
/** header-menu ********************************************************************************************************************/
#header-menu .svg:active{
	transform: scale(.9);
}
#header-menu .svg:hover{
	fill: #79d1ff;
}
#header-hud + #header-menu{
	margin-top:12px;
}
/** svg ****************************************************************************************************************************/
#header-menu .content-icon{
	width: 25px;
	height: 25px;
}
#header-menu .content-icon-svg{
	width: 100%;
	height: 100%;
	fill: white;
}
#header-menu a:focus .content-icon{
	animation: ontap .15s ease-in-out;
}
#header-menu [class^=content-icon] {
	display: block;
}

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

.header-sprite{
	background-image: url(/media/equideo/image/interface/header/sprite-header.png);
	background-repeat:no-repeat;
	display:block;
}
.header-carousel .header-sprite,
.header-currency .header-sprite{
	width:45px;
	height:45px;
}
.header-clock .header-sprite,
.header-message .header-sprite,
.js-header__button--account .header-sprite{
	width:24px;
	height:24px;
}
.header-button:active .header-sprite,
.header-currency:active .header-sprite{
	transform: scale(.9);
}

/* header-sprite-profile **********************************************************************************************************/
.header-sprite-profile{
	background-position:-120px -90px;
}

/* header-sprite-comanagement **********************************************************************************************************/
.header-sprite-comanagement{
	background-position:-144px -90px;
}

/* header-sprite-equus ************************************************************************************************************/
.header-sprite-equus{
	background-position:-135px 0;
}

/* header-sprite-pass *************************************************************************************************************/
.header-sprite-pass{
	background-position:-135px -45px;
}

/* header-carousel-button *********************************************************************************************************/
.header-carousel-button.previous{
	transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-moz-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	-o-transform:scaleX(-1);
}
.header-carousel-button{
	background-color: transparent;
	background-position: -45px 0;
	outline: none;
	border:none;
	border-radius: 0;
	cursor: pointer;
}
.header-carousel-button:hover{
	background-position: -45px -45px;
}

/* header-sprite saisons ***********************************************************************************************************/
.header-sprite-printemps{
	background-position:0 -90px;
}
.header-sprite-hiver{
	background-position:-24px -90px;
}
.header-sprite-automne{
	background-position:-48px -90px;
}
.header-sprite-ete{
	background-position:-72px -90px;
}

/* header-sprite-module ***********************************************************************************************************/
.header-sprite-module{
	background-position:-100px -55px;
}

.header-sprite-locked{
	background-position:right bottom;
}


/***********************************************************************************************************************************/
/* HEADER-SPRITE FLAGS *************************************************************************************************************/
/***********************************************************************************************************************************/

[class^="header-account-flag"]{
	background-image:url(/media/equideo/image/fonctionnels/20/sprite-flags.png);
	background-color:transparent;
	display:block;
	width:100%;
	height:100%;
}
.header-account-flag-en {
	background-position: 0;
}
.header-account-flag-us {
	background-position: -24px;
}
.header-account-flag-uk {
	background-position: -48px;
}
.header-account-flag-au {
	background-position: -72px;
}
.header-account-flag-ca {
	background-position: -96px;
}
.header-account-flag-de {
	background-position: -120px;
}
.header-account-flag-fr {
	background-position: -144px;
}
.header-account-flag-es {
	background-position: -168px;
}
.header-account-flag-pt {
	background-position: -192px;
}
.header-account-flag-br {
	background-position: -216px;
}
.header-account-flag-il {
	background-position: -240px;
}
.header-account-flag-ru {
	background-position: -264px;
}
.header-account-flag-it {
	background-position: -288px;
}
.header-account-flag-nl {
	background-position: -312px;
}
.header-account-flag-se {
	background-position: -336px;
}
.header-account-flag-pl {
	background-position: -360px;
}
.header-account-flag-cz {
	background-position: -384px;
}
.header-account-flag-dk {
	background-position: -408px;
}
.header-account-flag-fi {
	background-position: -432px;
}
.header-account-flag-no {
	background-position: -456px;
}
.header-account-flag-ae,
.header-account-flag-ar {
	background-position: -480px;
}
.header-account-flag-hu {
	background-position: -504px;
}
.header-account-flag-ro {
	background-position: -528px;
}
.header-account-flag-bg {
	background-position: -552px;
}
.header-account-flag-lt {
	background-position: -576px;
}
.header-account-flag-lv {
	background-position: -600px;
}
.header-account-flag-si {
	background-position: -624px;
}	
.header-account-flag-sk {
	background-position: -648px;
}
.header-account-flag-ua {
	background-position: -672px;
}
.header-account-flag-tw {
	background-position: -696px;
}
.header-account-flag-jp {
	background-position: -720px;
}
.header-account-flag-kr {
	background-position: -744px;
}
.header-account-flag-cn {
	background-position: -768px;
}
.header-account-flag-gaia {
	background-position: -792px;
}
.header-account-flag-ouranos {
	background-position: -816px;
}


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

.header-login::after{
	content:"";
	display:block;
	clear:both;
}

/** header-login-button ************************************************************************************************************/
.header-login-button{
	position:relative;
	display:block;
	min-width:140px;
	height:45px;
	border-width: 2px;
	border-style: solid;
	border-color:#fff;
	border-radius:4px;
	text-align: center;
	box-sizing:border-box;
	transition:all 0.2s ease-in-out;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
}
.header-login-button.header-login-button{
	text-decoration: none;
}
.header-login-button::after{
	background:rgba(0, 0, 0, 0);
	content:"";
	position: absolute;
	z-index:0;
	display: block;
	width: 100%;
	height: 45px;
	left:0;
	top:-2px;
	border-radius:50%;
	opacity:0;
	transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
}
.header-login-button.active::after,
.header-login-button:hover::after,
.header-login-button:focus::after{
	background:rgba(255, 255, 255, 0.3);	
	border-radius:0;
	opacity:1;
	transform:scale(1);
}
.header-login-label{
	position:relative;
	z-index:1;
	display: block;
	height: 100%;	
	padding:0 20px;
	line-height:41px;
	font-size: 16px;
	cursor: pointer;
	color:#fff;
}

/** header-login menu *************************************************************************************************************/
.header-login-button .menu{
	top:40px;
	padding: 15px;
}

/***********************************************************************************************************************************/
/* HEADER-LOGIN-FORM ***************************************************************************************************************/
/***********************************************************************************************************************************/

.header-login-form{
	width: 270px;
	color:#808080;
}
.header-login-form .input{
	width: calc(100% - 2px);
}
.header-login-form .button{
	width: 100%;
}

/** landing-login-separator ********************************************************************************************************/
.landing-login-separator{
	display: flex;
	display: -ms-flexbox;
	align-items: center;
	width: 100%;
	text-align: center;
}
.landing-login-separator::before,
.landing-login-separator::after{
	background:#ccc;
	content:"";
	height: 1px;
	flex:1;
}
.landing-login-separator span{
	height: 15px;
	padding: 0 10px;
}

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

.header-login-server{
	background: #D4D4D4;
	position:relative;
	width: 270px;
	height:45px;
	border-radius: 23px;
	box-sizing:border-box;
	font-size: 15px;
	color: #808080;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.35) inset;
	transition:box-shadow 0.15s ease-in-out;
	
}
.header-login-server::after{
	content: "";
	display: block;
	clear: both;
}
.header-login-server:hover{
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.35) inset;
}
.header-login-server input[type="radio"]{
	display:none;
}
[class^="header-login-server-label"]{
	background-repeat: no-repeat;
	position:relative;
	z-index: 1;
	display: block;
	width: 50%;
	height: 100%;
	line-height: 45px;
	box-sizing:border-box;
	cursor: pointer;
}
[class^="header-login-server-radio"]:checked + label{
	font-weight: bold;
}
.header-login-server-label-gaia{
	background-image: url(/media/equideo/image/interface/icon/gaia-register.png);
	background-position: 95px center;
	float: right;
	padding-right: 45px;
	text-align: right;

}
.header-login-server-label-ouranos{
	background-image: url(/media/equideo/image/interface/icon/ouranos-register.png);
	background-position: 7px center;
	float: left;
	padding-left: 45px;
	text-align: left;
}
.header-login-server span{
	position: absolute;
	left:0;
	background: #fff;
	width: 50%;
	height: 100%;
	border:2px solid #e7e7e7;
	border-radius: 23px;
	box-sizing:border-box;
	transition:all .2s;
}
.header-login-server-radio-ouranos:checked ~ span{
	transform:translateX(0);
}
.header-login-server-radio-gaia:checked ~ span{
	transform:translateX(100%);
}

html[dir=rtl] .content-icon-svg[data-qname=arrow-keyboard-left]{
	transform: rotate(-180deg);
	transform-origin: 55% 50%;
}

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



/** body__notifications **********************************************************************************************************/
/*********************************************************************************************************************************/

.body__notifications{
	background: rgba(255, 255, 255, .97);
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	position: absolute;
	top: 54px;
	width: 370px;
	z-index: 3;
}

/** fix position for template v4 ************************************************************************************************/
@media only screen and (max-width: 1459px)  {
	.template-v4.body--ltr .body__notifications{ right: 10px;	}
	.template-v4.body--rtl .body__notifications{ left: 10px;	}
}
@media only screen and (min-width: 1460px)  {
	.template-v4.body--ltr .body__notifications{ left: calc(50% + 330px);	}
	.template-v4.body--rtl .body__notifications{ right: calc(50% + 330px);	}
}

/** fix position for template v5 ************************************************************************************************/
@media only screen and (max-width: 1619px)  {
	.template-v5.body--ltr .body__notifications{ right: 10px;	}
	.template-v5.body--rtl .body__notifications{ left: 10px;	}
}
@media only screen and (min-width: 1620px)  {
	.template-v5.body--ltr .body__notifications{ left: calc(50% + 420px);	}
	.template-v5.body--rtl .body__notifications{ right: calc(50% + 420px);	}
}

.js-body__notifications__footer{
	text-align: center;
	border-top: 1px solid #DCD4BC;
	padding-bottom: 13px;
	padding-top: 13px;
}

/** body__notifications: loader **************************************************************************************************/

.body__notifications #loader::before{
	border-top: 3px solid rgba(52, 99, 156, 0.7);
}

/** notification__unread *********************************************************************************************************/
/*********************************************************************************************************************************/

.notification__unread{
	color: #AD5B50;
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	text-decoration: none;
	text-transform: uppercase;
	top: 20px;
	z-index: 1;
}
.notification__unread:hover{
	text-decoration: underline;
}
.body--ltr .notification__unread{
	right: 22px;
}
.body--rtl .notification__unread{
	left: 22px;
}
.notification__ellipsis{
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	max-width: 278px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/** js-listview__item--unread  ***************************************************************************************************/
/*********************************************************************************************************************************/
.js-listview__item--unread .listview__item__title,
.js-listview__item--unread .listview__item__multilines{
    font-weight: bold;
}

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

/***********************************************************************************************************************************/
/* HEADER-LOGO *********************************************************************************************************************/
/***********************************************************************************************************************************/

html[dir="rtl"] .header-logo{
	position:relative;
	left:15px;
}


/***********************************************************************************************************************************/
/* HEADER-MESSAGE ******************************************************************************************************************/
/***********************************************************************************************************************************/

html[dir="rtl"] .header-message-count{
	left:inherit;
	right: -8px;
}


/***********************************************************************************************************************************/
/* HEADER-CAROUSEL *****************************************************************************************************************/
/***********************************************************************************************************************************/

html[dir="rtl"] #marketing-button-top{
	left:inherit;
	right:0;
}
html[dir="rtl"] .header-carousel-container{
	border-radius: 0 22px 22px 0;
}
html[dir="rtl"] .header-marketing-title,
html[dir="rtl"] .header-marketing-endtime{
    margin-left:inherit;
    margin-right: 80px;
}
html[dir="rtl"] .header-carousel-button.next.disabled{
	left: -25px;
}

/***********************************************************************************************************************************/
/* js-header__button--account ******************************************************************************************************/
/***********************************************************************************************************************************/

html[dir="rtl"] .header-account-site{
	left:inherit;
	right: -11px;
}


/***********************************************************************************************************************************/
/* HEADER-ICON *********************************************************************************************************************/
/***********************************************************************************************************************************/

/** mantis 53854 *******************************************************************************************************************/
html[dir="rtl"][lang="he"] .header-icon.aide,
html[dir="rtl"] #header-menu li.level-1:last-child .header-icon{
	transform:inherit;
	-webkit-transform:inherit;
	-moz-transform:inherit;
	-ms-transform:inherit;
}

/***********************************************************************************************************************************/
/* HEADER-CAROUSEL *****************************************************************************************************************/
/***********************************************************************************************************************************/

html[dir="rtl"] .header-carousel-button.previous{
	transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
	left: inherit;
	right: 0;
}
html[dir="rtl"] .header-carousel-button.next{
	transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
	left: -45px;
	right:inherit;
}