@font-face {
	font-family:LCAFont;
	src: url(../font/BarlowCondensed-Regular.ttf);
}

body{
	background:#27292d;
	padding:0;
	margin:0;
	font-family:Arial;
	color:#fff;
	min-width:1080px;
	-webkit-text-size-adjust: none;
}

body::before{
	/*TEST BACKGROUND*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-image:url('../visuals/backgroundRunikOptimized.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	z-index:-1;
}

p{
	font-size:14px;
	line-height:22px;
}

h1{
	font-family:LCAFont;
	font-size:32px;
	/*color:#fff;*/
	color:#fcd320;
	text-transform:uppercase;
	/*letter-spacing:4px;*/
	padding:0;
	margin:30px auto 20px auto !important
}
.titleBig{
	margin:100px 0 20px 0 !important;
	font-size:60px !important;
	line-height:60px !important;
}
.titleBig span{
	line-height:30px !important;
	font-size:20px !important;
	color:#fff !important;
}

h2{
	font-family:LCAFont;
	font-size:20px;	
	/*color:#5c778a;*/
	color:#fff;
	text-transform:uppercase;
}

h3{
	font-family:Arial;
	font-size:16px;	
	color:#fff;
	text-transform:uppercase;
	padding:0;
	margin:0;
	background:rgb(69 150 101 / 79%);
	filter:opacity(0);
}

a, a:hover, a:active{
	color:inherit;
	text-decoration:none;
	padding:0;
	margin:0;
}

#banner{
	width:calc(100% - 30px);
	padding:15px;
	background:#202329;
	box-shadow:0 4px 8px rgb(00 00 00);
	height:50px;
	top:0;
	position:fixed;
    z-index:990;
	/*min-width:1440px;*/
}

#logo{
	height:64px;
	position:absolute;
	margin-top:3px;
}

#menu{
	margin:0 auto 0 auto;
	height:45px;
	width:50%;
	border-collapse:collapse;
}

#menu td{
	text-align:center;
	vertical-align:middle;
	padding:4px 0 0 0;
	margin:0;
	border:none;
	font-family:LCAFont;
	font-size:21px;
	color:#fff;
	text-transform:uppercase;
	cursor:default;
}

#menu td a{
	display:block;
    height:43px;
    line-height:43px;
    border-bottom:2px solid #202329;
	transition-property:color;
	transition-duration:0.5s;
}

#menu td:hover{
	/* background:#d3ba84; */
	color:#d3ba84;
}

#menu .currentPage{
	color:#d3ba84 !important;
	/* border-color:#d3ba84 !important; */
}

#homeArt{
	width:100%;
    position:relative;
    z-index:0;
	margin:80px 0 0 0;
	box-shadow:0 0 12px 3px rgb(0 0 0);
}

#content{
	/* width:1040px; */
	width:950px;
	margin:50px auto 50px auto;
	min-height:1000px;
}

/*////LOADING////*/
.lds-dual-ring {
    display: block;
    width: 85px;
    margin:0 auto 20px auto;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 55px;
    height: 55px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring{
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}

#imageViewer{
	display:none;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:calc(100% - 80px);
	/* background:rgb(0 0 0 / 82%); */
	z-index:2000;
	/* cursor:pointer; */
	text-align:center;
	padding:40px;
	background: #202329ad;
    backdrop-filter: blur(10px);
}

#imageViewerItem{
	max-height:100%;
	box-shadow:0 0 12px 3px rgb(0 0 0);
}

.viewableImg{
	transition-property:opacity;
	transition-duration:0.5s;
}

.viewableImg:hover{
	cursor:pointer;
	opacity:0.8;
}

.gamme{
	border-collapse:collapse;
	border:none;
	width:100%;
	margin:40px 0 60px 0;
	box-shadow:0 0 12px 3px rgb(144 144 144);
}

.gamme tr{
	background:#fff;
}

.gamme td{
	/*border:1px solid #000;*/
	border:none;
	padding:0;
	margin:0;
	padding:0;
	vertical-align:top;
}

.gamme td img{
	width:100%;
	padding:0 20px 0 0;
}

#galeries{
	width:calc(100% + 40px);
	margin:-20px 0 0 -20px;
	border-collapse:collapse;
}

#galeries td{
	width:33.33%;
	padding:20px;
	margin:0;
}

#galeries td p{
	text-align:center;
	font-size:14px;
	color:#252525;
}

#galeries div{
	cursor:pointer;
	width:100%;
	border:none;
	filter:brightness(1);
	box-shadow:0 0 12px 3px rgb(144 144 144);
	transition-property:transform, opacity;
	transition-duration:0.5s;
}

#galeries div:hover{
	transform: scale(0.99);
	opacity:0.8;
}

#galeries td h3{
	transition-property:filter;
	transition-duration:0.5s;
}

#galeries td h3:hover{
	filter:opacity(1);
}

#btnToTop{
	width:25px;
	height:25px;
	padding:10px;
	border-radius:31px;
	background:#343842;
	position:fixed;
	z-index:900;
	bottom:40px;
	right:40px;
	display:none;
	transition-property:background;
	transition-duration:0.5s;
	box-shadow:0 0 5px 2px rgb(0 0 0);
}

#btnToTop:hover{
	background:#2b2e34;
}

#footer{
	margin:225px 0 0 0;
	width:calc(100% - 30px);
	padding:15px;
	border-top:2px solid #d3ba84;
	background:#202329;
	min-height:50px;
	overflow:auto;
}

/*////////////////ALERTER///////////////*/
#confirmer{
	position:fixed;
	z-index:2001;
	padding:20px;
	min-width:300px;
	background:#252525;
	box-shadow:0 0 12px 3px rgb(0 0 0);
	border:2px solid #252525;
}
#confirmer h2{
	color:#fff;
	margin:0 0 10px 0;
}
#confirmer p{
	color:#fff;
	margin:35px 0 40px 0;
    padding:0;
}
#confirmer input[type="button"], #characterSheetAvatarsList input[type="button"]{
	color:#fff;
	background:none;
	border:1px solid #d3ba84;
	padding:10px 20px;
    font-size:13px;
	margin:10px 0 0 20px;
	float:right;
	transition-property: background;
    transition-duration: 0.5s;
}
#confirmer input[type="button"]:hover, #characterSheetAvatarsList input[type="button"]:hover{
	background:#d3ba84;
}

.progress{
	position:relative;
	/* width:calc(100% - 2px); */
	width:calc(100% - 8px);
	/* border:1px solid #f8b100; */
	background:none;
	height:39px;
	margin:0 4px;
	padding:0;
	/* border-radius:20px; */
	background:#f2f2f2;
}
#gaugeForce{
	transition-property:width;
	transition-duration:0.5s;
	/* border-radius:20px; */
	/* min-width:50px; */
}	
#gaugeForce #gaugeLabel{
	text-align:center;
	font-size:14px;
	line-height:39px;
	color:#161616;
	position:absolute;
	/* border-radius:20px; */
}
#legalities{
	background:#202329 !important;
	/* box-shadow:-5px 8px 7px 0px rgb(0 0 0 / 58%) !important; */
	padding-top:10px !important;
}
#legalities .otherPrint{
	border-color:#202329 !important;
	background:#342f4d !important;
}
#legalities #closeInfoIcon{
	background:#342f4d !important;
}

.bannerImgButton{
	transition-property:opacity;
	transition-duration:0.5s;
}

.bannerImgButton:hover{
	opacity:0.8;
}

#overlay{
	position:fixed;
	display:none;
	background:#343842ad;
	width:100%;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:2001;
	backdrop-filter:blur(10px);
}
#overlay table{
	border-collapse:collapse;
	width:100%;
	height:100%;
	margin:0 auto 0 auto;
}
#overlay table td{
	padding:20px;
	margin:0;
	vertical-align:middle;
	text-align:center;
}

/*INPUT AND BUTTONS DESIGN*/
.inputLabel{
    text-align:left;
    color: #fcd320;
    margin:15px 0 5px 0;
    font-size:16px;
}
.buttonAction{
	padding:11px 20px;
	/* border-radius:80px; */
	border-radius:4px;
	background:#f7a100;
	border:1px solid #f7a100;
	font-family:LCAFont;
	font-size:18px;
	color:#fff;
	transition-property: transform;
    transition-duration: 0.5s;
    cursor: pointer;
}
.buttonAction:hover{
	transform:scale(0.97);
}
.textButtonAction{
	padding:5px 5px 5px 0 !important;
	transform:scale(1) !important;
	border:none;
	background:none;
	font-family:LCAFont;
	font-size:20px;
	color:#fff;
	text-align:left;
}
.textButtonAction:hover{
	padding:5px;
	text-decoration:underline;
}
.textButtonAction:hover{
	padding:5px;
}
.inputAction{
	border-radius:5px; 
	width:100%;
	outline:none;
	border:1px solid #fcd320;
	padding:15px 20px;
	color:#fff;
	background:none;
	font-size:18px;
	font-family:LCAFont;
}
.searchAction{
	background-image: url(../visuals/search.png) !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 12px) !important;
    background-size: 28px !important;
    background-position-y: 12px !important;
}
.selectAction{
    width:100%;
    color:#fff;
    outline:none;
    border-radius:5px;
    border:1px solid #fcd320;
	background-color:transparent;
    padding:15px 45px 15px 20px;
    font-family:LCAFont;
    font-size:18px !important;
    background-image: url(../visuals/arrowOpen.png) !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 15px) !important;
    background-size:22px;
    background-position-y:15px;
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: none !important;
}
.selectAction option{
	background-color:#202329;
}

.checker{
	line-height:26px;
	height:26px;
	margin:15px 10px 20px 15px;
	text-align:left;
}
.checker #checkinCSS{
	width:26px;
	height:26px;
	margin-right:5px;
	border:1px solid #fcd320;
	display:inline-block;
	vertical-align:middle;
	border-radius:5px;
}
.checker span{
	font-size:16px;
	line-height:26x;
	vertical-align:middle;
	color:#fcd320;
}

/*NAVIGATION MENU*/
#btnMenuBanner{
    position:fixed;
    width:22px;
    left:20px;
    top:23px;
    padding: 0;
    overflow: visible;
    border: none;
    border-radius:50%;
	padding:17px 15px;
	background:#343842;
	cursor:pointer;
	z-index: 2003;
	transition-property:background;
	transition-duration:0.5s;
}
#btnMenuBanner:hover{
	background:#2b2e34;
}
#btnMenuBanner .bar2{
    width:100%;
    height:2px;
    line-height:1px;
    background:#fff;
    margin:6px 0 6px 0;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
}
#btnMenuBanner .bar1, #btnMenuBanner .bar3{
    width:100%;
    height:2px;
    line-height:1px;
    background:#fff;
    margin:0;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    transition-property: transform, width;
    transition-duration: 0.3s;
}

#menuBanner{
    width:168px;
	border-right:2px solid #d3ba84;
    background:#202329;
    left:-210px;
    position:fixed;
    top:0;
    bottom:0;
    padding:90px 20px 20px 20px;
    /* box-shadow:5px 8px 8px rgb(0 0 0); */
    transition-property: left;
    transition-duration: 0.3s;
	z-index: 2002;
}
#menu{
    width:auto !important;
    margin:0 !important;
}

#menu td{
    text-align:left !important;
    font-size:20px !important;
    padding:20px 25px 10px 10px !important;
    /* cursor:default !important; */
}
#menu td a:hover{
    background:none !important;
}
#menu td a{
    display:block !important;
    width:100% !important;
    height:100% !important;
    cursor:default !important;
    line-height:unset !important;
	cursor:pointer !important;
}
#logoIndex{
	height:230px;
	width:100%;
	margin-top:65px;
}

.tileIndex{
	display:inline-block;
	text-align:center;
	width:calc(20% - 60px);
	padding:20px;
	outline:1px solid #d3ba84;
	margin:10px;
	font-family:LCAFont;
	font-size:20px;
	color:#fff;
	text-transform:uppercase;
	cursor:pointer;
	transition-property:background-color, color;
	transition-duration:0.5s;
}
.tileIndex:hover{
	background-color:#343842;
	color:#d3ba84;
}
.tileIndex img{
	width:70%;
	margin-bottom:20px;
	filter:invert(1);
}
.tileIndex a{
	text-decoration:none;
	outline:none;
}

.tileStardard{
	display:inline-block;
	text-align:center;
	width:calc(25% - 60px);
	padding:20px;
	margin:15px 10px;
	font-family:LCAFont;
	font-size:20px;
	color:#fff;
	text-transform:uppercase;
	cursor:pointer;
	transition-property:background-color, color;
	transition-duration:0.5s;
}
.tileStardard:hover{
	background-color:#343842;
	color:#d3ba84;
}
.tileStardard img{
	width:70%;
	margin-bottom:20px;
	transform:scale(1.5);
	filter:drop-shadow(2px 4px 6px black); 
}
.tileStardard a{
	text-decoration:none;
	outline:none;
}

.tileLarge{
	width:calc(50% - 15px);
	display:inline-block;
	margin:15px 0;
	padding:0;
	cursor:pointer;
	overflow:auto;
	transition-property:filter;
	transition-duration:0.5s;
}
.tileLarge:hover{
	filter:brightness(1.2);
}
.tileLarge .inner{
	width:215px;
	height:230px;
}
.tileLarge table{
	width:100%;
	border-collapse:collapse;
}
.tileLarge tr td{
	vertical-align:top;
	font-size:18px;
	color:#fff;
	line-height:25px;
	font-family:LCAFont;
}
.tileLarge tr .tdImage{
	width:215px;
	padding:0;
}
.tileLarge tr td .boldSpan{
	font-size:40px !important;
	font-weight:bold;
	color:#fcd320;
}

.pageTitle{
	text-align:left;
	/* border-bottom:1px solid #343842; */
	border-bottom:1px solid #5e5a6f;
}
.pageTitle img{
	height:120px;
	filter:invert(1);
}
.pageTitle p{
	color:#fff;
	font-family:LCAFont;
	line-height:38px;
	font-size:32px;
	margin:0;
	text-align:center;
	padding:15px 0 10px 0;
}
.subContent{
    margin-top:40px;
}

#staffbar, #userBar{
	position:fixed;
	right:0;
	top:150px;
	padding:10px;
	background-color:#343842;
	border-radius:15px 0 0 15px;
}
#staffbar .barItem, #userBar .barItem{
	cursor:pointer;
	display:block;
	width:60px;
	padding:10px 15px;
	margin:5px 0;
	text-align:center;
	font-size:14px;
	font-family:LCAFont;
	color:#fff;
	background-color:#343842;
	transition-property:background-color;
	transition-duration:0.5s;
}
#staffbar .selectedBarItem, #userBar .selectedBarItem{
	background-color:#202329;
}
#staffbar .barItem:hover, #userBar .barItem:hover{
	background-color:#2b2e34;
}
#staffbar .barItem img, #userBar .barItem img{
	filter:invert(1);
	width:40px;
	height:40px;
	margin:0 0 5px 0;
}

#TB_Admin{
	width:100%;
	border-collapse:collapse;
	margin-bottom:50px;
}
#TB_Admin tr{
	cursor:default;
	padding:10px;
	transition-property:opacity;
	transition-duration:0.5s;
}
#TB_Admin .sortUsers:hover, #TB_Admin .sortEvents:hover{
	opacity:0.7;
	cursor:pointer;
}
#TB_Admin td{
	padding:10px;
	background-color:#333334;
	font-family:LCAFont;
	color:#fff;
	border:1px solid #767676;
	font-size:18px;
	word-break: break-all;
	/* text-align:center; */
}
#TB_Admin .title{
	font-size:20px;
	background-color:#343842;
	cursor:default;
}

.midSizeImage{
	width:calc(50% - 20px);
	vertical-align:middle;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	margin:10px;
}
.imageLink{
	outline:none;
	transition-property:opacity;
	transition-duration:0.5s;
}
.imageLink:hover{
	opacity:0.7;
}
.labelUserName{
	position:absolute;
	right:30px;
	top:30px;
	font-family:LCAFont;
	font-size:20px;
	color:#fff;
	cursor:pointer;
}

.labelUserName img{
	vertical-align:middle;
    width:26px;
    height:26px;
    margin:-5px 0 0 5px;
}

.T_InfosTextBig{
	font-family: LCAFont;
    background: #343842;
    font-size: 24px;
    padding: 20px 15px;
	text-align:center;
	color:#fff;
	text-transform: uppercase;
	margin-bottom: -31px;
    border: 1px solid #767676;
}

#notifications{
	display:none;
	position:fixed;
	z-index:3000;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:#343842ad;
	backdrop-filter:blur(10px);
}

#notifications #notificationsPanel{
	position:relative;
	margin:0 20px;
	background:#202329;
	padding:20px;
}

iframe{
	width:100%;
	height:550px;
	margin:15px 0;
}