.tendance-2018 {
	position:relative;
	width:98%;
	margin:1%;
	height:0;
	padding-top:23%;
	background:black;
	border:1px solid darkgray;
	box-sizing: border-box;
}


.tendance-2018-wrapper {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


.with-page-selector > .tendance-2018-wrapper {
	width:70%;
}




.tendance-2018-element {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	background:yellow;
	opacity:0;
	transition:opacity 0.4s ease-in-out;
	z-index: 1;
	display:block;
	
	text-decoration: none;
}

.tendance-2018-element.active {
	opacity:1;
	z-index:2;
}


.tendance-2018-element > *:first-child {
	display:block;
	width:100%;
	height:100%;
	position:relative;	
	background:black;
}



.tendance-2018-page-selector {
	position:absolute;
	right:0;
	top:0;
	width:31%;
	height:100%;
	z-index: 2;

}



.tendance-2018-page-selector .page-selector-element {
	width:100%;
	height:33.33333333333333333%;
	box-sizing:border-box;
	/*border-bottom:1px solid black;*/
	padding-left:1em;
	background:#f7e550;
	/*color:#43af21;*/
	color:#000;
	position: relative;
	z-index: 1;
	user-select: none;
}

.tendance-2018-page-selector .page-selector-element:not(:last-child) {
	border-bottom:1px solid lightgray;
}

.tendance-2018-page-selector .page-selector-element:not(.active) {
	cursor:pointer;
}

.tendance-2018-page-selector .page-selector-element.active {
	background:#43af21;
	border-color:#43af21;
	color:white;
	z-index: 2;
	box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.66);
}

.tendance-2018-page-selector .page-selector-element.active .arrow {
    border-style: solid;
    position: absolute;
    display: block;
    border-color: transparent #43af21 transparent transparent;
    left: -14px;
    top: 0;
	transform:scale(calc(100% / 80px));
}


@media screen and (max-width: 992px) {
  .tendance-2018-page-selector .page-selector-element {
	font-size:1.5vw;
  }
}


.tendance-2018-page-selector .page-selector-element .page-selector-title {
	font-family:grobold;	
	font-size:1.2em;
	padding:0.3em 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-transform : capitalize;
}
.tendance-2018-page-selector .page-selector-element .page-selector-subtitle {
	font-family:verdana;	
	padding:0.3em 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}



.tendance-2018-element > :first-child > * {
	position:absolute;
	display: block;
} 


.tendance-2018-element > :first-child > .background {
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size: cover;
	background-position:center center;
	z-index:0;
}

.tendance-2018-element > :first-child > *:not(.background) {
	z-index: 1;
}



.tendance-2018-element .button-discover {
	display: block;
	position:absolute;
	background:#43af21;
	font-size:1.2rem;
	font-family: grobold;
	padding:0.25em 0.5em;
	min-width:120px;
	text-align: center; 
	color:white;
	text-decoration: none;
	/*text-shadow:1px 1px 3px rgba(0,0,0,0.70);*/
	box-shadow: 1px 1px 2px rgba(0,0,0,0.55), 0 4px 4px -4px rgba(255,255,255,1) inset, 0 -4px 4px -4px rgba(0,0,0,1) inset, 0 3em 3em -3em rgba(255,255,255,0.5) inset;
	z-index: 3 !important;
	text-transform:capitalize;
}

.tendance-2018-element .button-discover:before {
	content:'';
	display: block;
	position: absolute;
	left:0;
	height:100%;
	width:0;
	top:0;
	z-index: -1;
	background:rgba(0,0,0,0.25);
	transition: width 0.15s ease-in-out;
}

.tendance-2018-element .button-discover:hover:before {
	width: 100%;
}

.tendance-2018-element .gain-descriptif,
.tendance-2018-element .texte-area {
	font-family: verdana;
	color:white;
}




/**
___RESPONSIVE
**/


@media screen and (max-width: 992px) {


    .tendance-2018 {
        display:none;
    }
    .with-page-selector > .tendance-2018-wrapper {
        width:100%;
    }

    .tendance-2018-page-selector {
       display:none;
    }


    .tendance-2018-element .button-discover {
        display:none;
    }

    .tendance-2018-element .gain-descriptif  {
                                                    display:none;
                                                }

}


/**
___FIN RESPONSIVE
**/




.block-tendance-2018-tournois .date-end {
	position: absolute;
	top:0;
	left:0;
	font-family: verdana;
	background: rgba(255,255,255,0.75);
	padding: 0.25em 1em;
	height:0.8em;
	line-height: 0.8em;
	color:black;
	z-index: 4 !important;
	/*box-sizing: border-box;*/
}

.block-tendance-2018-tournois .date-end:after {
	content:'';
	width:0;
	height:0;
	top:0;
	left:100%;
	position: absolute;

	border-width: 0.65em;
	border-style: solid;
	border-color: white transparent transparent white ;
	opacity: 0.75;
}

/**
___VARIATION1
*/
.block-tendance-2018-tournois.variation-1 .button-discover {
	bottom:1em;
	right:2em;
	text-transform:capitalize;
}

.block-tendance-2018-tournois.variation-1 .texte-area {
	width:60%;
	padding:1em;
	right:0;
	text-align: center;
	top:0;
}


.block-tendance-2018-tournois.variation-1 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-tournois.variation-1 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-tournois.variation-1 .gain-img {
	width:25%;
	left:10%;
	top:10%;
	z-index: 1;
}

.block-tendance-2018-tournois.variation-1 .gain-descriptif {
	width:35%;
	left:5%;
	bottom:10%;
	color:black;
	z-index: 3 !important;
}

.block-tendance-2018-tournois.variation-1 .jeu-logo {
	width:25%;
	left:10%;
	top:0;
	z-index: 2;
}


/**
!END ___VARIATION1
*/






/**
___VARIATION2
*/
.block-tendance-2018-tournois.variation-2 .button-discover {
	bottom:1.4em;
	left:3em;
	text-transform:capitalize;
}

.block-tendance-2018-tournois.variation-2 .texte-area {
	width:60%;
	padding:1em;
	left:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-tournois.variation-2 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-tournois.variation-2 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-tournois.variation-2 .gain-img {
	width:25%;
	right:10%;
	top:15%;
	z-index: 1;
}

.block-tendance-2018-tournois.variation-2 .gain-descriptif {
	right:0;
	bottom:0;
	color:black;
	background:rgba(255,255,255,0.75);
	padding:0.25em 1em;
	height:1.5em;
	line-height: 1.5em;
	z-index:3 !important;
}

.block-tendance-2018-tournois.variation-2 .gain-descriptif:after {
	content:'';
	width:0;
	height:0;
	top:0;
	right:100%;
	position: absolute;

	border-width: 1.5em;
	border-style: solid;
	border-color: transparent white white transparent;
	opacity: 0.75;
}

.block-tendance-2018-tournois.variation-2 .jeu-logo {
	width:25%;
	right:10%;
	top:0;
	z-index: 2;
}
/**
!END ___VARIATION2
*/





/**
___VARIATION3
*/
.block-tendance-2018-tournois.variation-3 {
	text-align: center;
	padding-top:25%;
	box-sizing: border-box;
}

.block-tendance-2018-tournois.variation-3 .button-discover {
	display: inline-block;
	position: relative;
	text-transform:capitalize;
}

.block-tendance-2018-tournois.variation-3 .texte-area {
	width:33%;
	padding:1em;
	left:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-tournois.variation-3 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-tournois.variation-3 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-tournois.variation-3 .gain-img {
	width:26%;
	left:37%;
	top:5%;
}

.block-tendance-2018-tournois.variation-3 .gain-descriptif {
	top:20%;
	right:5%;
	width:25%;
	color:white;
	padding:1em;
	/*height:1.5em;
	line-height: 1.5em;*/
}
/**
!END ___VARIATION3
*/


/**
___VARIATION1
*/
.block-tendance-2018-butins.variation-1 .button-discover {
	bottom:1em;
	right:2em;
	text-transform:capitalize;
}

.block-tendance-2018-butins.variation-1 .texte-area {
	width:60%;
	padding:1em;
	right:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-butins.variation-1 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
	text-transform : capitalize;
} 

.block-tendance-2018-butins.variation-1 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-butins.variation-1 .gain-img {
	width:25%;
	left:10%;
	top:10%;
}

.block-tendance-2018-butins.variation-1 .gain-descriptif {
	width:35%;
	left:5%;
	bottom:10%;
	color:black;
}
/**
!END ___VARIATION1
*/






/**
___VARIATION2
*/
.block-tendance-2018-butins.variation-2 .button-discover {
	bottom:1.4em;
	left:3em;
	text-transform:capitalize;
}

.block-tendance-2018-butins.variation-2 .texte-area {
	width:60%;
	padding:1em;
	left:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-butins.variation-2 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-butins.variation-2 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-butins.variation-2 .gain-img {
	width:25%;
	right:10%;
	top:5%;
}

.block-tendance-2018-butins.variation-2 .gain-descriptif {
	right:0;
	bottom:0;
	color:black;
	background:rgba(255,255,255,0.75);
	padding:0.25em 1em;
	height:1.5em;
	line-height: 1.5em;
}

.block-tendance-2018-butins.variation-2 .gain-descriptif:after {
	content:'';
	width:0;
	height:0;
	top:0;
	right:100%;
	position: absolute;

	border-width: 1.5em;
	border-style: solid;
	border-color: transparent white white transparent;
	opacity: 0.75;
}
/**
!END ___VARIATION2
*/





/**
___VARIATION3
*/
.block-tendance-2018-butins.variation-3 {
	text-align: center;
	padding-top:25%;
	box-sizing: border-box;
}

.block-tendance-2018-butins.variation-3 .button-discover {
	display: inline-block;
	position: relative;
	text-transform:capitalize;
}

.block-tendance-2018-butins.variation-3 .texte-area {
	width:33%;
	padding:1em;
	left:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-butins.variation-3 .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-butins.variation-3 .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-butins.variation-3 .gain-img {
	width:26%;
	left:37%;
	top:5%;
}

.block-tendance-2018-butins.variation-3 .gain-descriptif {
	top:20%;
	right:5%;
	width:25%;
	color:white;
	padding:1em;
	/*height:1.5em;
	line-height: 1.5em;*/
}
/**
!END ___VARIATION3
*/


/**
___VARIATION1
*/
.block-tendance-2018-grattages.variation-1 {
	text-align: left;
	padding-top:1%;
	box-sizing: border-box;
}

.block-tendance-2018-grattages.variation-1 .button-discover {
	bottom:1em;
	right:2em;
	text-transform:capitalize;
}

.block-tendance-2018-grattages.variation-1 .jeu-logo {
	position:relative !important;
	display: block;
	width:40%;
	margin-left:5%;
}

.block-tendance-2018-grattages.variation-1 .texte-area {
	position:relative;
	display: block;
	width:40%;
	margin-left:5%;
	text-align: center;
	text-shadow: 0 0 3px #000;
}

.block-tendance-2018-grattages.variation-1 .gain-img {
	width:25%;
	right:12.5%;
	top:10%;
	text-align: center;
}
.block-tendance-2018-grattages.variation-1 span.gain-img {
	font-family: grobold;
	font-size:3em;
	color:#FFF;
	text-shadow: 0 0 5px #000;
	white-space: nowrap;
	/*position: relative;*/
	transform-origin: top right;
	transform: scale(1.5);
}
.block-tendance-2018-grattages.variation-1 span.gain-img:before {
	content:attr(data-inner-html);
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	
    transform: rotateX(70deg) rotateY(12deg) rotateZ(-27deg) scale(1.2) translate(-25px,28px);
    z-index: -1;
    color: rgba(0,0,0,0.25);
    text-shadow: none;
}

.block-tendance-2018-grattages.variation-1 .gain-descriptif {
	display: none
}
/**
!END ___VARIATION1
*/





/**
___VARIATION2
*/
.block-tendance-2018-grattages.variation-2 {
	text-align: right;
	padding-top:1%;
	box-sizing: border-box;
}

.block-tendance-2018-grattages.variation-2 .button-discover {
	bottom:1em;
	left:2em;
	text-transform:capitalize;
}

.block-tendance-2018-grattages.variation-2 .jeu-logo {
	position:relative !important;
	display: block;
	width:40%;
	margin-left:55%;
}

.block-tendance-2018-grattages.variation-2 .texte-area {
	position:relative;
	display: block;
	width:40%;
	margin-left:55%;
	text-align: center;
	text-shadow: 0 0 3px #000;
}

.block-tendance-2018-grattages.variation-2 .gain-img {
	width:25%;
	left:15%;
	top:10%;
	text-align: center;
}
.block-tendance-2018-grattages.variation-2 span.gain-img {
	font-family: grobold;
	font-size:3em;
	color:#FFF;
	text-shadow: 0 0 5px #000;
	white-space: nowrap;
	/*position: relative;*/
	transform-origin: top right;
	transform: scale(1.5);
}
.block-tendance-2018-grattages.variation-2 span.gain-img:before {
	content:attr(data-inner-html);
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	
    transform: rotateX(70deg) rotateY(12deg) rotateZ(-27deg) scale(1.2) translate(-25px,28px);
    z-index: -1;
    color: rgba(0,0,0,0.25);
    text-shadow: none;
}

.block-tendance-2018-grattages.variation-2 .gain-descriptif {
	display: none
}

/**
!END ___VARIATION2
*/



.block-tendance-2018-megachallenge .date-end {
	position: absolute;
	top:0;
	left:0;
	font-family: verdana;
	background: rgba(255,255,255,0.75);
	padding: 0.25em 1em;
	height:0.8em;
	line-height: 0.8em;
	color:black;
	z-index: 4 !important;
	/*box-sizing: border-box;*/
}

.block-tendance-2018-megachallenge .date-end:after {
	content:'';
	width:0;
	height:0;
	top:0;
	left:100%;
	position: absolute;

	border-width: 0.65em;
	border-style: solid;
	border-color: white transparent transparent white ;
	opacity: 0.75;
}

.block-tendance-2018-megachallenge .button-discover {
	bottom:1em;
	right:15em;
	text-transform:capitalize;
}

.block-tendance-2018-megachallenge .texte-area {
	width:60%;
	padding:1em;
	right:0;
	text-align: center;
	top:0;
}

.block-tendance-2018-megachallenge .texte-area .texte-principal {
	font-family: grobold;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-transform : capitalize;
} 

.block-tendance-2018-megachallenge .texte-area .texte-accroche {
	display: block;
}


.block-tendance-2018-megachallenge .gain-img {
	width:25%;
	left:10%;
	top:10%;
}

.block-tendance-2018-megachallenge .gain-descriptif {
	width:35%;
	left:5%;
	bottom:10%;
	color:black;
}