/*! */
/*! ----------------------------------------------------------- */
/*! 	HEADER GENERAL											*/
/*! ----------------------------------------------------------- */


header#main-header {
	position:fixed;
	top:0; left:0;
	width: 100%;
	z-index: 100;
}

header#main-header #top-banner {
	display: flex;
	width: 940px;
	margin: 0px auto; /* Center the div to the page */
}

@media screen and (max-width: 940px) { header#main-header #top-banner {
		width: 700px;
}}
@media screen and (max-width: 720px) { header#main-header #top-banner {
		width: 96%;
}}

header#main-header #top-banner-left, header#main-header #top-banner-right {
	display: flex;
	width: 100%;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-left {
	width: 65px;
}}

header#main-header #top-banner-right {
	justify-content: flex-end;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-right {
	justify-content: space-around;
}}


/* ======== SITE LOGO ======== */

header#main-header a.logo-homepage {
	width: 233px; height: 55px;
}

header#main-header a.logo-homepage:hover {
	background-color: var(--bg-color-blue-darker);
}

header#main-header .logo-img {
	width: 215px; height: 47px;
	margin: 4px 10px;
}

header#main-header .logo-img.default {
	background: url(../Imageset/main-header-title.svg) top left no-repeat;
}
header#main-header .logo-img.xmas {
	background: url(../Imageset/main-header-title.svg) top left no-repeat;
	/*background: url(../Imageset/main-header-title-xmas.png) top left no-repeat;*/
}

#menu-mobile.droplist {
	display: none;
}

@media screen and (max-width: 940px) {
	
	header#main-header a.logo-homepage {
		width: 75px; height: 55px; overflow: hidden;
	}
	header#main-header .logo-img {
		width: 55px; height: 55px;
		margin: 0px 10px;
	}
	header#main-header .logo-img.default, header#main-header .logo-img.xmas {
		width: 43px; height: 47px;
		background-size: 215px 47px;
		background-position: -62px 0px;
		margin-top: 5px;
	}
	header#main-header .logo-img.xmas {
	}
}

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

	header#main-header a.logo-homepage {
		display: none;
	}
	
	#menu-mobile.droplist {
		display: block;
		/*position: relative;*/
	}
	
	#menu-mobile.droplist .droplist-btn {
		/*cursor: pointer;*/
		width: 50px; height: 55px;
		margin: 0;
		margin-left: 3px; margin-right: 6px;
		background: url(../Imageset/main-header-title.svg) top left no-repeat;
		background-size: 251px 55px;
		background-position: -72px 0px;
	}
	
	header#main-header #menu-mobile .droplist-btn.selected {
		/*filter: invert(0) saturate(10000%) hue-rotate(90deg);*/
	}
		
	#menu-mobile.droplist .droplist-menu {
		/*position: absolute;
		top: 55px;*/
		left: -10px;
		width: 100vw;
		/*box-shadow: 0px 2px 2px var(--color-shadow-black);
		border: none;*/
		background-color: var(--bg-color-blue);
		font-weight: bold;
	}
	
	#menu-mobile.droplist .droplist-menu a .droplist-item div {
		color: var(--bg-color-default);
	}
	
	#menu-mobile.droplist .droplist-menu .droplist-item:hover {
		background-color: var(--bg-color-blue-darker);
	}
	
	/*.vertical-separator {
		width: 1px;
		height: 45px;
		background-color: gray;
		margin-top: 5px;
	}
	
	header#main-header #menu-mobile .option {
		display: flex; align-items: center;
		padding: 10px 20px;
		font-size: 1.2em;
		height: 35px;
	}*/
	
	header#main-header #menu-mobile .droplist-item .icon {
		--icon-size: 30px;
		margin-right: 15px;
		filter: var(--icon-filter-white);
	}
	
	/*header#main-header #menu-mobile .separator {
		border-bottom: 1px #E1E1E5 solid;
	}*/
}



/* =================================================================================================== */
/* ========= MENU ICONS
/* =================================================================================================== */

header#main-header .menu-button {
	display: flex; flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 61px; height: 55px;
	font-size: 11px;
	font-weight: bold;
}

header#main-header a .menu-button {
	color: var(--text-color-orange);
}

header#main-header .menu-button .icon {
	filter: var(--icon-filter-orange);
	margin-bottom: 3px;
}

header#main-header a .menu-button:hover {
	background-color: var(--bg-color-blue-darker);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

header#main-header a:hover {
	text-decoration: none;
}

header#main-header #top-banner-right a .menu-button {
	color: var(--text-color-clear-bgblue);
}

header#main-header #top-banner-right .menu-button .icon {
	filter: var(--icon-filter-white);
}

@media screen and (max-width: 720px) { 
	
	header#main-header .menu-button.menu-games,
	header#main-header .menu-button.menu-programs,
	header#main-header .menu-button.menu-nozone,
	header#main-header .menu-button.menu-dossiers,
	header#main-header .menu-button.menu-videos,
	header#main-header .menu-button.menu-search {
		display: none;
}}



/* =================================================================================================== */
/* ========= NOTIF
/* =================================================================================================== */


header#main-header #notifications-widget .menu-button, 
header#main-header #notifications-widget-disable .menu-button  {
	width: 55px; height: 55px;
}

header#main-header #notifications-widget-disable {
	opacity: .2;
}

@media screen and (max-width: 720px) { #notifications-widget, #notifications-widget-disable {
	width: 61px;
	background-position: -479px 0px;
}}

#notifications-widget .droplist .droplist-btn {
	width: 55px; height: 55px;
	cursor: pointer;
	display: flex; justify-content: center;align-items: center;
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn {
	width: 61px;
}}

#notifications-widget .droplist .droplist-btn .icon {
	filter: var(--icon-filter-white);
}

/* Main button selected */
#notifications-widget .droplist .droplist-btn.selected {
	background-color: var(--bg-color-default-clearer);
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn.selected {
	background-position: -644px 0px;
}}
#notifications-widget .droplist .droplist-btn.selected .icon {
	filter: inherit;
}

/* Counter */
#notifications-widget .droplist .droplist-btn .counter {
	position:absolute; top:9px; left: 28px;
	color: white; text-align: center; 
	font-size: var(--text-size-small); 
	font-weight: bold;
	background-color: red;
	width: 19px; height: 19px;
	padding: 0px;
	border-radius: 100px; /* used to make round button */
	box-shadow: 1px 1px 5px var(--color-shadow-black);
}

#notifications-widget .droplist .droplist-menu {
	width: 350px;
}


#notifications-widget .droplist .droplist-menu .droplist-item {
	white-space: normal; 
}

#notifications-widget .droplist .droplist-menu .user-avatar {
	--user-avatar-icon: 50px;
	margin-right: 10px;
}

/* marked */
#notifications-widget .droplist .droplist-menu .droplist-item.marked {
	 background-color: var(--text-color-orange); /* orange highlist */
}

/* mobile menu: ajust the droplist-menu position & size to fit in a mobile screen */
@media screen and (max-width: 720px) { 
	#notifications-widget .droplist .droplist-menu {
		right:-70px;
		width: 320px;
		font-size: .8em;
	}
	#notifications-widget .droplist .droplist-item {
		padding: 5px 10px;
	}
}


/* =================================================================================================== */
/* ========= USER DROPLIST MENU
/* =================================================================================================== */

#user-widget {
	width: 55px; height: 55px;
}


@media screen and (max-width: 720px) { #user-widget {
	width: 61px;
	background-position: -534px 0px;
}}

/* Droplist button */

#user-widget #user_menu.droplist .droplist-btn {
	width: 55px; height: 55px;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn {
	width: 61px;
}}

#user-widget #user_menu.droplist .droplist-btn.selected { /* with mouse-over we change the background color */
	background-color: var(--bg-color-default-clearer);
}

#user-widget #user_menu.droplist .droplist-btn .user-avatar {
	--user-avatar-size: 33px;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn .user-avatar {
	margin-left: 14px;
}}





/* === DROPLIST MENU (LOGGED) ===  */


#user-widget #user_menu.droplist .droplist-item .icon {
	margin-right: 10px;
	--icon-size: 16px;
	/*filter: var(--icon-filter-white);*/
}


/* === DROPLIST MENU LOGIN & PWD ===  */


#user-widget #user_menu.droplist .droplist-btn .icon.icon-user {
	filter: var(--icon-filter-white);
}
#user-widget #user_menu.droplist .droplist-btn.selected .icon.icon-user {
	filter: inherit;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=text],
#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=password] {
	width: 142px;
	margin-bottom: 20px;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged .btn,
#user-widget #user_menu.droplist .droplist-menu.notlogged .btn .btn-text {
	width: 100%;
	justify-content: center;
}


/* Dark mode button */

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
	display: flex;
	align-items: center;
}
.theme-switch {
	display: inline-block;
	height: 20px;
	position: relative;
	width: 35px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: var(--bg-color-default-darker);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: var(--bg-color-white);
	bottom: 1px;
	content: "";
	height: 18px;
	left: 1px;
	position: absolute;
	transition: .4s;
	width: 18px;
}

input:checked + .slider {
	background-color: var(--color-alert-green);
}

input:checked + .slider:before {
	transform: translateX(15px);
}

.slider.round {
	border-radius: 34px; /* used to make round button */
}

.slider.round:before {
	border-radius: 50%; /* used to make round button */
}



/* =================================================================================================== */
/* === TAGLINE
/* =================================================================================================== */

#tagline {
    width: 100%;
    background-color: var(--bg-color-blue-darker);
    height: 16px; overflow: hidden;
}

#tagline > div {
    width: calc(940px - 20px);
    margin: 0 auto;
    font-size: 10px; color: var(--text-color-default-clearer);
    text-align: right;
    margin-top: 1px;
}

@media screen and (max-width: 940px) { #tagline > div {
	width: calc(700px - 20px);
}}

@media screen and (max-width: 720px) { #tagline > div {
	width: calc(96% - 20px);
}}

/* =================================================================================================== */
/* === CALENDAR EVENT
/* =================================================================================================== */

#calendar-event {
    width: 100%;
    background-color: var(--color-alert-red);
    color: var(--text-color-black);
    min-height: 18px; overflow: hidden;
}

#calendar-event > div {
    width: 940px;
    margin: 0 auto;
    font-size: 1em; 
}

@media screen and (max-width: 940px) { #calendar-event > div {
	width: 700px;
}}

@media screen and (max-width: 720px) { #calendar-event > div {
	width: 96%;
	font-size: .9em; 
}}

#calendar-event > div a {
    color: var(--text-color-white);
}

#calendar-event .name {
	display: inline-block; vertical-align:top;
	
	text-align: center;
	font-variant: small-caps;
}

#calendar-event #clockdiv {
	text-align: center;
	margin-top: -2px;
}
@media screen and (max-width: 720px) { #calendar-event #clockdiv {
	margin-top: -1px;
}}

#calendar-event #clockdiv .name {
	display: inline-block; vertical-align:top;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .name {
	margin-right: 5px;
}}

#calendar-event #clockdiv div.countdown {
	display: inline-block; vertical-align:top;
}

#calendar-event #clockdiv div.block {
	display: inline-block; vertical-align:top;
	margin-left: 5px;
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	color: var(--text-color-white);
	padding: 0px 5px;
	margin-top: 2px;
	line-height: 16px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block {
	margin-left: 0px;
	padding: 0px 5px;
	border-radius: var(--box-round-big);
	line-height: 15px;
}}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block span.mobile { 
	display: inline-block;
}}

#calendar-event #clockdiv span.days,
#calendar-event #clockdiv span.hours,
#calendar-event #clockdiv span.minutes,
#calendar-event #clockdiv span.seconds{
	font-weight: bold;
}

#calendar-event #clockdiv .smalltext {
    font-size: .7em;
    padding-left: 1px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .smalltext {
	font-size: .8em;
}}

header#main-header #calendar-event #text_during {
    display: none;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	FOOTER													*/
/*! ----------------------------------------------------------- */


footer {
	z-index: 1;
}

footer .box-footer {
	display: flex;
	width: 960px;
	margin: 0px auto;
	padding: 5px;
	align-items: center;
}

@media screen and (max-width: 940px) { footer .box-footer {
	width: 700px;
}}
@media screen and (max-width: 720px) { footer .box-footer {
	width: 96%;
}}


/* ---- FOOTER > USERS ---- */
 
footer section#users {
	background-color: var(--bg-color-default-clearer);
}

footer section#users .vertical-separator {
	width: 1px; height: 40px;
	background-color: var(--text-color-default);
	margin: 0 20px;
}

footer section#users .icon {
	--icon-size: 55px;
}

footer section#users .member-link-bt {
		display: flex;
	}

footer section#users .subinfo {
	margin-top: 10px;
}

@media screen and (max-width: 720px) { 
	
	footer section#users .icon {
		--icon-size: 25px;
	}
	
	footer section#users .vertical-separator {
		margin: 0 5px;
	}
	
	footer section#users .vertical-separator.btn-member {
		display: none;
	}
	
	footer section#users .btn {
		margin-left: 5px;
	}

}


/* ---- FOOTER > SITE ABOUT ---- */

footer section#site-about .box-footer {
	display: block;
	text-align: center;
	padding: 20px 0px;
	border-bottom: 1px var(--bg-color-default) solid;
}


/* ---- FOOTER > INFOS ---- */

footer section#infos {
	padding: 20px 0px;
	/*background-color: var(--bg-color-blue);
	color: var(--text-color-clear-bgblue);*/
}

@media screen and (max-width: 720px) { footer section#infos {
	padding: 0px;
}}

footer section#infos .box-footer {
	align-items: flex-start;
	justify-content: space-around;
}

@media screen and (max-width: 720px) { footer section#infos .box-footer {
	width: 96%;
	display: block;
}}

footer section#infos .column {
	width: 30%;
}

@media screen and (max-width: 720px) { footer section#infos .column {
	width: auto;
	margin: 0px; padding: 20px 10px;
	text-align: center;
}}

footer section#infos .title {
	/*color: #c2c8d0;
	margin-bottom: 10px;*/
}

@media screen and (max-width: 720px) { footer section#infos .title {
	margin-bottom: 5px;
	text-align: center;
}}

footer section#infos .icons {
	display: flex;
}

@media screen and (max-width: 720px) { footer section#infos .icons {
	justify-content: center;
}}

footer section#infos .icons .icon-link {
	--icon-link-size: 40px;
	margin: 0 5px;
}

footer section#infos .icons .icon-link:hover {
	box-shadow: 0px 2px 10px 0px var(--color-shadow-black);
}

footer section#infos .rss {
	display: flex;
	align-items: center;
}
@media screen and (max-width: 720px) { footer section#infos .rss {
	justify-content: center;
}}


footer section#infos .rss .icon-link {
	--icon-link-size: 14px;
	margin-right: 5px;
}

footer section#infos a, footer section#infos a:hover {
	color: var(--text-color-clear-bgblue);
}


/* ---- FOOTER > MENU ---- */

footer section#menu {
	border-top: 1px #1a2533 var(--color-border-veryclear);
}


/* ---- FOOTER > COPYRIGHTS ---- */

footer section#copyrights .box-footer {
	padding: 20px 0px;
}

footer section#copyrights .icon {
	--icon-size: 40px;
	filter: var(--icon-filter-grey);
}


/* ---- FOOTER > ADMIN ---- */

footer section#admin {
	width: 100%;
	background-color: var(--bg-color-blue);
	color: var(--text-color-default);
	
}


footer section#admin .content {
	text-align: center;
	border-top: 1px var(--bg-color-blue-darker) solid;
	width: 100%;
	padding-top: 5px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	RIGHT COLLUMN			 								*/
/*! ----------------------------------------------------------- */



/*! ---- FEATURES ---- */



section#right-social .icons {
	display: flex;
	justify-content: space-between;
}

section#right-social .icons .icon-link {
	--icon-link-size: 65px;
}

section#right-social .icons div:hover {
	opacity: .8;
}

@media screen and (max-width: 940px) {
	section#right-social .icons .icon-link {
	--icon-link-size: 48px;
}
}



/*! ---- LAST GAMES ---- */



@media screen and (max-width: 940px) { section#right-games .box-round {
	width: 100px; height: 70px;
}}

@media screen and (max-width: 940px) { section#right-games .box-round img {
	width: 100px; height: 70px;
}}



/*! ---- PREMIUM ---- */



section#right-premium .premium {
	width: 300px; height: 130px;
	background-image: url(../Imageset/premium-btn.png);
}

@media screen and (max-width: 940px) { section#right-premium .premium {
	width: 220px; height: 95px;
	background-size: 220px;
}}
@media screen and (max-width: 720px) { section#right-premium .premiums {
}}



/*! ---- LAST PROGRAMS (EMISSIONS) ---- */



section#right-lastprogram .program-img {
	--lastprogram-logo-size:70px;
	width: var(--lastprogram-logo-size); height: var(--lastprogram-logo-size);
	margin-right: 10px;
}

section#right-lastprogram .program-img div {
	--lastprogram-logo-width: calc((var(--lastprogram-logo-size)*300)/165); /* taille image d'origine: 300x165 */
	
	width: var(--lastprogram-logo-width); /*calc(300px*70px/165px); */
	height: var(--lastprogram-logo-size);
	
	margin-left: calc((var(--lastprogram-logo-width) - var(--lastprogram-logo-size))/-2);
}


section#right-lastprogram .program-text {
	width: 200px;
	
}

@media screen and (max-width: 940px) { 
	section#right-lastprogram .program-img {
		display: none;
	}
	section#right-lastprogram .program-text {
		width: 100%;
}}



/*! ---- KOH ---- */



section#right-koh .box-round {
	position: relative;
	width: 300px; height: 136px;
	background-image: url(../Imageset/right-koh.png);
}

section#right-koh .text {
	width: 290px;
	padding: 5px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	color: var(--text-color-clear-bgblue);
}

@media screen and (max-width: 940px) { 
	section#right-koh .box-round {
		width: 220px; height: 100px;
		background-size: 220px 100px;
	}
	section#right-koh .text {
		font-size: var(--text-size-verysmall);
	}
}



/*! ---- QUOTE ---- */



section#right-quote .user-avatar {
	--user-avatar-size: 30px;
	margin-right: 10px;
}

section#right-quote .graphic {
	width: 20px; height: 20px;
	margin-left: 250px;
	background-image: url(../Imageset/quote-graphic2.png);
}

@media screen and (max-width: 940px) { section#right-quote .grid_3 {
	width: 100px;
}}

@media screen and (max-width: 940px) { section#right-quote .graphic {
	margin-left: 170px;
}}



/*! ---- BEST VIDEOS ---- */



section#right-bestvideos .box {
	width: 280px;
	padding: 10px;
}

section#right-bestvideos .box .icon {
	display: inline-block; vertical-align: top;
	width: 140px;
	height: 60px;
}

section#right-bestvideos .box .text {
	display: inline-block; vertical-align: top;
	width: 100px;
	height: 60px;
}

section#right-topic-with-date .user-avatar {
	--user-avatar-size: 35px;
}



/*! ---- PARTNERS ---- */



section#right-partners .box {
	display: inline-block; vertical-align: top;
	width: 140px; height: 80px;
}

@media screen and (max-width: 940px) { section#right-partners .box, section#right-partners .box img {
	width: 100px;
	height: 57px;
	overflow: hidden;
}}
@media screen and (max-width: 720px) { section#right-partners .box {
}}


/*
*	SonicOnline.fr General CSS
*	--------------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	FONTS, VARIABLES & THEMES 								*/
/*! ----------------------------------------------------------- */

@font-face { font-family: "Merriweather"; src: url('../Fonts/Merriweather-Regular.ttf'); }

:root {

	/* TEXT: size */
	
	--text-size-verysmall: 	12px;
	--text-size-small: 		14px;
	--text-size-normal: 	17px;
	--text-size-big: 		24px;
	
	--text-lineheight-normal: 1.3;
	
	/* Box round */

	--box-round-normal: 4px;
	--box-round-big: 	8px;
	
	
	/* ---- DEFAULT COLORS ---- */


	--bg-color-default: 		#BFC3CA; 	/* Default background color: clear grey */
	--bg-color-default-clearer: #D5D7DA;	/* clearer than the default background */
	--bg-color-default-darker: 	#B6BAC1;
	--bg-color-blue: 			#4D5F75;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#3A495B;	/* Secondary background color: blue darker */
	--bg-color-white: 			#EBEBEB;	/* Secondary background color: blue */
	--bg-color-black: 			#1E2227;	/* Secondary background color: blue */
	
	--text-color-default: 				#4D5157; 	/* Default text color: dark grey */
	--text-color-default-clearer: 		#7D8187; 	/* Clearer default text color */
	--text-color-black: 				var(--bg-color-black);	/* Black color */
	--text-color-orange: 				#DFA622;	/* Secondary text color: orange */
	--text-color-blue: 					var(--bg-color-blue);	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--bg-color-default);	/* Clear text color used with dark background. Same value than default background */
	--text-color-link-default: 			#812215;
	
	
	/* button colors */
	
	--btn-color-veryclear: 			#ACB0B7; /* Very Clear grey. Used for clear buttons */
	
	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#77743c;
	--bg-color-boardpost-highlight1-content: 	#f9f8d8;
	--bg-color-boardpost-highlight2-title: 		#3c5b26;
	--bg-color-boardpost-highlight2-content: 	#eafade;
	
	
	--color-shadow-black: #1E222799; /* used as shadow. Always dark whatever the theme */
	
	--color-alert-red: 			#B22429;
	--color-alert-red-darker: 	#981F24;
	--color-alert-orange: 		#B3752D;
	--color-alert-green: 		#28AA61;
	
	
	/* ---- BUTTONS (override default values) ---- */
	
	
	--btn-text-size-normal: var(--text-size-normal);
	--btn-text-size-small: var(--text-size-small);
	--btn-text-fontweight: normal;
	
	--btn-round: var(--box-round-normal);
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--bg-color-default);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-white);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-white);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	/* ---- SLIDER BUTTON ON/OFF VALUES ---- */
	
	--btn-slider-color-border: 		var(--btn-color-veryclear);
	--btn-slider-color-bg: 			var(--bg-color-white);
	--btn-slider-color-shadow: 		var(--color-shadow-black);
	
	--btn-slider-color-selected:	var(--color-alert-green);

	/* ---- ICON FILTERS VALUES ---- */
	
	
	/* go to this website to get values: https://codepen.io/sosuke/pen/Pjoqqp */
	
	--icon-filter-txt-color-headers: invert(16%) sepia(21%) saturate(7156%) hue-rotate(343deg) brightness(101%) contrast(129%); /*#8B0000*/
	
	--icon-filter-blue: invert(36%) sepia(13%) saturate(1057%) hue-rotate(173deg) brightness(90%) contrast(80%);
	/*--icon-filter-white: invert(1);
	--icon-filter-white: invert(91%) sepia(8%) saturate(185%) hue-rotate(179deg) brightness(86%) contrast(87%);*/
	
	--icon-filter-white: invert(100%) sepia(0%) saturate(1%) hue-rotate(272deg) brightness(113%) contrast(84%);
	
	--icon-filter-orange: invert(71%) sepia(46%) saturate(721%) hue-rotate(358deg) brightness(89%) contrast(96%);
	
	--icon-filter-txt-color-headers: var(--icon-filter-blue);
	
	--icon-filter-txt-color-default: invert(40%) sepia(10%) saturate(269%) hue-rotate(177deg) brightness(91%) contrast(89%); /* #60646A */
	
	--icon-filter-darkgrey: invert(24%) sepia(1%) saturate(2207%) hue-rotate(316deg) brightness(88%) contrast(82%); /* #444 */
	--icon-filter-cleargrey: invert(100%) sepia(0%) saturate(7405%) hue-rotate(110deg) brightness(125%) contrast(60%); /* #ccc */
	--icon-filter-grey: invert(53%) sepia(1%) saturate(1358%) hue-rotate(320deg) brightness(87%) contrast(86%); /* #777 */
	--icon-filter-clearblue: invert(51%) sepia(56%) saturate(391%) hue-rotate(175deg) brightness(83%) contrast(86%); /* #5A7FB1 */
	--icon-filter-green: invert(74%) sepia(73%) saturate(443%) hue-rotate(39deg) brightness(99%) contrast(106%); /* #8FF732 */
	
	--icon-filter-xbox-green: invert(43%) sepia(75%) saturate(6976%) hue-rotate(74deg) brightness(98%) contrast(85%); /* #3A7D13 */
	--icon-filter-playstation-blue: invert(54%) sepia(97%) saturate(868%) hue-rotate(175deg) brightness(88%) contrast(94%); /* #379DDC */
	--icon-filter-nintendo-red: invert(44%) sepia(10%) saturate(3734%) hue-rotate(315deg) brightness(82%) contrast(77%); /* #B44E4E */
	--icon-filter-steam-darkblue: invert(18%) sepia(10%) saturate(6202%) hue-rotate(175deg) brightness(97%) contrast(97%); /* #0C3A5F */
	
	
	/* HEADER style (override default values) */
	
	--header-size-coeff-h1: 1.6;	
	--header-size-coeff-h2: 1.25;
	--header-size-coeff-h3: 1.05;
	
	--header-text-color-heading: var(--text-color-blue);
	
	--header-icon-color-filter: var(--icon-filter-txt-color-headers);
	
	/* SEPARATOR (override default values) */
	
	--separator-color: var(--btn-color-veryclear);
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--btn-color-veryclear);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);
	
	
	/* GAMENOTE ICON/BUTTON (override default values) */
	
	--gamenote-default-color-bg: var(--bg-color-white);
	--gamenote-default-color-border:  var(--bg-color-default-darker);
	
	--gamenote-default-color-up: var(--color-alert-green); /* green */
	--gamenote-default-color-down: var(--color-alert-red); /* red */
	
	--gamenote-icon-size-normal: 30px;
	--gamenote-icon-size-small: 20px;
	
	--gamenote-icon-filter-default: var(--icon-filter-cleargrey);
	--gamenote-icon-filter-up: var(--icon-filter-xbox-green);
	--gamenote-icon-filter-down: var(--icon-filter-nintendo-red);
	
	
	/* TOOLTIP (override default values) */
	
	--tooltip-text-color: 		var(--text-color-white);
	--tooltip-text-size: 		var(--text-size-verysmall);
	--tooltip-bg-color: 		var(--bg-color-black);
	--tooltip-border-radius: 	var(--box-round-normal);
	--tooltip-shadow-color: 	var(--bg-color-black);
	
	
	/* DIALOG BOX (override default values) */
	
	--dialogbox-bg-color: var(--bg-color-default-clearer);
	--dialogbox-header-bg-color: var(--bg-color-default-darker);
	--dialogbox-separator-color: var(--bg-color-default-darker);
	--dialogbox-border-radius: var(--box-round-big);
	--dialogbox-shadow-color: var(--color-shadow-black);
	
	
	/* USER AVATAR IMAGE (override default values) */
	
	--user-avatar-image-size: 40px;
	--user-avatar-border-color: var(--text-color-default-clearer);
	--user-avatar-icon-filter-color: var(--icon-filter-txt-color-default);
	
	/* MULTI GALLERY (override default values) */
	
	--multigallery-bg-color: var(--bg-color-default-darker);
	--multigallery-text-size: var(--text-size-big);
	--multigallery-text-color: var(--text-color-white);
	--multigallery-text-bgcolor: var(--color-shadow-black);
	
	/* FIGURE CAPTION (CSS FRAMEWORK) */
	
	--img-caption-color: var(--bg-color-blue);
	
	/* FORM (override default values) */
	
	/*--form-label-text-size: var(--text-size-small);
	--form-caption-text-size: var(--text-size-verysmall);
	
	--form-input-bg-color: var(--bg-color-default-clearer);
	--form-input-border-color: var(--bg-color-default-darker);
	--form-input-border-color-selected: #666;*/
}


/* ---- THEME LIGHT ---- */
 
 
.theme-light {
	/* SAME COLORS THAN DEFAULT */
}


/* ---- THEME DARK ---- */


.theme-dark {
	
	--bg-color-default: 		#2A2723;
	--bg-color-default-clearer:	#322F2B;
	--bg-color-default-darker: 	#201F1D;
	--bg-color-blue: 			#3E5F84;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#2F4966;	/* Secondary background color: blue darker */
	--bg-color-white: 			#161617;	/* Secondary background color: blue */
	--bg-color-black: 			#EBEBEB;	/* Secondary background color: blue */
	
	
	--text-color-default: 				#B1ADA3;
	--text-color-default-clearer: 		#67625A;
	--text-color-black: 				#BFC3CA;	/* Black color */
	--text-color-orange: 				#EBA100;	/* Secondary text color: orange */
	--text-color-blue: 					#4f7eb5;	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--text-color-default);	/* Clear text color used with dark background. Same value than default background */
	
	--btn-color-veryclear: 			#393633; /* Very Clear grey. Used for clear buttons */

	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#635f15;
	--bg-color-boardpost-highlight1-content: 	#3b380d;
	--bg-color-boardpost-highlight2-title: 		#456231;
	--bg-color-boardpost-highlight2-content: 	#303d26;
	
	
	
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--text-color-orange);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-orange);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-black);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--text-color-default-clearer);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);

}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] HTML, BODY, GENERAL SETTINGS						*/
/*! ----------------------------------------------------------- */


html {
    margin: 0px; padding: 0px; /*font-size: 100%;*/
}

body {
    margin: 0px auto; padding: 0px;
    height: 100%;
    background-color: var(--bg-color-default);
        
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    
    font-size: var(--text-size-normal);
    line-height: var(--text-lineheight-normal);
    
    font-style: normal;
    color: var(--text-color-default);
    
    background-size: 2%;
}

body.xmas {
	/*background-image: url(../Imageset/background-xmas.png);
	background-repeat: repeat;*/
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT SIZES & COLORS								*/
/*! ----------------------------------------------------------- */


a, a:link, a:visited, a:active { color: inherit; }
a:link, a:visited, a:active { text-decoration: none; }

.text-link-colored a:link, 
.text-link-colored a:visited, 
.text-link-colored a:active {color: var(--text-color-link-default);}



/* ---- COLOR WHITE ---- */


.text-color-white, .text-color-white a { 
	color: var(--text-color-white);
}


/* ---- COLOR DEFAULT CLEARER ---- */
/* Text clearer than the default text color */


.text-color-default-clearer, 	.text-color-default-clearer a {
	color: var(--text-color-default-clearer); 
}
a:hover .text-color-default-clearer, .text-color-default-clearer a:hover {
	color: var(--text-color-default);
}


/* ---- COLOR CLEAR BLUE BACKGROUND ---- */
/* Text with the same color than the background. Used with dark background */

.text-color-clear-bgblue, .text-color-clear-bgblue a  { 
	color: var(--text-color-clear-bgblue);	
}


/* ---- COLOR ORANGE ---- */

.txt-orange, .txt-orange a {
	color: var(--text-color-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BACKGROUND COLORS									*/
/*! ----------------------------------------------------------- */


.bg-default {
	background-color: var(--bg-color-default);
}

.bg-default-clearer {
	background-color: var(--bg-color-default-clearer);
}

.bg-default-darker {
	background-color: var(--bg-color-default-darker);
}

.bg-blue {
	background-color: var(--bg-color-blue);
}

.bg-blue-darker {
	background-color: var(--bg-color-blue-darker);
}

.bg-white {
	background-color: var(--bg-color-white);
}


/* Note colors */

.bgcolor-note-red {
	background-color: var(--color-alert-red);
}
.bgcolor-note-orange {
	background-color: var(--color-alert-orange);
}
.bgcolor-note-green {
	background-color: var(--color-alert-green);
}
.bgcolor-note-grey {
	background-color: var(--bg-color-default-darker);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BOX STYLE											*/
/*! ----------------------------------------------------------- */


/* Box border (override) */

.box-border {
	border-color: var(--btn-color-veryclear);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT STYLES 										*/
/*! ----------------------------------------------------------- */


/* ---- QUOTE BLOCK (override) ---- */

blockquote + br {
	display: none; /* to remove "br" created just after "blockquote" */
}

blockquote {
	background-color: var(--bg-color-default);
}

blockquote blockquote {
	border-color: var(--text-color-default-clearer);
}

blockquote .quote-author {
	color: var(--text-color-blue);
}



/* ---- ARTICLE STYLE ---- */

/* Article Font */

.txt-classic {
	font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; 
	font-size: var(--text-size-normal);
	line-height: calc(var(--text-lineheight-normal) * 1.4);
}

/* H2 */

.txt-classic h2 {
	font-size: var(--text-size-big);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h2 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h2  {
	margin: 10px 0 8px 0;
}}

/* H3 */

.txt-classic h3 {
	font-size: var(--text-size-normal);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h3 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* H4 */

.txt-classic h4 {
	font-size: var(--text-size-normal);
	margin: 15px 0 10px 0;
	font-weight: bold;
}
.txt-classic h4 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* article quote */

article blockquote {
	margin: 0px; padding: 0px; 
	padding-left: 15px;
	border-left: 3px var(--bg-color-blue) solid;
	margin-left: 35px;
	width: calc(100% - 58px);
}

@media screen and (max-width: 720px) { article blockquote {
	margin-left: 0px;
	width: calc(96% - 0px);
}}

/* article coms */

section#article_coms blockquote {
	background-color: var(--bg-color-default-darker);
}

section#article_coms .row .left_box .user-avatar {
	--user-avatar-size: 60px;
}

/* article iframe */

article iframe.youtube-player {
	max-width: 96%;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE LAYOUT										*/
/*! ----------------------------------------------------------- */


section#main-content {
	width: 940px;
	margin: 0 auto;
	padding-top: 83px; 
	padding-bottom: 60px;
}

@media screen and (max-width: 940px) { section#main-content {
		width: 700px;
}}
@media screen and (max-width: 720px) { section#main-content {
		width: 96%;
		overflow: hidden;
}}

section#main-content #left {
	display: inline-block; vertical-align: top;
	width: 620px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left {
	width: 460px;
}}
@media screen and (max-width: 720px) { section#main-content #left {
	width: 100%;
	margin-bottom: 20px; /*margin-top: -10px;*/
	margin-right: 0px;
}}

section#main-content #left-board {
	display: inline-block; vertical-align: top;
	width: 700px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left-board {
	
}}
@media screen and (max-width: 720px) { section#main-content #left-board {
	width: 100%;
	margin-right: 0px;
}}

section#main-content #right {
	display: inline-block; vertical-align: top;
	width: 300px;
}

@media screen and (max-width: 940px) { section#main-content #right {
	width: 220px;
}}
@media screen and (max-width: 720px) { section#main-content #right {
	display: none;
}}

section#main-content #right-board {
	display: inline-block; vertical-align: top;
	width: 220px;
}

@media screen and (max-width: 940px) { section#main-content #right-board {
	display: none;
}}
@media screen and (max-width: 720px) { section#main-content #right-board {
	display: none;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] GRID STYLES										*/
/*! ----------------------------------------------------------- */


.grid_1 {width: 60px;}		.grid_2 {width: 140px;}		.grid_3 {width: 220px;}		.grid_4 {width: 300px;}
.grid_5 {width: 380px;}		.grid_6 {width: 460px;}		.grid_7 {width: 540px;}		.grid_8 {width: 620px;}
.grid_9 {width: 700px;}		.grid_10 {width: 780px;}	.grid_11 {width: 860px;}	.grid_12 {width: 940px;}

.grid_3-2 {
	width: 218px;
}
.grid_3-2-padding_l {
	padding-left: 10px; width: 208px;
}
.grid_5-2 {
	width: 378px;
}
.grid_5-2-padding_l {
	padding-left: 10px; width: 368px;
}
.grid_6-2 {
	width: 458px;
}
.grid_6-2-padding_l {
	padding-left: 10px; width: 448px;
}
.grid_7-2 {
	width: 538px;
}
.grid_7-2-padding_l {
	padding-left: 10px; width: 528px;
}
.grid_10-2 {width: 778px;}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] IMAGE BOX											*/
/*! ----------------------------------------------------------- */

/*
/* Box with image in background + title on the bottom */

.box-img-title {
	width: 140px; height: 120px;
	border-radius: var(--box-round-normal);
	overflow: hidden;
}

@media screen and (max-width: 940px) { .box-img-title {
	width: 100px;
}}
@media screen and (max-width: 720px) { .box-img-title {
	
}}

.box-img-title .text-bg {
	position: relative;
	top: -50px;
	height: 50px;
	background-color: var(--bg-color-blue);
}

.box-img-title:hover .text-bg {
	background-color: var(--bg-color-blue-darker);
}

.box-img-title .text {
	position: relative;
	top: -100px;
	color: var(--text-color-clear-bgblue);
	padding: 5px;
}

.box-img-title .text {
	color: var(--text-color-clear-bgblue);
}

.box-img-title .title {
	color: var(--text-color-orange);
}


/* ---- box-bgimg-blue ---- */

.box-bgimg-blue .size-620-350 {
	width: 620px; height: 350px;
}
.box-bgimg-blue .size-300-164 {
	width: 300px; height: 164px;
}
.box-bgimg-blue .size-140-164 {
	width: 140px; height: 164px;
}
.box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 300px; height: 140px;
}

@media screen and (max-width: 940px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 460px; height: 270px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-164, .box-bgimg-blue .size-300-164 img {
	width: 220px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-140-164, .box-bgimg-blue .size-140-164 img {
	width: 100px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 220px; height: 103px;
}}

@media screen and (max-width: 720px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 100%; height: 169px;
}}

.box-bgimg-blue img {
	object-fit: cover;
}

.box-bgimg-blue a:hover {
	text-decoration: none;
}

.box-bgimg-blue .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}
.box-bgimg-blue:hover .bg-box.bg-blue {
	opacity:0.8;
}
.box-bgimg-blue .text-box {
	color: var(--text-color-clear-bgblue);
	position: relative;
	top:-150px;
	padding: 6px;
}
.box-bgimg-blue.size-620-350 .text-box {
	padding-left: 12px;
}


/* ---- Box video ---- */

/* btn-play : common to all pages */
.btn-play {
	position: absolute;
	top: 48px; left:114px;
	width: 72px; height: 72px; background-size: 72px 72px;
	background-image: url(../Imageset/video-btn-play2.png);
}

.box-video-blue .text-box {
	color: var(--text-color-clear-bgblue);
	padding: 5px;
	height: 40px;
}

.box-video-blue a:hover {
	text-decoration: none;
}

@media screen and (max-width: 940px) { .box-video-blue .text-box {
	font-size: 0.8em;
	line-height: 1.2em;
	height: 30px;
}}

.box-video-blue.size-200-112 {
	width: 200px;
}

.box-video-blue .size-200-112 {
	width: 200px; height: 112px;
}

@media screen and (max-width: 940px) { .box-video-blue.size-200-112 {
	width: 146px;
}}

@media screen and (max-width: 940px) { .box-video-blue .size-200-112, .box-video-blue .size-200-112 img {
	width: 146px; height: 82px;
}}

.box-video-blue {
	position: relative;
}

.box-video-blue .btn-play {
	top: 19px; left:64px;
}
.box-video-blue:hover .btn-play, .box-round:hover .btn-play {
	opacity: .6;
}


@media screen and (max-width: 940px) { .box-video-blue .size-200-112 .btn-play {
	width: 60px; height: 60px; background-size: 60px 60px;
	top: 11px; left:43px;
}}

/* index-box-video : used on videos index page and in videos page for games*/

.index-box-video {
	width: 300px;
}
.index-box-video img {
	width: 300px; height: 165px;
}
.index-box-video .header-title {
	flex-direction: column;
}

@media screen and (max-width: 940px) {
	.index-box-video {
		width: calc(300px / 1.37); 
	}
	.index-box-video img {
		width: calc(300px / 1.37);  height: calc(165px / 1.37);
	}
}

@media screen and (max-width: 720px) {
	.videos-box {
		justify-content: center;
	}
	.index-box-video {
		width: calc(300px / 1); 
		margin-right: 0px;
	}
	.index-box-video img {
		width: calc(300px / 1);  height: calc(165px / 1);
	}
}


.index-box-video .box-round {
	position: relative;
}

.index-box-video .btn-play {
	top: 48px; left:114px;
}
@media screen and (max-width: 940px) { .index-box-video .btn-play {
	top: 29px; left: 74px;
}}
@media screen and (max-width: 720px) { .index-box-video .btn-play {
	top: 48px; left:114px;
}}

.index-box-video .hover-infos {
	opacity: 0;
	position: absolute;
	bottom:5px;
	padding: 2px 4px 1px 4px;
	border-radius: var(--box-round-normal);
	color: var(--text-color-white);
	background-color: var(--bg-color-blue);
	font-weight: bold;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE SUB-MENU										*/
/*! ----------------------------------------------------------- */
/*		Only used on the About page (need a refacto)			*/

nav#page-menu {
	margin: 20px 0px;
}

nav#page-menu ul {
	margin: 0; padding: 0;
	list-style: none;
}

nav#page-menu ul li {	
	display: inline-block;
	height: 23px;
	padding-top: 5px;
	overflow: hidden;
}

nav#page-menu ul li a {
	padding:0px 10px;
	color: var(--text-color-default);
	text-decoration: none;
}

nav#page-menu ul li.selected {
	background-color: var(--bg-color-blue);
	border-radius: var(--box-round-normal);
}

nav#page-menu ul li.selected a {
	color: var(--text-color-orange);
	text-decoration: none;
	text-shadow: none;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] USER REVIEW										*/
/*! ----------------------------------------------------------- */


.widget_user_gameReview_leftSize_wGameBox,
.widget_user_gameReview_leftSize_wUserAvatar {
	display: flex;
}

.widget_user_gameReview_leftSize_wGameBox .gameBox {
	flex-shrink: 0;
	width: 60px;
}

.widget_user_gameReview_leftSize_wGameBox .texts,
.widget_user_gameReview_leftSize_wUserAvatar .texts {
	flex: 2;
}

.widget_user_gameReview_leftSize_wUserAvatar .user-avatar {
	--user-avatar-size: 60px;
	margin-right: 10px;
}

/* gamenote userbox wide */


.gamenote-gamebox-wide {
	display: flex;
	justify-content: space-between;
}

.gamenote-gamebox-wide .gamebox {
	width: 60px;
	flex-shrink: 0;
	margin-right: 10px;
}

.gamenote-gamebox-wide .text {
	width: 100%;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { .gamenote-avatar-wide .text {
	width: 300px;
}}
@media screen and (max-width: 720px) { .gamenote-avatar-wide .text {
	width: 210px;
}}


@media screen and (max-width: 940px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 300px;
}}

@media screen and (max-width: 720px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 208px;
	font-size: 0.9em; line-height: 1.2em;
}}

@media screen and (max-width: 720px) { .gamenote-userbox-wide .username {
	width: 140px;
}}





/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : NEWS / ITEM REDUCED						*/
/*! ----------------------------------------------------------- */


.widget-news-item-reduced a {
	display: flex;
	align-items: flex-start;
}

.widget-news-item-reduced a:hover {
	text-decoration: none;
}

.widget-news-item-reduced .widget-news-item-reduced-imgbox {
	position: relative;
}

.widget-news-item-reduced .widget-news-item-reduced-imgfile {
	width: 140px; height: 78px;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 78px; height: 78px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 78px / 2);
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 70px; height: 70px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 70px / 2);
		margin-top: calc(-78px / 2 + 70px / 2);
	}
}

/*.widget-news-item-reduced h3 {
	margin-bottom: 5px;
}*/

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.15em;
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.1em;
		margin-bottom: 3px;
	}
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : BOARD / LAST UPDATED TOPICS				*/
/*! ----------------------------------------------------------- */


#widget-last-updated-topics .last-updated-topics-row .last-updated-topics-top {
	display: flex;
	margin-bottom: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

#widget-last-updated-topics .last-updated-topics-row .texts {
	flex: 2;
	overflow: hidden;
	white-space: nowrap;
}

#widget-last-updated-topics .last-updated-topics-row .topic-text {
	max-height: 300px;
	overflow: hidden;
	position: relative;
	/*font-size: .95em;
	line-height: 1.2em;*/
}

#widget-last-updated-topics .last-updated-topics-row .topic-text.expanded {
	max-height: unset;
}

#widget-last-updated-topics .show-more {
	width: 100%; height: 60px;
	margin-top: 240px;
	background-color: var(--bg-color-default);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom:0;
}

#widget-last-updated-topics .last-updated-topics-row .text-button-btn {
	display: none;
	justify-content: center;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : Game Press Reviews						*/
/*! ----------------------------------------------------------- */


.widget-games-pressReviews .press-name-note {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.widget-games-pressReviews .press-note {
	padding: 0 5px;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	POLL STYLE												*/
/*! ----------------------------------------------------------- */


#poll .title,
#poll_bbcode .title {
	font-weight: bold;
}

#poll .options,
#poll_bbcode .options {
	margin: 10px; margin-bottom: 0px;
}

#poll .options input.bt-radio,
#poll_bbcode .options input.bt-radio {
	margin-right: 10px;
}

#poll .graphic,
#poll_bbcode .graphic {
	margin-top: -1px;
	margin-bottom: 3px;
}

#poll .result-graphic,
#poll_bbcode .result-graphic {
	display: inline-block; vertical-align: top;
	margin: 5px 0px 1px 0px;
	height: 7px;
	background-color: var(--bg-color-blue);
	min-width: 5px;
	max-width: 220px;
}

@media screen and (max-width: 940px) { #poll .result-graphic, #poll_bbcode .result-graphic {
	max-width: 140px;
}}
@media screen and (max-width: 720px) { #poll .result-graphic, #poll_bbcode .result-graphic {
}}

#poll .result-txt, #poll_bbcode .result-txt {
	display: inline-block; vertical-align: top;
	height: 13px;
	width: 30px;
	margin-left: 5px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	HIGHLIGHTS STYLE										*/
/*! ----------------------------------------------------------- */


/* ---- COMMON --- */

section#highlight #highlight2 {
	margin-bottom: 22px;
}


/* ---- HIGHLIGHT 1: BIG PICTURE ---- */

section#highlight #left-top .box-img-big img {
	width: 620px; height: 350px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big img {
	width: 460px; height: 310px;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big img {
	width: 300px; height: 180px;
}}

section#highlight #left-top .box-img-big .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #left-top .box-img-big .text-box {
	position: relative;
	padding: 10px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.85em; line-height: 1.0em;
}}



/* ---- HIGHLIGHT: RIGHT ---- */

section#highlight #right #top  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top {
	width: 220px; height: 144px;
}}

section#highlight #right #top img  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top img {
	width: 220px; height: 144px;
}}

section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
section#highlight #right #bottom-right,section#highlight #right #bottom-right img {
	width: 140px; height: 164px;
}

@media screen and (max-width: 940px) { 
	section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
	section#highlight #right #bottom-right, section#highlight #right #bottom-right img {
	width: 100px; height: 144px;
}}

@media screen and (max-width: 940px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}


/**/

section#highlight #right #top .bg-box,
section#highlight #right #bottom-left .bg-box,
section#highlight #right #bottom-right .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #right #top .text-box,
section#highlight #right #bottom-left .text-box,
section#highlight #right #bottom-right .text-box {
	position: relative;
	top:-150px;
	padding: 6px;
}


/* ---- HIGHLIGHT: FOR MOBILE ---- */

@media screen and (max-width: 720px) {section#highlight .mobile .content {
	display: flex;
}}

@media screen and (max-width: 720px) {section#highlight .mobile .content .img {
	width: 128px; flex-shrink: 0;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	FORM (Override)					 						*/
/*! ----------------------------------------------------------- */


.form-flash-error {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	font-weight: bold;
}

.form-flash-valid {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-green);
	font-weight: bold;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	SOCIAL ICONS											*/
/*! ----------------------------------------------------------- */

.icon-link {
	--icon-link-size: 55px;
	width: var(--icon-link-size); height: var(--icon-link-size);
	background-size: calc(10 * var(--icon-link-size)) calc(1 * var(--icon-link-size));
	background-image: url(../Imageset/icons-social.svg);
	display: block;
}

.icon-link.twitter 		{ background-position: calc(-0 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook 	{ background-position: calc(-1 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord 		{ background-position: calc(-2 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube 		{ background-position: calc(-3 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss	 		{ background-position: calc(-4 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

.icon-link.twitter-blue 	{ background-position: calc(-5 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook-blue 	{ background-position: calc(-6 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord-blue 	{ background-position: calc(-7 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube-blue 	{ background-position: calc(-8 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss-blue	 		{ background-position: calc(-9 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

@media screen and (max-width: 940px) { section#right .icon-link {
	--icon-link-size: 50px;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BADGE MINI ICONS										*/
/*! ----------------------------------------------------------- */
/* 		Badges used under avatar in board 						*/

.badge-mini {
	width: 8px; height: 8px;
	border-radius: var(--box-round-big);
	display: inline-block; vertical-align: center;
	border: 1px solid black;
}

/* IMPORTANT: no need of variable because the same value whatever the theme !!! */

.badge-mini.gold {
	border-color: #c3b133;
	background-color: #f9e449;
}
.badge-mini.silver {
	border-color: #8c8c8c;
	background-color: #c4c4c4;
}
.badge-mini.bronze {
	border-color: #7e5514;
	background-color: #c0a06d;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	COMS ICON												*/
/*! ----------------------------------------------------------- */
/*		the bubble used over the image							*/

.coms-icon {
	position: absolute; display: inline-block;
	top: -6px; left: -6px;
	padding: 3px 4px 2px 4px;
	background-color: var(--bg-color-blue);
	font-weight: bold; text-align: center;
	border: 2px solid var(--bg-color-default);
	border-radius: var(--box-round-normal);
	min-width: 14px;
}

.coms-icon:after {
	content:url(../Imageset/coms-box-visual.svg);
	width: 10px; height: 8px;
	position: absolute;
	bottom: -1px; right: 1px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - HEADERS (Override)						*/
/*! ----------------------------------------------------------- */

.header .header-title.txt-orange .icon {
	filter: var(--icon-filter-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - LOADING ICON (Override)					*/
/*! ----------------------------------------------------------- */

.loader .loader-spin {
  border: 6px solid var(--bg-color-default-darker); /* Light grey */
  border-top: 6px solid var(--bg-color-blue); /* Blue */
}






/*! */
/*! ----------------------------------------------------------- */
/*! 	HIDE / SHOW - WEB <> MOBILE								*/
/*! ----------------------------------------------------------- */
/* 		Must be defined at the end 								*/

.hide {	display: none;  }
.show { display: block; }

@media screen and (min-width: 940px) {
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 940px) { 
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 720px) {
	.web 			{ display: none; }
	.mobile 		{ display: block; }
	.mobile.inline 	{ display: inline-block; }
}