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

Documentation : https://www.dev.equideow.com/doc/bow#anchor-stickout
************************************************************************************************************************************
************************************************************************************************************************************
*/

.stickoutheader{
	position: relative;
	text-align: center;
	cursor: default;
	display: block;
	border-radius: 8px;
	min-height: 192px;
}
.stickoutheader:hover {
	outline-width: 8px;
	outline-offset: 0;
	outline-color: rgba(255, 255, 255, 0.3);
	outline-style: solid;
	animation: animateOutline 3s ease 1;
}

@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(255, 255, 255, 0);
  }

  10% {
    outline-color: rgba(255, 255, 255, 0.75);
  }

  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(255, 255, 255, 0);
  }

  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(255, 255, 255, 0);
  }
}
.stickoutheader,
.stickoutheader:hover{
	text-decoration: none;
}
.stickoutheader::before{
	border-color: transparent;
	border-radius: 8px;
	border-style: solid;
	border-width: 2px;
	bottom: 0;
	left: 0;
	overflow: hidden;
	right: 0;
	transition: all .25s ease-in-out;
	top: 0;
	z-index: 1;
}
.stickoutheader::after {
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3);
    height: 10px;
    left: 30px;
    width: calc(100% - 60px);
    z-index: 0;
}
.stickoutheader::after,
.stickoutheader::before {
    content: "";
    display: block;
    position: absolute;
}
a.stickoutheader,
button.stickoutheader{
	cursor: pointer;
}
a.stickoutheader:hover:not(.stickoutheader--checked):not(.js-stickoutheader--selectable):not(.js-stickoutheader--selected)::before,
button.stickoutheader:hover:not(.stickoutheader--checked):not(.js-stickoutheader--selectable):not(.js-stickoutheader--selected)::before{
    box-shadow: 0 0 30px 0 rgba(0,0,0,.3);
}

/* ELEMENT : BLOCK__CONTENT ********************************************************************************************************/
/***********************************************************************************************************************************/

.stickoutheader__content{
	padding: 0 10px 10px;
	position: relative;
	z-index: 1;
}
.stickoutheader__content .svg--danger{
	right: -8px;
	top: -8px;
}
.stickoutheader__content .svg--danger:before{
	display: none;
}

/* ELEMENT : TITLE ****************************************************************************************************************/
/***********************************************************************************************************************************/
.stickoutheader__title{
	line-height: 1.1em;
	margin-top: -13px;
}

/* ELEMENT : RIBBON ****************************************************************************************************************/
/***********************************************************************************************************************************/

.stickoutheader__ribbon{
	border-radius: 0 0 8px 8px;
	bottom: 0px;
	color: #fff;
	display: block;
	font-size: 12px;
	left: 0;
	padding: 6px 0 2px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	z-index: 1;
}
.stickoutheader__ribbon::before{
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 4px);
	left: 2px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	top: 0;
}

/* MODIFIER : IMAGEPATH HTML *******************************************************************************************************/
/***********************************************************************************************************************************/

.stickoutheader__content__image--html{
	display: inline-block;
	overflow: hidden;
}

/* MODIFIER : M ********************************************************************************************************************/
/***********************************************************************************************************************************/

.stickoutheader--m .stickoutheader__content__image{
	height: 118px;
	width: 118px;
	margin-bottom: -8px;
}
.stickoutheader--m .stickoutheader__content__image.horsesprite{
	background-size: 128px;
}

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

a.stickoutheader--checked{
	cursor: default;
}
.stickoutheader--checked::before{
	border-color: #849644;
	background: linear-gradient(to bottom, #edfda4 0, #EDFDA4 10px, #FDFFF0 50px, #FDFFF0 100%);
}
.stickoutheader--checked .stickoutheader__ribbon{
	background-color: #849644;
}
.stickoutheader--checked .stickoutheader__content::before{
	background-color: #849644;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQzLjYzIDguMmE0LjE0IDQuMTQgMCAwIDAtNi4wNSAwLjI0TDE4LjUyIDI5Ljk2bC04LjEtOC42M2E0LjE0IDQuMTQgMCAwIDAtNi4wNS0wLjI0IDQuNyA0LjcgMCAwIDAtMC4yNCA2LjM3TDE1LjEgMzkuMTRhNC4xNiA0LjE2IDAgMCAwIDIuNTYgMS43NWgwLjAyYTQuMDEgNC4wMSAwIDAgMCAxLjI1IDAuMSA0IDQgMCAwIDAgMC42Mi0wLjFoMC4wMWE0LjE2IDQuMTYgMCAwIDAgMi42LTEuODNsMjEuNy0yNC40OWE0LjcgNC43IDAgMCAwLTAuMjMtNi4zNyI+PC9wYXRoPjwvc3ZnPg==);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.stickoutheader--checked.stickoutheader--m .stickoutheader__content::before {
	background-size: 12px;
	width: 24px;
	height: 24px;
	right: 10px;
	top: 10px;
}
/* MODIFIER : DISABLED **************************************************************************************************************/
/***********************************************************************************************************************************/

a.stickoutheader--disabled{
	cursor: default;
}
.stickoutheader--disabled::before{
	border-color: #D0D0D0;
}
.stickoutheader--disabled .stickoutheader__ribbon{
	background-color: #D0D0D0;
}
.stickoutheader--disabled .stickoutheader__content::before{
	background-color: #D0D0D0;
    background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23949494%22%20d%3D%22m20.79976%2029.83375c0-1.8425%201.4315284-3.33375%203.20024-3.33375s3.20024%201.49125%203.20024%203.33375c0%201.175-.5843708%202.20875-1.4651268%202.8%200%200%20.3131844%201.96625.6647668%204.28375%200%20.69125-.5351732%201.24875-1.19994%201.24875h-2.39988c-.6647668%200-1.19994-.5575-1.19994-1.24875l.6647668-4.28375c-.880756-.59125-1.4651268-1.62625-1.4651268-2.8zm-3.19904-9.1675v-5.8325c0-3.68375%202.8630568-6.66625%206.39928-6.66625%203.5350232%200%206.39928%202.9825%206.39928%206.66625v5.8325zm-4.0006-5.8325v5.8325h-2.39988c-1.76871158%200-3.20024%201.49125-3.20024%203.33375v16.6675c0%201.84125%201.43152842%203.3325%203.20024%203.3325h25.59952c1.7675116%200%203.20024-1.49125%203.20024-3.3325v-16.6675c0-1.8425-1.4327284-3.33375-3.20024-3.33375h-2.39988v-5.8325c0-5.98375-4.6569671-10.83375-10.39988-10.83375s-10.39988%204.85-10.39988%2010.83375z%22%2F%3E%3C%2Fsvg%3E);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.stickoutheader--disabled.stickoutheader--m .stickoutheader__content::before {
	background-size: 12px;
	width: 24px;
	height: 24px;
	right: 10px;
	top: 10px;
}
/* MODIFIER : SUCCESS **************************************************************************************************************/
/***********************************************************************************************************************************/

.stickoutheader--success::before{
	background-image: url(/media/equideo/image/components/block/block-success.jpg);
	background-position: center 640px;
}
.stickoutheader--success .stickoutheader__content::before{
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: .5s;
	background: radial-gradient(circle at center, #eec213 0, transparent 70%);
	content: "";
	display: block;
	height: 192px;
	left: calc(50% - 96px);
	pointer-events: none;
	position: absolute;
	top: -96px;
	width: 192px;
	z-index: -1;
}
.stickoutheader--success .stickoutheader__content::after{
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(32);
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	display: block;
	position: absolute;
	z-index: 1;
	height: 256px;
	left: calc(50% - 128px);
	top: -128px;
	width: 256px;
}
body.animation .stickoutheader--success .stickoutheader__content::after{
	content: "";
	animation-name: animateSparkes;
}

/** success for M **********************************************************************************************************************/
.stickoutheader--success.stickoutheader--m .stickoutheader__content::after {
	transform: scale(.5);
}

body.animation .stickoutheader--success.stickoutheader--m .stickoutheader__content::before {
	animation-name: spinSuccessM;
	transform: scale(.25);
}

@keyframes spinSuccessM {
	100% {
		transform: scale(.25);
	}
}

/* MODIFIER : BLOCK--SELECTABLE ********************************************************************************************************/
/***************************************************************************************************************************************/

.js-stickoutheader--selectable::after{
    display: none;
}
.js-stickoutheader--selectable:hover::before{
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 5px rgba(0,0,0,0.10);
}
.js-stickoutheader--selectable::before{
    border: 1px solid #AF9C8C;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
    transition: none;
}

/* MODIFIER : BLOCK--SELECTABLE ********************************************************************************************************/
/***************************************************************************************************************************************/

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

/* MODIFIER : BLOCK--SELECTED **********************************************************************************************************/
/***************************************************************************************************************************************/

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

/* MODIFIERS : RIBBON **************************************************************************************************************/
/***********************************************************************************************************************************/
/**/
.stickoutheader--common::before,
.stickoutheader--rare::before,
.stickoutheader--precious::before,
.stickoutheader--divine::before,
.stickoutheader--pack::before,
.stickoutheader--event::before,
.stickoutheader--other::before,
.stickoutheader--offers::before{
	border-radius: 8px;
}
.stickoutheader--common .stickoutheader__content,
.stickoutheader--rare .stickoutheader__content,
.stickoutheader--precious .stickoutheader__content,
.stickoutheader--divine .stickoutheader__content,
.stickoutheader--pack .stickoutheader__content,
.stickoutheader--event .stickoutheader__content,
.stickoutheader--other .stickoutheader__content,
.stickoutheader--offers .stickoutheader__content{
	padding-bottom: 23px;
}

/** common *************************************************************************************************************************/
.stickoutheader--common::before{
	border-color: #AF9C8C;
}
.stickoutheader--common .stickoutheader__ribbon{
	background-color: #AF9C8C;
}

/** rare ***************************************************************************************************************************/
.stickoutheader--rare::before{
	border-color: #25cda3;
}
.stickoutheader--rare .stickoutheader__ribbon{
	background-color: #25cda3;
}

/** legendary **********************************************************************************************************************/
.stickoutheader-precious::before{
	border-color: #ee8c13;
}
.stickoutheader--precious .stickoutheader__ribbon{
	background-color: #ee8c13;
}

/** divine *************************************************************************************************************************/
.stickoutheader--divine::before{
	border-color: #7C4D81;
}
.stickoutheader--divine .stickoutheader__ribbon{
	background-color: #7C4D81;
}

/** packs *************************************************************************************************************************/
.stickoutheader--pack::before{
	border-color: #5FC34E;
}
.stickoutheader--pack .stickoutheader__ribbon{
	background-color: #5FC34E;
}

/** event *************************************************************************************************************************/
.stickoutheader--event::before{
	border-color: #AE34CD;
}
.stickoutheader--event .stickoutheader__ribbon{
	background-color: #AE34CD;
}

/** other *************************************************************************************************************************/
.stickoutheader--other::before{
	border-color: #9E2619;
}
.stickoutheader--other .stickoutheader__ribbon{
	background-color: #9E2619;
}

/** offers *************************************************************************************************************************/
.stickoutheader--offers::before{
	border-color: #B75802;
}
.stickoutheader--offers .stickoutheader__ribbon{
	background-color: #B75802;
}