@import url('/css/trophycolors.css');
@import url('/css/jquery-glitch.css');

/* Menu */
#searchResult .modal-title {
	position: relative;	
}
#searchLink {
	width: 150px;
}
#searchInput {
	width: 230px;
	display: inline-block;
}
#searchclear {
    position: absolute;
    right: 10px;
    top: 3px;
    height: 14px;
    margin: auto;
    cursor: pointer;
    color: #ccc;
	transition: all .2s;
}
#searchclear:hover {
	color: #aaa;
}
.loadInABox {
	display: none;
    position: absolute;
    left: 0px;
    top: -5px;
    height: auto;
    margin: auto;
    cursor: pointer;
    color: #ccc;
	transition: all .2s;
	z-index: 100;
}
.loadInABox + input[type="search"] {
	padding-left: 30px;
}
#searchResult .card-img {
	width: 100px;
	height: auto;
}
.error {
  color: #5a5c69;
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}
/* Supprimer le searchClear fournit par Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration { display: none; }

img.avatar {
	border-radius: 8px;
}
/* !Menu */


/* Jeux */
#listeJeux .card-img, #listeJeuxScoreur .card-img, #wrapUp .card-img {
	width: 100px;
	height: auto;
}

/* Galerie */
#galerieControls .modal-title {
	background-color: white;
}
#galerieControls .modal-title img.avatar {
	height: 20px;
	width: auto;
}

/* !Galerie */

/* quiz-carousel Galerie */

#quiz-hints .carousel-control-prev, #quiz-hints .carousel-control-next {
	background: none;
	border: none;
}

/* !quiz-carousel Galerie */

/* Filtres */
.filters-card label {
	width: 100%;
}
.filters-card ul {
	max-height: 300px;
	overflow: auto;
}
/* !Filtres */


/* Misc */
.cursor-pointer {
	cursor: pointer;
}
.cursor-disabled {
	cursor: not-allowed;
}
a.btn img {
	height: 20px;
	width: auto;
}
.img-m63 img,
img.img-m63 {
	max-height: 63px !important;
	max-width: 100%;
}
.img80 img,
img.img80 {
	height: 80px !important;
	width: auto;
}
.img50 img,
img.img50 {
	height: 50px !important;
	width: auto;
}
.img40 img,
img.img40 {
	height: 40px !important;
	width: auto;
}
.img30 img,
img.img30 {
	height: 30px !important;
	width: auto;
}
.img20 img,
img.img20 {
	height: 20px !important;
	width: auto;
}
.btn-success .toinvert img,
.btn-outline-secondary:hover .toinvert img,
.btn-secondary.toinvert img {
	-webkit-filter: invert(100%);
    filter: invert(100%);
}
.toinvert img {
	transition: filter .3s, -webkit-filter .3s;
}
.psnavatar {
	width: 15px;
	height: auto;
	border-radius: 8px;
}
.psnavatar-30 {
	width: 30px;
	height: auto;
	border-radius: 8px;
}
.psnavatar-50 {
	width: 50px;
	height: auto;
	border-radius: 8px;
}
.color-transparent {
	color: transparent;
}
.border-debug {
	border: 2px solid red;
}
.blurred {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.grayscale {
	filter: grayscale(100%);
}

.btn img, .h17 img {
	max-height: 17px;
	vertical-align: sub;
}
#toCopy {
	z-index: 99999;
	width: 0;
	height: 0;
	border: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: transparent;
	opacity: 0;
}
.hidden {
	display: none;
}
.w-345 {
	max-width: 345px;
}
.w-253 {
	max-width: 253px;
}
.slightHover {
	transition: all .2s;
}
.slightHover:hover, .slightHover:focus {
	transition: all 0s;
	background-color: #F0F0F0;
}
.transition-05 {
	transition: all .5s;
}
.z-index-under {
	z-index: -100;
}
.sticky-50 {
	top: 50px;
}
.debug {
	position: fixed;
	top: 75px;
	right: 15px;
	min-width: 100px;
	min-height: 100px;
	padding: 8px;
	max-height: 400px;
	max-width: 800px;
	overflow: auto;
	z-index: 10000;
	/* background-color: yellow; */
	/* color: black; */
	/* border: 1px solid black; */
	/* border-radius: 6px; */
	/* text-align: left; */
}
.text-decoration-line-through {
	text-decoration: line-through;
}
.width-0 {
	width: 0;
}
/* !Misc */


/* Scrollbars */
* {
	scrollbar-width: thin;
	scrollbar-color: #bac3d6 #eef3ff;
}
/* !Scrollbars */




/* Toasts */
#toasts {
	position: fixed; 
	z-index: 1000000;
	bottom: 35px; 
	right: 10px; 
	/* width: 100%; */
	/* bottom: 15px; */
	/* margin: auto; */
}
.toast-header img {
	height: 20px;
	width: auto;
}
.toast-body img {
	max-width: 80px;
	height: auto;
}

/* !Toasts */

/* Dashboard */
.hs-bg {
	background-size: cover;
}


/* Médailles */
#medailles {
	position: fixed; 
	z-index: 1000000;
	top: 35px; 
	right: 10px; 
	/* width: 100%; */
	/* bottom: 15px; */
	/* margin: auto; */
}

/* !Médailles */

/* psnId Card */
.psnid-card  {
	margin: 2px;
	width: 150px;
}
/* !psnId Card */

/* Header Carousel */
.carousel-header .carousel-image {
	object-fit: cover;
	min-height: 192px;
	max-height: 192px;
	height: 100%;
}
.carousel-header .carousel-caption {
	left: 20px;
	top: 20px;
	bottom: 20px;
	right: 20px;
	text-align: left;
	padding: 0;
	height: calc(100%-30px);
}
@media all and (max-width: 767.98px) {
	.carousel-header .carousel-caption {
		text-align: center;
	}
	.carousel-header .carousel-item {
		height: 275px;
	}
	.carousel-header .carousel-image {
	  max-height: none;
	}
}
/* !Header Carousel */

/* IconUrl */
.back-gradient {
	background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(226,226,226,1) 50%, rgba(255,255,255,1) 90%); 
}
/* !IconUrl */

/* Game Header */
.header-hscard .avatar {
	border: 3px solid white;
	border-radius: 5px;
	height: 100%;
	max-height: 150px;
	width: auto;
	/* height: auto; */
	/* width: 100%; */
	/* max-width: 279px; */
}
.header-scoreur-card .avatar {
	max-width: 150px;
}
.header-hscard h2 {
	display: inline-block;
	color: white;
	text-shadow: 0px 0px 2px black;
}
.header-hscard .btn-group button {
	margin: 5px;
}
.voteresult {
	width: calc(100% - 73px);
	display: inline-block;
}

/* !Game Header */




/* Scoreur */
.level {
	background: url('/css/star.png') no-repeat center center;
	background-size: contain;
	display: inline-block;
	/* justify-content: center; */
	/* align-items: center; */
	color: white; 
	text-shadow: 0px 0px 2px black;
	font-weight: bold;
	text-align: center;
	padding: 8px;
	padding-bottom: 12px;

}
#listeScoreurs .card-img {
	max-height: 100px;
	width: auto;
}

/* !Scoreur */






/* Trophy Wave */
.trophy-wave {
}
.trophy-wave .col {
	border-radius: 0;
}
.trophy-wave .progress-bar {
	/* width: 100%; */
}
.trophy-wave-overlay {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
}
.progress-bar-overlay {
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
}
.waved {
	border-top-left-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
	border-top-right-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
	overflow: hidden;
}
.waved-start {
	border-top-left-radius: 15px !important;
	border-bottom-left-radius: 5px !important;
	overflow: hidden;
}
.waved-end {
	border-bottom-right-radius: 15px !important;
	border-top-right-radius: 5px !important;
	overflow: hidden;
}
/* !Trophy Wave */

/* Card */
.card {
	transition: all .5s;
}

input[name="cto"]:checked + div.card {
	border-color: var(--silver);
	background-color: #dce1ec !important;
}
/* !Card */

/* Trophy Card */
.tcard .card-img, .tslide .card-img {
	max-height: 100px;
	width: auto;
}
.tcard .podium-hs, .tcard .podium-ps, .tcard .screen-hs, .tcard .upload-hs, .tcard .wap-hs	 {
	display: inline-block;
	padding-bottom: 25px;
	background: transparent bottom center no-repeat;
	width: 100%;
	text-align: center;
	font-weight: normal;
}
.tcard .podium-hs {
	background-image: url('/css/podium-hs.png');
}
.tcard .podium-ps {
	background-image: url('/css/podium-ps.png');
}
.tcard .screen-hs {
	background-image: url('/css/camera-hs.png');
}
.tcard .upload-hs {
	background-image: url('/css/upload-hs.png');
}
.tcard .wap-hs {
	background-image: url('/css/wap-hs.png');
}
.tcard .draggin {
	display: none;
}
.tcard {
	transition: filter .3s;
}
.blurme {
  filter: blur(5px);
}

/* !Trophy Card */


/* Report */
.fullTd {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
/* !Report */



/* Medailles */
.smallMedal span {
	width: 0 !important;
	height: 0 !important;
	overflow: hidden;
	display: block;
}
/* !Medailles */

/* Popover */
.popover-header .psnavatar {
	width: 30px;
	vertical-align: top;
}

/* !Popover */

/* Charts */
.chart {
	vertical-align: middle;
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: inline-block;

}
.chart p {
	text-align: center;
	font-family:'Verdana', sans-serif;
	font-size: 10px;
}

canvas {
	height: 100%;
	width: 100%;
	
}
/* !Charts */









/* 404 */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/archivoblack/v10/HTxqL289NzCGg4MzN6KJ7eW6CYyF-w.ttf) format('truetype');
}
.bigfont {
	font-family: 'Archivo Black', sans-serif;
	font-size: 150px;
}
	.e404 .glitch div {
		width: 100%;
		text-align: center;
	}

/* !404 */






/* Challenges WAP */
.card-img-wrap {
  overflow: hidden;
  position: relative;
}
/* .card-img-wrap:after { */
  /* content: ''; */
  /* position: absolute; */
  /* top: 0; left: 0; right: 0; bottom: 0; */
  /* background: rgba(255,255,255,0.3); */
  /* opacity: 0; */
  /* transition: opacity .25s; */
/* } */
.card-img-wrap img {
  transition: transform 1.75s;
  width: 100%;
}
.hoverZoom:hover .card-img-wrap img {
  transform: scale(1.2);
}
.hoverZoomRotate img {
	transition: transform .5s;
}
.hoverZoomRotate:hover .card-img-wrap img {
  transform: scale(1.5) rotate(8deg);
}
.hoverZoomRotate:hover .card-zoom-desc {
	opacity: 1;
	font-size: initial;
	transition: font-size .2s;
}
.hoverZoomRotate .card-zoom-desc {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: all .75s;
	background: rgba(0,0,0,0.5);
	font-size: 5000%;
	overflow: hidden;
}
.hoverZoomRotate .big-border {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: white;
}
.big-border {
	border: 3px solid white;
}

/* .card-img-wrap:hover:after { */
  /* opacity: 1; */
/* } */
/* !Challenges WAP */






/* Loading */

.shsload {
	display: inline-block;
	overflow: hidden;
	vertical-align: text-bottom;
	position: relative;
	cursor: default;
}
.shsload-mini {
	width: 1rem;
	height: 1.4rem;
	padding-left: .4rem;
	top: .35rem;
	font-size: .7rem;
}
.shsload-small {
	width: 2rem;
	height: 2rem;
	padding-left: .4rem;
	/* top: .35rem; */
	font-size: 1rem;
}
.shsload-medium {
	width: 2.2rem;
	height: 3rem;
	font-size: 2rem;
	padding: 0;
}
.shsload-big {
	width: 3.3rem;
	height: 4rem;
	padding-left: .5rem;
	font-size: 3rem;
}
.shsload i {
	position: absolute;
	opacity: 0;
	-webkit-animation: 3s linear infinite shsloading;
	animation: 3s linear infinite shsloading;
	left: 0;
}
.shsload i:nth-child(1) {
}
.shsload i:nth-child(2) {
	-webkit-animation-delay: .75s;
	animation-delay: .75s;
}
.shsload i:nth-child(3) {
	-webkit-animation-delay: .1.5s;
	animation-delay: 1.5s;
}
.shsload i:nth-child(4) {
	-webkit-animation-delay: 2.25s;
	animation-delay: 2.25s;
}

@-webkit-keyframes shsloading {
	0% {
		opacity: 0;
		transform: rotateY(90deg);
	}
	16.66% {
		opacity: 1;
	}
	33.33% {
		transform: rotateY(-90deg);
		opacity: 0;
	}	
	100% {
		opacity: 0;
	}	
}

@keyframes shsloading {
	0% {
		opacity: 0;
		transform: rotateY(90deg);
	}
	16.66% {
		opacity: 1;
	}
	33.33% {
		transform: rotateY(-90deg);
		opacity: 0;
	}	
	100% {
		opacity: 0;
	}	
}

.ps-blue {
	color: blue;
}
.ps-pink {
	color: pink;
}
.ps-red {
	color: red;
}
.ps-green {
	color: green;
}

/* ! Loading */











/* Secret-Santa */
@font-face {
  font-family: 'Secret Santa';
  font-style: normal;
  font-weight: 400;
  src: url('/css/Kingthings-Christmas-2.2.ttf') format('truetype');
}
.font-santa {
	font-family: 'Secret Santa', sans-serif;
	font-size: 8vw;
}

/* !Secret-Santa */







/* Banner Management */
.existingBanners img, .existingBanners {
	max-width: 750px;
	width: 100%;
}
/* !Banner Management */


/* footer */
/* !footer */





 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
	display:inline-block;
  background-color: transparent;
  width: 80px;
  height: 80px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: 3px;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip-box-inner img {
	width: 100%;
	height: 100%;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  /* background-color: #bbb; */
  /* color: black; */
}

/* Style the back side */
.flip-box-back {
  /* background-color: dodgerblue; */
  /* color: white; */
  transform: rotateY(180deg);
} 










/* Flip thumb */
.thumb {
	display:inline-block;
	width:80px;
	height:80px;
	position:relative;
	margin:1px;
	/* float:left; */
}

	.thumb-wrapper {
		display:block;
		width:100%;
		height:100%;
	}

	.thumb img {
		width:100%;
		height:100%;
		position:absolute;
		display:block;			
				
	}
	
	.thumb .thumb-detail {
		display:block;
		width:100%;
		height:100%;
		position:absolute;			
		background:#fff;		
	}
		

/*
* Without CSS3 Scroll Up Effect
*/
.thumb.scroll {
	overflow: hidden;
}	

	.thumb.scroll .thumb-detail {
		bottom:-280px;
	}
/*
* CSS 3D Card Flip Effect
*/	
.thumb.flip {
	perspective:800px;
}

	.thumb.flip .thumb-wrapper {
		transition: transform .5s;
		transform-style: preserve-3d;			
	}
	
	.thumb.flip .thumb-detail {
		transform: rotateY(-180deg);			   			
	}
	
	.thumb.flip img,
	.thumb.flip .thumb-detail {
		backface-visibility: hidden;
	}
	
	.thumb.flip .flipIt {
		transform: rotateY(-180deg);			
	}
/* ! Flip Thumb */