@import url(https://fonts.googleapis.com/css?family=Nunito:400);


body {font-family: 'Open Sans', sans-serif;}

.alogo
{
	max-width: 300px;min-height: 61px; overflow: hidden;
}

#imglogoo
{
	max-height: 48px;background-color: white;border-radius: 30px; float: left;
}

.txtort
{float: left;font-family: 'Montez', cursive;font-weight: 400;font-size: 35px;margin-left: 10px;margin-top:6px;}
.ma
{
	float: left;font-size: 12px;margin-top:10px;
}
.align-center{
    text-align: center;
}
.popup{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(5,5,5,0.8);
    display: none;
}
.table{
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
}
.table > div{
    display: table-row;
}
.table > div > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table > div > div > div{
    width: 100%;
    max-width: 600px;
    min-height: 400px;
    border:1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    margin: 0 auto;
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
}
.table > div > div > div .close{
    position: absolute;
    right: 15px;
    top: 12px;
    font-size: 20px;
    color: #333;
    font-family: arial;
}
.popup-cadeau li {
    display: inline-block;
    float: left;
    padding: 0 4px;
}
.clear{
    clear: both;
    width: 100%;
}
.popup-cadeau li img {
     width: 140px;
}

.f14px {    font-size: 14px; }
.f18px {    font-size: 18px; }
.f20px {    font-size: 20px; }
.f22px {    font-size: 22px; }
.f26px {    font-size: 26px; }
.f30px {    font-size: 30px; }
.f32px {    font-size: 32px; }


.p-l-22 {    padding-left: 22px; }


.bg-gray    { background-color: white; }
.bg-red     { background-color: #FF7878; transition: 1s all; color: #F8F8F8; border: 1px solid #FF7878 ;}
.bg-green   { background-color: #4EDEC2;}
.bg-blue    { background-color: #5AA2DF;}
.bg-yellow  { background-color: #FDCA00;}
.bg-brown   { background-color: #E3D4A7;}

.ylwbg {    background-color: yellow;}
.errorbg {    text-decoration: underline; color: red;}
.rightbg {    text-decoration: underline; color: #1abc9c;}



.bg-gray-soft { background-color: #F8F8F8;}
.bg-dark      { background-color: #456087;}

.border-grayy {border:1px solid #ECF0F1;}

.bloc-to-span {width: 40px; overflow: hidden; transition: 1s all;}
.bloc-to-span:hover {width: auto;}



.clr-gray    { color: #ECF0F1;}
.clr-red     { color: #FF7878;}
.clr-green   { color: #4EDEC2;}
.clr-blue    { color: #5AA2DF;}
.clr-yellow  { color: #FDCA00;}
.clr-brown   { color: #E3D4A7;}

.clr-gray-soft { color: #F8F8F8;}
.clr-dark      { color: #456087;}

.border-grayy {border:1px solid #ECF0F1;}


.question-body {  min-height: 195px; }
.question-block { min-height: 180px; padding: 10px 6px 0 0; }

.empty-input { border-width: 0 0 1px 0;    display: inline-block;  width: 130px; color: #3498db; font-weight: 700; }

.btnNAV { border: 1px solid #3498db; color: #3498db;  }


.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}


.h2, h2 {
    font-size: 28px;
	font-weight:normal;
	color:#535960 !important;
}


.panel-primary {
    border-color: #456087;
}


.panel-primary>.panel-heading {
    color: #fff;
    background-color: #456087;
    border-color: #337ab7;
}

.btn-primary {
    color: #fff;
	margin-left:5px;
    background-color: #6396ae;
    border-bottom:4px solid #456087;
}


.bloc { padding: 10px; font-size: 22px; font-weight: 700; color: white; border-radius: 8px;}


.title_span {
    display: inline-block;
    height: 40px;
    padding: 2px;
    font-size: 22px;
    font-weight: 700;}


.tilefa {padding: 19px 10px;
    border: 1px solid #FF7878;
    color: #FF7878;
    border-radius: 86px;}

.progress-bar-striped, .progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.level_wrap {
}

.progress-bar-orthographe {
    background-color: #34495E;
}


.btn-orthographe {
    color: #fff;
    background-color: #34495E;
}


.niceblue{color:#23A8E8;}


.btn-primary {
    color: #fff;
    background-color: #6396ae;
    border-bottom: 4px solid #456087;
}


.bluebg {
    background-color: #3498db;
    border: 1px solid #456087;
    border-radius: 23px;
    box-shadow: #3498db;
}

.phrase-error{
    text-decoration: line-through;
    color: tomato;
}

.phrase-right {
    text-decoration: underline;
    color: #1ABC9C;
}

.bg-yellow {
    background-color: #FDCA00;
    padding: 5px;
    border-radius: 10px;
}


.hideit {
    display: none;
}


.btn-suivant {    float: right;
    font-size: 22px;
    font-weight: 700;}


.checkbox input[type=checkbox].custom-checkbox:checked+.icons .icon-checked, .radio input[type=checkbox].custom-checkbox:checked+.icons .icon-checked, .checkbox input[type=radio].custom-radio:checked+.icons .icon-checked, .radio input[type=radio].custom-radio:checked+.icons .icon-checked {
    color: #23A8E8;
    filter: none;
    opacity: 1;
    -webkit-filter: none;
}


.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
    color: #4B6075;
    background-color: transparent;
}
.row.exam-wrapper {
    background: #FFF none repeat scroll 0% 0%;
    clear: both;
	border:1px solid #f1eded;
	width:auto;position:relative;
	left:0;right:0;
	margin-left:auto;
	margin-right:auto;
}
.exam-wrapper *{
    margin: 0 auto;
    padding: 0;
	
}
.row.exam-wrapper .header-exam{
       position: relative;
    margin-bottom: 10px;
	font-family:'Nunito', sans-serif;
	margin-top:-2px;

}
.exam-wrapper .title-exam {
    background: #46484a;
    margin: 0 auto;
    width: 100%;
    text-align: left;
	height:81px;
    padding-left:20px;
}
.title-exam h2 {
    color: #fff;
    font-size: 40px;
line-height: 65px;
padding-top: 8px;
}
.minute-zero,
.secondes-zero {
    display: none;
    margin-right: -5px;
}
.title-exam h5 {
   color: #036C9F;
font-size: 19px;
line-height: 37px;
}
.etape-exam {
    text-align: center;
    background: #eeca24;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #4d4d4d;
}
.chrono-exam{
    float: right;
    top: 10px;
	background:#4d4d4d;
    left: 10px;
    width: 125px;
	margin-left:-10px;
    text-align: center;
}
.score-exam{
    position: relative;
	float:right;
    top: 0px;
    right: 10px;
    width: 100px;
    text-align: center;
}
.chrono-exam .time,
.score-exam .titlescore{
background: #4d4d4d;
text-align: center;
color: #fff;
margin-left:-9px;
font-size: 27px;
line-height: 32px;
}
.content-score {
    color: #fff;
	height:81px;
    background: #c54141;
  
}
.content-score h3 {
    font-size: 49px;
}
.content-exam {
    min-height: 391px;
    position: relative;
}
.loader-exam {
    display: block;
    position: absolute;
    left: 43%;
    bottom: 41%;
}
.exam-wrapper  #TF_QUESTION {
    text-align: center;
    max-width: 95%;
	font-size:24px;
	font-weight:normal;
	color:#404243 !important;
height: 120px;
}
.exam-wrapper  #btn-choix {
    display: block;
    width: auto;margin:8px;text-align:center;
}
.exam-wrapper  #TF_right, .exam-wrapper  #TF_wrong, .exam-wrapper  #check_reagir  {
    float: right;
    width: 40%;
    background: #118e00;
    color: #fff;
    border: 0;
    border-radius: 3px;
    line-height: 40px;
}
.exam-wrapper  #TF_wrong {
    float: left;
    background: #e00808;
}
.exam-wrapper  #check_reagir{
    float: none;
    width: 250px;
}
.exam-wrapper  #TF_right:hover, .exam-wrapper  #TF_wrong:hover, .exam-wrapper  #check_reagir:hover  {
}
.exam-wrapper  .content-exam label.checkbox .icons,
.exam-wrapper  .content-exam label.radio  .icons {
    margin-left: -30px;
}
.exam-wrapper div.liste-choix {
    width: 100%;
    margin: 0px auto;
    float: none; 
    max-width: 700px;
}
.exam-wrapper div.liste-choix  .col-lg-4 {
    width: 50%;
}
.exam-wrapper  .ckech-modal #TF_QUESTION { 
    padding-top: 70px;
    height: 129px;
}
.exam-wrapper  .ckech-modal .checkbox.text-left ,
.exam-wrapper  .ckech-modal .radio.text-left {
    width: 66%;
    height: 49px;
    cursor: pointer;
}
.page-orthographe #GoExam-1 {
    z-index: 999999999!important;
}
.navbar-nav.btns-controls > li > a {
    border: 1px solid #eee;
    margin-right: 5px;
    border-radius: 6px;
    background: #FF8700;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
}
.navbar-nav.btns-controls > li#PLAY-li > a {
    background: rgb(25, 164, 10) none repeat scroll 0% 0%;
}
.navbar-nav.btns-controls > li > a:hover {
background: rgb(35, 168, 232) none repeat scroll 0% 0%;
text-shadow: 0px 0px 2px rgb(0, 0, 0);
box-shadow: 0px 0px 2px rgb(0, 0, 0);
}
.form-control.flat {
    margin: 3px 14px;
    border: 1px solid #bfbfbf;
}
.progress-barr {
    width: 100%;
    max-width: 90%;
    margin: auto;
	position:relative;
	margin-left:auto;margin-right:auto;
	left:0;right:0;
}
.progress-full {
    background: linear-gradient( #a9a6a6, #161717);
	box-shadow:5px 10px 36px #131313 inset;
	margin-top:115px;
    border-radius: 7px;
	text-align:center;
    border: 1px solid #2a3f4f;
	padding:20px 0px;
	height:0px;line-height:5px;
}
.progress-niveau {
    width: 0%;
	top:-26px;
    border-radius: 6px;
	height:42px;
	margin-left:-1px;
    background: url("../img/progress-bar.gif") left top /auto 100%;
    position: relative;
}
.banner:hover, banner:focus
{
	background-color:rgb(60, 112, 128) !important;
}
.progress-niveau > span {
    display: block;
    width: 47px;
    height: 46px;
    position: absolute;
    background: transparent url("../img/info-bull-pogress.png") no-repeat scroll 0% 0%;
    right: -24px;
    top: -41px;
    color: #FFF;
    text-align: center;
    padding-top: 18px;
    font-size: 12px;
    font-weight: normal;
}
.progress-full em {
    color: white;
    text-shadow: none;
}
.sweet-alert .icon{
    background: none
}
.login-form h1{
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 20px;
}
.navbar-inverse .navbar-brand {
    max-width: 300px!important;
    min-height: 61px; 
}
.navbar-brand {
    height: auto!important;
    padding: 7px 21px;
}
.navbar-right .dropdown-menu { 
    top: 30px;
    border-radius: 3px;
}
.navbar-nav { 
    margin-top: 9px;
}
.navbar-form.navbar-right:last-child { 
    margin-top: 5px;
}
.login-form .login-field-icon { 
    right: 25px; 
}




@media screen and (min-width: 1200px) {
	.row.exam-wrapper
	{width:700px !important;
	border:1px solid #f1eded;}
.progress-barr { 


}

}


@media screen and (max-width: 990px) {
   .page-home .level_wrap a,
   .page-home .level_wrap button
   { 
    width: 100%!important;
    margin: 0!important;
    margin-top: 10px!important;
   } 
   .page-home .level_wrap a.btn-primary
   {  
    margin-top: 20px!important;
   }
.page-orthographe #TF_QUESTION{
    display: block;
height: 100px;
font-size: 21px;
margin: 0;
}
.page-orthographe  #TF_CORRECTION {
    margin: 0px;
}
.page-orthographe  .container {
    width: 100%;
    max-width: 750px;
    padding-top: 0px!important;
clear: both;
}
.page-orthographe  .bg-red {
    padding: 0px 2%!important;
    width: 100%!important;
    height: 80px;
    z-index: 999999!important;
}
.page-orthographe  .bg-red  .btn-lg{ 
    bottom: 5px!important;
}
#beReady {
    padding-top: 0px !important;
}
.page-orthographe  .div-radio > div > hr,
.page-orthographe  .div-checkbox > div > hr{
    margin: 1px auto 12px;
}
.page-orthographe  .bg-red br{
    display: none;
}
.page-orthographe  .bg-red h2{
    margin-top: 17px;
}
.page-orthographe .checkbox, .page-orthographe .radio { 
    margin: 0px; 
    line-height: 33px; 
}
.page-orthographe   .phrase-right { 
    margin: 0 5px;
}
.page-orthographe   p.lead {
    margin-bottom: 10px;
}
.page-orthographe  #input-1 {
    margin: 0 5px;
	font-size:19px;
	font-weight:700;
    border-color: rgb(221, 221, 221);
padding: 0px 10px;
height: 35px;
line-height: 30px;
margin-top: 8px;
}
.page-orthographe  .div-checkbox > div{
    width: 50%;
}
#whiteboard br{
    display: none;
}
#whiteboard{
    display: none;
    padding-bottom: 130px;
}
.row.level_wrap{
    min-height: auto!important;
}
#good_answer_flag {
    z-index: 9999999!important;
    height: 100px!important;
    padding-top: 0!important;
}
#good_answer_flag h2{ 
    padding-top: 30px!important;
}
#good_answer_flag button{ 
    padding-right: 10px!important;
}
.score-exam { 
    width: 90px;
}
.content-score { 
    height: 81px; 
    padding-top: 13px;
}
.content-score h3 {
    font-size: 37px;
}
.chrono-exam .time, .score-exam .titlescore { 
    font-size: 19px; 
}
.chrono-exam { 
    width: 90px; 
}
.chrono-exam img{ 
    width: 39px; 
    height: auto;
}
.etape-exam{
max-width: 100%;
}
.page-exam .exam-wrapper #TF_QUESTION { 
    height: auto;
    margin-bottom: 20px;
	line-height:38px;
    padding-top: 30px;
}

.form-control.flat {
    border-color: #BDC3C7;
}
div.hide{
    display: none!important;
}
.etape-exam { 
}
.progress-barr {  
 

}
.row.level_wrap {
    position: relative;
    padding-top: 7px;
}



}/*990px*/


@media screen and (max-width: 820px) {
#good_answer_flag h2{ 
    padding-top: 0!important;
}
#good_answer_flag button{ 
    margin-top: 36px!important;
}
.btns-controls > li { 
    display: inline-block;
}
.btns-controls {  
    float: right;
     display: inline-block;
}
.progress-barr {
    top: 12px;

}
.row.level_wrap .navbar-collapse.in { 
    height: 80px;
    position: relative;
}
.progress-barr {
 

}

}
@media screen and (max-width: 570px) {
 .chrono-exam {
    width: 20%;
}
.score-exam { 
    width: 20%;
    top: 0;
}
.content-score { 
    border-radius: 0;
}
.title-exam h2 { 
    font-size: 16px !important;
    line-height: 62px; 
	color:white !important;
}
 .etape-exam h2 {
    font-size: 16px;
}
.content-score {
    height: 81px; 
}
.score-exam .titlescore {
    font-size: 14px;
}
.content-score h3 {
    font-size: 29px;
}
.row.exam-wrapper .header-exam { 
	margin-top:-2px;

}
.page-exam .navbar { 
    margin-bottom: 5px; 
}
.page-exam .form-control.flat {
font-size: 17px!important;
line-height: 18px!important;
height: 28px!important;
margin: 3px!important;
}
.page-exam .exam-wrapper #TF_QUESTION { 
    padding-top: 0px;
		line-height:38px;
}
.content-exam { 
    min-height: 171px;
    margin-bottom: 22px;
}
.exam-wrapper .title-exam ,
.etape-exam .exam-wrapper { 
    width: 100%; 
    max-width: 100%; 
}
.page-exam .exam-wrapper #TF_QUESTION {
    padding-top: 0px;
    font-size: 17px;
    max-width: 96%;
		line-height:38px;
}
.loader-exam { 
    left: 36%;
    bottom: 41%;
    width: 70px;
}
.exam-wrapper .ckech-modal .checkbox.text-left, .exam-wrapper .ckech-modal .radio.text-left { 
    height: auto;
    cursor: pointer;
    margin-bottom: 5px;
}
.liste-choix .col-xs-12 { 
    margin-bottom: 5px;
}
.exam-wrapper #button{ 
    margin-top: 20px;
}
.etape-exam {
    max-width: 100%;
}
.exam-wrapper div.liste-choix .col-lg-4 {
    width: 100%;
}


}
@media screen and (max-width: 440px) {
	
.txtort
{
	font-size:25px;
}
#imglogoo
{width:40px;}

	h2, .h2
{
	color:#4e5e65 !important;
	font-size:20px !important;
	font-weight:100 !important;
}
    .container {
    padding-right: 0px;
	margin-left:-1px;margin-right:-1px;
    padding-left: 0px; 
}
.col-xs-12 {
    width: 100%;
}
.mobileimg
{
width:40px;	
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}
.level_wrap{
    padding: 5px 9px 14px 9px !important;
margin: 5px 0px!important;
}
.btn-orthographe {
    font-size: 19px;
font-weight: 700;
padding: 0px;
}
h4, .h4 {
    font-size: 23px;
}
.page-home .level_wrap a,
.page-home .level_wrap button,
 { 
    font-size: 12px;
    padding: 8px 0;
}
.page-home .col-xs-12 { 
    padding-left: 0;
}
.page-home  .center-block .lead { 
    padding: 0px 10px;
}
.page-orthographe  .col-xs-12 {
    width: 100%;
    padding-right: 0px;
    padding-left: 0;
}

.page-orthographe  #reinit { 
    left: 5px; 
}
.page-orthographe  #GoExam-1 { 
    left: auto; 
    right: 5px;
}
.page-orthographe .div-checkbox > div {
    width: 100%;
}
.page-orthographe #TheClock {
    display: block;
    width: 100%;
    padding: 0;
    height: auto;
}
.page-orthographe #TF_QUESTION { 
    height: auto; 
}
.page-orthographe  .row.level_wrap {
    position: relative;
    width: 98%;
    margin: 0 auto !important;
    float: none;
}
.page-orthographe .checkbox, .page-orthographe .radio {
    margin: 0px;
    padding-left: 12px;
    margin-bottom: 5px;
}
.page-orthographe  hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
.page-orthographe .div-radio > div > hr, .page-orthographe .div-checkbox > div > hr {
    margin: 1px auto 12px;
    display: none;
}
.page-orthographe  #whiteboard {
    display: none;
    padding-bottom: 100px;
}
.page-orthographe .container { 
    padding-top: 22px !important; 
}
.page-orthographe  > .btn.btn-primary.btn-lg.pull-right{
    border-radius: 0px 0px 0px 0px!important; 
width: 100%!important; 
padding: 10px 0px!important; 
}
.page-orthographe .bg-red {
    padding: 0px 2% !important; 
    z-index: 999!important; 
    height: 107px!important; 
}
.page-orthographe .bg-red h2 {
    margin-top: 10px!important; 
height: 70px!important; 
font-size: 20px!important; 
}
.page-orthographe  #Rule_title {
    font-size: 14px;
}
.page-orthographe p.lead {
    font-size: 12px!important; 
}
#good_answer_flag h2{ 
    font-size: 22px!important; 
    margin-top: 0px!important; 
    margin-bottom: 7px!important; 
}
#good_answer_flag button{  
    position: static!important; 
    margin-right: 77px!important;
    margin-top: 0px!important;

}
.page-orthographe .bg-red .btn-lg {
    bottom: 40px !important;
}
.row.exam-wrapper .header-exam {
    padding-bottom: 11px;
		margin-top:-2px;
}
.content-score {
    height: 81px;
}
.row.exam-wrapper { 
    clear: both;
    width: auto;
    margin: 0 auto;
}
.page-orthographe .row.level_wrap{
    width: 98%;
    margin: 0 auto;
}
.navbar-nav.btns-controls > li > a { 
    padding: 6px 13px; 
    margin-top: 11px;
}
.progress-barr {

    width: 100%;
    max-width: 90%;
	margin-top:20px;
}


}/*990px*/