/* ***********************************************************	*/
/* Kodama - CSS */
/* ***********************************************************	*/


/* ***********************************************************	*/
/* Déclaration Font */	
/* ***********************************************************	*/
	/*
		exljbris :: Free Quality Font Foundry
		Diavlo_BOOK_II Font license information

		• This font is free for personal and commercial use
		• This font file may not be modified
		• This font file may not be distributed -not online nor on any media- without my permission
		• Embedding (in PDF's, Flash files and programs) is allowed 
		• This font may not be sold
		• This font is the intellecual property of Jos Buivenga
		• Exljbris (Jos Buivenga) is not liable for any damage resulting from the use of this font

		For more information visit:
		http://www.josbuivenga.demon.nl

		or contact me at:
		comment@josbuivenga.demon.nl
	*/
		
	@font-face
	{
		font-family : "Diavlo_web"; 
		src : url('font/Diavlo_BOOK_II.eot');
		src : 
			url('font/Diavlo_BOOK_II.eot?') format('eot'), 
			url('font/Diavlo_BOOK_II.woff') format('woff'), 
			url('font/Diavlo_BOOK_II.svg#abcd') format('svg'), 
			url('font/Diavlo_BOOK_II.ttf') format('truetype');
	}
	
	@font-face
	{
		font-family : "picto_ct"; 
		src : url('font/concentration_training.eot');
		src : 
			url('font/concentration_training.eot?') format('eot'), 
			url('font/concentration_training.woff') format('woff'), 
			url('font/concentration_training.svg#abcd') format('svg'), 
			url('font/concentration_training.ttf') format('truetype');
	}
	
	

body 
{
	margin: 0px;  padding: 0px;
	font-weight : normal; 
	font-size : 16px; 
	font-family: Diavlo_web, arial,helvetica,geneva,sans-serif;
	color :#000000;
	background:#FFFFFF;

}

img {border:0px;}

a, a:visited
{ 
	font-weight: normal;
	color: #37B8FB;
	text-decoration: none; 
	cursor:pointer;
}

a:hover, a:active{color:#FFCF40; text-decoration:none;}

.clear{line-height:0px; height:0px; width:100%; clear:both; padding:0px; margin:0px;}


/* ***********************************************************	*/
/* Header */
.header, .header_homepage
{
	z-index:10000;
	position:fixed; 
	display:block; 
	top:0px; 
	left:0px; 
	height:60px; 
	width:100%; 
	padding-left:100px; 
	background: rgba(0,0,0,0.9) url('concentration_training_logo.png') no-repeat 20px center ; 
	background-size:60px;
	
	box-shadow:0px 2px 5px rgba(0,0,0,0.5);
	box-sizing:border-box;
}



.header_homepage_zone{height:60px;  width:100%; clear:both;}
.header_homepage{position: sticky; margin-top:-80px; }

.menu{display:table; }
.item_menu{display:table-cell;  width:250px; height:60px; padding:10px; padding-left:50px; vertical-align:middle;  line-height:0.9em; border-left:1px solid #333333; color:#FFFFFF; font-variant:small-caps; cursor:pointer; box-sizing:border-box; transition:all 0.4s ease;}
.item_menu a{color:#FFFFFF; transition:all 0.4s ease;}
.item_menu a::before{display:block; vertical-align:middle;  position:absolute; margin-left:-40px; text-align:center; width:30px; font-size:24px; font-family:'picto_ct'; content:"1"; font-variant:normal; box-sizing:border-box; transition:all 0.4s ease;}  
.item_menu.connexion a::before{content:'Q';  text-align:left; }
.item_menu.compte a::before{content:'a';  text-align:left;  }
.item_menu.download a::before{content:'D';  text-align:left; }
.item_menu.info a::before{content:'I';  text-align:left; }
.item_menu.accueil a::before{content:'H';  text-align:left; }

.item_menu.statistique a::before{content:'k';  text-align:left; }

.item_menu:hover{background:rgba(255,255,200,0.3);}

.homepage .header{display:none;}
.homepage .page{margin:0; padding:0;}


/* ***********************************************************	*/
/* Contenu */
.page
{
	margin-top: 70px;
	width:100%;
	text-align:left;
	box-sizing:border-box; 
}
.contenu{display:block; width:100%; max-width:1300px; padding:20px; margin:auto; box-sizing:border-box;}
	

h1{display:block; background:#1c7fd5; color:#FFFFFF; text-align:right; font-size:1.6em; font-weight:bold; padding:10px; text-transform:uppercase; box-sizing:border-box;}

h2{display:block; font-weight:bold; color:#1c7fd5; border-bottom:1px solid #1c7fd5; font-variant:small-caps; font-size:1.2em; box-sizing:border-box;}
h2 strong{display:block; font-weight:normal; font-size:1.3em; line-height:30px;}
h2 strong:after{color:#66ee33;  position:absolute; margin-left:10px; margin-top:-5px; text-align:center; content:"I";  line-height:30px; font-size:24px; font-family:'picto_ct'; font-variant:normal;} 
h2 strong.vr:after{content:"4";}
h2 strong.ordi:after{content:"3";}
h2 span{display:block;font-weight:normal; font-size:0.9em; color:#999999; padding-bottom:5px;}

h3{display:block; font-weight:bold; color:#666666; font-size:1.2em; font-variant:small-caps; box-sizing:border-box; text-align:center;}

.paragraphe{padding-left:20px;}

.signature{color:#33aaee; text-align:right; padding:10px;}
.confirmation_titre{padding:5px; margin-bottom:10px; font-weight:bold; color:#00FF00; font-size:1.2em; border-bottom:1px solid #00FF00;}


.zone_graphique{padding:40px; border:1px solid #EEEEEE;}

/* ***********************************************************	*/
/* zone login */

.concentration_training_zone{display:block; position: absolute; width:50%; float:right; margin-top:10vh; right:10%; }

.concentration_training_title{display:block; padding:10px; padding-right:40px;  text-align:right; background:rgba(0,0,0,0.7); border-radius:10px; box-sizing:border-box; }
.concentration_training_title strong{display:block; color:#FFFFFF; font-size:2.7em;}
.concentration_training_title span{display:block; color:#FFCC00; font-size:1.4em;}

.concentration_training_login{display:block; width:350px; margin:auto; margin-top:10vh; color:#FFFFFF; background:rgba(0,0,0,0.6); padding-bottom:20px; border-radius:10px; border:2px solid #333333; box-sizing:border-box;}
.concentration_training_login strong{display:block; background:#000000; color:#FFFFFF; text-align:left; padding:10px;padding-left:20px; border-bottom:1px solid #666666; font-variant:small-caps; border-top-left-radius:10px;border-top-right-radius:10px; box-sizing:border-box;}
.concentration_training_login span{display:block; width:100%; padding:20px 20px 0px 20px;   box-sizing:border-box;}
.concentration_training_login input{display:block; padding:5px; padding-left:15px; width:100%; border:0px solid #999999; font-size:1.2em; color:#3366cc; border-radius:7px; line-height:30px;  box-sizing:border-box;}

.btn_valider{display:block; width:100%; max-width:250px; margin:auto; margin-top:20px; padding:10px; color:#FFFFFF; background:#3366CC; text-align:center; border:0px solid #FFFFFF; border-radius:10px; font-variant:small-caps; font-size:1.1em; transition:all 0.4s ease; cursor:pointer; box-sizing:border-box;}
.btn_valider:hover{background:#33aaee;}

.login_error strong{display:block; padding:0; margin:10px 20px 5px 20px; background:none; color:#FF0000; border-bottom:1px solid #FF0000;}
.login_error span{display:block; padding:0; margin:0 0 5px 0; background:none; color:#FF0000; text-align:center;}

/* ***********************************************************	*/
/* Homepage */
.visuel_homepage {display:block; position: relative; top:0;  right:0; bottom:0; left:0; width: 100%; height: 100vh; background:url('background_homepage.jpg') no-repeat center center;  background-attachment: fixed; background-size:cover;}


.zone_contenu{font-size:1em; color:#333333; margin-top:40px; box-sizing:border-box;}
.zone_contenu .contenu_text{float:left; width:50%; padding:20px ;box-sizing:border-box;}
.zone_contenu .visuel{float:left; width:50%; height:400px; background:#FFFFFF; background-size:contain; box-sizing:border-box;}
.zone_contenu ul{list-style:square;}
.zone_contenu ul li{padding-bottom:20px;}

.zone_contenu.dark{background:#000000; font-size:1em; color:#FFFFFF; margin-top:40px;}

.zone_contenu.compte .contenu_text{width:60%; padding:40px;}
.zone_contenu.compte .visuel{width:40%; background:url('background_creation_compte.jpg') no-repeat center center; background-size:cover; min-height:400px;}

.zone_contenu.info .visuel{background:url('VR_visuel.jpg') no-repeat center right; background-size:contain;}

.zone_contenu.statistique .visuel{background:url('visuel_statistique.jpg') no-repeat center center; background-size:cover; min-height:500px;}
ul.list_type_game{padding:0px; list-style:none; }
li.type_game{padding:5px 5px 5px 80px; border-bottom:1px solid #CCCCCC; background:#FFFFFF; cursor:pointer; box-sizing:border-box;}
li.type_game:nth-child(2n){background:#F9F9F9;}
li.type_game:before{display:block;  position:absolute; color:#66ee33;  margin-left:-80px; margin-top:-5px; text-align:center; content:"I";  width:80px; line-height:60px; font-size:34px; font-family:'picto_ct'; font-variant:normal;} 
li.type_game.vr:before{content:'4';}
li.type_game.ordi:before{content:'3';}
li.type_game strong{display:block; margin-top:5px; color:#3366cc; line-height:20px;}
li.type_game span{display:block; font-size:0.8em; color:#33aaee; line-height:20px;}
li.type_game:hover {background:#FFFFCC;}


.installation{margin-bottom:80px; margin-top:40px;}
.link_download_zone{width:33%; float:left; margin-bottom:40px; box-sizing:border-box;}
.link_download{width:300px; height:200px; color:#1c7fd5; border:1px solid #EEEEEE; border-radius:20px; margin:auto; padding:20px; text-align:center;  cursor:pointer; box-sizing:border-box;}
.link_download img{display:block; width:260px;}
.link_download:hover{border-color:#FFCF40; color:#FFCF40;}

a.btn_action {display:block; width:auto; width:350px; color:#FFFFFF; background:#3366CC; margin:auto; padding:10px; padding-right:80px; text-align:right; border:1px solid #FFFFFF; border-radius:10px; font-variant:small-caps; font-size:1.1em; transition:all 0.4s ease; box-sizing:border-box;}
a.btn_action::before{display:block;  position:absolute; margin-left:280px; margin-top:-10px; text-align:left; width:60px; line-height:60px; font-size:34px; font-family:'picto_web'; content:"Q"; font-variant:normal;} 
a.btn_action:hover{background:#33aaee;}

/* ***********************************************************	*/
/* Formulaire	*/
/* ***********************************************************	*/
.fomulaire{padding:10px; width:400px; margin:auto;}

.form_ligne{display:table; margin-bottom:10px;}
.form_ligne::before{display:none;  position:absolute; margin-left:-30px; margin-top:0px; text-align:center; width:20px; line-height:20px; height:20px; border:1px solid #999999; border-radius:50%; font-size:14px;  content:""; font-family:'picto_web'; font-variant:normal;} 
.form_label{display:table-cell; width:40%; vertical-align:middle; padding:10px; text-align:right; padding-right:10px; line-height:0.9em; box-sizing:border-box;}
.form_input{display:table-cell; width:60%;  vertical-align:middle;  padding:5px; box-sizing:border-box;}
.form_input input{display:block; padding:3px; padding-left:10px; width:100%; border:0px solid #999999; font-size:1.2em; color:#3366cc; border-radius:5px; line-height:28px;  box-sizing:border-box;}
.form_input select{display:block; float:left; width:60px; margin-right:10px; padding:3px 0px; font-size:0.9em; color:#3366cc; border:1px solid #999999; border-radius:3px; line-height:24px;  box-sizing:border-box;}

.form_ligne_valider{padding:10px;}
.form_btn_valider{display:block; width:auto; width:350px; color:#FFFFFF; background:#3366CC; margin:auto; padding:10px; text-align:center; border:0; border-radius:10px; text-transform:uppercase; font-size:1.1em; transition:all 0.4s ease; cursor:pointer; box-sizing:border-box;}
.form_btn_valider::before{display:none;  position:absolute; margin-left:145px; margin-top:-10px; width:40px; height:40px; line-height:40px; text-align:center; font-size:34px; font-family:'picto_web'; content:"B"; font-variant:normal; animation-name: rotate_item; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite;} 
.form_btn_valider span{opacity:1;}
.form_btn_valider.loading span{opacity:0;}
.form_btn_valider.loading::before{display:block; }

.form_btn_valider:hover{background:#33aaee;}
	
	@keyframes rotate_item 
	{
		from {transform: rotate(0deg);}
		to {transform: rotate(-360deg);}
	}

.form_robot{display:none;}


.form_ligne.rep_ok{color:#00FF00;}
.form_ligne.rep_ok::before{display:block; content:"*"; border-color:#00FF00;}

.form_ligne.rep_no{color:#FF0000;}
.form_ligne.rep_no::before{display:block; content:"c"; font-size:12px; border-color:#FF0000;}

.form_message_erreur{display:bloc; max-width:400px; margin:auto; padding:10px; padding-left:80px; color:#FF0000; text-align:left; box-sizing:border-box;}
.form_message_erreur::before{display:block;  position:absolute; margin-left:-80px; margin-top:0px; text-align:left; width:80px; line-height:60px; font-size:40px; font-family:'picto_web'; text-align:center; content:"b"; font-variant:normal;} 
.form_message_erreur strong{display:block; border-bottom:1px solid #FF0000;}
.form_message_erreur span{display:block; padding:5px;}

/* ***********************************************************	*/
/* FOOTER	*/
/* ***********************************************************	*/

	.footer
	{
		
		width:100%; 
		clear:both;
	}


	.mention_legale
	{
		clear:both;
		margin-top:0px;
		background:#000000;
	}
	
	.mention_legale_copyright, .mention_legale_link{float:left; box-sizing:border-box; text-align:center; line-height:60px; color:#FFFFFF;}
	.mention_legale_copyright{width:calc(100% - 200px);}
	.mention_legale_link{width:200px;}

	@media screen and (max-width: 770px)
	{
		.mention_legale_copyright, .mention_legale_link{width:100%; float:none; line-height:40px;}
	}

/* ***********************************************************	*/
/* Page d'ERREUR */
/* ***********************************************************	*/

	.erreur
	{
		padding-bottom:100px;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		max-width:700px;
		background:none;
		font-size:1em;
		text-align:left;
	}


	.erreur .message_erreur 
	{
		margin-top:100px;
		padding-left:220px;
		padding-top:20px;
		min-height:200px;
		background: url('visuel_erreur.png') no-repeat 0px 0px
	}

	.erreur  h1
	{
		margin-top:0px;
		margin-bottom:10px;
		padding-left:0px;
		text-align:left;
		color:#FF0000;
		font-size:1.5em;
		background:#FFFFFF;
	}

	.erreur .erreur_info{color:#FF0000; font-size:1.2em;}	
	
	.erreur .text_erreur span{display:block;padding-top:20px;}