/* Tablette en mode portrait et résolutions inférieurs */

@media only screen and (max-width: 768px) {
	
	body, html {
		width: 100%;
		color: #ffffff;
		background-color: #000000;
		background-image: url(../images/bg.png);
		font-size: 100%;
	}
	
	.container-fluid {
		max-width: 500px;
		padding: 0;
		margin: 0 auto;
	}
	
	.boxShadow {
		-moz-box-shadow: inset 0px 0px 5px 2px #FF4500;
		-webkit-box-shadow: inset 0px 0px 5px 2px #FF4500;
		-o-box-shadow: inset 0px 0px 5px 2px #FF4500;
		box-shadow: inset 0px 0px 5px 2px #FF4500;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#FF4500, Direction=NaN, Strength=5);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.boxShadowGrey {
		-moz-box-shadow: inset 0px 0px 5px 2px #D3D3D3;
		-webkit-box-shadow: inset 0px 0px 5px 2px##D3D3D3;
		-o-box-shadow: inset 0px 0px 5px 2px #D3D3D3;
		box-shadow: inset 0px 0px 5px 2px #D3D3D3;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#D3D3D3, Direction=NaN, Strength=5);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	#footer {
		position: fixed;
		max-width: 500px;
		position: absolute; 
		bottom: 0;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	#footer2 {
		position: fixed;
		bottom: 0;
		max-width: 500px;
		text-align: center;
		margin: 0;
		padding: 0;
	}	
	
	.vertical-align {
		min-height: 100%;
		display: table-cell;
		vertical-align: middle;
	}
	
	/* Header */
	
	#header {
		max-width: 500px;
		justify-content: center;
		margin-left: -5px;
		z-index: 1;
	}
	
	.top-fixed {
		position: fixed;
		top: 0;
	}
	
	.flex-container-header {
		max-width: 100%;
		display: flex;
		margin-bottom: 0;
	}
		
	.column {
		margin: 8px;
		flex-grow: 1;
		flex-shrink: 1;
	}
	
	.level-box {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		width: 100%;
		padding: 5px 5px 5px 5px;
		overflow: hidden;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		color: rgba(0,0,0,1);
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		background: rgba(255,69,0,1);
		-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
		box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
	}
	
	.orangered {
		color: orangered;
	}
	
	.infoBoxLevel {
		padding: 5px;
		font-size: 80%;
		text-align: left;
		margin-bottom: 0;
	}
	
	.dollar-box {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		width: 100%;
		padding: 5px 5px 5px 5px;
		overflow: hidden;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		color: rgba(0,0,0,1);
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		background: rgba(124,252,0,1);
		-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
		box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
	}
	
	.lawngreen {
		color: lawngreen;
	}
	
	.infoBoxDollar {
		padding: 5px;
		font-size: 80%;
		text-align: center;
		margin-bottom: 0;
	}
	
	.token-box {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		width: 100%;
		padding: 5px 5px 5px 5px;
		overflow: hidden;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		color: rgba(0,0,0,1);
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		background: yellow;
		-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
		box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5) ;
	}
	
	.gold {
		color: gold;
	}
		
	.infoBoxToken {
		padding: 5px;
		font-size: 80%;
		text-align: right;
		margin-bottom: 0;
	}
	
	.text-70 {
		font-size: 70%;
	}
	
	.boxText-70 {
		font-size: 70%;
		margin-bottom; 0;
	}
	
	/* Propriété du joueur */

	#proprieteJoueur {
		width: 100%;
		margin-top: 35px;
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
		padding-left: 0;
	}
	
	.modal-Propriete {
		position: relative;
		top: 15px;
		color: white;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
		text-decoration: none;
	}
	
	.modal-ProprieteNo {
		position: relative;
		top: 15px;
		color: lightgrey;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
		text-decoration: none;
	}
	
	.imgModalProprieteCup {
		height: 20px;
		width: 20px;
	}
	
	.imgModalProprieteCupNo {
		height: 20px;
		width: 20px;
		filter: grayscale(100%);
	}
	
	.imgModalProprieteFlags {
		position: relative;
		top: 12px;
		height: 30px;
		width: 30px;
	}
	
	.imgModalAgendaFlags {
		position: relative;
		top: 0;
		height: 21px;
		width: 21px;
	}
	
	.imgModalEvent1Flags {
		position: relative;
		top: 0;
		height: 100px;
		width: 100px;
	}
	
	.imgModalProprieteFlagsNo {
		position: relative;
		top: 12px;
		height: 30px;
		width: 30px;
		filter: grayscale(100%);
	}
	
	.modal-ProprietePlace {
		margin-left: 10px;
		padding: 5px;
		border: 2px solid orangered;
		border-radius: 5px;
		position: relative;
		top: 15px;
		color: white;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	.modal-ProprietePlaceNo {
		margin-left: 10px;
		padding: 5px;
		border: 2px solid orangered;
		border-radius: 5px;
		position: relative;
		top: 15px;
		color: lightgrey;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	.modal-ProprietePlaceGrey {
		margin-left: 10px;
		padding: 5px;
		border: 2px solid lightgrey;
		border-radius: 5px;
		position: relative;
		top: 15px;
		color: lightgrey;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	.flex-container-playerPropriety {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}
	
	.flex-container-playerPropriety > a {
		border: 1px solid orangered;
		border-radius: 5px;
		color: white;
		height: 60px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-playerPropriety > span {
		border: 1px solid LightGray;
		border-radius: 5px;
		color: LightGray;
		height: 60px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-playerPropriety > a:hover {
		text-decoration: none;
	}
	
	.imgAvatar {
		max-height: 100%;
		width: auto;
	}

	.imgAvatarNo {
		max-height: 100%;
		width: auto;
		filter: grayscale(100%);
	}
	
	.imgFlag {
		position: relative;
		float: left;
		top: 5px;
		left: 5px;
		max-height: 50%;
		width: auto;
	}

	.imgCup {
		position: relative;
		float: right;
		top: 30px;
		right: 8px;
		max-height: 40%;
		width: auto;
	}

	.imgParametre {
		max-height: 100%;
		width: auto;
	}
	
	.imgParametreNo {
		max-height: 100%;
		width: auto;
		filter: grayscale(100%);
	}

	.text-50 {
		position: relative;
		float: left;
		top: 10px;
		left: 5px;
		font-size: 100%;
		font-weight: bold;
	}

	.number {
		position: relative;
		background-color: orangered;
		padding: 5px;
		border-radius: 5px;
		float: right;
		top: 30px;
		right: 8px;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnNiveauImg {
		position: relative;
		border-right: 1px solid black;
		border-radius: 5px 0 0 5px;
		margin: 0;
		padding: 0;
		width: 15%;
		background-color: red;
		text-align: center;
	}
	
	.columnNiveauTexte {
		position: relative;
		padding-top: 8px;
		padding-left: 3px;
		width: 60%;
		color: #000000;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnNiveauNumber {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 25%;
		text-align: center;
		color: white;
		background-color: red;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnActionTexte {
		position: relative;
		padding-top: 8px;
		padding-left: 3px;
		width: 70%;
		color: #000000;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnClassementTexte {
		position: relative;
		padding-top: 8px;
		padding-left: 3px;
		width: 60%;
		color: #000000;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnActionNumber {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 30%;
		text-align: center;
		color: white;
		background-color: darkred;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnGameNumber {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 30%;
		text-align: center;
		color: white;
		background-color: darkturquoise;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.flex-container-Niveau-Header {
		max-width: 100%;
		display: flex;
		margin-top: 5px;
		height: 110px;
	}
	
	.PF-Number-box {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		width: 100%;
		overflow: hidden;
		padding-top: 5px;
		padding-bottom: 5px;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 200%/1 "bangers", Helvetica, sans-serif;
		color: orangered;
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;		
	}
	
	.PF-Team-box {
		background-color: black;
		padding: 10px;
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		overflow: hidden;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		color: #ffffff;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;		
	}
	
	.PF-Level-box {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		width: 100%;
		overflow: hidden;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font: normal 75%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		color: #000000;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;		
	}
	
	.imgModalLevel {
		position: relative;
		text-align: center;
		z-index: 1;
	}
	
	.imgModalLevelImg {
		height: 100px;
	}
	
	.Level-Number-box {
		position: relative;
		z-index: 2;
		top: -40px;
		width: 100%;
		font: normal 200%/1 "bangers", Helvetica, sans-serif;
		color: orangered;
		text-align: center;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;		
	}
	
	.column1 {
		padding-top: 15px;
		padding: 8px;
		width: 33%
	}
	
	.column2 {
		width: 33%
	}
	
	/* Team et Goodies */
	
	#teamGoodies {
		width: 100%;
		margin-top: -5px;
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
		padding-left: 0;
	}
	
	.flex-container-teamGoodies {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}
	
	.flex-container-teamGoodies > a {
		border: 1px solid orangered;
		border-radius: 5px;
		color: white;
		height: 40px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}

	.flex-container-teamGoodies > span {
		border: 1px solid LightGray;
		border-radius: 5px;
		color: LightGray;
		height: 40px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.lex-container-teamGoodies > a:hover {
		text-decoration: none;
	}
	
	.textTitle {
		position: relative;
		top: 11px;
		font: normal 150%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5);
	}
	
	/* Expérience */
	
	#experience {
		width: 50%;
		margin-top: 25px;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}

	.textXP {
		position: relative;
		top: 13px;
		font: normal 180%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}	
	
	.textInfoNewUser {
		position: relative;
		padding: 3px;
		font: normal 110%/1 "bangers", Helvetica, sans-serif;
	}

	.flex-container-experience {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-experience > a {
		border: 1px solid darkred;
		background-color: darkred;
		border-radius: 5px;
		color: white;
		height: 50px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-experience > span {
		border: 1px solid LightGray;
		border-radius: 5px;
		color: LightGray;
		height: 50px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.darkred {
		-moz-box-shadow: inset 0px 0px 10px 5px #8B0000;
		-webkit-box-shadow: inset 0px 0px 10px 5px #8B0000;
		-o-box-shadow: inset 0px 0px 10px 5px #8B0000;
		box-shadow: inset 0px 0px 10px 5px #8B0000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#8B0000, Direction=NaN, Strength=10);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;	
	}
	
	.darkredText {
		color: darkred;
	}
	
	.black {
		color: black;
	}
		
	/* Lieu événement */
	
	#localisation {
		width: 100%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}
	
	.flex-container, .localisation > div  {
		border: none;
	}
	
	.textEvent {
		position: relative;
		top: 13px;
		font: normal 180%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}	
	
	.flex-container-localisation {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-localisation > a {
		border-radius: 5px;
		color: white;
		min-height: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-localisation > span {
		border-radius: 5px;
		color: orangered;
		min-height: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}
	
	.flex-container-localisation2 {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-localisation2 > a {
		border-radius: 5px;
		color: white;
		height: 100px;
		padding: 5px;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-localisation2 > span {
		border-radius: 5px;
		color: orangered;
		height: 60px;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	.imgLocalisation {
		max-height: 100%;
		width: auto;
	}

	.imgCup2 {
		position: relative;
		top: 5px;
		max-height: 90%;
		width: auto;
		border: 1px solid orangered;
		border-radius: 5px;
	}	
	
	.imgCup2Grey {
		position: relative;
		top: 20px;
		max-height: 60%;
		width: auto;
		border: 1px solid LightGray;
		border-radius: 5px;
		padding: 5px;
	}	
	
	/* Evénement */
	
	#event {
		width: 50%;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}
	
	.textEvent {
		position: relative;
		top: 13px;
		font: normal 180%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}	
	
	.flex-container-event {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-event > a {
		border: 1px solid darkturquoise;
		background-color: darkturquoise;
		border-radius: 5px;
		color: white;
		height: 50px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-event > span {
		border: 1px solid LightGray;
		border-radius: 5px;
		color: LightGray;
		height: 50px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.darkturquoise {
		-moz-box-shadow: inset 0px 0px 10px 5px #00CED1;
		-webkit-box-shadow: inset 0px 0px 10px 5px #00CED1;
		-o-box-shadow: inset 0px 0px 10px 5px #00CED1;
		box-shadow: inset 0px 0px 10px 5px #00CED1;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#00CED1, Direction=NaN, Strength=10);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;		
	}
	
	.darkturquoiseText {
		color: darkturquoise;
	}
	
	/* News */
	
	#news {
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
		position: relative;
		bottom: 15px;
	}
	
	.flex-container-news {
		display: flex;
		align-items: stretch;
		padding: 0;
	}

	.flex-container-news > a {
		border: 1px solid DodgerBlue;
		background-color: white;
		border-radius: 5px;
		color: white;
		height: 90px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
		padding: 0:
	}
	
	.flex-container-news > span {
		border: 1px solid lightgrey;
		background-color: lightgrey;
		border-radius: 5px;
		color: lightgrey;
		height: 90px;
		margin: 3px;
		text-align: center;
		font-size: 70%;
		padding: 0:
	}
	
	.DodgerBlue {
		background-color: DodgerBlue;
	}
	
	.LightGrey {
		background-color: lightgrey;
	}
	
	.DodgerBlue1 {
		-moz-box-shadow: inset 0px 0px 10px 5px #1E90FF;
		-webkit-box-shadow: inset 0px 0px 10px 5px #1E90FF;
		-o-box-shadow: inset 0px 0px 10px 5px #1E90FF;
		box-shadow: inset 0px 0px 10px 5px #1E90FF;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#1E90FF, Direction=NaN, Strength=10);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.newsTitle {
		position: relative;
		top: 0;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		color: white;
	}

	.imgNews {
		max-height: 70px;
		width: auto;
	}
	
	.imgNewsNo {
		max-height: 70px;
		width: auto;
		filter: grayscale(100%);
	}
	
	/* Menu */

	#dock-container {
		height: 60px;
		padding: 0;
		margin: 0;
		bottom: 0;
		background-color: orangered;
		border: none;
		border-top: 4px solid darkred;
	}
	
	#dock-container li#active img {
		-webkit-transform: scale(1.65);
		margin: 0 0.5em;
	}

	#dock-container li {
		width: 17%;
		padding: 0;
		margin: 0;
		list-style-type: none;
		display: inline-block;
		position: relative;
		padding-top: 3px;
	}
	
	#dock-container ul {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 0;
	}
		
	 #dock-container li img {
		width: 48px;
		height: 48px;
		-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
		-webkit-transition: all 0.3s;
		-webkit-transform-origin: 50% 100%;
	}

	#dock-container li:hover img { 
		-webkit-transform: scale(1.65);
		margin: 0 0.5em;
	}
			
	#dock-container li:hover + li img, #dock-container li.prev img {
		-webkit-transform: scale(1);
		margin: 0 0;
	}

	#dock-container li span {
		display: none;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	
	#dock-container li#active span {
		display: none;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	
	#dock-container li#active span {
		display: block;
		color: #fff;
	}

	#dock-container li#active .textMenu {
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		padding: 2px;
	}
			
	#dock-container li:hover span {
		display: block;
		color: #fff;
	}

	#dock-container .textMenu {
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		padding: 2px;
	}
	
	/* Modal Avatar */
		
	.modal-content {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: LightSlateGray;
		background-clip: padding-box;
		border: 2px solid black;
		border-radius: .3rem;
		outline: 0;
		padding: 5px;
	}
	
	.modal-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding-top: 2px;
		padding-bottom: 5px;
		padding-left: 2px;
		border: none;
		border-top-left-radius: .3rem;
		border-top-right-radius: .3rem;
	}	

	.modal-title {
		position: relative;
		height: 30px;
		top: 3px;
		color: #ffffff;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}
	
	.modal-title-Sub {
		position: relative;
		height: 30px;
		color: #ffffff;
		font: normal 60%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}
	
	.modal-header .close {
	    padding-top: 18px;
	    padding-right: 3px;
	    margin: -1rem -1rem -1rem auto;
	}

	button.close {
	    padding: 0;
	    background-color: transparent;
	    border: 0;
	    -webkit-appearance: none;
	}

	.modal-dialog.modal-notify .close {
    	opacity: 1;
	}	

	.close {
	    float: right;
	    font-size: 1.5rem;
	    font-weight: 700;
	    line-height: 1;
	    color: #ffffff;
	    text-shadow: 0 1px 0 #ffffff;
	    opacity: 1;
	}

	.modal-body {
		width: 100%;
	    position: relative;
	    -webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    margin: 5px;
	    padding: 5px;
	    background-color: WHITESMOKE;
	    border-radius: 5px;
	}
	
	#modalBox {
		width: 100%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}
	
	#modalBoxContent {
		max-width: 100%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}
	
	#modalBoxContentProfil{
		max-width: 100%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 5px;
		padding-left: 5px;
	}
	
	.flex-container-modalAvatar {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-modalAvatar > div {
		border: 1px solid darkred;
		border-radius: 5px;
		color: white;
		height: 100%;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.flex-container-modalAvatar > div.infoBoxGoodies {
		border: none;
		border-radius: 5px;
		color: black;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.imgModalAvatar {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
	}
	
	.flex-container-BoxGoodies {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}
	
	.flex-container-BoxGoodies > div {
		border-radius: 5px;
		margin: 3px;
		text-align: center;
	}
	
	.imgModalBoxGoodies {
		position: relative;
		height: auto;
		border: 2px solid MediumSlateBlue;
		width: 70%;
		border-radius: 5px;
	}
	
	.imgModalBoxXPAction {
		position: relative;
		height: auto;
		border: 2px solid darkred;
		width: 70%;
		border-radius: 5px;
	}
	
	.imgModalBoxEvent {
		position: relative;
		height: auto;
		border: 2px solid darkturquoise;
		width: 70%;
		border-radius: 5px;
	}
	
	.imgModalBoxNews {
		position: relative;
		height: auto;
		border: 2px solid orangered;
		width: 70%;
		border-radius: 5px;
	}
	
	.flex-container-BoxMesGoodies {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}
	
	.flex-container-BoxMesGoodies > div {
		border-radius: 5px;
		margin: 3px;
		text-align: center;
	}
	
	.imgModalBoxMesGoodies {
		position: relative;
		height: auto;
		border: 2px solid orangered;
		width: 70%;
		border-radius: 5px;
	}
	
	.MediumSlateBlue {
		color: MediumSlateBlue;
	}
	
	.flex-container-modalMenuAvatar {
		display: flex;
		align-items: stretch;
		padding: 2px;
	}

	.flex-container-modalMenuAvatar > div {
		border: 1px solid darkred;
		background-color: black;
		border-radius: 5px;
		color: white;
		height: 30px;
		margin: 3px;
		text-align: center;
		padding-top: 2px;
	}
	
	.imgModalMenuAvatar {
		position: relative;
		height: auto;
		width: 100%;
	}
	
	.flex-container-modalAvatarImg {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modalAvatarImg > div {
		border: 1px solid darkred;
		width: 21%;
		margin: 6px;
		border-radius: 5px;
		color: white;
		height: 100%;
		margin: 3px;
		text-align: center;
		font-size: 70%;
	}
	
	.imgModalMenuAvatar {
		position: relative;
		height: auto;
		width: 100%;
	}

	.textModalMenuAvatar {
		position: relative;
		top: 0;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	/* Modal Mon profil */
	
	#modalProfil {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-right: auto;
		padding-left: auto;
	}
	
	#modalTitle {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 5px;
		padding-bottom: 10px;
		padding-right: 0;
		padding-left: 0;
	}
	
	.modal-body-compet {
	    position: relative;
	    background-color: WHITESMOKE;
	    border-radius: 5px;
	}
	
	.modal-bodyProfil {
	    position: relative;
	    -webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	    margin: 5px;
	    padding: 0.5rem;
	    background-color: WHITESMOKE;
	    border-radius: 5px;
	}
	
	.flex-container-modal-compet {
		width: 300px;
		display: flex;
	}
	
	.flex-container-modal-compet > div {
		padding: 10px;
	}
	
	.flex-container-modal-Title {
		max-width: 100%;
		display: flex;
		margin-bottom: 0;
	}
	
	.columnProfil {
		margin: 3px;
		flex-grow: 1;
		flex-shrink: 1;
	}
	
	.flex-container-modalProfil > div {
		top: 10px;
	}

	.flex-container-modal-Title > div {
		top: 10px;
	}
	
	.imgModalFlags {
		height: 50px;
		width: 50px;
	}
		
	.imgModalCup {
		height: 30px;
		width: 30px;
	}
	
	.modal-Profil {
		position: relative;
		top: 13px;
		color: #000000;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.modal-Place {
		position: relative;
		top: 5px;
		color: orangered;
		font: normal 130%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;
	}
	
	.modal-Age {
		position: relative;
		top: 13px;
		color: #000000;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.imgModalAvatarProfil {
		height: 50px;
		width: 50px;
	}
	
	.flex-container-modal-Niveau {
		max-width: 100%;
		display: flex;
		margin-bottom: 0;
	}
	
	.flex-container-modal-Niveau-Classement {
		position: relative;
		background-color: black;
		border-radius: 5px;
		padding: 5px;
		margin-bottom: 0;
	}
	
	.modal-Niveau-Title {
		position: relative;
		margin-top: 0;
		background-color: orangered;
		padding: 5px;
		color: #000000;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
		
	.flex-container-modal-Niveau-PF {
		margin-top: 5px;
		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Niveau-PF > div {
		border: 1px solid black;
		width: 46%;
		border-radius: 5px;
		height: 30px;
		margin: 3px;
	}
	
	.flex-container-modal-Action {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.flex-container-modal-Action > div {
		border: 1px solid black;
		width: 100%;
		border-radius: 5px;
		height: 30px;
		margin: 3px;
	}	
	
	.imgModalNiveau {
		position: relative;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
	}
	
	/* Banner */
	div h2 {
		background: #08b;
		background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
		border: 0 solid rgba(0,0,0,0.2);
		color: #ffffff;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
		position: relative;
	}

	div.banner-yellow h2 {
		background-color: yellow;
		color: #000000;
	}	
	
	div.banner-green h2 {
		background-color: lime;
		color: #000000;
	}	
	
	div.banner-darkred h2 {
		background-color: darkred;
		color: #ffffff;
	}	
	
	div.banner-darkturquoise h2 {
		background-color: darkturquoise;
		color: #ffffff;
	}	
	
	div.banner {
	  z-index: -1;
	}
	div.banner h2 {
		width: 100%;
		border-width: 0 1px 1px 1px;
		border-color: rgba(0,0,0,0.1);
		box-shadow: 0 0 4px rgba(0,0,0,0.3);
		display: inline-block;
		margin: auto;
		padding: 4px 28px;
	}
	div.banner h2:before, div.banner h2:after {
		bottom: 4px;
		box-shadow: 0 6px 5px rgba(0,0,0,0.4);
		content: "";
		height: 10px;
		position: absolute;
		width: 47%;
		z-index: -1;
	}
	div.banner h2::before {
		left: 3%;
		transform: rotate(-3.5deg);
	}
	div.banner h2::after {
		right: 3%;
		transform: rotate(3.5deg);
	}
	
	/* Modal footer */
		
	.modal-footer {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-box-pack: end;
	    -ms-flex-pack: end;
	    justify-content: center;
	    padding: 10px;
	    border: none;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
	}
	
	/* Paramètres */
	
	.flex-container-modal-Parametre {
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Parametre > div {
		border: 1px solid black;
		width: 100%;
		border-radius: 5px;
		height: 30px;
		margin: 3px;
	}
	
	.columnParametreTexte {
		position: relative;
		padding-top: 6px;
		padding-left: 3px;
		width: 60%;
		color: #000000;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnParametreButtonYes {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 40%;
		text-align: center;
		color: white;
		background-color: green;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnParametreButtonNo {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 40%;
		text-align: center;
		color: white;
		background-color: red;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnParametreButton {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 40%;
		text-align: center;
		color: white;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	a:hover {
		text-decoration: none;
		color: #ffffff;
	}
		
	.columnParametreButtonGd {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 100%;
		text-align: center;
		color: white;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	/* Langues */
	
	.small {
		top: 32px;
	}
	
	.columnParametreButtonLangue {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 3px;
		width: 100%;
		text-align: center;
		color: #ffffff;
		background-color: orangered;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
	}
	
	/* Birth */
	
	.columnParametreButtonBirth {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 3px;
		width: 100%;
		text-align: center;
		color: #ffffff;
		background-color: orangered;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
	}
	
	.flex-container-modal-Birth {
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Birth > div {
		border: 1px solid black;
		width: 30%;
		border-radius: 5px;
		height: 30px;
		margin: 3px;
	}
	
	/* Pseudo */
	
	.loginmodal-container {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	
	.loginmodal-container h1 {
		text-align: center;
		color: #000000;
		font: normal 160%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}

	.loginmodal-container input[type=text] {
		width: 90%;
		margin-top: 10px;
		height: 44px;
		color: #000000;
		font: normal 160%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
		text-align: center;
		margin-bottom: 10px;
		-webkit-appearance: none;
		background: #fff;
		border: 1px solid #d9d9d9;
		border-top: 1px solid #c0c0c0;
		/* border-radius: 2px; */
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		padding: 10px;
	}

	.loginmodal-container input[type=text]:hover, input[type=password]:hover {
		border: 1px solid #b9b9b9;
		border-top: 1px solid #a0a0a0;
		-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	}

	.loginmodal {
		text-align: center;
		font: normal 160%/1 "bangers", Helvetica, sans-serif;
		height: 36px;
		padding: 0 8px;
		/* border-radius: 3px; */
		/* -webkit-user-select: none;
		user-select: none; */
	}
	
	.flex-container-modal-Pseudo {
		margin-top: 15px;
		margin-bottom: 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Pseudo > div {
		border: 1px solid black;
		width: 80%;
		border-radius: 5px;
		margin: 3px;
	}
	
	.columnParametreButtonPseudo {
		padding: 10px;
		border-left: 1px solid black;
		border-radius: 0 5px 5px 0;
		text-align: center;
		color: #ffffff;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	/* Country */
	
	.columnParametreButtonCountry {
		position: relative;
		padding-top: 6px;
		width: 100%;
		text-align: center;
	}
	
	.flex-container-modal-Country {
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Country > div {
		width: 20%;
		padding: 3px;
	}
	
	.imgModalFlagsCountry {
		height: auto;
		width: 100%;
	}
	
	/* Player Team */
	
	.flex-container-modal-MyTeam h1 {
		text-align: center;
		color: #000000;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		margin-top: 10px;
	}
	
	.flex-container-modal-BigTitle h1 {
		text-align: center;
		color: #000000;
		font: normal 200%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		margin-top: 10px;
	}
	
	.flex-container-modal-OtherTeam h1 {
		text-align: center;
		color: orangered;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,69,0,0.5) ;
	}
	
	.flex-container-modal-TextXPAction h1 {
		text-align: center;
		color: orangered;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		padding: 10px;
		margin-top: 10px;
	}
	
	.table td, .table th {
		padding: .75rem;
		vertical-align: top;
	}
	
	.flex-container-modal-OtherTeam h5 {
		margin-top: 10px;
		text-align: center;
		color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		padding: 5px;
	}
	
	.flex-container-modal-OtherTeam h6 {
		margin-top: 10px;
		text-align: center;
		color: orangered;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		padding: 5px;
	}
	
	.flex-container-modal-OtherTeam-Img {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-OtherTeam-Img > div {
		border: 1px solid SteelBlue;
		width: 45%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.flex-container-modal-OtherTeam-Img > a:hover {
		text-decoration: none;
	}

	.OtherTeam {
		position: relative;
		width: 50%;
		max-width: 300px;
	}
	
	.OtherTeam2 {
		position: relative;
		width: 100%;
		max-width: 300px;
	}
	
	.flex-container-modal-Goodies-Img {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-Goodies-Img > span {
		border: 1px solid orangered;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-Goodies-Img > a:hover {
		text-decoration: none;
	}
	
	.borderMatchAgenda {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.borderMatchAgenda > span {
		width: 40%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 5px;
		margin: 5px;
	}
	
	.borderMatchAgenda > a:hover {
		text-decoration: none;
	}
	
	.flex-container-modal-XPAction-Img {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.flex-container-modal-XPAction-Img {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-XPAction-Img > span {
		border: 1px solid darkred;
		width: 23%;
		max-width: 120px;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}

	.flex-container-modal-XPAction-Img > a:hover {
		text-decoration: none;
	}
	
	.flex-container-modal-Event4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
	}

	.flex-container-modal-Event4 > span {
		border: 1px solid darkturquoise;
		width: 23%;
		max-width: 120px;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}

	.flex-container-modal-Event4 > a:hover {
		text-decoration: none;
	}
	
	.overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 5px;
		background-color: orangered;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlayGoodies {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: orangered;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlay2 {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: orangered;
		width: 100%;
		height: 100%;
		padding: 0;
	}
	
	.overlayXP {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: darkred;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlayXPNo {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: Gainsboro;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlayOtherTeam {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: SteelBlue;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlayEvent {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: darkturquoise;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.overlayEventNo {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: Gainsboro;
		border-radius: 5px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform:scale(0);
		transition: .1s ease;
		padding: 0;
	}
	
	.OtherTeam:hover .overlay {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlay {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlayXP {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlayXPNo {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlayEvent {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlayEventNo {
		transform: scale(1)
	}
	
	.OtherTeam:hover .overlayOtherTeam {
		transform: scale(1)
	}
	
	.OtherTeam2:hover .overlayGoodies {
		transform: scale(1)
	}

	.actionXPHover:hover .overlay {
		transform: scale(1)
	}
	
	.columnParametreButtonCountry:hover .overlay {
		transform: scale(1)
	}
	
	.textInfo {
		color: #ffffff;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textInfoAmi {
		color: #ffffff;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 65%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textEventCountry {
		color: #ffffff;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textEventCountry2 {
		color: #ffffff;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textActivity {
		color: #ffffff;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
		margin: 0;
	}
	
	.textAction {
		color: #ffffff;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textActivityXP {
		color: #ffffff;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textEvent3 {
		color: #ffffff;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textActivityGoodies {
		color: #ffffff;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textActivityGoodiesSmall {
		color: #ffffff;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textActivityXPNo {
		color: #ffffff;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textInfoXP {
		color: #ffffff;
		font: normal 70%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 85%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textInfoGoodiesHover {
		color: #ffffff;
		font: normal 75%/1 "bangers", Helvetica, sans-serif;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.textInfoGoodies {
		color: #ffffff;
		font: normal 60%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.modal-Team-Title {
		justify-content: center;
		position: relative;
		top: 5px;
		color: #000000;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.modal-Team-Compet {
		justify-content: center;
		position: relative;
		color: #000000;
		font: normal 140%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}

	.modal-Team-Activity {
		position: relative;
		top: 2px;
		color: #000000;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}	
	
	.yellow {
		background-color: yellow;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.red {
		background-color: red;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.flamDown {
		position: relative;
		color: red;
		margin-left: 8px;
		top: 8px;
	}	
	
	.flamUp {
		position: relative;
		color: green;
		margin-left: 8px;
		top: 8px;
	}

	/* Résultats */
	
	#resultatHeader {
		min-height: 120px;
		margin: 0;
		padding: 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
		background: SteelBlue; /* Old browsers */
	}
	
	#resultatBoxFlags {
		width: 100%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
	}
	
	.resultatBody {
		width: 100%;
	    position: relative;
	    -webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    margin: 3px;
	    padding: 3px;
	}
	
	.flex-container-Resultat {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.flex-container-ResultatMesEquipes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.flex-container-ResultatMesEquipes > div {
		border: 1px solid orangered;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
		}
		
	.flex-container-ResultatMesEquipes > a:hover {
		text-decoration: none;
	}
	
	.flex-container-MesEquipes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.flex-container-MesEquipes > div {
		border: 1px solid orangered;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
		margin-top: 10px;
		}
		
	.flex-container-MesEquipes > a:hover {
		text-decoration: none;
	}
	
	.flex-container-mesAmis {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.flex-container-mesAmis > div {
		border: 1px solid orangered;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-mesAmis > a:hover {
		text-decoration: none;
	}
	
	.imgTitle {
		position: relative;
		width: 100%;
		bottom: 0;
	}
	
	.resultatTitle {
		position: relative;
		top: 65px;
		color: #ffffff;
		font: normal 160%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}
	
	/* Banner2 */
	div.banner2 h2 {
		background: orangered;
		background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
		border: 0 solid rgba(0,0,0,0.2);
		color: #ffffff;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
		position: relative;
	}	
	
	div.banner2 {
	  z-index: -1;
	}
	div.banner2 h2 {
		width: 100%;
		border-width: 0 1px 1px 1px;
		border-color: rgba(0,0,0,0.1);
		box-shadow: 0 0 4px rgba(0,0,0,0.3);
		display: inline-block;
		margin: auto;
		padding: 4px 28px;
	}
	div.banner2 h2:before, div.banner2 h2:after {
		bottom: 4px;
		box-shadow: 0 6px 5px rgba(0,0,0,0.4);
		content: "";
		height: 10px;
		position: absolute;
		width: 47%;
		z-index: -1;
	}
	div.banner2 h2::before {
		left: 3%;
		transform: rotate(-3.5deg);
	}
	div.banner2 h2::after {
		right: 3%;
		transform: rotate(3.5deg);
	}
	
	/* Menu2 */

	#dock-container2 {
		height: 60px;
		padding: 0;
		margin: 0;
		bottom: 0;
		background-color: orangered;
		border: none;
		border-top: 3px solid darkred;
	}
	
	#dock-container2 li#active img {
		-webkit-transform: scale(1.65);
		margin: 0 0.5em;
	}

	#dock-container2 li {
		width: 17%;
		padding: 0;
		margin: 0;
		list-style-type: none;
		display: inline-block;
		position: relative;
		padding-top: 3px;
	}
	
	#dock-container2 ul {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 0;
	}
		
	 #dock-container2 li img {
		width: 48px;
		height: 48px;
		-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
		-webkit-transition: all 0.3s;
		-webkit-transform-origin: 50% 100%;
	}

	#dock-container2 li:hover img { 
		-webkit-transform: scale(1.65);
		margin: 0 0.5em;
	}
			
	#dock-container2 li:hover + li img, #dock-container2 li.prev img {
		-webkit-transform: scale(1);
		margin: 0 0;
	}

	#dock-container2 li span {
		display: none;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	
	#dock-container2 li#active span {
		display: none;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	
	#dock-container2 li#active span {
		display: block;
		color: #fff;
	}

	#dock-container2 li#active .textMenu {
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		padding-bottom: 5px;
	}
			
	#dock-container2 li:hover span {
		display: block;
		color: #fff;
	}

	#dock-container2 .textMenu {
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		padding-bottom: 5px;
	}
	
	.pxBottom {
		margin-bottom: 70px;
	}
	
	.modal-content-resultats {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: SteelBlue;
		background-clip: padding-box;
		border: 2px solid black;
		border-radius: .3rem;
		outline: 0;
		padding: 5px;
	}
		
	.columnGameNumber2 {
		border-left: 1px solid black;
		position: relative;
		border-radius: 0 5px 5px 0;
		padding-top: 6px;
		width: 30%;
		text-align: center;
		color: white;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnClassementNumber2 {
		border-left: 1px solid black;
		position: relative;
		padding-top: 6px;
		width: 25%;
		text-align: center;
		color: white;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	.columnClassement2 {
		border-left: 1px solid black;
		position: relative;
		padding-top: 6px;
		width: 15%;
		text-align: center;
		color: white;
		background-color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	table .thTif, table .tdTif {
		padding: 5px;
		padding-left: 5px;
		padding-right: 5px;
		margin: 0;
		font-weight: normal;
	}
	
	table .tdMatch {
		padding: 0;
		margin: 0;
		font-weight: normal;
	}
	
	.trResultat:nth-child(even) {
		background-color: LightSteelBlue;
	}
	
	.trResultat1:nth-child(even) {
		background-color: Coral;
	}
	
	table .thTif, table .tdResultatDate {
		border-top: none;
	}
	
	tbody {
		border-top: none;
	}
	
	.tableText {
		color: #000000;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
	}
	
	.tableTextEvent {
		color: #000000;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
	}
	
	.tableTextClassement {
		color: #000000;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}
	
	table .tdEvent {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 8px;
		padding-bottom: 5px;
		margin: 0;
		font-weight: normal;
		width: 28%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}
	
	table .tdEvent1 {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 14px;
		padding-bottom: 5px;
		margin: 0;
		font-weight: normal;
		width: 8%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}	
	
	table .tdEvent2 {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 14px;
		padding-bottom: 5px;
		margin: 0;
		font-weight: normal;
		width: 28%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}
	
	.col1 {
		width: 5%;
	}
	
	.col2 {
		width: 65%;
	}
	
	.col3 {
		width: 10%;
	}
	
	.col4 {
		width: 6%;
	}
	
	.flex-container-modalMenuResultats {
		display: flex;
		align-items: stretch;
		padding: 2px;
		margin-bottom: 3px;
	}

	.flex-container-modalMenuResultats > a {
		background-color: orangered;
		border-radius: 5px;
		color: white;
		height: 100%;
		margin: 3px;
		text-align: center;
		padding: 5px;
	}
	
	.textModalMenuResultats {
		position: relative;
		top: 0;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
	}
	
	.table {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	table .borderMatchAgenda {
		border: none;
	}
	
	table .matchAgenda {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin: 0;
		font-weight: normal;
		width: 50%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border-left: 1px solid lightgray;
		border-top: none;
	}
	
	table .matchEvent1 {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
		margin: 0;
		font-weight: normal;
		width: 50%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border-top: none;
	}
	
	table .borderResultat {
		border-top: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
	}
	
	table .tdResultat {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 8px;
		padding-bottom: 5px;
		margin: 0;
		font-weight: normal;
		width: 20%;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}
	
	table .tdResultat1 {
		width: 40%;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 25px;
		margin: 0;
		font-weight: normal;
		color: #000000;
		font: normal 110%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}
	
	table .tdResultat2 {
		width: 40%;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 15px;
		margin: 0;
		font-weight: normal;
		color: #000000;
		font: normal 110%/1 "bangers", Helvetica, sans-serif;
		border: none;
	}
	
	table .tdResultatDate {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 6px;
		padding-bottom: 3px;
		margin: 0;
		font-weight: normal;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		background-color: black;
		border: none;
	}
	
	.linkEvent {
		color: black;
	}
	
	.linkEvent:hover {
		color: orangered;
	}
	
	.green {
		color: green;
	}
	
	.boxGreen {
		background-color: green;
		padding: 20px;
		text-align: center;
		margin: 5px;
	}
	
	.boxOrangered {
		background-color: orangered;
		padding: 20px;
		text-align: center;
		color: white;
	}
	
	.modal-footer-event {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: center;
		border: none;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
	}

	/* Match */
	
	#modalTitle {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	
	.flex-container-modal-Match {
		margin-top: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-Match > div {
		border: 1px solid black;
		width: 100%;
		border-radius: 5px;
		height: 30px;
		margin: 3px;
	}	
	
	.match {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-clip: padding-box;
		outline: 0;
		padding: 0;
		margin: 0;
	}

	.matchBox {
		width: 100%;
		height: 100%;
	    position: relative;
	    -webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    margin: 0;
	    padding: 0;
		background-image: url(../images/stade_gd.jpg);
		background-repeat: no-repeat;
		background-position: center;
	}
		
	.resumeMatch {
		width: 100%;
		margin: 0;
		padding: 0;
		color: #ffffff;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.25) ;
	}
		
	.imgModalMatchFlags {
		position: relative;
		height: 50px;
		width: 50px;
	}	
	
	.flex-container-match {
		display: flex;
		width: 100%;
		flex: row;
		align-items: center;
		margin: 0;
		padding: 5px;
		background: rgba(1,1,1,0.5) !important;
		color: #fff;
	}
	
	.flex-container-match > div {
		display: flex;
		flex: row;
		align-items: center;
		width: 31%;
	}
	
	.flex-container-match-flagMatch {
		display: flex;
		flex: row;
		height: 50px;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 10px;
	}
	
	.flagMatch {
		flex-grow: 1;
		text-align: center;
	}
	
	.scorePF {
		background-color: white;
		width: 100%;
		height: 30px;
		flex-grow: 1;
		text-align: center;
		color: #000000;
		font: normal 110%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
		padding: 5px;
		padding-top: 8px;
		margin: 5px;
	}
	
	.statutMatch {
		background-color: green;
		border-radius: 3px;
		width: 70%;
		margin: 3px;
		padding: 3px;
		flex-grow: 2;
		text-align: center;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
	}
	
	.statutMatchBientot {
		background-color: orange;
		border-radius: 3px;
		width: 70%;
		margin: 3px;
		padding: 3px;
		flex-grow: 2;
		text-align: center;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
	}
	
	.statutMatchTermine {
		background-color: red;
		border-radius: 3px;
		width: 70%;
		margin: 3px;
		padding: 6px;
		flex-grow: 2;
		text-align: center;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
	}
	
	.flex-container-teamMatch {
		display: flex;
		flex: row;
		height: 50px;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.teamMatch {
		flex-grow: 2;
		width: 100%;
		height: 30px;
		flex-grow: 1;
		text-align: center;
		color: #000000;
		font: normal 120%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
		padding: 5px;
		padding-top: 7px;
		margin: 5px;
		background: rgba(1,1,1,0.5) !important;
		color: #fff;
	}
	
	.scoreReal {
		border-radius: 3px;
		width: 50%;
		margin: 3px;
		padding: 3px;
		flex-grow: 1;
		text-align: center;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
		background: rgba(1,1,1,0.5) !important;
		color: #fff;
	}
	
	.flex-container-match-tonScore {
		display: flex;
		flex: row;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
	
	.tonScore {
		background-color: white;
		width: 30%;
		border-radius: 5px;
		text-align: center;
		color: #000000;
		font: normal 130%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
		padding: 10px;
		margin: 5px;
	}

	.flex-container-match-barreProgression {
		display: flex;
		flex: row;
		height: 30px;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	
	.barreProgression {
		width: 100%;
		text-align: center;
		margin: 5px;
		font: normal 90%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.25);
	}
	
	.left {
		justify-content: left;
	}
	
	.right {
		justify-content: right;
		text-align: right;
	}
	
	.center {
		justify-content: center;
	}
	
	.modal-body-match {
		width: 100%;
	    position: relative;
	    -webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    padding: 1rem;
	    background-color: WHITESMOKE;
	}
	
	.flex-container-modal-matchStats {
		max-width: 100%;
		display: flex;
	}
	
	/* Social */
	
	
	#socialHeader {
		min-height: 120px;
		margin: 0;
		padding: 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
		background: Coral; /* Old browsers */
	}

	.flex-container-Social {
		display: flex;
		align-items: stretch;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.flex-container-Social > a {
		background-color: orangered;
		border-radius: 5px;
		color: white;
		height: 30px;
		margin: 3px;
		text-align: center;
		padding-top: 3px;
	}
	
	.textModalSocial {
		position: relative;
		top: -2px;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(255,255,255,0.5) ;
	}
	
	/* Fan Shop */
	
	#fanShopHeader {
		min-height: 120px;
		margin: 0;
		padding: 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
		background: MediumSlateBlue; /* Old browsers */
	}
	
	.textBoxFanshop {
		color: lime;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
	}
	
	.textBoxFanshop2 {
		color: black;
		background-color: lime;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		padding: 3px;
		border-radius: 5px;
	}
	
	.textBoxGoodies {
		color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 7px;
	}
		
	.textBoxGoodiesNiveau {
		color: white;
		background-color: orangered;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxGoodiesNiveauNo {
		color: white;
		background-color: MediumSlateBlue;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxGoodiesTeam {
		color: orangered;
		font: normal 70%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxGoodiesTeamNo {
		color: MediumSlateBlue;
		font: normal 70%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxGoodiesNo {
		color: MediumSlateBlue;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
	}
	
	.textBoxGoodiesDollar {
		color: white;
		background-color: lime;
		border-radius: 5px;
		padding-right: 8px;
		padding-left: 8px;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
	}
	
	.textBoxFanshopToken {
		color: yellow;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
	}
	
	.textBoxFanshopAction {
		color: darkred;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
	}
	
	.textBoxFanshopGoodies {
		color: orangered;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-top: 5px;
	}
	
	.textBoxFanshopGoodiesNo {
		color: MediumSlateBlue;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-top: 5px;
	}
	
	.flex-container-modal-FanShop-Action {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-FanShop-Action > a {
		border: 1px solid darkred;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		padding-bottom: 5px;
		margin: 2px;
	}
	
	.flex-container-modal-FanShop-Goodies {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-FanShop-Goodies > a {
		border: 1px solid orangered;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-FanShop-Goodies-small {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-FanShop-Goodies-small > div {
		width: 31%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}

	
	.flex-container-modal-FanShop-Goodies-No {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-FanShop-Goodies-No > a {
		border: 1px solid MediumSlateBlue;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-FanShop-Dollar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-FanShop-Dollar > a {
		border: 1px solid lime;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}

	.flex-container-modal-FanShop-Token {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-FanShop-Token > a {
		border: 1px solid yellow;
		width: 31%;
		border-radius: 5px;
		color: white;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.imgModalAction {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid darkred;
		background-color: white;
		margin-top: 5px;
	}
	
	.imgModalGoodies {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid orangered;
	}
	
	.imgModalGoodiesNo {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid MediumSlateBlue;
		background-color: white;
	}
	
	.arrow {
		position: relative;
		top: 0;
	}
	
	.darkredProgress {
		background-color: darkred;
		border: 1px solid darkred;
	}
	
	.MediumSlateBlueProgress {
		background-color: MediumSlateBlue;
		border: 1px solid MediumSlateBlue;
	}
	
	.orangeredProgress {
		background-color: orangered;
		border: 1px solid orangered;
	}
	
	.goodiesNoProgress {
		background-color: MediumSlateBlue;
		border: 1px solid MediumSlateBlue;
	}
	
	.progress {
		text-align: center;
		margin-bottom: 5px;
		height: 20px;
	}
	
	.progress-value {
		position: absolute;
		margin-top: 4px;
		right: 0;
		left: 0;
		color: white;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-decoration: none;
	}
		
	.infoTesEquipesTooltip, .infoTesBonnesAffairesTooltip, .infoPorteMonnaieTooltip, .infoTesTokensTooltip, .infoNivCompPf, .infoInventaire, .infoInventaireFringe, .infoInventaireDeco, .infoAgenda, .infoEvent, .infoOtherEvent {
		position: absolute;
		top: 5px;
		right: 5px;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5) ;
	}
	
	.modal-content-fanShop {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: MediumSlateBlue;
		background-clip: padding-box;
		border: 2px solid black;
		border-radius: .3rem;
		outline: 0;
		padding: 5px;
	}
	
	/* Mes amis */
	
	.modal-content-Social {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: Coral;
		background-clip: padding-box;
		border: 2px solid black;
		border-radius: .3rem;
		outline: 0;
		padding: 5px;
	}
	
	/* Collection */
	
	#collectionHeader {
		min-height: 120px;
		margin: 0;
		padding: 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
		background: orange; /* Old browsers */
	}

	.flex-container-modal-action-xp {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-action-xp > a {
		border: 2px solid darkred;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-action-xp-small {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-action-xp-small > div {
		width: 31%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.flex-container-modal-event3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-event3 > div {
		width: 31%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.flex-container-modal-action-xp-No {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-action-xp-No > div {
		border: 1px solid MediumSlateBlue;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-action-xp-small-No {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 10px;
	}

	.flex-container-modal-action-xp-small-No > div {
		width: 22%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.textBoxActionXP {
		color: darkred;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		padding-top: 5px;
	}
	
	.textBoxActionXPNo {
		color: Gainsboro;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-top: 5px;
	}
	
	.textBoxActionXPBox {
		color: white;
		background-color: darkred;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 0;
	}
	
	.textBoxEvent3 {
		color: white;
		background-color: orangered;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxEvent3-1 {
		color: white;
		background-color: orangered;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
	}
	
	.textBoxActionXPBoxNo {
		color: white;
		background-color: Gainsboro;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.darkturquoiseProgress {
		background-color: darkred;
		border: 1px solid darkred;
	}
	
	.GainsboroProgress {
		background-color: Gainsboro;
		border: 1px solid Gainsboro;
	}
	
	.imgModalActionXP {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid darkred;
		padding: 7px;
	}
	
	.imgModalEvent3 {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid orangered;
		padding: 7px;
	}
	
	.imgModalActionXPNo {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid Gainsboro;
		padding: 7px;
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);	
		}
	
	.textBoxActionXP2 {
		color: darkred;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 7px;
	}
	
	.flex-container-modal-action-event {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flex-container-modal-action-event > a {
		border: 2px solid darkturquoise;
		background-color: Gainsboro;
		width: 31%;
		border-radius: 5px;
		text-align: center;
		padding: 2px;
		margin: 2px;
	}
	
	.flex-container-modal-action-event-small {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-action-event-small > div {
		width: 31%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.flex-container-modal-action-event-No {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.flex-container-modal-action-event-No > div {
		width: 22%;
		text-align: center;
		padding: 0;
		margin: 2px;
	}
	
	.textBoxActionEvent {
		color: darkturquoise;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-top: 5px;
	}
	
	.textBoxActionXPNo {
		color: Gainsboro;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-top: 5px;
	}
	
	.textBoxActionEventBox {
		color: white;
		background-color: darkturquoise;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.textBoxActionGoodies {
		color: white;
		background-color: orangered;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}

	
	.textBoxActionEventBoxNo {
		color: white;
		background-color: MediumSlateBlue;
		border-radius: 5px;
		padding: 5px;
		font: normal 80%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 0;
		margin-top: 5px;
	}
	
	.darkturquoiseProgress {
		background-color: darkturquoise;
		border: 1px solid darkturquoise;
	}
	
	.imgModalActionEvent {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid darkturquoise;
		padding: 7px;
	}
	
	.imgModalActionGoodies {
		position: relative;
		height: auto;
		width: 100%;
		border-radius: 5px;
		border: 2px solid orangered;
		padding: 7px;
	}
	
	.textBoxActionEvent2 {
		color: darkturquoise;
		font: normal 100%/1 "bangers", Helvetica, sans-serif;
		text-align: center;
		margin-bottom: 7px;
	}
	
	.modal-content-collection {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: orange;
		background-clip: padding-box;
		border: 2px solid black;
		border-radius: .3rem;
		outline: 0;
		padding: 5px;
	}
	
	.actionCard {
		position: relative;
		width: 50%;
		max-width: 300px;
	}
	
	.actionCard2 {
		position: relative;
		width: 100%;
		padding-left: 4px;
		padding-right: 4px;
		margin-top: 10px;
	}
	
}