/* Style generique (hors mobile) */

a, button { outline: none !important; text-decoration: none; color:inherit; -webkit-appearance: none !important; }
input[type='submit'] { outline: none !important; text-decoration: none; -webkit-appearance: none !important; }
img { border:none; outline: none; }
html { font-size: 100%; } 
body {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), #000 url("img/wood.jpg") center/cover no-repeat fixed;
	padding: 0; 
	margin: 0; 
	font-family: 'Indie Flower', sans-serif; 
	font-size: 1.4rem; 
	text-rendering: optimizeLegibility;
}
#container { overflow: hidden; }
#authform { width: 330px; margin: 0 auto; }
#authform .field, #authform2 .field { margin-bottom: 20px; }
#loginfailed { margin-bottom: 15px; color: red; }
.fas, .far, .fab { font-size: 1.5rem; letter-spacing: 0.6rem; vertical-align: middle; }
#authinfo { text-align:center; }
#authinfo .inside-box { text-align:left; display: none; }


/*curtain style */
.curtain {
	position: relative; 
	width: 26%; 
	min-height: 100vh;
	display: inline-block;
	vertical-align: top; text-align: center;
  padding: 0 10px;
  margin-left: -1px;
  margin-bottom: -9999px; /*css trick pour avoir des colonnes de longueurs égales ... 2 nuits blanches pour trouver ça ^^ */
  padding-bottom: 9999px;
  margin-left: -7px;
  border-top-right-radius: 5px;
  box-shadow: 10px;
  box-shadow: 0 0 13px #222;
  background: #EEEAE9;
  color: #111;
  padding-top: 15px;
}

.white  { 
	z-index: 10; 
	margin-top: 48px; 
	transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 500ms cubic-bezier(.53,1.11,.53,1.11);
	background: #eeeae9 url("img/school-paper.png");
}
.grey   { 
	z-index: 9; 
	margin-top: 67px; 
	transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 560ms cubic-bezier(.53,1.11,.53,1.11);
	background: linear-gradient(rgba(240,240,240,0.6), rgba(240,240,240,0.6)), #eeeae9 url("img/hip-square.png") repeat;
}
.purple { 
	z-index: 8; 
	margin-top: 86px; 
	transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 600ms cubic-bezier(.53,1.11,.53,1.11);
	background: #eeeae9 url("img/school-paper.png");
}

.white.folded { transform: rotate(-3deg) }
.grey.folded { transform: rotate(-5deg)  }
.purple.folded { transform: rotate(-6deg) }

.curtain:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -65px;
	width: 65px;
	height: 100%;
	z-index: 9;
	background: inherit;
	border-top-left-radius: 25px;
}

.reduced { width: 3%; }
.expanded.white, .expanded.grey, .expanded.purple { width: 72%; }
.large.white, .large.grey, .large.purple { width: 42%; }

.border { width: 7px; height: 100%; position: absolute; top: 0; right: -7px; z-index: 1; }

.logo { 
	position: fixed;
	top:30px; right:15px;
	width: 17%; 
}
.biglogo { width: 360px; }

.card-decoration {
	position: absolute;
	right: 22px;
	top: 25px;
	width: 35px;
}

/* curtain header style */
.header { height: 210px; font: 0/0 a; margin: 30px auto; transition: all 400ms linear; }
.header:before { content: ' '; display: inline-block; vertical-align: bottom; height: 100%; }
.expanded .header { height: 80px; margin: 15px auto; }
.header img { width: 18%; max-width: 74px; min-width: 35px; }

.title { 
	font-size: 2.8rem; 
	transform:none; 
	margin: 30px 0; 
	transition: transform 200ms linear;
	font-family: 'Permanent marker', sans-serif;
	line-height: 2.6rem;
}
.reduced .title { transform:rotate(90deg); white-space: nowrap; margin-top: 130px; }





/* main content style */
.main-content { text-align: left; padding: 0 20px; overflow: hidden; }
.reduced .main-content { display: none; }

.col-gauche { float: left; position: relative; overflow: hidden; margin-right: 10px; width: 100%; }
.expanded .col-gauche { width: 240px; }
.col-gauche ol { margin: 0; white-space: nowrap; }
.col-gauche li { padding: 4px 0; cursor: pointer; transition: color .25s linear; }
#quest-list li { list-style-type: upper-roman; }
.col-gauche li:hover { font-weight: bold; }
.expanded .col-gauche li.selected { color: #e85938; font-weight: bold;  transition: color .25s linear; }
.col-gauche li.deactivated { 
    color: #ccc;
    cursor: default; 
    filter: blur(2px);
}
.col-gauche li.deactivated:hover { font-weight: normal; }

.col-droite {
	position: relative; margin: 0 0 0 250px; display: none;
	background-color: #f8f8f8; border-radius: 6px 6px 0 0;
}
.expanded .col-droite { display: block; overflow: hidden; }

.content-header { 
	background-color: #535659; 
	display: flex;
	justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.content-header>* { display: flex; margin: 10px; }
.content-item { margin: 0 10px; }
.content-button { cursor: pointer; color: #eeeeee; position: relative; }
.content-button:hover span { display: inline; }
.content-button span {
	display: none;
	position: absolute; top: 35px; left: 20px; width: 200px; padding: 18px; z-index: 11;
    background: #eee; text-align: center; font-size: 1rem; color: #333;
    box-shadow: 0 0 15px rgba(0,0,0,0.3); border-radius: 0 10px 10px 10px; border: 1px solid #ccc;
}

.content-solved { display: none; background-color: #e85938; padding: 8px 15px; }

.content { position: relative; min-height: 360px; }
.content embed { width: 100%; height: 500px; height: calc(100vh - 180px - 2.5rem); }
.content iframe { width: 100%; height: 500px; height: calc(100vh - 180px - 2.5rem); }
.content audio { position: absolute; top: 18%; left: 16%; width: 62%; }
.emptytext { padding: 20px; opacity: 0.5; text-align: center; }




/* discussion panel style */
.enigme-discussion { 
	position: absolute; left: -400px; top: 0; width: 400px; height: 100%;
	background-color: #eee; background: rgba(238, 238, 238, 0.8);
	overflow-y: scroll; z-index: 10; transition: 1s;
}
.slided { transition: 1s; left: 0; }
.post {
	position: relative;	padding: 10px; margin: 6px 20px; border-radius: 3px; 
	box-shadow: 0 2px 0 #dedbe7; background-color: white; color: #444551;
}
.post-header input[type='text'] { display: block; width: 193px; margin-bottom: 8px; margin-right: 8px; }
.post-header input[type='submit'] { display: block; position: absolute; top: 9px; right: 27px; width: inherit; }
.post-header textarea { display: block; width: 301px; resize: none; }

.post .posttitle 	{ font-weight: bold; line-height: 30px; color: #444551; }
.post .postdate 	{ float: right; font-size: 10px; font-weight: normal; color: #ccc; line-height: 30px; }
.post .postdelete	{ 
	position: absolute; top:5px; right: 5px; background-image: url('img/delete.png'); 
	width: 12px; height: 12px; display: none; cursor: pointer;
}
.post:hover .postdelete { display: block; }
.examplepost { background-color:#fafafa;color:#999; }
.examplepost span { color:#999 !important; }

.loading { width: 100%; text-align: center; }
.loading img { width: auto; }

.discussButton #comCount { 
	display: inline; top: -4px; left: 17px; font: 13px "Roboto"; background-color: #df5537; color: #fff; border-radius: 30px;
    width: 17px; height: 17px; text-align: center; line-height: 17px; position: absolute;
}




/* generic form style */
input, textarea, button {
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  min-width: 120px;
}
.textbox {
  background-color: #fff; 
  border: 1px solid #bdc3c7; 
  color: #333; 
}
.btn {
  cursor: pointer; 
  text-align: center;
  color: #eee;
  background-color: #222; 
  border: 1px solid #222; 
  transition: background-color .25s linear;
}
.btn:hover { 
  cursor: pointer;
  color: #fff; 
  background-color: #000; 
  box-shadow: 0 0 6px #999;
}

.info-btn { width: 100%; text-align: center; margin-bottom: 10px; }
.info-btn .btn { display: inline-block; width: 250px; margin-top: 15px; }
.info-btn .fas { font-size: 130%; }
.mail-orga.revealed { background-color: #ccc; color: #111; }

/* generic CSS tooltip style */
.tooltip span {
	z-index:20; display: none; padding:14px 20px; margin-top:37px; margin-left:-43px; 
	border-radius:4px; box-shadow: 5px 5px 8px #333; font-size: 1.3rem; font-weight: normal; text-align: left; }
.tooltip:hover span { display:inline; position:absolute; color:#111; border:1px solid #dca; background:#fffaf0; }
.callout { z-index:20;position:absolute;top:-12px;border:0;left:17px; }
.purple .tooltip span { margin-top: 22px; margin-left: -160px; }
.purple .callout { left: 128px; }

/* team content style */
.bienvenue { text-align: center; margin-bottom: 20px; }
.stats { text-align: center; margin-top: 20px; }
.stats-img { margin-top: 10px; }
.stats-img img { margin: 0 4px; vertical-align: top; }
.stats .nbQE { font-size: 30px; font-weight: bold; letter-spacing: 0.4rem; }
.communication { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 15px; display: block; font-style: italic; }
.display_logs { background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 15px; font: 14px "Roboto", sans-serif; display: none; }
.display_logs h1 { display: none; }
.communication li { margin-bottom: 10px; }
.communication a { text-decoration: none; }
.communication a:hover { color: #df5537; }
.inside-box { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 15px; margin-top: 30px; }
.inside-box span { display: block; font-weight: bold; margin-bottom: 15px; }
.file { padding: 6px; }
.file i { vertical-align: middle; margin: 0 10px; float: left; width: 2rem; }
#countdown { font-size: 1.2em; font-weight: bold; }

/* help style */
.help_bg { background-color: rgba(0, 0, 0, 0.6); position: fixed; z-index:100; top: 0; left: 0; width: 100%; height: 100%; }
.helpimg1 { position: absolute; top: 74px; left: 88px; }
.helpimg2 { position: absolute; top: 227px; left: calc(58% - 183px); }
.helpimg3 { position: absolute; top: 439px; left: calc(72% - 321px); }
.helpquit { position: absolute; top: 8px; left: 8px; cursor: pointer; }
.tuxedo { position: absolute; top: 500px; left: 300px; }

/* popin */
#popin { display: none; background: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
#popin section { text-align: left; width: 50%; margin: 20vh auto; background-color: #ddd; color: #111; padding:50px; border-radius: 10px; box-shadow: 0 0 100px #000; }
#popin section h2 { font-size: 1.5rem; }
#popin section .fas { vertical-align: baseline; }

/* the end style */
.theend { background-color: rgba(0,0,0,.6); position: fixed; height: 100%; width: 100%; text-align: center; line-height: 100%; z-index: 100; display: none; white-space: nowrap; font-size: 0; }
.helper { display: inline-block; height: 100%; vertical-align: middle; }
.theend img { vertical-align: middle; width: 100%; max-width: 499px; }