/* GENERAL - RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {border: 0;font-size: 100%;font: inherit;vertical-align: baseline;margin: 0;padding: 0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: none}
table {border-collapse: collapse;border-spacing: 0}
textarea:focus, input[type="text"]:focus {outline: none}
/* FONTS */
@font-face {
font-family: 'fredericka';
src: url('fonts/frederickathegreat-regular-webfont.eot');
src: url('fonts/frederickathegreat-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/frederickathegreat-regular-webfont.woff') format('woff'),
url('fonts/frederickathegreat-regular-webfont.ttf') format('truetype'),
url('fonts/frederickathegreat-regular-webfont.svg#fredericka_the_greatregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'imfell';
src: url('fonts/imfeenrm28p-webfont.eot');
src: url('fonts/imfeenrm28p-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/imfeenrm28p-webfont.woff') format('woff'),
url('fonts/imfeenrm28p-webfont.ttf') format('truetype'),
url('fonts/imfeenrm28p-webfont.svg#im_fell_englishregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* GENERAL */
html, body {position: relative; float: left; width: 1280px; height: 100%; min-height: 100%; font-family: 'imfell', sans-serif; color: #1C1102; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none;}
::selection {background: transparent; color: inherit;}
::-moz-selection {background: transparent; color: inherit;}
a {color: inherit; text-decoration: none;}
.hidden_imgs {opacity: 0; position: absolute; height: 0; width: 0; overflow: hidden;}
button:focus { outline: none; border: none;}
#lost_connexion {position: fixed; top: 0; left: 0; width: 100%; background: #7C2E19; color: white; font-size: 10px; line-height: 20px; text-align: center; z-index: 200; transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transition: .2s all ease-in-out; -webkit-transition: .2s all ease-in-out;}
#lost_connexion.visible {transform: translate(0, 0); -webkit-transform: translate(0, 0);}
#wrapper {float: left; width: 100%; height: 100%; background: url("../img/back_full_bis.jpg") no-repeat; position: relative; z-index: 1;}
#wrapper .main {float: left; width: 100%; /*overflow:hidden;*/}
#wrapper #auth {height: 100%;}
#wrapper .back_menu {display: none; float: left; width: 100%; height: 100%; background: url("../img/back_menu.png") no-repeat; position: relative;}
#wrapper .back_menu #menu {float: left; width: 110px; height: 100%;}
#wrapper .back_menu #game {float: left; width: 1170px; height: 100%; position: relative;}
#wrapper .back_menu .back_page {position: absolute; top: 0; right: 0; width: 1130px; padding: 0 0 0 40px; height: 100%; background: url("../img/back_page.png") no-repeat; z-index: 3; visibility: hidden; -webkit-transform-origin: 100% 0; transform-origin: 100% 0;}
#wrapper #home, #wrapper #intro, #introgame, #wrapper #finish, #wrapper #menu, #wrapper #game, #wrapper #items, #wrapper #congratulation, #wrapper #enigma, #wrapper #place, #wrapper #auth, #wrapper #setup {float: left; display: none;}
/* ANIM BLOCKER */
#anim_blocker {position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 200;}
/* POPIN */
#popin {position: absolute; top: 0; right: 0; width: 1130px; padding: 0 0 0 40px; height: 100%; background: url('../img/back_pop.png') no-repeat; z-index: 4; visibility: hidden; -webkit-transform-origin: 100% 0; transform-origin: 100% 0;}
#popin article {float: left; width: 1000px; margin: 50px 0 0 60px;}
#popin article header {float: left; width: 100%; color: #9F1A00;}
#popin article header > h1 { font-size: 43px; line-height: 40px; font-family: 'imfell'; position: relative; left: 50px; color: #1C1102; width: 850px;}
#popin article .content {float: left; width: 100%; text-align: center;}
#popin article .content figure {display: inline-block; position: relative; top: 20px; width: 840px; margin: 0 0 0 0; max-height: 570px;}
#popin article .content figure.item {display: block;position: relative; width: 840px; margin: 55px 0 0 40px; max-height: 570px;}
#popin article .content figure img {position: absolute; top: 0; left: 0; width: 840px; height: 570px; }
#popin article .content figure .back {min-width: 780px; min-height: 530px; background-size: contain; background-position: center center; background-repeat: no-repeat; margin: 20px 30px;}
#popin > aside {position: absolute; top: 0; right: 0; width: 100px; z-index: 100;}
#popin > aside figure {float: left; width: 100%; text-align: center; margin: 40px 0 0 0; line-height: 100px; cursor: pointer;}
#popin > aside figure img {width: 40px;}
/* HOME */
#home { height: 800px;}
#home article {float: left; width: 100%; height: 100%; position: relative;}
#home article .back {position: absolute; width: 100%; height: 100%; background: url("../img/logo_complet.svg") no-repeat; background-position: center center; z-index: 1;}
#home article .auth_container {position: absolute; top: 35px; right: 35px; cursor: pointer; z-index: 2;}
#home article .intro {margin: 0 0 0 -200px; top: 70%; left: 50%; width: 400px; cursor: pointer; position: absolute; z-index: 2;}
/* INTRO */
.containerintro {height: 1920px;}
.containerintro .arrow { background: url("../img/arrow1.svg") no-repeat; width: 35px; height: 50px; background-size: cover;background-position: center; position: absolute; top:740px; left: 50%; animation: arrow ease-in 4s infinite}
@keyframes arrow {
0% { transform:translate(0, -30px); -webkit-transform:translate(0, -30px); opacity: 0; visibility: hidden; }
20% { transform:translate(0, 0); -webkit-transform:translate(0, 0);  opacity: 1; visibility: visible; }
95% { transform:translate(0, 0); -webkit-transform:translate(0, 0);  opacity: 1;}
100% { transform:translate(0, 0); -webkit-transform:translate(0, 0); opacity:0; }
}
.containerintro article {width: 100%; height: 100%;}
.containerintro aside {position: absolute; width: 370px; height: 80px; right: 50px; top: 635px; cursor: pointer;}
/* MENU */
#menu nav {float: left; width: 100%;}
#menu nav ul {float: left; width: 100%; margin: 15px 0 0 0;}
#menu nav ul li {float: left; position: relative; width: 100%; margin: 6px 0; text-align: center; cursor: pointer;}
#menu nav ul li img {max-width: 75px; height: auto;}
#menu nav ul li.game {}
#menu nav ul li.items {color: white;}
#menu nav ul li.parcours { color: white; font-size: 25px; font-family: 'fredericka', sans-serif;}
#menu nav ul li.items .items_notif {position: absolute; top: -10px; right: 16px; width: 32px; height: 32px; line-height: 32px; background: url("../img/puce.svg") no-repeat; background-size: contain; font-size: 20px;}
#menu nav ul li.progress {color: white; line-height: 37px; cursor: default;}
#menu nav ul li.progress p:first-child {font-size: 18px; text-transform: uppercase;}
#menu nav ul li.progress p:last-child {font-size: 32px; font-family: 'fredericka';}
#menu nav ul li.progress p span { /*color:#9F1A00;*/}
#menu nav ul li.chrono {cursor: default;}
#menu nav ul li.chrono figure {position: relative; display: inline-block; max-width: 75px; line-height: 0; font-size: 0; overflow: hidden;}
#menu nav ul li.chrono figure img {position: relative; z-index: 2;}
#menu nav ul li.chrono figure .jauge {position: absolute; min-height: 100%; min-width: 100%; top: 0; left: 0; z-index: 1; opacity: 0.85; background-color: green;}
#menu nav ul li.chrono figure .time {position: absolute; top: 0; left: 0; width: 100%; font-size: 26px; line-height: 80px; color: white; z-index: 3;}
#menu nav ul li.help {}
#menu nav ul li.logo {cursor: default;}
/* GAME */
#game2 {height: 800px;}
#game2 .cadre {position: absolute; z-index: 1; height: 740px; width: 1100px; margin: 30px 30px 0 40px;}
#game2 .cadre_top {position: absolute; z-index: 3; width: 1060px; height: 5px; top: 47px; right: 47px;}
#game2 .cadre_right {position: absolute; z-index: 3; width: 5px; height: 700px; top: 50px; right: 47px;}
#game2 .cadre_bottom {position: absolute; z-index: 3; width: 1060px; height: 5px; top:748px; right: 47px;}
#game2 .cadre_left {position: absolute; z-index: 3; width: 5px; height: 700px; top: 52px; right: 1110px;}
#game2 #map {height: 700px; width: 1060px; margin: 50px 50px 0 60px; position: relative; z-index: 2;float: left;position: absolute;left: 108px;}
#game2 .find-me {cursor: pointer;position: absolute;top: 73px;right: 66px;z-index: 2;}
#game2 .compass {cursor: pointer;position: absolute;top: 73px;left: 200px;z-index: 2;}
#game2.offline .find-me {display: none;}
#game2.offline #map {background-position: center center;}
#game2.offline #map figure {position: absolute;}
#game2.offline #map figure a {position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0);}
/* ENIGMA */
#enigma article {float: left; width: 930px; margin: 60px 0 0 60px;}
#enigma article > h1 {position: relative; font-size: 56px; line-height: 68px; font-family: 'fredericka'; color: #9F1A00;}
#enigma article > h1 > span {position: absolute; top: 0; left: 0; max-width: 100%;}
#enigma article > p {padding: 30px 0 0 0; font-size: 28px; line-height: 30px; color: #1C1102;}
#enigma article form {float: left; width: 100%; text-align: center; margin: 50px 0 0 0; position: relative;}
#enigma article form ul {float: left; width: 100%; font-size: 0; line-height: 0;}
#enigma article form ul li {display: inline-block; text-align: center; width: 96px; height: 92px; margin: 0 13px; background: url("../img/back_input.svg") no-repeat; background-size: contain;}
#enigma article form ul li input {background: transparent; border: none; width: 96px; height: 92px; text-align: center; font-size: 42px; font-family: 'imfell';}
#enigma article form.error ul li {background: url("../img/back_input_error.svg") no-repeat; background-size: contain;}
#enigma article form.error ul li input {color: white;}
#enigma article form .error_msg {color: #9f1a00;float: left;width: 100%;position: absolute;top: 105px;left: -15px;display: none;font-size: 1.6em;}
#enigma article form .answer {display: inline-block; clear: both; width: 307px; height: 96px; margin: 50px 0 40px 0; background: url("../img/back_btn.svg") no-repeat; background-size: contain; font-size: 37px; line-height: 96px; font-family: 'fredericka'; color: #9F1A00; cursor: pointer; text-transform: uppercase;}
#enigma article > ul {float: left; width: 100%; text-align: center; font-size: 0; line-height: 0;}
#enigma article > ul li {display: inline-block; width: 204px; font-size: 24px; cursor: pointer; position: relative;}
#enigma article > ul li img {width: 90px; height: auto; margin: 25px;}
#enigma article > ul li p {}
#enigma article > ul li p.joker_notif {display: none;position: absolute; top: 20px; right: 50px; width: 32px; height: 32px; line-height: 32px; background: url("../img/puce.svg") no-repeat; background-size: contain; font-size: 20px; color: white;}
#enigma article > ul li.disable {opacity: 0.5;}
#enigma article > ul li.disable p.joker_notif {visibility: hidden;}
#enigma > aside {position: absolute; top: 0; right: 0; width: 100px; z-index: 100;}
#enigma > aside figure {width: 100%; text-align: center; margin: 40px 0 0 0; line-height: 100px; cursor: pointer;}
#enigma > aside figure img {width: 40px;}
#enigma .inactive {opacity: 0.5;}
/* CONGRATULATION */
#congratulation article {float: left; width: 1000px; margin: 50px 0 0 60px; height: 750px; overflow: auto;}
#congratulation article header {float: left; width: 100%; color: #9F1A00;}
#congratulation article header > h1 {font-size: 53px; line-height: 68px; font-family: 'fredericka'; padding: 0 80px 16px 0;}
#congratulation article header > h1 > span {position: absolute;left: 100px;max-width: 100%;}
#congratulation article header > h2 {font-size: 36px; text-transform: uppercase; text-align: center;}
#congratulation article header > h3 {font-size: 24px; text-align: center;margin-top: 10px;}
#congratulation article .content {float: left; width: 625px; max-height:560px; margin:25px 0 0 0; overflow:auto;}
#congratulation article .content p {font-size: 29px; line-height: 38px; color: #1C1102; text-align: justify;}
#congratulation article > aside {float: left; width: 325px; margin: 30px 0 0 50px;}
#congratulation article > aside figure {float: left; max-width: 100%;position: relative;}
#congratulation article > aside img {float: left; max-width: 100%;margin: 20px;}
#congratulation article > aside .border { width: 320px; height: 420px; background-size: calc(100% - 40px); padding: 20px; box-sizing: border-box; background-clip: content-box; background-position: center; background-repeat: no-repeat;}
#congratulation article > aside img.cadre {float: left; max-width: 100%;position: absolute;top: 0;left: 0;margin: 0;}
#congratulation article > aside .game {margin: 20px 0 0 0; cursor: pointer;}
#congratulation > aside {position: absolute; top: 0; right: 0; width: 100px; z-index: 100;}
#congratulation > aside figure {width: 100%; text-align: center; margin: 40px 0 0 0; line-height: 100px; cursor: pointer;}
#congratulation > aside figure img {width: 40px;}
/* PLACE */
#place article {float: left; width: 1000px; margin: 50px 0 0 60px; }
#place article header {float: left; width: 100%; color: #9F1A00;}
#place article header > h1 {position: relative; font-size: 53px; line-height: 68px; font-family: 'fredericka'; margin: 0 80px 30px 0;}
#place article header > h1 > span {position: absolute; top: 0; left: 0; max-width: 100%;}
#place article header > h2 {font-size: 36px; text-transform: uppercase; text-align: center; padding: 0 0 10px 0;}
#place article header > h3 {font-size: 30px; text-align: center;}
#place article .content {float: left; width: 625px; overflow-y: auto; height: 600px; margin: 25px 0 0 0;}
#place article .content p {
font-size: 29px;
line-height: 38px;
color: #1C1102;
text-align: justify;
}
#place article > aside {float: left; width: 325px; margin: 30px 0 0 50px;}
#place article > aside figure {float: left; max-width: 100%;position: relative;}
#place article > aside figure .border { width: 320px; height: 420px; background-size: calc(100% - 40px); padding: 20px; box-sizing: border-box; background-clip: content-box; background-position: center; background-repeat: no-repeat;}
#place article > aside img {float: left; max-width: 100%;margin: 20px;}
#place article > aside img.cadre {float: left; max-width: 100%;position: absolute;top: 0;left: 0;margin: 0;}
#place article > aside .game {margin: 20px 0 0 0; cursor: pointer;}
#place > aside {position: absolute; top: 0; right: 0; width: 100px; z-index: 100;}
#place > aside figure {width: 100%; text-align: center; margin: 40px 0 0 0; line-height: 100px; cursor: pointer;}
#place > aside figure img {width: 40px;}
/* ITEMS */
#items article {float: left; width: 1000px; margin: 50px 0 0 60px;}
#items article header {float: left; width: 100%; color: #9F1A00;}
#items article header > h1 {font-size: 56px; line-height: 68px; font-family: 'fredericka', sans-serif; padding: 0 80px 30px 0;}
#items article .content {float: left; width: 100%; max-height: 580px; margin: 30px 0 0 0; overflow-y: auto; overflow-x: hidden;}
#items article .content h2 {font-size: 36px; line-height: 78px; text-transform: uppercase; text-align: center; margin: 50px 0 0 0;}
#items article .content ul {float: left; width: 100%; font-size: 0; line-height: 0; text-align: center;}
#items article .content ul li {display: inline-block; position: relative; width: 215px; margin: 20px 16px; text-align: center; cursor: pointer;}
#items article .content ul li figure {float: left; position: relative; width: 215px; height: 215px;}
#items article .content ul li figure .back {width: 195px; height: 195px; background-size: cover; background-position: center center; margin: 10px;}
#items article .content ul li figure .cadre {position: absolute; height: 215px; width: 215px; top: 0; left: 0;}
#items article .content ul li p {font-size: 24px; line-height: 32px; padding: 15px 0 0 0;}
#items article .content ul li .new {display: none; position: absolute; top: -5px; right: -5px; width: 45px; height: 45px; line-height: 45px; color: white; font-size: 16px; font-weight: bold; background: url("../img/puce.svg") no-repeat; background-size: contain; -ms-transform: rotate(12deg); -webkit-transform: rotate(12deg); transform: rotate(12deg);}
#items article .content ul li.new .new {display: block;}
#items article .content ul li .used {display: none; position: absolute; top: -5px; right: -5px; width: 45px; height: 45px; line-height: 45px; color: white; font-size: 16px; font-weight: bold; background: url("../img/puce_used.svg") no-repeat; background-size: contain; -ms-transform: rotate(12deg); -webkit-transform: rotate(12deg); transform: rotate(12deg);}
#items article .content ul li.used .used {display: block;}
#items > aside {position: absolute; top: 0; right: 0; width: 100px; z-index: 100;}
#items > aside figure {width: 100%; text-align: center; margin: 40px 0 0 0; line-height: 100px; cursor: pointer;}
#items > aside figure img {width: 40px;}
/* FINISH */
/*#finish article{float:left; width:1156px; height:600px; margin:32px 64px 0 64px; overflow-x:hidden; overflow-y:auto;}*/
#finish article { width: 100%; height: 800px;}
#finish article header {float: left; width: 100%; color: #9F1A00;}
#finish article header h1 {font-size: 56px; line-height: 68px; font-family: 'fredericka', sans-serif; padding: 0 0 50px 0;}
#finish article header h1 > span {position: absolute;left: 64px; max-width: 100%;}
#finish article header h2 {font-size: 36px; text-transform: uppercase; text-align: center; padding: 0 0 30px 0;}
#finish article .content {float: left; width: 100%;}
#finish article .content p {font-size: 29px; line-height: 38px; color: #1C1102; text-align: justify;}
#finish article aside {float: left; width: 100%; text-align: center;}
#finish article aside figure {display: inline-block; position: relative; width: 840px; margin: 45px 0 0 0; max-height: 570px;}
#finish article aside figure img {position: absolute; top: 0; left: 0; width: 840px; height: 570px; }
#finish article aside figure .back {min-width: 800px; min-height: 530px; background-size: cover; background-position: center center; margin: 20px;}
#finish footer {float: left; width: 1156px; margin: 25px 64px 0 64px; padding: 25px 0 0 0; background: url("../img/border.png") no-repeat;}
#finish article .launch_game {position: absolute; width: 370px; height: 80px; right: 56px; top: 640px; cursor: pointer;}
#finish footer .game {float: right; text-align: center; clear: both; width: 307px; height: 96px; background: url("../img/back_btn.svg") no-repeat; background-size: contain; font-size: 25px; line-height: 96px; font-family: 'fredericka'; color: #9F1A00; cursor: pointer; text-transform: uppercase;}
/* AUTH */
#auth article {float: left; width: 100%; text-align: center; height: 800px;}
#auth article h1 {font-size: 56px; line-height: 68px; font-family: 'fredericka', sans-serif; padding: 50px 0 30px 0; color: #9F1A00;}
#auth article form {text-align: center; margin: 120px 0 0 0;}
#auth article form input {background: url("../img/back_input_big.svg") no-repeat; border: none; width: 360px; padding: 0 20px; height: 100px; text-align: center; font-size: 42px; font-family: 'imfell';}
#auth article form.error input {background: url("../img/back_input_big_error.svg");}
#auth article form .connect {display: inline-block; width: 307px; height: 96px; margin: 90px 0 40px 0; background: url("../img/back_btn.svg") no-repeat; background-size: contain; font-size: 37px; line-height: 96px; font-family: 'fredericka'; color: #9F1A00; cursor: pointer; text-transform: uppercase;}
#auth .back {position: absolute;right: 96px;top: 635px;float: right; text-align: center; clear: both; width: 207px; height: 96px; background: url("../img/back_btn.svg") no-repeat; background-size: contain; font-size: 25px; line-height: 69px; font-family: 'fredericka'; color: #9F1A00; cursor: pointer; text-transform: uppercase;}
#auth .error_msg {color: #9f1a00;float: left;width: 100%;top: 20px;position: relative;display: none;font-size: 1.6em;}
/* SETUP */
#setup {min-height: 800px;}
#setup article {float: left; width: 90%; margin: 0 5%; text-align: center;}
#setup article header {float: left; width: 100%; text-align: left;}
#setup article header h1 {font-size: 56px; line-height: 68px; font-family: 'fredericka', sans-serif; padding: 30px 0 0 0; color: #9F1A00;}
#setup article form {float: left; width: 100%; padding: 10px; box-sizing: border-box; display:flex; flex-direction:column;}
#setup article form div{width: 100%; box-sizing: border-box; display:flex; justify-content:center;}
#setup article form div.masked{display:none;}
#setup article form div div.half {width: 50%; padding:10px; display:flex; flex-direction:column; justify-content:flex-end;}
#setup article form div div ul {width:100%; text-align:center; display:flex; justify-content:center;}
#setup article form div div ul li {display:flex; position:relative;}
#setup article form div div ul li input{opacity: 0; visibility: hidden; position: absolute; display:none;}
#setup article form div div ul li label{display:flex; padding:20px; margin:0 10px; box-sizing:border-box; background: rgba(255, 255, 255, 0.4); font-size: 28px; cursor: pointer;}
#setup article form div div ul li input:checked+label{color: #9F1A00;}
#setup article form .selecter {height: 60px; width: 100%; position: relative; background: rgba(255, 255, 255, .4) url(../img/select.png) no-repeat 96% center; overflow: hidden;}
#setup article form .selecter.error {background-color: rgba(204, 52, 52, .4);}
#setup article form select {position: absolute; left: 0; top: 0; background: transparent; border: none; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 28px; height: 100%; padding: 5px; width: 110%;}
#setup article form div div label {float: left; width: 100%; font-size: 28px; padding: 20px 0 10px 0;}
#setup article form div div input {float: left; width: 100%; background: rgba(255, 255, 255, .4); border: none; height: 60px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 28px; padding: 0 10px; box-sizing: border-box;}
#setup article form div div.error input {background-color: rgba(204, 52, 52, .4);}
#setup article form .save {display: inline-block; border: none; width: 307px; height: 96px; margin:30px 0 0 0; background: url("../img/back_btn.svg") no-repeat; background-size: contain; font-size: 32px; line-height: 96px; font-family: 'fredericka'; color: #9F1A00; cursor: pointer; text-transform: uppercase;}
/*#setup article .left{float:left; width:43%; padding:20px 2% 20px 5%; border-right:1px solid #1C1102;}
#setup article .right{float:left; width:43%; padding:20px 4% 20px 2%;}
#setup article div h2{font-size:36px; text-transform:uppercase; text-align:center; padding:0 0 10px 0; color:#9F1A00;}
#setup article div ul{display:inline-block; background:rgba(255, 255, 255, 0.4); max-height:250px; overflow-x:hidden; overflow-y:auto;}
#setup article div ul li{display:inline-block; width:360px; padding:10px 20px; text-align:center; font-size:38px; border-bottom:1px solid #1C1102;}
#setup article div ul li.selected{color:#9F1A00;}
#setup article div ul li:last-child{border:none;}
#setup article form{float:left; width:100%; text-align:center;}
#setup article form label{font-size:38px; line-height:80px;}
#setup article form input{background:url("../img/back_input_big2.svg") no-repeat; border:none; width:360px; padding:0 20px; height:66px; text-align:center; font-size:38px; font-family:'imfell';}
#setup article form .apparition_enigmes_progressive{font-size: 22px;line-height: 64px; margin-right: 25px;margin-left: 25px;color:black;}
#setup article form .apparition_enigmes_progressive.selected{color:#9F1A00;}
#setup article form .save{display:inline-block; width:307px; height:96px; margin:20px 0 40px 0; background:url("../img/back_btn.svg") no-repeat; background-size:contain; font-size:32px; line-height:96px; font-family:'fredericka'; color:#9F1A00; cursor:pointer; text-transform:uppercase;}
#setup article form.error input{color:white;background:url("../img/back_input_big2_red.svg") no-repeat;}*/

/* PARCHEMIN */
/*#parchemin{height:1600px;}*/
#parchemin article {width: 100%; height: auto;float: left;}
#parchemin article .launch_game { position: absolute; width: 370px; height: 80px; right: 76px; top: 208px; cursor: pointer;}
/*#parchemin article .content{ position:absolute; top:320px; width:90%; margin-left:50%; transform:translateX(-50%); font-size:28px; line-height:40px;}*/
#parchemin article .content { position: relative; width: 90%; font-size: 28px; line-height: 40px; margin: 320px auto 0 auto;}
#parchemin article p { margin-bottom: 25px;}
/* CONCLUSION */
/*#conclusion{height:800px;}*/
#conclusion article {width: 100%; height: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
#conclusion article .map_return { width: 370px;height: 80px;margin: 150px 76px 0 auto;cursor: pointer;}
#conclusion article .content { width: 90%;font-size: 25px;line-height: 36px;margin: 70px 0 0 0;}
#conclusion article p { margin-bottom: 25px;}
.platform-android.has-translucent-status-bar .app-header-bar {
padding-top: 25px;
}
/***** ANIMATION *****/
.magictime2 {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.openPage {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: openPage;
animation-name: openPage;
}
@-webkit-keyframes openPage {
0% {
-webkit-transform: perspective(800px) rotateY(90deg);
}
100% {
-webkit-transform: perspective(800px) rotateY(0deg);
}
}
@keyframes openPage {
0% {
transform: perspective(800px) rotateY(90deg);
}
100% {
transform: perspective(800px) rotateY(0deg);
}
}
.closePage {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: closePage;
animation-name: closePage;
}
@-webkit-keyframes closePage {
0% {
-webkit-transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform: perspective(800px) rotateY(90deg);
}
}
@keyframes closePage {
0% {
transform: perspective(800px) rotateY(0deg);
}
100% {
transform: perspective(800px) rotateY(90deg);
}
}
.fastRotate {
-webkit-animation-name: fastRotate;
animation-name: fastRotate;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes fastRotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(500deg);
}
100% {
-webkit-transform: rotate(2000deg);
}
}
@keyframes fastRotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(500deg);
}
100% {
transform: rotate(2000deg);
}
}
.authTranslate {
-webkit-animation-name: authTranslate;
animation-name: authTranslate;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes authTranslate {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(-20px, 0, 0);
}
100% {
-webkit-transform: translate3d(100px, 0, 0);
}
}
@keyframes authTranslate {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-20px, 0, 0);
}
100% {
transform: translate3d(100px, 0, 0);
}
}
.playRotateDown {
-webkit-animation-name: playRotateDown;
animation-name: startRotateDown;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes playRotateDown {
0% {
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(0, 0) scale(1, 1) rotateY(0deg);
}
50% {
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(0, 150px) scale(0.5, 0.5) rotateY(180deg);
}
100% {
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(0, 500px) scale(0, 0) rotateY(360deg);
}
}
@keyframes fastRotateDown {
0% {
transform-origin: 50% 50%;
transform: translate(0, 0) scale(1, 1) rotateY(0deg);
}
50% {
transform-origin: 50% 50%;
transform: translate(0, 150px) scale(0.5, 0.5) rotateY(180deg);
}
100% {
transform-origin: 50% 50%;
transform: translate(0, 500px) scale(0, 0) rotateY(360deg);
}
}