/*
 * @autor : dynamic creative
 * @date : 2016
 */

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */
.container { margin: 0 auto; position: relative; width: 980px; padding-left: 10px; padding-right: 10px; }
section { position:relative; }
.row { margin-left: -10px;  margin-right: -10px; }
.wrap { position:relative; width:100%; } 

/*Header*/
header {padding:10px 0 0;background: #ff9000}
header .menu {display:inline-block;vertical-align: top; padding-top: 10px;}
header .menu ul {margin:0;}
header .menu li {display: inline-block; font-size: 38px; padding:0 5px;}
header .menu a {display:block; text-decoration: none; border-radius:30px; height:60px; width:60px; text-align: center; padding-top:7px; color:#252b3b; background: #fff; }
header .menu li.active a, header .menu li a:hover {background: #252b3b; color:#fff;}
header .logo {font-family: 'Satisfy', cursive;font-size:60px;color:#fff;display:inline-block;padding:0 20px;}

/*Footer*/
footer {}
footer .container { padding-top: 30px; }
footer a, footer a:visited {color:#909090;}

/*MENU*/
.btson {font-size:20px;cursor: pointer;}
.cut .icon-android-volume-up:before {content:'\39'}

/**/
section {background: #252b3b; color:#fff;padding:40px 10px;}


#score, #niveau {border-radius:4px;width:150px;background:#5cb85c;padding:10px;}
#score .result, #niveau .result {font-size:30px;}

#btstart { position:absolute; top:25px; left:25px; border-radius: 100px; width:100px;height:100px;margin:0 auto;}
#btstart span {display:block;font-size:14px;}

.bloc-txt {background: #ccc; border-radius: 4px;}
#txt {padding:10px; height:55px; width:100%; background:#ccc; color:#252b3b;border-radius:4px; font-size:24px;}
#countdown {position: relative; width:150px; margin:20px auto;}
#demoTimer { position:relative; width: 150px; height:150px; }
#demoTimer:after {content:''; position:absolute; top:20px; left:20px; width:110px; height:110px; border-radius:70px; background:#252b3b;}
#demoTimer:before {content:''; position:absolute; top:0; left:0; width:150px; height:150px; border-radius:80px; background:#fff;}
#time {position: absolute;top:50%; left:0; font-size:35px; text-align: center; width:100%; margin-top:-25px;}

.series ul {text-align: center;}
.series li {display:inline-block; padding:10px; vertical-align: top; background:#5cb85c; text-transform: uppercase; cursor: pointer; border-radius:4px; width:120px; text-align: center; margin:5px;}
.series li:hover, .series li.active {background:#337ab7;}

#vmap {margin:0 auto; /*border:10px solid #fff; border-radius:30px;*/width:653px;height:500px;overflow: hidden;}

.bloc-panneau {position: relative;}

.vocamot #txt {display:none;}
#bt, .revoc {display:none;}
.start #bt, .start .revoc {display:block;}

.revoc {display:none; position:absolute; top:50%; left:50%; margin-left:-20px; margin-top:-20px; background:#fff; color:#252b3b; border-radius:30px; height:40px; width:40px; text-align:center; padding-top:2px;}
.revoc span { font-size:30px; }
.vocamot .revoc {display:block;}

/*CLAVIER*/
.bloc_lettre {height:70px;margin:20px;}
#lettre {display:none; font-size:40px;}
#lettre span {padding:10px; border:2px solid #fff; border-radius:10px;text-align: center;}
#clavier {background: #eee; border-radius:10px;padding:20px;display:inline-block;border-bottom:5px solid #cbcbcb;text-align: left;}
#clavier li {display:inline-block; border-bottom:2px solid #bebcbc; border-radius: 3px; padding:10px;background:#fff; color:#555555; width:40px;height:40px;text-align: center;} 
#clavier li.active {background:#d8992d; color:#fff; border-bottom:2px solid #aa710f;}
.cl2 {padding-left:20px}
.cl3 {padding-left:40px}

.start #lettre {display:block;}
.start #btstart {display:none;}

.bonus { display:none; position:absolute;top:0;left:0; width:40px; height:40px; background: #c9302c; border-radius:20px; text-align: center; color:#fff; font-weight:600; font-size:20px; line-height: 40px;}


/*MODAL*/
.modal-content .close { position:relative; margin:5px 10px 0 0; z-index: 2;}
.modal-body {font-size: 20px;}
.modal-body span {font-size:30px; font-weight: 600;}

/*PICTO*/
.picto i, .bouton i { display: inline-block; background-image: url(../img/sprite.png); background-repeat: no-repeat; }


/*BOUTON*/
.bouton { text-align:center;  color:#ffffff; position:relative; background:#b5d324; width:100%; color:#fff; font-size:14px; font-weight:bold; }
a.bouton { color:#232323; display:inline-block; }
.bt_1 { position:relative; font-size:25px; font-weight:600; color:#fff; line-height:60px; text-shadow: 0 1px 2px #d8992d; text-transform:uppercase; border-radius: 6px; background-image:linear-gradient(to bottom, #fec970, #f9b43f); border-bottom:5px solid #d8992d; }


.bouton:hover { opacity:0.9; }

/*Titre*/
h1, h2, h3, h4 {  }
.titre_1 { color:#fff; font-size:60px; font-weight:300; line-height:.8; }
.titre_1 i { font-size:40px; }
.titre_2 { font-size:30px; font-weight:400; text-transform:uppercase; }
.titre_3 { color:#ebad19; font-size:24px; font-weight:500; }

/* COMMUN */
.m1 { margin:10px 0; }
.m2 { margin:20px 0; }
.m3 { margin:40px 0; }
.m4 { margin-bottom: 20px; }
.m5 { margin: 10px 0 20px; }
.m6 { margin:30px 0; }

.t10 { font-size:10px; }
.t11 { font-size:11px; }
.t12 { font-size:12px; }
.t13 { font-size:13px; }
.t14 { font-size:14px; }
.t16 { font-size:16px; }
.t18 { font-size:18px; }
.t20 { font-size:20px; }
.t22 { font-size:22px; }
.t24 { font-size:24px; }
.t25 { font-size:25px; }
.t30 { font-size:30px; }
.t34 { font-size:34px; }


.semi { font-weight:600; }
.light { font-weight:300; }
.reg { font-weight:normal; }
.upper {text-transform: uppercase;}

.c_rge { color:#a64148; }
.c_gri { color:#4d4d4f; }
.c_org { color:#f9b43f; }
.c_blu { color:#3dabfe; }

a.c_rge:visited { color:#e86743; }
a.c_rge:hover { text-decoration:underline; }

.grid_1, .grid_66, .grid_33, .grid_75, .grid_25, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_50 { position: relative; display: inline; float: left; }
.grid_50 { width:50%; }
.grid_66 { width:66.666666%; }
.grid_33 { width:33.333333%; }
.grid_75 { width:75%; }
.grid_25 { width:25%; }



.disp_table { display:table; width:100%; }
.disp_cell { display:table-cell; vertical-align:top;}

.disp_mid { vertical-align:middle; }
.disp_bot { vertical-align:bottom; }

/* ---------------------------- */
/*	    Element Formulaire  	*/
/* ---------------------------- */
.lbl_1 { display: inline-block; font-size: 12px; font-weight: bold; height: 20px; position: relative; vertical-align: top; }
.lbl_2 { display:block; font-size: 14px; line-height:30px; }

input[type=text], input[type=email], input[type=password], input[type=tel], textarea { position:relative; font-size: 14px; color:#232323;background:#ffffff;width: 200px; height: 40px; padding: 6px 5px; margin: 0;
    border: 1px solid #c1c1c1; font-weight: normal; font-family: 'Open Sans', sans-serif; -webkit-appearance:none; -webkit-text-size-adjust: 100%;
}
select { position:relative; width:200px; height:30px; /*line-height:30px;*/ margin:0; padding:5px; font-size:14px; color:#2d2d2d; border:1px solid #511D20; }


button { border:none; cursor:pointer; margin:0; }
button:hover, button:focus, button:active { /*opacity:0.9;*/ }

input[type=text], input[type=email], input[type=password], select, textarea {
   width:100%; border: 1px solid #e8e8e8; height:40px; /*margin-bottom:20px;*/ background:#fafafa; border-radius:3px;padding-left:10px;
}
textarea { height:auto; } 


.form-control { display:block; }
.form-group { position:relative; }

.form-inline {margin-left:-10px;margin-right:-10px;}
.form-inline .form-group { position:relative; float:left; padding:0 10px; }

.form-group.disp_ > span, .form-group.disp_ > i {display: table-cell; vertical-align: top;}
.form-group.disp_ > span {vertical-align: middle;height: 50px; color: #a1a3a4; font-size: 14px; padding-left: 50px; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-50, .col-66, .col-33, .col-75, .col-25, .col-40, .col-20, .col-30, .col-80 { position:relative; float: left; }
.col-50 { width:50%; }
.col-75 { width:75%; }
.col-25 { width:25%; }
.col-66 { width:66.66666666%; }
.col-33 { width:33.33333333%; }
.col-40 { width:40%; }
.col-20 { width:20%; }
.col-30 { width:30%; }
.col-80 { width:80%; }

.ast { position:relative; margin-top:10px; font-size:11px; text-align:center; }

/*ERROR*/
#errors { margin-top:10px; text-align:center; color:red; }

#error-message h2 { font-size: 26px; font-weight: normal; text-transform:uppercase; }
input.error, select.error { border: 1px solid red;}
label.error,
#form_home label.error,
#form_mobile label.error { display: none !important;}
input.error[type="radio"] {box-shadow: 0 0 5px #ff0000;}
/**********/

/*checkbox*/
.radio.titre { position: absolute;top:-15px;left:20px;padding-left: 10px;padding-right: 15px; background: #FFF;}
.radio.titre label {color: #A50034;font-size: 20px;padding-left:0px;}
.radio.titre [type="radio"]:not(:checked) + label,
.radio.titre [type="radio"]:checked + label {
  padding-left: 30px; padding-top:0px;   
}

[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative; padding-left: 25px; padding-top:2px; cursor: pointer; display:inline-block;   
}
/* Aspect des checkboxes */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 20px; height: 20px;
  border: 1px solid #c7c9c7;
  background: #fff;
  border-radius: 10px; 
}
 
/* Aspect général de la coche */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 5px; left: 3px;
  color: #09ad7e;
  background: #3392d3;width: 14px; height: 14px;border-radius: 7px;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
[type="radio"]:not(:checked) + label:after {
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
[type="radio"]:checked + label:after {
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}


/**/
@media screen and (max-width: 979px) {
    .container {width:100%}
    .row {margin:0;}
}