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

/***********************************************************************************************************************************/
/* STYLE 0 *************************************************************************************************************************/
/***********************************************************************************************************************************/

.tab-style-0{
	padding: 0 10px;
}

/** tab-element ********************************************************************************************************************/
.tab-style-0 .tab-element{
	position: relative;
	min-width: 160px;
	margin: 0 10px;
	border-radius: 8px 8px 0 0;
}
.tab-style-0 .tab-element:not(.selected){
    background: rgba(0,0,0,.3);
}
.tab-style-0 .tab-element.selected{
    background: #fdfff0;
}

/** tab-action **********************************************************************************************************************/
.tab-style-0 .tab-action{
	color: #fff;
	display: block;
	padding: 8px 20px 9px;
	position: relative;
	text-align: center;
	text-decoration: none;
	z-index: 1;
}
.tab-style-0 .tab-action::selection{
	background: transparent;
}
.tab-style-0 .tab-action::-ms-selection{
	background: transparent;
}
.tab-style-0 .tab-action::-moz-selection{
	background: transparent;
}
.tab-style-0 .tab-action::-webkit-selection{
	background: transparent;
}
.tab-style-0 .selected .tab-action{
	color: #3d251b;
}
.tab-style-0 .tab-action:focus{
	animation: ontap .15s ease-in-out;
}


/***********************************************************************************************************************************/
/* TAB - STYLE-1 *******************************************************************************************************************/
/***********************************************************************************************************************************/

.tab-style-1{
	display: table;
	width: 100%;
}

/** tab-element *******************************************************************************************************************/
.tab-style-1 .tab-element{
	position: relative;
	float: inherit;
	display: table-row;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: rgba(0,0,0,.6);
	box-sizing: border-box;
}
.tab-style-1 .tab-element.selected{
	background: rgba(0,0,0,.3);
	border-width: 0 0 1px 0;
}
.tab-style-1 .tab-element:last-child{
	border-bottom: none;
}

/** tab-action ********************************************************************************************************************/
.tab-style-1 .tab-action{
	position: relative;
	z-index: 2;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
.tab-style-1 .tab-action,
.tab-style-1 .tab-element::before,
.tab-style-1 .tab-element::after{
	height: 85px;
}
.tab-style-1 .tab-element::after,
.tab-style-1 .tab-element::before{
    content: "";
    display: block;
    position: absolute;
    transition: all .1s ease-in-out;
}
.tab-style-1 .tab-action strong{
	font-weight: normal;
}
.tab-style-1 .tab-element:nth-of-type(1) .tab-action{
	border-radius: 8px 0 0 0;
}

/** tab-element after **************************************************************************************************************/
.tab-style-1 .tab-element::after{
    width: 100%;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    left: 0;
    opacity: 0;
    transform: scale3d(0, 0, 0);
    z-index: 1;    
}
.tab-style-1 .tab-element:not(.selected):hover::after{
	border-radius: 0;
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

/** tab-element before **************************************************************************************************************/
.tab-style-1 .tab-element::before{
    width: 10px;
    left: 0;
}
.tab-style-1 .tab-element.selected::before{
	background: #63cfd0;
}


/***********************************************************************************************************************************/
/* STYLE 11 ************************************************************************************************************************/
/***********************************************************************************************************************************/

.tab-style-11{
	text-align: center;
}

/** tab-element ********************************************************************************************************************/
.tab-style-11 .tab-element{
	position: relative;
	display: inline-block;
	float: inherit;
   	border-color: transparent;
   	margin: 0 5px;
   	transition: all .15s ease-in-out;
   	overflow: visible;
}

/** tab-element before *************************************************************************************************************/
.tab-style-11 .tab-element::before {
    position: absolute;
    top: 15px;
    display: block;
    content: "";
    height: 15px; /* same value as top position */
    background: rgba(0, 0, 0, .3);
    border-radius: 8px 8px 0 0;
    width: 70px;
    z-index: 0;
    transition: all .1s ease-in-out;
}

/** tab-element hover **************************************************************************************************************/
.tab-style-11 .tab-element:hover::before{
	top: 10px;
    height: 20px;
}

/** tab-element selected ***********************************************************************************************************/
.tab-style-11 .tab-element.selected::before{
	top: 5px;
    height: 25px;
}

/** tab-action *********************************************************************************************************************/
.tab-style-11 .tab-action{
	position: relative;
    display: block;
    width: 70px;
}

/** tab-action image ****************************************************************************************************************/
.tab-style-11 .tab-action img{
	backface-visibility: hidden;
	transform: scale(.75) translateY(25px);
	transition: all .1s ease-in-out;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(.75) translateY(25px);
	-webkit-transition: all .1s ease-in-out;
}
.tab-style-11 .selected .tab-action img{
	transform: scale(1) translateY(15px);
	-webkit-transform: scale(1) translateY(15px);
}